/* ==========================================================================
   SEDNA — Intro-Sequenz
   Ein ruhiger, einzelner Moment statt vieler Effekte: Hintergrund setzt sich,
   der Kristall materialisiert sich, der Name folgt, dann die drei Modelle —
   danach Cut zur Frage "schon dabei oder neu?".
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --sd-bg:        #060911;
  --sd-bg-deep:   #030509;
  --sd-panel:     #0e1420;
  --sd-line:      #1c2536;
  --sd-line-soft: #151d2c;
  --sd-text:      #eef1f8;
  --sd-text-dim:  #93a0b8;
  --sd-text-faint:#5c6880;
  --sd-cyan:      #62d6e8;
  --sd-blue:      #8ea8f2;
  --sd-violet:    #b28df0;

  /* one shared easing + one shared duration family = one motion language */
  --sd-ease:      cubic-bezier(.16,.8,.24,1);
  --sd-t-fast:    .5s;
  --sd-t-med:     .8s;
}

html, body.sedna-intro{
  height:100%;
  margin:0;
  background:var(--sd-bg-deep);
  color:var(--sd-text);
  font-family:'Inter', system-ui, sans-serif;
  overflow:hidden;
}
body.sedna-intro{
  position:fixed;
  inset:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}
.sedna-intro *{ box-sizing:border-box; }
.sedna-intro h1, .sedna-intro h2{
  font-family:'Space Grotesk','Inter',sans-serif;
  margin:0;
  letter-spacing:-0.01em;
}
.sedna-intro a{ color:inherit; text-decoration:none; }
.sedna-intro ::selection{ background:var(--sd-cyan); color:#04161a; }
.sedna-intro :focus-visible{ outline:2px solid var(--sd-cyan); outline-offset:3px; }

/* ---------------------------- Background layers --------------------------- */
.sd-intro-stars{
  position:fixed; inset:0; width:100%; height:100%;
  z-index:0;
  opacity:0;
  animation:sdFadeIn 1.8s var(--sd-ease) both;
}
.sd-intro-vignette{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(238,241,248,0.05) 0%, rgba(6,9,17,0) 55%),
    radial-gradient(ellipse at 50% 100%, rgba(3,5,9,0.92) 0%, rgba(3,5,9,0) 60%);
}

/* ---------------------------- Fixed chrome -------------------------------- */
.sd-intro-brandmark{
  position:fixed; top:22px; left:24px; z-index:200;
  display:flex; align-items:center; gap:9px;
  opacity:0;
  animation:sdFadeIn var(--sd-t-fast) var(--sd-ease) .5s both;
}
.sd-intro-brandmark img{ width:22px; height:22px; }
.sd-intro-brandmark span{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px; }

.sd-skip{
  position:fixed; top:20px; right:20px; z-index:200;
  display:flex; align-items:center; gap:7px;
  padding:8px 14px 8px 16px; border-radius:999px;
  background:color-mix(in srgb, var(--sd-panel) 70%, transparent);
  border:1px solid var(--sd-line);
  color:var(--sd-text-dim); font-size:13px; font-family:inherit; cursor:pointer;
  backdrop-filter:blur(10px);
  opacity:0;
  animation:sdFadeIn var(--sd-t-fast) var(--sd-ease) .5s both;
  transition:color .15s ease, border-color .15s ease, background .15s ease, opacity .4s var(--sd-ease);
}
.sd-skip:hover{ color:var(--sd-text); border-color:var(--sd-cyan); }
.sd-skip svg{ opacity:.8; }

/* Blendet den Skip-Button sanft aus, sobald die Auth-Stage erreicht ist -
   vorher war er nur über sd-instant (also erst beim NÄCHSTEN Seitenaufruf)
   verschwunden, siehe landing.js */
.sd-skip.sd-skip-out{
  opacity:0 !important;
  pointer-events:none;
}

/* ---------------------------- Stage scaffolding ---------------------------- */
.sd-intro-viewport{
  position:relative; z-index:10;
  min-height:100dvh; min-height:100vh;
}
.sd-stage{
  min-height:100dvh; min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:96px 24px 64px;
}
.sd-stage-main{
  flex-direction:column; text-align:center;
  gap:clamp(6px,1.6vh,16px);
  opacity:0;
  animation:
    sdFadeIn var(--sd-t-med) var(--sd-ease) 2.35s forwards,
    sdStageMainOut .7s var(--sd-ease) 6.2s forwards;
}
.sd-stage-cta{
  position:absolute; inset:0;
  flex-direction:column;
  opacity:0; pointer-events:none;
  animation:sdStageCtaIn .85s var(--sd-ease) 6.55s both;
}

/* ---------------------------- Beat 1 + 2: Intro-Prolog ---------------------
   Einzelner Lichtpunkt im Herzschlag-Takt, dann ein rotierender Lichtfaden,
   an dem die Anbieternamen ins Zentrum gezogen werden und sich auflösen —
   bevor der Kristall selbst erscheint. */
.sd-beat{
  position:fixed; inset:0; z-index:15;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
  opacity:0;
}
.sd-beat-pulse{
  animation:sdBeatShow 1.15s ease-out both;
}
.sd-pulse-core{
  position:absolute;
  width:9px; height:9px; border-radius:50%;
  background:#eef1f8;
  box-shadow:0 0 20px 5px rgba(238,241,248,0.55);
  animation:sdHeartbeat 1.1s ease-in-out infinite;
}
.sd-pulse-ring{
  position:absolute;
  width:9px; height:9px; border-radius:50%;
  border:1px solid rgba(238,241,248,0.45);
  animation:sdHeartRing 1.1s ease-out infinite;
}
.sd-pulse-ring-2{ animation-delay:.25s; }

.sd-beat-trace{
  animation:sdBeatShow 1.85s ease-out 1.05s both;
}
.sd-trace-svg{
  position:absolute;
  width:clamp(150px,38vw,210px); height:clamp(150px,38vw,210px);
  overflow:visible;
}
.sd-trace-track{
  fill:none; stroke:rgba(238,241,248,0.10); stroke-width:1;
}
.sd-trace-comet{
  fill:none; stroke:rgba(238,241,248,0.9); stroke-width:1.6;
  stroke-linecap:round;
  stroke-dasharray:46 394;
  filter:drop-shadow(0 0 6px rgba(238,241,248,0.6));
  transform-origin:100px 100px;
  animation:sdSpin 1.7s linear infinite;
}
.sd-trace-names{ position:absolute; inset:0; }
.sd-trace-names span{
  position:absolute; top:50%; left:50%;
  font-family:'Space Grotesk',sans-serif; font-weight:600;
  font-size:13px; letter-spacing:.01em;
  color:rgba(238,241,248,0.85);
  opacity:0;
  animation:sdConverge 1.3s var(--sd-ease) forwards;
}
.sd-trace-names span:nth-child(1){ --sx:-95px; --sy:-58px; animation-delay:.2s; }
.sd-trace-names span:nth-child(2){ --sx:100px;  --sy:-52px; animation-delay:.36s; }
.sd-trace-names span:nth-child(3){ --sx:-88px; --sy:62px;  animation-delay:.52s; }
.sd-trace-names span:nth-child(4){ --sx:92px;   --sy:70px;  animation-delay:.68s; }

/* ---------------------------- Crystal (the one signature moment) ----------- */
.sd-crystal-wrap{ position:relative; }
.sd-intro-crystal{
  width:clamp(92px,14vw,140px); height:clamp(92px,14vw,140px);
  filter:drop-shadow(0 0 22px rgba(238,241,248,0.35));
  opacity:0;
  transform:scale(.85);
  animation:sdCrystalIn 1s var(--sd-ease) 2.4s both;
}

/* ---------------------------- Wordmark + tagline --------------------------- */
.sd-wordmark{
  display:block;
  margin-top:2px;
  font-size:clamp(2.4rem,7.5vw,4.4rem);
  font-weight:700;
  opacity:0;
  animation:sdWordmarkBreak .85s var(--sd-ease) 3.2s forwards;
}
.sd-tagline{
  font-size:clamp(14px,2vw,17px);
  color:var(--sd-text-dim);
  opacity:0;
  transform:translateY(10px);
  animation:sdRiseIn var(--sd-t-fast) var(--sd-ease) 3.7s forwards;
}

/* ---------------------------- Sedna P1 / Q1 Modelle ------------------------- */
.sd-model-row{
  display:flex; flex-wrap:wrap; align-items:stretch; justify-content:center;
  gap:10px;
  margin-top:6px;
  opacity:0;
  transform:translateY(8px);
  animation:sdRiseIn var(--sd-t-fast) var(--sd-ease) 3.95s forwards;
}
.sd-model-chip{
  display:flex; flex-direction:column; align-items:flex-start; gap:1px;
  padding:8px 14px;
  border-radius:11px;
  border:1px solid var(--sd-line);
  background:color-mix(in srgb, var(--sd-panel) 70%, transparent);
}
.sd-model-chip strong{
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:12.5px;
  letter-spacing:.02em;
}
.sd-model-chip span{ font-size:11px; color:var(--sd-text-faint); }

/* ---------------------------- Provider row ---------------------------------
   One calm row instead of an orbiting constellation: same fade, no stagger,
   no bounce, no separate line-drawing pass. */
.sd-orbit-label{
  margin-top:clamp(10px,2.4vh,20px);
  font-size:12.5px; color:var(--sd-text-faint);
  opacity:0;
  animation:sdFadeIn var(--sd-t-fast) var(--sd-ease) 4.15s forwards;
}
.sd-orbit{
  display:flex; align-items:center; justify-content:center;
  gap:0;
  margin-top:10px;
  opacity:0;
  transform:translateY(8px);
  animation:sdRiseIn var(--sd-t-fast) var(--sd-ease) 4.35s forwards;
}
.sd-orbit-badge{
  display:flex; align-items:center; gap:7px;
  padding:8px 16px;
}
.sd-orbit-divider{
  width:1px; height:16px;
  background:var(--sd-line);
}
.sd-badge-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px;
  object-fit:contain;
}
.sd-badge-name{ font-size:12.5px; color:var(--sd-text-dim); }

/* ---------------------------- CTA stage: inline login / signup ------------- */
.sd-stage-cta{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  justify-content:flex-start;
  padding-top:88px;
  padding-bottom:48px;
}
.sd-auth-inner{
  width:100%; max-width:400px;
  display:flex; flex-direction:column; align-items:stretch;
  margin:auto;
}
.sd-auth-head{ text-align:center; margin-bottom:22px; }
.sd-cta-eyebrow{ font-size:12.5px; color:var(--sd-text-faint); margin:0 0 6px; }
.sd-stage-cta h2{ font-size:clamp(1.5rem,4.2vw,2rem); }

/* ---- Tabs ---- */
.sd-auth-tabs{
  position:relative;
  display:flex; gap:4px;
  padding:4px;
  border-radius:12px;
  background:color-mix(in srgb, var(--sd-panel) 75%, transparent);
  border:1px solid var(--sd-line);
  margin-bottom:20px;
}
.sd-auth-tab-indicator{
  position:absolute; top:4px; bottom:4px; left:4px;
  width:calc(50% - 6px);
  border-radius:9px;
  background:var(--sd-line);
  transition:transform .35s var(--sd-ease);
  will-change:transform;
  z-index:0;
}
.sd-auth-tab{
  position:relative; z-index:1;
  flex:1;
  padding:9px 12px;
  border:none; border-radius:9px;
  background:transparent; color:var(--sd-text-dim);
  font-family:inherit; font-size:13.5px; font-weight:500;
  cursor:pointer;
  transition:color .15s ease;
}
.sd-auth-tab:hover{ color:var(--sd-text); }
.sd-auth-tab.is-active{ color:var(--sd-text); }

/* ---- Panels ----
   .sd-auth-panels bekommt jetzt eine eigene, per JS gesetzte + animierte
   height (statt vorher: CSS-Grid mit beiden Panels auf grid-area 1/1 —
   das zwingt den Grid-Container auf die Höhe des HÖCHSTEN Kindes, also
   war die Login-Box immer so hoch wie die Signup-Box). Beide Panels liegen
   weiterhin übereinander (position:absolute), damit der Crossfade/Slide
   zwischen ihnen funktioniert, aber die Container-Höhe folgt jetzt nur
   noch dem gerade aktiven Panel. */
.sd-auth-panels{
  position:relative;
  overflow:hidden;
  transition:height .38s var(--sd-ease);
}
.sd-auth-panel{
  position:absolute;
  top:0; left:0;
  width:100%;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateX(-10px);
  transition:opacity .32s var(--sd-ease), transform .32s var(--sd-ease), visibility 0s linear .32s;
}
.sd-auth-panel#sdPanelSignup{ transform:translateX(10px); }
.sd-auth-panel.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateX(0);
  transition:opacity .32s var(--sd-ease), transform .32s var(--sd-ease);
}

.sd-auth-panel-inner,
.sd-auth-panel{
  background:color-mix(in srgb, var(--sd-panel) 80%, transparent);
  border:1px solid var(--sd-line);
  border-radius:16px;
  padding:24px 22px 26px;
  backdrop-filter:blur(10px);
}

/* ---- Google button ---- */
.sd-google-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%;
  padding:11px 16px;
  border-radius:10px;
  border:1px solid var(--sd-line);
  background:rgba(238,241,248,0.04);
  color:var(--sd-text); font-size:14px; font-weight:500;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.sd-google-btn:hover{ border-color:var(--sd-text-faint); background:rgba(238,241,248,0.07); }
.sd-google-btn svg{ width:18px; height:18px; flex:none; }

.sd-auth-divider{
  display:flex; align-items:center; gap:12px;
  color:var(--sd-text-faint); font-size:12px;
  margin:18px 0;
}
.sd-auth-divider::before, .sd-auth-divider::after{
  content:''; flex:1; height:1px; background:var(--sd-line);
}

/* ---- Flash / error ---- */
.sd-flash{
  padding:10px 13px; border-radius:9px;
  font-size:13px; margin-bottom:16px; text-align:left;
}
.sd-flash-error{
  background:rgba(239,123,123,0.12); color:#ef9b9b;
}

/* ---- Fields ---- */
.sd-field{ margin-bottom:14px; text-align:left; }
.sd-field label{
  display:block; font-size:12.5px; color:var(--sd-text-dim); margin-bottom:5px;
}
.sd-field input{
  width:100%; padding:10px 13px;
  border-radius:9px; border:1px solid var(--sd-line);
  background:rgba(238,241,248,0.04); color:var(--sd-text);
  font-size:14px; font-family:inherit;
  transition:border-color .15s ease, background .15s ease;
}
.sd-field input:focus{ border-color:var(--sd-cyan); outline:none; background:rgba(238,241,248,0.06); }
.sd-field input::placeholder{ color:var(--sd-text-faint); }
.sd-field-error{ font-size:12px; color:#ef9b9b; margin-top:6px; text-align:left; }

/* ---- Password strength ---- */
.sd-pw-strength{ margin-top:8px; }
.sd-pw-strength-bar{
  height:4px; border-radius:3px; background:var(--sd-line-soft); overflow:hidden;
}
.sd-pw-strength-bar span{
  display:block; height:100%; width:0%; border-radius:3px; background:#ef7b7b;
  transition:width .2s ease, background-color .2s ease;
}
.sd-pw-strength-label{ font-size:11.5px; color:var(--sd-text-faint); margin-top:5px; }
.sd-pw-checklist{
  list-style:none; padding:0; margin:9px 0 0;
  font-size:12px; color:var(--sd-text-faint);
  display:grid; grid-template-columns:1fr 1fr; gap:5px 12px;
  text-align:left;
}
.sd-pw-checklist li::before{ content:'○ '; }
.sd-pw-checklist li.ok{ color:#8fd66f; }
.sd-pw-checklist li.ok::before{ content:'● '; }

/* ---- Consent checkbox ---- */
.sd-consent-field{
  display:flex; align-items:flex-start; gap:9px;
  margin:16px 0 18px; text-align:left;
}
.sd-consent-field input{
  margin-top:3px; flex:none; width:15px; height:15px; accent-color:var(--sd-cyan);
  cursor:pointer;
}
.sd-consent-field label{ font-size:12px; color:var(--sd-text-dim); line-height:1.5; }
.sd-consent-field a{ color:var(--sd-cyan); text-decoration:underline; text-underline-offset:2px; }

/* ---- Submit button ---- */
.sd-btn-primary{
  display:flex; align-items:center; justify-content:center;
  width:100%; padding:11px 16px; margin-top:4px;
  border:none; border-radius:10px;
  background:linear-gradient(135deg, var(--sd-cyan), var(--sd-blue));
  color:#04161a; font-family:inherit; font-size:14.5px; font-weight:600;
  cursor:pointer;
  transition:filter .15s ease, transform .1s ease;
}
.sd-btn-primary:hover{ filter:brightness(1.06); }
.sd-btn-primary:active{ transform:scale(0.99); }
.sd-btn-primary:disabled{ opacity:.5; cursor:not-allowed; filter:none; }

.sd-auth-foot{
  text-align:center; margin-top:18px; font-size:13px; color:var(--sd-text-dim);
}
.sd-auth-foot a{ color:var(--sd-cyan); }
.sd-auth-foot a:hover{ text-decoration:underline; }

/* ---------------------------- Legal footer --------------------------------- */
.sd-intro-legal{
  position:fixed; bottom:14px; left:0; width:100%; z-index:20;
  display:flex; justify-content:center; gap:22px;
  opacity:0;
  animation:sdFadeIn var(--sd-t-fast) var(--sd-ease) 6.8s forwards;
}
.sd-intro-legal a{ font-size:12px; color:var(--sd-text-faint); }
.sd-intro-legal a:hover{ color:var(--sd-text-dim); }

/* ---------------------------- Keyframes ------------------------------------
   Every entrance uses the same two shapes: a plain fade, or a fade+rise.
   No rotation, no scale-bounce, no line-draw, no per-letter stagger. */
@keyframes sdFadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes sdRiseIn{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);} }
@keyframes sdCrystalIn{
  from{ opacity:0; transform:scale(.85); }
  to{ opacity:1; transform:scale(1); }
}
@keyframes sdWordmarkBreak{
  0%{   opacity:0; transform:scale(1.32) translateY(6px); text-shadow:0 0 42px rgba(238,241,248,.65); }
  60%{  opacity:1; transform:scale(.98) translateY(0);     text-shadow:0 0 24px rgba(238,241,248,.35); }
  100%{ opacity:1; transform:scale(1) translateY(0);       text-shadow:0 0 0 rgba(238,241,248,0); }
}
@keyframes sdStageMainOut{
  to{ opacity:0; transform:translateY(-10px); }
}
@keyframes sdStageCtaIn{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); pointer-events:auto; }
}

/* ---- Beat-Prolog Keyframes ---- */
@keyframes sdBeatShow{
  0%{ opacity:0; }
  10%{ opacity:1; }
  80%{ opacity:1; }
  100%{ opacity:0; }
}
@keyframes sdHeartbeat{
  0%,100%{ transform:scale(1); }
  20%{ transform:scale(1.7); }
  35%{ transform:scale(1); }
  50%{ transform:scale(1.4); }
  65%{ transform:scale(1); }
}
@keyframes sdHeartRing{
  0%{ transform:scale(1); opacity:.6; }
  100%{ transform:scale(4.2); opacity:0; }
}
@keyframes sdSpin{
  to{ transform:rotate(360deg); }
}
@keyframes sdConverge{
  0%{   opacity:0; transform:translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(1); filter:blur(0px); }
  22%{  opacity:1; }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(.3); filter:blur(2px); }
}

/* ---------------------------- Instant mode (skip / reduced motion / repeat) - */
html.sd-instant .sd-stage-main{
  display:none !important;
}
html.sd-instant .sd-stage-cta{
  position:relative;
  opacity:1 !important;
  transform:none !important;
  pointer-events:auto !important;
  animation:none !important;
}
html.sd-instant .sd-intro-legal,
html.sd-instant .sd-intro-brandmark,
html.sd-instant .sd-skip{
  animation:none !important;
  opacity:1 !important;
}
html.sd-instant .sd-skip{ display:none !important; }
html.sd-instant .sd-beat{ display:none !important; }

@media (prefers-reduced-motion: reduce){
  .sd-intro-stars{ display:none; }
  .sd-beat{ display:none; }
}

/* ---------------------------- Small screens --------------------------------- */
@media (max-width:520px){
  .sd-badge-name{ display:none; }
  .sd-badge-mark{ width:24px; height:24px; }
  .sd-stage-cta{ padding-top:76px; padding-left:16px; padding-right:16px; }
  .sd-auth-panel{ padding:20px 16px 22px; }
  .sd-pw-checklist{ grid-template-columns:1fr; }
  .sd-model-chip{ padding:7px 11px; }
  .sd-trace-names span{ font-size:12px; }
}