/* ISSA – Bewegung & Effekte: Intro, Hero-Einzug, schmelzende Übergänge, Karten-Welle, Polaroid, Mikro-Interaktionen
   Regeln: EINE Bewegungskurve fürs Scrollen (--ease), Federn (--spring) nur für Dinge, die "landen". */
:root {
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --water: #256CBE;
}

/* ---------- Intro: Wortmarke fällt, Wasser flutet, schrumpft zum Blob hinter dem Logo ---------- */
.intro { position: fixed; inset: 0; z-index: 300; background: var(--navy); overflow: hidden; display: grid; place-items: center; }
.intro-flood { position: absolute; left: 50%; top: 50%; width: 145vmax; height: 145vmax; margin: -72.5vmax 0 0 -72.5vmax; border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #3A8CE0 0%, var(--water) 38%, #1B5AA6 100%); transform: scale(0); will-change: transform; }
.intro-word { position: relative; z-index: 2; font-family: var(--serif); font-size: clamp(4.5rem, 20vw, 11rem); letter-spacing: .06em; line-height: 1; color: var(--gold);
  background: linear-gradient(180deg, #F6E3A6, #D9AE55); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; transform: translateY(-80vh); }
.intro-msg { position: absolute; left: 0; right: 0; bottom: 18%; text-align: center; z-index: 2; color: #fff; opacity: 0;
  font-family: var(--cond); font-style: italic; font-weight: 600; text-transform: uppercase; letter-spacing: .22em; font-size: clamp(1rem, 3.6vw, 1.7rem); }

/* Blob hinter dem Logo (Ziel des Intros) */
.logo-drop { position: relative; width: min(440px, 76vw); margin: 0 auto; }
.logo-drop .hero-logo { width: 100%; position: relative; z-index: 1; }
.hero-blob { position: absolute; left: 50%; top: 50%; width: 118%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; z-index: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(58,140,224,.55) 0%, rgba(37,108,190,.42) 45%, rgba(37,108,190,0) 70%); transition: opacity .8s var(--ease); }
html.blob-on .hero-blob { opacity: 1; animation: blobPulse 7s ease-in-out infinite; }
@keyframes blobPulse { 50% { transform: translate(-50%, -50%) scale(1.08); } }

/* ---------- Hero-Einzug: Logo landet, Buchstaben hüpfen, dann Nav & Buttons ---------- */
html.fx-pre .logo-drop .hero-logo, html.fx-pre .slogan .l, html.fx-pre .heute, html.fx-pre .hero .btn, html.fx-pre .chips span,
html.fx-pre .meldung, html.fx-pre .nav { opacity: 0; }
html.fx-go .logo-drop .hero-logo { animation: drop 1.15s both, float 7s ease-in-out 1.2s infinite; }
@keyframes drop {
  0%   { transform: translateY(-120vh) scale(.92, 1.14); animation-timing-function: cubic-bezier(.55, 0, .95, .55); }
  52%  { transform: translateY(0) scale(.92, 1.14); animation-timing-function: ease-out; }
  64%  { transform: translateY(0) scale(1.2, .8); animation-timing-function: ease-out; }
  80%  { transform: translateY(-2.5%) scale(.97, 1.04); animation-timing-function: ease-in-out; }
  100% { transform: none; }
}
.slogan .l { display: inline-block; }
html.fx-go .slogan .l { animation: pop .8s var(--spring) both; animation-delay: calc(.75s + var(--i) * 38ms); }
@keyframes pop { 0% { opacity: 0; transform: translateY(46px) scale(.5); } 55% { opacity: 1; transform: translateY(-14px) scale(1.14); } 78% { transform: translateY(3px) scale(.97); } 100% { opacity: 1; transform: none; } }
html.fx-go .meldung { animation: rise .8s var(--spring) 1.3s both; }
html.fx-go .heute { animation: rise .8s var(--spring) 1.45s both; }
html.fx-go .hero .btn:nth-of-type(1) { animation: rise .8s var(--spring) 1.6s both; }
html.fx-go .hero .btn:nth-of-type(2) { animation: rise .8s var(--spring) 1.72s both; }
html.fx-go .chips span { animation: hopIn .7s var(--spring) both; animation-delay: calc(1.85s + var(--i) * 90ms); }
html.fx-go .nav { animation: navIn .9s var(--ease) 1.9s both; }
@keyframes rise { from { opacity: 0; transform: translateY(26px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes hopIn { 0% { opacity: 0; transform: translateY(24px); } 60% { opacity: 1; transform: translateY(-9px); } 100% { opacity: 1; transform: none; } }
@keyframes navIn { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: none; } }

/* ---------- Wellen-Übergänge: sanfte Meereswellen, steigen beim Scrollen auf ---------- */
.divider { position: relative; height: 110px; overflow: hidden; line-height: 0; }
.divider.base-to-alt { background: var(--navy); }
.divider.alt-to-base { background: var(--navy-2); }
.divider svg { position: absolute; left: 0; top: 0; width: max(200%, 1500px); height: 110px; will-change: transform; backface-visibility: hidden; }
.divider .w1 path { fill: #256CBE; opacity: .14; }
.divider .w2 path { fill: #256CBE; opacity: .2; }
.divider.base-to-alt .w3 path:not(.crest) { fill: var(--navy-2); opacity: 1; }
.divider.alt-to-base .w3 path:not(.crest) { fill: var(--navy); opacity: 1; }
.divider .crest { fill: none; stroke: var(--gold); stroke-width: 2.5; opacity: .75; vector-effect: non-scaling-stroke; }

/* ---------- Blubberbläschen ---------- */
.fxb { position: fixed; bottom: -50px; z-index: 40; border-radius: 50%; pointer-events: none; opacity: 0;
  border: 1.5px solid rgba(190,225,255,.6); background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.4), rgba(255,255,255,.06) 55%, rgba(255,255,255,0) 72%);
  animation: bubUp ease-in-out forwards; }
.fxb.gold { border-color: rgba(226,191,104,.8); background: radial-gradient(circle at 30% 28%, rgba(255,236,170,.35), rgba(226,191,104,.06) 55%, rgba(226,191,104,0) 72%); }
@keyframes bubUp { 0% { transform: translate3d(0, 0, 0) scale(.5); opacity: 0; } 12% { opacity: .9; } 55% { transform: translate3d(calc(var(--dx) * .4), -62vh, 0) scale(1); } 100% { transform: translate3d(var(--dx), -118vh, 0) scale(1.08); opacity: 0; } }

/* ---------- Karten: "Stadion-Welle" beim Erscheinen ---------- */
.track .card { opacity: 0; transform: translateY(80px) rotate(calc((var(--i, 0) % 2 ? 1 : -1) * 5deg)) scale(.9);
  transition: opacity .6s var(--ease) calc(var(--i, 0) * 95ms), transform 1s var(--spring) calc(var(--i, 0) * 95ms), border-color .25s; }
.track.in .card { opacity: 1; transform: none; }
.track.settled .card { transition: transform .35s var(--spring), border-color .25s, opacity .3s; }
.track.settled .card:hover { transform: translateY(-5px) rotate(-.6deg); }

/* ---------- Wagenfoto: wird beim Scrollen kleiner und landet leicht schräg ---------- */
.polaroid { position: relative; max-width: 860px; margin: 0 auto !important; transform: scale(var(--ps, 1)) rotate(var(--pr, 0deg)); transform-origin: 50% 50%; will-change: transform; }
.polaroid .photo { overflow: hidden; border-radius: 18px; border: 1px solid rgba(226,191,104,.5); box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.polaroid img { width: 100%; height: auto; display: block; border: 0 !important; border-radius: 0 !important; }
.polaroid.landed { animation: wobble .9s var(--spring); }
@keyframes wobble { 0% { transform: scale(1) rotate(var(--pr, -2.5deg)); } 35% { transform: scale(1.02) rotate(calc(var(--pr, -2.5deg) - 1.6deg)); } 70% { transform: scale(.996) rotate(calc(var(--pr, -2.5deg) + .7deg)); } 100% { transform: scale(1) rotate(var(--pr, -2.5deg)); } }

/* ---------- Mikro-Interaktionen ---------- */
.btn, .tab, .mini, .call, .dock a { position: relative; overflow: hidden; }
.btn, .tab, .mini, .call { transition: transform .4s var(--spring), background .2s, color .2s; }
.btn:active, .tab:active, .mini:active, .call:active { transform: scale(1.07, .9); transition-duration: .08s; }
.ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.55); transform: scale(0); animation: ripple .65s ease-out forwards; pointer-events: none; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }
.btn-ghost .ripple, .tab .ripple, .mini:not(.fill) .ripple { background: rgba(226,191,104,.45); }
.chips span { cursor: default; transition: transform .45s var(--spring), border-color .2s; }
.chips span:hover { transform: translateY(-6px) rotate(-2deg); border-color: var(--gold); }
.chips span.hopping { animation: chipHop .6s var(--spring); }
@keyframes chipHop { 0% { transform: none; } 40% { transform: translateY(-12px) rotate(-3deg); } 100% { transform: none; } }

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
  .intro, .ripple, .fxb { display: none !important; }
  .track .card { opacity: 1; transform: none; transition: none; }
  .hero-blob { opacity: 1; animation: none !important; }
  .polaroid { transform: none !important; }
}

/* Performance: Ebenen auf eigene Grafik-Ebenen, nur transform/opacity animieren */
.layer { will-change: transform; backface-visibility: hidden; }
.fxb { will-change: transform, opacity; }

/* ---------- Lite-Modus (Handy/Tablet): keine Scroll-Berechnungen, nur Zeit-Animationen auf der Grafikkarte ---------- */
html.lite .progress { display: none; }
html.lite .layer { animation: bob 10s ease-in-out infinite alternate; }
html.lite .garnele { animation-duration: 12s; animation-delay: -5s; }
html.lite .muschel { animation-duration: 8s; animation-delay: -3s; }
@keyframes bob { from { transform: translate3d(0, -8px, 0) rotate(-1.5deg); } to { transform: translate3d(0, 10px, 0) rotate(1.5deg); } }
html.lite .hero-blob, html.lite.blob-on .hero-blob { animation: none; }
html.lite .hero-logo { animation: none; }
html.lite.fx-go .logo-drop .hero-logo { animation: drop 1.15s both; }
html.lite .divider svg { opacity: 0; transition: opacity 1s ease; animation: drift 26s linear infinite; }
html.lite .divider.in svg { opacity: 1; }
html.lite .divider svg.w2 { animation-direction: reverse; animation-duration: 20s; }
html.lite .divider svg.w3 { animation-duration: 15s; }
@keyframes drift { to { transform: translate3d(-25%, 0, 0); } }
html.lite .polaroid { --ps: 1.16; --pr: 0deg; transition: transform 1.1s var(--spring); }
html.lite .polaroid.in { --ps: 1; --pr: -2.5deg; }
.fxb.amb { animation-timing-function: linear; animation-iteration-count: infinite; animation-fill-mode: none; }