/* OG Fitness — everything that moves (picked by Timo in the animation lab, 2026-11-06).
   Intro: Vorhang, logo "Krone", opening "Lamellen" (once per visit) · scroll: Fokus · buttons: Glut · cards: Heben
   with glowing line icons · pop-up: Zoom · menu: Gleiter · courses: Aufklappen. The lab is kept in tools/lab/round2/. */

:root { --spring: cubic-bezier(.34, 1.56, .64, 1); --out: cubic-bezier(.16, 1, .3, 1); --intro: 2.1s; }

/* ===== intro: the curtain, the OG drops in, the letters follow, six slats lift ===== */
.intro { position: fixed; inset: 0; z-index: 2147483600; pointer-events: none; display: none; }
html.intro-run .intro { display: flex; }
.intro__slat { flex: 1; height: 100%; margin-right: -1px; background: var(--bg); }
html.intro-play .intro__slat { animation: slatUp .9s var(--ease) calc(1.7s + var(--s) * 70ms) forwards; }
@keyframes slatUp { to { transform: translateY(-100%); } }
.intro__logo { position: absolute; left: 50%; top: 50%; width: min(300px, 62vw); transform: translate(-50%, -50%); overflow: visible; }
.intro__logo path { fill: #fff; transform-box: fill-box; transform-origin: 50% 50%; }
html.intro-play .intro__logo { animation: logoOut .5s var(--ease) 1.55s forwards; }
html.intro-play .intro__logo .lg-mono { opacity: 0; animation: lgDrop .9s var(--spring) .1s forwards; }
html.intro-play .intro__logo .lg-letter { opacity: 0; animation: lgLetter .55s var(--out) calc(.55s + var(--k) * 45ms) forwards; }
@keyframes lgDrop { from { opacity: 0; transform: translateY(-60%) rotate(-10deg) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes lgLetter { from { opacity: 0; transform: translateY(40%); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes logoOut { to { opacity: 0; transform: translate(-50%, -50%) scale(1.08); filter: blur(6px); } }

/* the hero photo settles behind the slats, then the hero pieces come in, in order */
.hero { position: relative; isolation: isolate; overflow: hidden; }
html.intro-run .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: inherit; }
html.intro-play .hero::before { animation: heroZoom 2.2s var(--out) 1.6s both; }
@keyframes heroZoom { from { transform: scale(1.18); } to { transform: none; } }
html.intro-run .nav, html.intro-run .hero__badges > *, html.intro-run .hero__title, html.intro-run .hero__logo,
html.intro-run .hero__ctas, html.intro-run .hero__proof, html.intro-run .hero__claim, html.intro-run .hero__scroll { opacity: 0; }
html.intro-play .nav { animation: rise-down .9s var(--out) var(--intro) both; }
html.intro-play .hero__badges > * { animation: rise .8s var(--out) calc(var(--intro) + .15s) both; }
html.intro-play .hero__badges > *:nth-child(2) { animation-delay: calc(var(--intro) + .25s); }
html.intro-play .hero__title { animation: mask-up 1.1s var(--out) calc(var(--intro) + .1s) both; }
html.intro-play .hero__logo { animation: crown 1.2s var(--spring) calc(var(--intro) + .45s) both; }
html.intro-play .hero__ctas { animation: rise .9s var(--out) calc(var(--intro) + .7s) both; }
html.intro-play .hero__proof { animation: pop .8s var(--spring) calc(var(--intro) + .6s) both; }
html.intro-play .hero__claim { animation: rise .9s var(--out) calc(var(--intro) + .75s) both; }
html.intro-play .hero__scroll { animation: rise .9s var(--out) calc(var(--intro) + 1s) both; }
html.intro-play .hero__ctas .cta__glow { animation: ignite 1.4s ease calc(var(--intro) + 1s) both; }
@keyframes rise-down { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes mask-up { from { opacity: 1; clip-path: inset(0 0 100% 0); transform: translateY(60px); } to { opacity: 1; clip-path: inset(0 0 -20% 0); transform: none; } }
@keyframes crown { from { opacity: 0; transform: scale(.6) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes ignite { 0% { opacity: 0; } 60% { opacity: 1; filter: blur(calc(9 * var(--u))); } 100% { opacity: 1; } }

/* ===== scroll: blocks come out of the blur ===== */
.rv { transition: opacity .9s var(--out), transform .9s var(--out), filter .9s var(--out); transition-delay: calc(var(--i, 0) * 90ms); }
.rv:not(.in) { opacity: 0; filter: blur(14px); transform: scale(.94); }

/* ===== buttons: molten gold grows out of the arrow, the glow flares ===== */
.cta-hero, .cta-popup, .cta-ghost, .cta-route, .nav__cta { transition: transform .5s var(--out), box-shadow .5s var(--out); }
.cta__glow, .cta__ring, .cta__arrow, .cta__arrow-img, .cta__label, .cta__fill { transition: all .6s var(--out); }
:is(.cta-hero, .cta-popup, .cta-ghost, .cta-route):active, .nav__cta:active { transform: scale(.96); }
:is(.cta-hero, .cta-popup, .cta-ghost, .cta-route) .cta__bg::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: 999px; pointer-events: none;
  background: radial-gradient(130% 190% at 92% 50%, #fff1c2 0%, #e2c578 22%, #b49b59 52%, #6e5a2b 100%);
  box-shadow: inset 0 1px 0 #ffffff80, inset 0 -6px 14px #3a2e1280; clip-path: circle(0 at 92% 50%); transition: clip-path .75s var(--out); }
:is(.cta-hero, .cta-popup, .cta-ghost, .cta-route):hover .cta__bg::after { clip-path: circle(150% at 92% 50%); }
:is(.cta-hero, .cta-popup, .cta-ghost, .cta-route):hover .cta__label { color: #1a150a; text-shadow: 0 1px 0 #ffffff55; }
:is(.cta-hero, .cta-popup, .cta-ghost, .cta-route):hover .cta__arrow { transform: rotate(45deg); }
:is(.cta-hero, .cta-popup, .cta-ghost, .cta-route):hover .cta__glow { opacity: 1; filter: blur(calc(8 * var(--u))); animation: flare 1.6s ease-in-out infinite; }
@keyframes flare { 50% { opacity: .65; filter: blur(calc(11 * var(--u))); } }
.link-arrow .link-arrow__icon, .course__link-arrow { transition: transform .5s var(--out); }
.link-arrow:hover .link-arrow__icon { transform: translate(3px, -3px); }
.nav__cta:hover { box-shadow: 0 0 22px #b49b5966; transform: translateY(-1px); }

/* ===== cards lift, their line icons redraw, pop and glow gold ===== */
.feature, .review, .tour__frame { transition: transform .6s var(--out), border-color .6s var(--out), box-shadow .6s var(--out); }
:is(.feature, .review, .tour__frame):hover { transform: translateY(-8px); border-color: var(--gold); box-shadow: 0 24px 50px -24px #b49b5966; }
.ficon { display: block; width: 100%; height: 100%; overflow: visible; color: var(--gold); transition: filter .5s var(--out), color .5s; }
.ficon * { transform-box: fill-box; transform-origin: 50% 50%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ficon :is(path, circle, rect, line) { stroke-dasharray: 1; stroke-dashoffset: 0; }
.feature:hover .ficon { color: #f0d78c; filter: drop-shadow(0 0 6px #b49b59cc) drop-shadow(0 0 14px #b49b5966); }
.feature:hover .ficon :is(path, circle, rect, line) { animation: draw .9s var(--out) calc(var(--n, 0) * 70ms) both; }
.feature:hover .ficon > g { animation: icon-pop .8s var(--spring); }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes icon-pop { 40% { transform: scale(1.2) rotate(-8deg); } }

/* ===== pop-up grows in slightly ===== */
.modal__pricing, .modal__join { transition: opacity .5s var(--ease), transform .7s var(--out); }
.modal__pricing:not(.is-shown), .modal__join:not(.is-shown) { transform: scale(.94); }

/* ===== menu: one pill glides from link to link ===== */
.nav__links { position: relative; }
.nav__pill { position: absolute; left: 0; top: 0; border-radius: 999px; background: #fff3; opacity: 0; pointer-events: none;
  transition: transform .5s var(--out), width .5s var(--out), height .5s var(--out), opacity .3s; }
.nav__links:hover .nav__pill { opacity: 1; }
.nav__link { position: relative; z-index: 1; }
@media (min-width: 992px) { .nav__link:hover { background-color: transparent; } }

/* ===== courses: tall cards side by side, the one you point at opens ===== */
.kurse { display: flex; gap: 12px; height: clamp(420px, calc(42 * var(--u)), 620px); margin-top: calc(6 * var(--u)); }
.kurs { position: relative; flex: 1 1 0; min-width: 0; border-radius: 22px; overflow: hidden; color: var(--white); text-decoration: none;
  border: 1px solid #ffffff3d; background: #111; isolation: isolate; cursor: pointer;
  transition: flex-grow .9s var(--out), border-color .6s, box-shadow .9s var(--out); }
.kurs__img { position: absolute; inset: 0; z-index: -2; background: center / cover no-repeat; filter: brightness(.75) saturate(.95);
  transition: transform 1.4s var(--out), filter .9s var(--out); }
.kurs::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 40%, #0008 70%, #000d); }
.kurs__name { position: absolute; left: 10px; right: 10px; bottom: 34px; margin: 0; text-align: center; font-weight: 400; color: #ffffffcc;
  font-size: clamp(17px, calc(1.6 * var(--u)), 22px); line-height: 1.1; transition: opacity .45s var(--out), transform .7s var(--out); }
.kurs__title { position: absolute; left: 28px; top: 26px; margin: 0; font-weight: 400; white-space: nowrap; font-size: clamp(24px, calc(2.4 * var(--u)), 34px);
  opacity: 0; transform: translateY(18px); transition: opacity .5s var(--out), transform .8s var(--out); }
.kurs__tag { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; padding: 7px 12px; border-radius: 999px;
  color: var(--white); background: #2a261d; border: 1px solid var(--gold); box-shadow: 0 0 18px #b49b5980; transition: left .9s var(--out), transform .9s var(--out); }
.kurs__more { position: absolute; left: 28px; right: 28px; bottom: 28px; min-width: 260px; pointer-events: none; }
.kurs__more > * { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--out), transform .8s var(--out); }
.kurs__eyebrow { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--white); }
.kurs__eyebrow::before { content: ""; width: 2px; height: 14px; background: var(--gold); transform: scaleY(0); transition: transform .6s var(--out) .4s; }
.kurs__times { margin: 10px 0 18px; font-size: 15px; line-height: 1.45; color: var(--gold); }
.kurs__times span { color: #ffffff99; }
.kurs__link { text-decoration: none; display: inline-flex; align-items: center; gap: 12px; padding: 6px 6px 6px 18px; border-radius: 999px; font-size: 14px; color: var(--white);
  background: #ffffff17; border: 1px solid #b49b59cc; box-shadow: 0 0 22px #b49b5955; }
.kurs__link i { width: 30px; height: 30px; border-radius: 50%; background: var(--black); display: grid; place-items: center; font-style: normal; transition: transform .5s var(--out); }
.kurs__link:hover i { transform: rotate(45deg); }
.kurs.is-open { flex-grow: 2.8; border-color: #b49b59aa; box-shadow: 0 30px 70px -40px #b49b5988; }
.kurs.is-open .kurs__img { transform: scale(1.06); filter: brightness(.9) saturate(1); }
.kurs.is-open .kurs__name { opacity: 0; transform: translateY(14px); transition-duration: .3s; }
.kurs.is-open .kurs__title { opacity: 1; transform: none; transition-delay: .3s; }
.kurs.is-open .kurs__tag { left: calc(100% - 18px); transform: translateX(-100%); }
.kurs.is-open .kurs__more { pointer-events: auto; }
.kurs.is-open .kurs__more > * { opacity: 1; transform: none; }
.kurs.is-open .kurs__more > :nth-child(1) { transition-delay: .35s; }
.kurs.is-open .kurs__more > :nth-child(2) { transition-delay: .45s; }
.kurs.is-open .kurs__more > :nth-child(3) { transition-delay: .55s; }
.kurs.is-open .kurs__eyebrow::before { transform: none; }
@media (max-width: 991px) {
  .kurse { height: auto; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; padding: 0 16px 10px; margin-inline: -16px; scrollbar-width: none; }
  .kurse::-webkit-scrollbar { display: none; }
  .kurs { flex: 0 0 78%; height: 460px; scroll-snap-align: center; }
  .kurs.is-open { flex-grow: 0; }
  .kurs__more { min-width: 0; left: 20px; right: 20px; bottom: 20px; }
  .kurs__title { left: 20px; top: 62px; white-space: normal; }
  .kurs.is-open .kurs__tag { left: 20px; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.intro-run .intro { display: none; }
  html.intro-run .nav, html.intro-run .hero__badges > *, html.intro-run .hero__title, html.intro-run .hero__logo, html.intro-run .hero__ctas,
  html.intro-run .hero__proof, html.intro-run .hero__claim, html.intro-run .hero__scroll { opacity: 1; animation: none !important; }
  .rv { opacity: 1 !important; transform: none !important; filter: none !important; }
}