/* Sunstroke Startseite – Scroll-Erlebnis (wird NACH style.css geladen) */

:root{--sx-orange:#f26a3d;--sx-orange2:#f26a3d;--sx-line:rgba(244,239,230,.09);--sx-ease:cubic-bezier(.2,.7,.2,1)}
html{scroll-behavior:smooth}
section[id]{scroll-margin-top:72px}

/* ===== Navigation: nach dem Scrollen schlanker ===== */
.nav{transition:height .3s var(--sx-ease),background .3s}
.nav.scrolled{height:68px;background:rgba(16,28,36,.88);box-shadow:0 1px 0 var(--sx-line)}
.nav nav{gap:clamp(14px,1.8vw,30px)}
.nav nav a{white-space:nowrap}

/* ===== Einblenden (gestaffelt) ===== */
.js-scroll [data-reveal]{opacity:0;transform:translateY(12px);
  transition:opacity .4s var(--sx-ease) calc(var(--d,0ms) * .35),transform .4s var(--sx-ease) calc(var(--d,0ms) * .35)}
.js-scroll [data-reveal].in{opacity:1;transform:none;filter:none}

/* ===== Abschnitte "öffnen" sich beim Hineinscrollen ===== */
.js-scroll:not(.no-motion) main > section.section:not(#features),
.js-scroll:not(.no-motion) main > section.rules{
  --p:1;
  clip-path:inset(calc((1 - var(--p)) * 4%) calc((1 - var(--p)) * 3%) round calc((1 - var(--p)) * 28px));
  transform:translateY(calc((1 - var(--p)) * 20px)) scale(calc(.98 + .02 * var(--p)));
  opacity:calc(.6 + .4 * var(--p));
}
.js-scroll main > section.open{clip-path:none!important;transform:none!important;opacity:1!important}

/* ===== Hero: sanfter Einstieg und Parallax ===== */
@keyframes sxRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.js-scroll .hero{--hp:0}
.js-scroll .hero-content>*{animation:sxRise .6s var(--sx-ease) both}
.js-scroll .hero-content>*:nth-child(2){animation-delay:.05s}
.js-scroll .hero-content>*:nth-child(3){animation-delay:.1s}.js-scroll .hero-content>*:nth-child(n+4){animation-delay:.15s}
.js-scroll:not(.no-motion) .hero-content{translate:0 calc(var(--hp) * 70px);opacity:calc(1 - var(--hp) * .85)}
.js-scroll:not(.no-motion) .hero-art{translate:0 calc(var(--hp) * -40px);scale:calc(1 - var(--hp) * .07);opacity:calc(1 - var(--hp) * .9)}
.js-scroll:not(.no-motion) .hero .orb-a{translate:0 calc(var(--hp) * 160px)}
.js-scroll:not(.no-motion) .hero .orb-b{translate:0 calc(var(--hp) * -90px)}
.hero .scroll{animation:none}

/* ===== Story: Features als gepinnte Schritte (Desktop) ===== */
/* sticky darf sich nur im Inhaltsbereich des Elternelements bewegen: die Scroll-Strecke ist deshalb echter Inhalt (kein Padding) */
.story{padding-bottom:60px!important}
.story::after{content:"";display:block;height:calc(var(--steps,4) * 62vh)}
.story .feature-grid{display:block!important;position:sticky;top:14vh;height:72vh}
.story .feature{position:absolute!important;inset:0;min-height:0!important;grid-row:auto!important;
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:"num icon" "num title" "num text" "num more";
  grid-template-rows:auto auto auto 1fr;align-content:center;column-gap:4vw;padding:4.5vw 5vw!important;border-radius:28px;
  background:radial-gradient(circle at 18% 30%,rgba(242,106,61,.16),transparent 46%),linear-gradient(145deg,#101c24,#101c24)!important;
  border:1px solid var(--sx-line);opacity:0;transform:translateY(46px) scale(.97);filter:blur(10px);pointer-events:none;
  transition:opacity .6s var(--sx-ease),transform .7s var(--sx-ease),filter .6s var(--sx-ease)}
.story .feature .number{grid-area:num;align-self:center;font:700 clamp(140px,17vw,300px)/.8 Inter,sans-serif;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1.5px rgba(242,106,61,.5);position:static!important}
.story .feature .icon{grid-area:icon;align-self:end;font-size:30px;margin-bottom:18px}
.story .feature h3{grid-area:title;margin:0 0 14px;font:700 clamp(34px,3.6vw,58px)/1.05 Inter,sans-serif;letter-spacing:-.02em}
.story .feature p{grid-area:text;margin:0;max-width:34ch;font-size:clamp(17px,1.35vw,21px);line-height:1.6;color:#cfd6d4}
.story .feature a{grid-area:more;align-self:start;margin-top:26px}
.story[data-step="0"] .feature:nth-child(1),.story[data-step="1"] .feature:nth-child(2),
.story[data-step="2"] .feature:nth-child(3),.story[data-step="3"] .feature:nth-child(4){opacity:1;transform:none;filter:none;pointer-events:auto}
.story-progress{position:absolute;left:50%;bottom:-34px;translate:-50% 0;display:flex;gap:10px}
.story-progress i{width:34px;height:3px;border-radius:2px;background:rgba(244,239,230,.14);transition:background .4s,width .4s}
.story[data-step="0"] .story-progress i:nth-child(1),.story[data-step="1"] .story-progress i:nth-child(2),
.story[data-step="2"] .story-progress i:nth-child(3),.story[data-step="3"] .story-progress i:nth-child(4){background:var(--sx-orange);width:58px}

/* ===== Trailer ===== */
.trailer-section{padding-top:120px;padding-bottom:120px}
.trailer-stage{perspective:1600px}
.trailer-frame{all:unset;box-sizing:border-box;display:block;position:relative;width:100%;aspect-ratio:16/9;max-height:78vh;cursor:pointer;overflow:hidden;
  border:1px solid var(--sx-line);border-radius:28px;background:#101c24;color:#fff;
  box-shadow:0 50px 120px -30px rgba(0,0,0,.8),0 0 0 1px rgba(244,239,230,.02) inset;
  transform:rotateX(calc((1 - var(--p,1)) * 9deg)) scale(calc(.94 + .06 * var(--p,1)));transform-origin:50% 100%;transition:box-shadow .4s}
.trailer-frame:focus-visible{outline:2px solid var(--sx-orange);outline-offset:4px}
.trailer-poster{position:absolute;inset:0;background-size:cover;background-position:center;
  background-image:radial-gradient(60% 70% at 25% 30%,rgba(242,106,61,.30),transparent 60%),radial-gradient(55% 60% at 80% 80%,rgba(242,106,61,.28),transparent 62%),
    linear-gradient(135deg,#101c24,#101c24)}
.trailer-poster:after{content:"";position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 35%,rgba(244,239,230,.07) 50%,transparent 65%);background-size:250% 100%;animation:sxSweep 5.5s ease-in-out infinite}
@keyframes sxSweep{0%{background-position:150% 0}60%,100%{background-position:-60% 0}}
.trailer-logo{position:absolute;left:50%;top:30%;translate:-50% -50%;width:min(38%,420px);filter:drop-shadow(0 10px 40px rgba(242,106,61,.35))}
.trailer-play{position:absolute;left:50%;top:62%;translate:-50% -50%;display:grid;place-items:center;width:92px;height:92px;border-radius:50%;
  background:linear-gradient(135deg,var(--sx-orange),var(--sx-orange2));color:#2d2610;box-shadow:0 0 0 12px rgba(242,106,61,.14),0 20px 60px rgba(242,106,61,.45);
  transition:transform .35s var(--sx-ease),box-shadow .35s}
.trailer-frame:hover .trailer-play{transform:scale(1.08);box-shadow:0 0 0 18px rgba(242,106,61,.16),0 26px 70px rgba(242,106,61,.55)}
.trailer-cap{position:absolute;left:28px;bottom:24px;font:600 12px Inter,sans-serif;letter-spacing:.22em;color:rgba(244,239,230,.7)}
.trailer-frame.soon .trailer-play{background:rgba(244,239,230,.08);color:rgba(244,239,230,.55);box-shadow:0 0 0 12px rgba(244,239,230,.04)}

/* Trailer-Dialog größer */
.modal.wide .modal-box{width:min(1100px,92vw);max-width:none;padding:0;background:#000;overflow:hidden}
.modal.wide .modal-close{z-index:3;background:rgba(0,0,0,.55);border-radius:50%}
.trailer-embed{aspect-ratio:16/9;width:100%}
.trailer-embed iframe,.trailer-embed video{width:100%;height:100%;border:0;display:block;background:#000}

/* ===== Seitenleiste mit Abschnitten ===== */
.rail{position:fixed;right:22px;top:50%;translate:0 -50%;z-index:9;display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.rail a{display:flex;align-items:center;gap:12px;padding:5px 0;text-decoration:none;color:#a9b8bc}
.rail a span{font:600 10.5px Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;opacity:0;transform:translateX(8px);transition:opacity .25s,transform .25s;pointer-events:none}
.rail a i{width:9px;height:9px;border-radius:50%;border:1.5px solid rgba(244,239,230,.35);transition:all .3s var(--sx-ease)}
.rail a:hover span,.rail a.on span{opacity:1;transform:none}
.rail a.on{color:var(--sx-orange)}
.rail a.on i{background:var(--sx-orange);border-color:var(--sx-orange);box-shadow:0 0 0 5px rgba(242,106,61,.18);transform:scale(1.15)}
body.spa-auth .rail{display:none}
@media(max-width:1100px){.rail{display:none}}

/* ===== Kleine Bildschirme: ruhiger, ohne gepinnte Story ===== */
/* Hero: Text und Logo-Feld untereinander statt nebeneinander (vorher wurde das Logo-Feld rechts herausgedrückt) */
@media(max-width:1000px){
  .hero{flex-direction:column;align-items:stretch;min-height:0}
  .hero-art-clean{position:relative!important;right:auto!important;top:auto!important;width:100%!important;height:300px!important;margin:10px 0 40px!important;opacity:1!important}
}
@media(max-width:900px){
  .trailer-play{width:68px;height:68px}.trailer-cap{left:18px;bottom:16px;font-size:10px}
  .trailer-section{padding-top:80px;padding-bottom:80px}
}

/* ===== Bewegung reduzieren: alles einfach sichtbar ===== */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-scroll [data-reveal]{opacity:1;transform:none;filter:none;transition:none}
  .js-scroll .hero-content>*{animation:none}
  .trailer-poster:after{animation:none}
  .trailer-frame{transform:none}
}