/* motion.css — Value Inc v2 "Launch-Journey"
   Progressive Enhancement: ohne JS bleibt die komplette Seite sichtbar (v1-Optik).
   Alle versteckten Ausgangszustände gelten nur unter html.motion-on (von motion.js gesetzt). */

/* View-Transitions zwischen Unterseiten (progressive, Chromium) */
@view-transition{navigation:auto}

/* ---------- Reveal-System (eine Mechanik: data-motion + is-revealed) ---------- */
.motion-on [data-motion]{opacity:0; transform:translateY(24px);
  transition:opacity .65s cubic-bezier(.22,.61,.36,1), transform .65s cubic-bezier(.22,.61,.36,1);
  transition-delay:var(--d,0ms)}
.motion-on [data-motion].is-revealed{opacity:1; transform:none}
.motion-on h2[data-motion]{transform:translateX(-20px)}
.motion-on h2[data-motion].is-revealed{transform:none}

/* ---------- Hero: kinetische Headline + Wort-Rotator (DOM-Aufbau via motion.js) ---------- */
.h1-ch{display:inline-block; opacity:0; transform:translateY(.3em) rotate(1deg);
  transition:opacity .3s ease, transform .32s cubic-bezier(.3,1.5,.4,1)}
.h1-ch.on{opacity:1; transform:none}
.h1-rot{display:inline-grid; overflow:hidden; vertical-align:bottom; text-align:left}
.h1-rot span{grid-area:1/1; transform:translateY(105%);
  transition:transform .55s cubic-bezier(.3,1.25,.35,1)}
.h1-rot span.on{transform:translateY(0)}
.h1-rot span.out{transform:translateY(-105%)}

/* ---------- Hero-Illustration: Idle + Abflug-Parallaxe ---------- */
/* Rakete: Wobble (CSS, läuft auch ohne JS), Abflug über --p (JS, 0..1) */
.hero-art svg{--p:0}
.hero-art [data-par]{transform-box:fill-box; transform-origin:center;
  transform:translateY(calc(var(--p) * var(--py, 0px)))}
.hero-art [data-par="stage"]{--py:7px}
.hero-art [data-par="cards"]{--py:24px}
.hero-art [data-par="floats"]{--py:42px}
.hero-art [data-par="laptop"]{--py:14px}
.hero-art [data-par="whale"]{--py:28px}
.hero-art #rocketFly{transform-box:fill-box; transform-origin:center;
  transform:translateY(calc(var(--p) * -160px)) scale(calc(1 + var(--p) * .08))}
.hero-art #flame{opacity:calc(var(--p) * 1.5)}
.hero-art #rocketWobble{transform-box:fill-box; transform-origin:center;
  animation:rock-idle 5.5s ease-in-out infinite}
@keyframes rock-idle{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}
.hero-art #whale-eye{transform-box:fill-box; transform-origin:center;
  animation:whale-blink 6.5s step-end infinite}
@keyframes whale-blink{0%,86%,100%{transform:scaleY(1)}90%,94%{transform:scaleY(.12)}}

/* ---------- Tech-Band (Marquee-Band unter den Projekt-Rows) ---------- */
.marquee{display:flex; width:max-content; animation:marq 30s linear infinite;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image:linear-gradient(to right, transparent, #000 5%, #000 95%, transparent)}
.marquee em{white-space:nowrap; padding-right:28px}
/* Wort-für-Wort-Reveal der Hero-Subline (motion.js splittet .lead) */
.motion-on .lead .w{display:inline-block; opacity:0; transform:translateY(.5em); transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1)}
.motion-on .lead .w.on{opacity:1; transform:none}

/* Veld-Karte: Reveal + gezeichnete Verlaufslinie */
.motion-on .veld{opacity:0; transform:rotate(-1.5deg) translateY(16px)}
.motion-on .veld.is-revealed{opacity:1; transform:rotate(-1.5deg) translateY(0); transition:opacity .6s ease var(--d,.1s), transform .6s cubic-bezier(.2,.7,.3,1) var(--d,.1s)}
.motion-on .veld-line path{stroke-dasharray:1; stroke-dashoffset:1}
.motion-on .veld.is-revealed .veld-line path{stroke-dashoffset:0; transition:stroke-dashoffset 1.7s ease .5s}

/* Krabbel-Notiz: Pfeil zeichnet sich */
.motion-on .krabbel path{stroke-dasharray:1; stroke-dashoffset:1}
.motion-on .krabbel.is-revealed path{stroke-dashoffset:0; transition:stroke-dashoffset .9s ease .35s}
.motion-on .krabbel span{opacity:0; transform:translateY(8px)}
.motion-on .krabbel.is-revealed span{opacity:1; transform:none; transition:opacity .5s ease .6s, transform .5s ease .6s}

.tech-band:hover .marquee{animation-play-state:paused}
.marquee em{font-style:normal; color:var(--muted); font-size:14px}
.marquee b{color:var(--teal); font-weight:700; margin:0 14px}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Terminal-Card (Code) ---------- */
.terminal{background:#0a1420; border:1px solid var(--line); border-radius:12px;
  padding:13px 16px; margin-top:14px; color:#cfe3ea;
  font:13.5px/1.75 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}
.t-line{min-height:1.75em; margin:0}
.t-line .t-prompt{color:var(--teal)}
.t-caret{display:inline-block; width:.6em; height:1.05em; background:var(--teal);
  vertical-align:-.16em; margin-left:2px; animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.t-ok{color:#59d98c}
.t-dim{color:#6c8497}

/* ---------- Kontakt: große Type + Copy-Button ---------- */
.contact-big{font-size:clamp(21px, 4.6vw, 40px); font-family:"Space Grotesk", Inter, system-ui, sans-serif}
.copy-btn{display:inline-block; margin-left:12px; padding:9px 18px; border-radius:999px;
  font-size:13.5px; font-weight:600; line-height:1.2; border:1px solid rgba(30,42,75,.28); color:#46547A; background:#FFFFFF; cursor:pointer; vertical-align:middle}
.copy-btn:hover{color:var(--text); border-color:var(--teal)}
.copy-btn.done{color:#59d98c; border-color:#59d98c}

/* ---------- Wal-Strip (Live-Canvas über dem Spiel-Bild, von JS erzeugt) ---------- */
.whale-strip{position:relative; height:96px; overflow:hidden; background:
  linear-gradient(180deg, rgba(21,194,198,.12), rgba(10,20,32,.0) 70%)}
.whale-strip canvas{position:absolute; inset:0; width:100%; height:100%; display:block}

/* ---------- Grain-Overlay (tactile texture) ---------- */
.grain{position:fixed; inset:0; z-index:95; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:280px 280px}

/* ---------- Custom Cursor (Desktop only, motion.js erzeugt die Elemente) ---------- */
html.has-cursor{cursor:none}
html.has-cursor a, html.has-cursor .btn, html.has-cursor button{cursor:none}
.cursor-dot, .cursor-ring{position:fixed; top:0; left:0; z-index:120; pointer-events:none;
  border-radius:50%; transform:translate(-50%,-50%); will-change:transform}
.cursor-dot{width:7px; height:7px; background:var(--teal)}
.cursor-ring{width:34px; height:34px; border:1.5px solid rgba(21,194,198,.55);
  transition:width .18s ease, height .18s ease, border-color .18s ease}
.cursor-ring.hot{width:54px; height:54px; border-color:var(--teal)}

/* ---------- Scroller-Rail (Rakete führt durch die Stationen, JS erzeugt das Element) ---------- */
.rail{position:fixed; right:24px; top:50%; transform:translateY(-50%); height:46vh; width:16px; z-index:60}
.rail-track{position:absolute; right:7px; top:0; width:2px; height:100%; background:var(--line)}
.rail-fill{position:absolute; right:7px; top:0; width:2px; height:0%; background:var(--teal);
  box-shadow:0 0 8px rgba(21,194,198,.7)}
.rail-ship{position:absolute; right:0; width:16px; height:16px; transform:translate(50%,-50%)}
.rail-ship svg{display:block}
.rail-dot{position:absolute; right:5px; width:6px; height:6px; border-radius:50%;
  background:#24405c; transform:translateY(50%)}
.rail-dot.lit{background:var(--teal); box-shadow:0 0 8px rgba(21,194,198,.8)}
@media(max-width:900px){.rail{display:none}}

/* ---------- Reduced Motion: statische v1-Optik ---------- */
@media (prefers-reduced-motion: reduce){
  .h1-ch{opacity:1 !important; transform:none !important}
  .h1-rot span{transform:none !important}
  [data-motion]{opacity:1 !important; transform:none !important}
  .hero-art svg{--p:0 !important}
  #rocketWobble, #whale-eye, .marquee{animation:none !important}
  html.has-cursor{cursor:auto}
  .cursor-dot, .cursor-ring, .rail, .grain{display:none !important}
}

/* ---------- Responsive Ergänzungen ---------- */
@media(max-width:900px){
  .marquee em{font-size:12.5px}
}