/* ---------------------------------------------------------------------------
   Fonts
   Waden  -> headlines
   Gilmer -> body copy
--------------------------------------------------------------------------- */
@font-face {
  font-family: "Waden";
  src: url("../_assets/_fonts/waden/Waden-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Gilmer";
  src: url("../_assets/_fonts/gilmer/gilmer-light.woff2") format("woff2"),
       url("../_assets/_fonts/gilmer/gilmer-light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gilmer";
  src: url("../_assets/_fonts/gilmer/gilmer-regular.woff2") format("woff2"),
       url("../_assets/_fonts/gilmer/gilmer-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gilmer";
  src: url("../_assets/_fonts/gilmer/gilmer-medium.woff2") format("woff2"),
       url("../_assets/_fonts/gilmer/gilmer-medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gilmer";
  src: url("../_assets/_fonts/gilmer/gilmer-bold.woff2") format("woff2"),
       url("../_assets/_fonts/gilmer/gilmer-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gilmer";
  src: url("../_assets/_fonts/gilmer/gilmer-heavy.woff2") format("woff2"),
       url("../_assets/_fonts/gilmer/gilmer-heavy.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------------
   Base
--------------------------------------------------------------------------- */
:root {
  /* How far into a panel's scroll range the content is fully visible.
     Fades are driven from JS via the per-panel --p custom property (0..1). */
  --ink: #f4f1ea;
  --bg: #0b0b0d;

  /* Brand accent (matches the divider glow) — reused by the signup UI. */
  --brand-1: #7b2ff7;
  --brand-2: #b21cc4;
  --brand-3: #6005ff;
  --brand-4: #88b2cf;

  --primary-purple: #5836AC;
  --primary-magenta: #B21CC4;
  --secondary-purple: #8729b9;

  /* Scroll length per panel = the video's pacing knob. Taller panels give the
     (now full-length) frame sequence more scroll to play out, so it scrubs
     more slowly and calmly. Raise this to slow the video down further. */
  --panel-scroll: 260vh;
}

* { box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Gilmer", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Fullscreen background canvas holding the current video frame */
#sequence {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: -2;
  display: block;
}

/* Subtle darkening so light text stays readable over any frame */
#sequence::after { content: ""; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    120% 80% at 50% 50%,
    rgba(0, 0, 0, 0.15) 0%,
    rgba(0, 0, 0, 0.55) 100%
  );
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Loader
--------------------------------------------------------------------------- */
#loader {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--ink);
  font-family: "Gilmer", sans-serif;
  font-weight: 300;
  font-size: clamp(1rem, 3vw, 1.4rem);
  letter-spacing: 0.15em;
  transition: opacity 0.8s ease;
}
#loader.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Panels
   Each panel is tall (gives room to fade). The inner block is sticky and
   pinned to the viewport center; JS writes --p (0..1) to drive the transition.
--------------------------------------------------------------------------- */
main { position: relative; }

.panel {
  position: relative;
  height: var(--panel-scroll);
}

.panel__inner {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6vh 8vw;
}

.panel__content {
  --p: 0;
  max-width: 34rem;
  text-align: center;
  /* Transition driven purely by --p: the block stays fixed at the viewport
     center and only dissolves — invisible + blurred at the edges of its
     scroll range, sharp + solid at --p = 1. No vertical travel. */
  opacity: var(--p);
  filter: blur(calc((1 - var(--p)) * 14px));
  will-change: opacity, filter;
}

.logo {
  display: block;
  width: clamp(125px, 12vw, 165px);
  height: auto;
  margin: 0 auto 0.7rem;
  position: relative;
  z-index: 5;
  filter: blur(calc((1 - var(--p)) * 14px)) brightness(1.7) saturate(1);
  cursor: grab;
  touch-action: none;      /* let JS own the drag gesture (no scroll steal) */
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
}
.logo.is-dragging { cursor: grabbing; }

.headline {
  font-family: "Waden", serif;
  font-weight: 400;
  line-height: 1.02;
  margin: 0 0 1.2rem;
  font-size: clamp(2.6rem, 8vw, 4.4rem);
  letter-spacing: 0.01em;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.45);
}

h2.headline {
  font-size: clamp(2.4rem, 8vw, 4rem);
}

.body {
  font-family: "Gilmer", sans-serif;
  font-weight: 300;
  line-height: 1.6;
  margin: 0;
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  letter-spacing: 0.01em;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.5);
}

/* Divider between headline and body. A hairline that fades at both ends and
   grows out from its center as the section arrives — driven by --p, which
   inherits from .panel__content (0 at the edges of the range, 1 centered). */
.divider {
  --primary-magenta: #B21CC4;
  display: block;
  width: min(50%, 15rem);
  height: 3px;
  margin: 1.3rem auto 1.3rem;
  background-color: white;
  border-radius: 20px;
      box-shadow: 0px 0px 16px 0px #AB06F4, 0px 0px 12px 2px #5836AC, 0px 0px 8px 0px var(--primary-magenta), 0px 0px 6px 0px var(--primary-magenta);
  transform: scaleX(var(--p));
  transform-origin: center;
  will-change: transform;
}

/*######################### LOADER STYLES #########################*/
.loader-box {
  position:fixed;
  display:block;
  width:100%;
  height:100%;
  top:0;
  left:0;
  z-index: 1000;
  background: #000;
  -webkit-clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 50%, 100% 50%, 100% 50%, 0 50%, 0 100%, 100% 100%, 100% 0%);
  clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 50%, 100% 50%, 100% 50%, 0 50%, 0 100%, 100% 100%, 100% 0%);
}

.loader-box .loader-rect {
  position: absolute;
  display:block;
  border-radius: 10px;
  height: 6px;
  width: 0%;
  background: #fff;
  opacity:0;
  box-shadow:0px 0px 36px 4px #9806f4, 0px 0px 15px 3px #5836ac, 0px 0px 13px 2px #6005ff, 0px 0px 6px 3px #b21cc4;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  transition: height 0.8s cubic-bezier(0.22, 1, 0.36, 1) 900ms, width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.loader-box.close {
  transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1) 900ms; 
  pointer-events:none;
  -webkit-clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 100% 100%, 100% 0%);
  clip-path: polygon(0% 0%, 0% 100%, 0 100%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%, 100% 100%, 100% 0%);
} 

.loader-box.close.hide {
 display: none;
 opacity: 0;
 visibility: hidden; 
}

.loader-box.close .loader-rect {
  width: 100%;
  height: 100%;
  opacity:1;
}

/* ---------------------------------------------------------------------------
   Intro reveal (first panel, once, after the loader clears)
   The headline reveals word by word (soft blur-up), the body follows.
   Words/body start hidden so nothing flashes before `is-ready` is set.
--------------------------------------------------------------------------- */
.panel--first .logo,
.panel--first .headline .word,
.panel--first .divider,
.panel--first .body {
  opacity: 0;
  will-change: opacity, filter, transform;
}
.panel--first .headline .word { display: inline-block; }

/* Logo leads the reveal; the headline words start after this lead time. */
.panel--first { --intro-lead: 300ms; }

.is-ready .panel--first .logo {
  animation: intro-logo 1.5s cubic-bezier(0.22, 0.68, 0.14, 1) both;
  animation-delay: 120ms;
}
.is-ready .panel--first .headline .word {
  animation: intro-word 1.15s cubic-bezier(0.22, 0.68, 0.14, 1) both;
  animation-delay: calc(var(--intro-lead) + var(--i) * 90ms);
}
.is-ready .panel--first .divider {
  animation: intro-divider 1.1s cubic-bezier(0.22, 0.68, 0.14, 1) both;
  animation-delay: var(--divider-delay, 380ms);
}
.is-ready .panel--first .body {
  animation: intro-fade 1.3s cubic-bezier(0.22, 0.68, 0.14, 1) both;
  animation-delay: var(--delay, 620ms);
}

@keyframes intro-logo {
  from {
    opacity: 0;
    filter: blur(8px)brightness(1.7) saturate(1);
    transform: translateY(1.6rem) scale(0.88);
  }
  to {
    opacity: 0.92;
    filter: blur(0)brightness(1.7) saturate(1);
    transform: translateY(0) scale(1);
  }
}
@keyframes intro-word {
  from {
    opacity: 0;
    filter: blur(14px);
    transform: translateY(0.5em) scale(0.98);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}
@keyframes intro-fade {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: translateY(0.4em);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}
@keyframes intro-divider {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

/* ---------------------------------------------------------------------------
   Scroll hint (first panel only)
--------------------------------------------------------------------------- */
.scroll-hint {
  position: fixed;
  left: 50%;
  bottom: 50px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.7rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  opacity: 0.7;
  transition: opacity 0.6s ease;
  animation: hint-bob 2.4s ease-in-out infinite;
}
.scroll-hint.is-hidden { opacity: 0; pointer-events: none;}
.scroll-hint__arrow {
  width: 1px;
  height: 2.5rem;
  background: linear-gradient(to bottom, transparent, var(--ink));
}
@keyframes hint-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, 6px); }
}

/* ---------------------------------------------------------------------------
   Reduced motion: drop blur/movement, keep a plain fade
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .panel__content {
    filter: none;
  }
  .scroll-hint { animation: none; }

  .divider { transform: none; }

  @keyframes intro-logo {
    from { opacity: 0; }
    to   { opacity: 0.92; }
  }
  @keyframes intro-word {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes intro-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes intro-divider {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

/* ---------------------------------------------------------------------------
   Footer: imprint + copyright, sitting in normal flow at the very end of the
   page (only seen once you scroll all the way down). The bottom padding leaves
   room for the fixed language switcher so it never overlaps this text.
--------------------------------------------------------------------------- */
.site-footer {
  position: static;
  padding: 2rem 6vw 3.6rem;
  text-align: center;
  font-family: "Gilmer", sans-serif;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(244, 241, 234, 0.8);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
}
.site-footer p {
  margin: 0;
  line-height: 1.75;
}
.site-footer__sep {
  margin: 0 0.5em;
  opacity: 0.6;
}
.site-footer__copy {
  opacity: 0.75;
  font-weight: 500;
}
.site-footer a {
  color: inherit;
  text-decoration: none;
  border-bottom: 0px solid rgba(244, 241, 234, 0.28);
  padding-bottom: 1px;
  transition: color 0.25s ease, border-color 0.1s ease;
}
.site-footer a:hover {
  color: var(--ink);
  border-bottom: 1px solid rgba(244, 241, 234, 0.28);
  border-color: var(--ink);
}

/* DE / EN language switcher: fixed to the bottom edge, below the loader (1000)
   and — like the scroll hint — always available. Ignores pointer events except
   on the links, so it never blocks scrolling. */
.lang-switch {
  position: fixed;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  z-index: 30;
  font-family: "Gilmer", sans-serif;
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: rgba(244, 241, 234, 0.8);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
  opacity: 0.65;
  pointer-events: none;
}
.lang-switch__sep {
  margin: 0 0.5em;
  opacity: 0.6;
}
.lang-switch a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  pointer-events: auto;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.lang-switch a:hover { color: var(--ink); }
.lang-switch a.is-active {
  color: var(--ink);
  border-bottom-color: rgba(244, 241, 234, 0.5);
}

/* ---------------------------------------------------------------------------
   Newsletter signup: two stacked fields, a premium glowing button, a small
   consent claim (required checkbox), and a status line.
--------------------------------------------------------------------------- */
.signup {
  max-width: 25rem;
  margin: 2rem auto 0;
}

.signup__fields {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

/* Each field wraps its input and holds a blurred copy of the first video
   frame behind it (backdrop-filter can't reach the real video from inside the
   filtered .panel__content). overflow: hidden clips the blurred image — which
   bleeds past its box — to the rounded field. Tune via the variables below. */
.signup__field {
  --field-blur: 6px;
  --field-brightness: 0.7;
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  /* Safari doesn't clip the filtered ::before to these rounded corners with
     overflow:hidden alone (the blurred layer leaks past the corners). Forcing
     the container onto its own compositing layer + isolating it makes WebKit
     apply the border-radius as a real clip. */
  isolation: isolate;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.signup__field::before {
  content: "";
  position: absolute;
  inset: -290px; /* bleed so the blur has no transparent edge after clipping */
  background: url("../_assets/_videoframes/_asjintro/frames/frame_0001.jpg") center / cover no-repeat;
  filter: blur(var(--field-blur)) brightness(var(--field-brightness));
  z-index: 0;
  opacity: 0.8;
  pointer-events: none;
}

.signup__input {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0.9rem 1.1rem;
  font-family: "Gilmer", sans-serif;
  font-weight: 400;
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  box-shadow: inset 0px 0px 0px 1px rgba(255, 255, 255, 0.3);
  border: 0px solid transparent;
  border-radius: 15px;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.signup__input::placeholder { color: rgba(244, 241, 234, 0.6); }
.signup__input:focus {
  box-shadow: inset 0px 0px 0px 2px rgba(255, 255, 255, 0.6);
}

/* Browser autofill: override the default (yellow/white) fill with #21213e.
   A 1000px-spread inset shadow paints the whole field; the 1px inset ring is
   listed first so it stays on top. The long background-color transition keeps
   the native fill from flashing through. */
.signup__input:-webkit-autofill,
.signup__input:-webkit-autofill:hover,
.signup__input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3),
                      inset 0 0 0 1000px #21213e;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3),
              inset 0 0 0 1000px #21213e;
  transition: background-color 9999s ease-in-out 0s;
}
.signup__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  -webkit-box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6),
                      inset 0 0 0 1000px #21213e;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6),
              inset 0 0 0 1000px #21213e;
  transition: background-color 9999s ease-in-out 0s;
}

.signup__field:has(.signup__input:focus) {
  --field-brightness: 0.92;
}

/* Honeypot: off-screen, invisible, skipped by keyboard/AT. Bots fill it. */
.signup__hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.signup__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 0.95rem;
  padding: 0.95rem 1.5rem;
  font-family: "Gilmer", sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;
  border: 0;
  border-radius: 16px;
  cursor: pointer;
  background: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-magenta) 52%, var(--primary-purple) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.60),
              0 8px 24px -6px rgba(150, 6, 244, 0.6),
              0 0 20px -2px rgba(178, 28, 196, 0.5);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s cubic-bezier(0.22, 0.68, 0.14, 1),
              box-shadow 0.35s ease, filter 0.35s ease;
}
.signup__btn span { position: relative; z-index: 1; }
/* Sheen sweep on hover */
.signup__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.38) 50%, transparent 68%);
  transform: translateX(-120%);
  transition: transform 0.7s ease;
}
.signup__btn:hover {
  transform: translateY(-2px);
  filter: saturate(1.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16),
              0 14px 34px -6px rgba(150, 6, 244, 0.78),
              0 0 30px 0 rgba(178, 28, 196, 0.66);
}
.signup__btn:hover::before { transform: translateX(120%); }
.signup__btn:active { transform: translateY(0); }
.signup__btn:focus-visible {
  outline: 2px solid rgba(178, 28, 196, 0.8);
  outline-offset: 3px;
}
.signup__btn:disabled { opacity: 0.6; cursor: default; transform: none; }

/* Loading state: hide the label, keep the button bright, spin a ring. */
.signup__btn.is-loading {
  opacity: 1;
  cursor: wait;
  transform: none;
}
.signup__btn.is-loading span { opacity: 0; }
.signup__btn.is-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: signup-spin 0.7s linear infinite;
  z-index: 2;
}
@keyframes signup-spin {
  to { transform: rotate(360deg); }
}

.signup__consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.9rem;
  text-align: left;
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
  font-weight: 400;
  color: rgba(244, 241, 234, 0.68);
}
.signup__consent a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.signup__consent a:hover {
  color: var(--brand-4);
}

.signup__consent input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.signup__consent input[type="checkbox"]:checked {
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  border-color: transparent;
}
.signup__consent input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.signup__consent input[type="checkbox"]:focus-visible {
  outline: 2px solid rgba(178, 28, 196, 0.75);
  outline-offset: 2px;
}

.signup__status {
  margin: 0.75rem 0 0;
  min-height: 1em;
  font-size: 0.82rem;
  font-weight: 500;
}
.signup__status.is-success { color: var(--brand-4); }
.signup__status.is-error { color: #ff9a9a; }

/* After a successful send: hide the inputs/button/consent, show only the
   success message, centered and a touch larger. */
.signup.is-sent .signup__fields,
.signup.is-sent .signup__btn,
.signup.is-sent .signup__consent {
  display: none;
}
.signup.is-sent .signup__status {
  margin: 0;
  font-size: 1.05rem;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Ambient-music toggle (hero only): a small pill with equalizer bars that
   dance while the track plays.
--------------------------------------------------------------------------- */
.atmosphere {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 1.5rem;
  padding: 0.55rem 1.3rem;
  font-family: "Gilmer", sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  /* Same glowing gradient look as the submit button, in a small pill. */
  background: linear-gradient(135deg, var(--primary-purple) 0%, var(--primary-magenta) 52%, var(--primary-purple) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.60),
              0 8px 24px -6px rgba(150, 6, 244, 0.6),
              0 0 20px -2px rgba(178, 28, 196, 0.5);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s cubic-bezier(0.22, 0.68, 0.14, 1),
              box-shadow 0.35s ease, filter 0.35s ease;
}
/* Sheen sweep on hover (mirrors .signup__btn) */
.atmosphere::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.38) 50%, transparent 68%);
  transform: translateX(-120%);
  transition: transform 0.7s ease;
}
.atmosphere__bars,
.atmosphere__label { position: relative; z-index: 1; }
.atmosphere:hover {
  transform: translateY(-2px);
  filter: saturate(1.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16),
              0 14px 34px -6px rgba(150, 6, 244, 0.78),
              0 0 30px 0 rgba(178, 28, 196, 0.66);
}
.atmosphere:hover::before { transform: translateX(120%); }
.atmosphere:active { transform: translateY(0); }
.atmosphere:focus-visible {
  outline: 2px solid rgba(178, 28, 196, 0.8);
  outline-offset: 3px;
}
.atmosphere.is-playing {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16),
              0 12px 30px -6px rgba(150, 6, 244, 0.72),
              0 0 28px 0 rgba(178, 28, 196, 0.62);
}

.atmosphere__bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  width: 0.85em;
  height: 0.85em;
}
.atmosphere__bars i {
  flex: 1;
  height: 35%;
  background: currentColor;
  border-radius: 2px;
  transition: height 0.2s ease;
}
.atmosphere.is-playing .atmosphere__bars i {
  animation: eq 0.9s ease-in-out infinite;
}
.atmosphere.is-playing .atmosphere__bars i:nth-child(2) { animation-delay: 0.15s; }
.atmosphere.is-playing .atmosphere__bars i:nth-child(3) { animation-delay: 0.3s; }
@keyframes eq {
  0%, 100% { height: 30%; }
  50%      { height: 100%; }
}

/* First-panel form + atmosphere button join the intro reveal after the body. */
.panel--first .signup,
.panel--first .atmosphere {
  opacity: 0;
  will-change: opacity, filter, transform;
}
.is-ready .panel--first .atmosphere {
  animation: intro-fade 1.3s cubic-bezier(0.22, 0.68, 0.14, 1) both;
  animation-delay: var(--atmosphere-delay, 780ms);
}
.is-ready .panel--first .signup {
  animation: intro-fade 1.3s cubic-bezier(0.22, 0.68, 0.14, 1) both;
  animation-delay: var(--form-delay, 900ms);
}

@media (prefers-reduced-motion: reduce) {
  .atmosphere.is-playing .atmosphere__bars i { animation: none; height: 60%; }
}

/* ---------------------------------------------------------------------------
   Short viewports (landscape phones, split-screen, etc.)
   The pinned inner is 100vh and centers its block; on flat screens that block
   grows taller than the room above the fixed footer, so it would overlap the
   footer or get vertically clipped. Here we shrink the content, tighten the
   spacing, and reserve space at the bottom for the footer so the centered
   block always sits fully in view above it.
--------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   Short viewports (landscape phones, small windows, small portrait phones).
   Once a section holds a signup form the pinned/centered layout no longer fits
   the height, so below this threshold we switch to a plain "scroll straight
   through" mode: sections flow at their natural height, stacked, nothing
   pinned and nothing clipped. The background video still scrubs with scroll —
   it just plays through faster, and not every frame is necessarily seen.
--------------------------------------------------------------------------- */

@media  only screen and (max-height: 880px) and (max-width: 720px) {
  .scroll-hint { display: none; }
}

@media  only screen and (max-height: 785px) and (max-width: 720px),
        only screen and (max-height: 970px) and (min-width: 721px)  {
  /* Drop the tall scroll-room and the sticky pin: sections become normal flow. */
  .panel {
    height: auto;
  }
  .panel__inner {
    position: static;
    height: auto;
    min-height: 0;
    padding: 5.2rem 8vw;
  }

  /* No scroll-driven fade/blur/scale here — keep content simply visible
     (overrides the --p-driven opacity/filter/transform). */
  .panel__content {
    opacity: 1;
    filter: none;
  }
  .divider {
    transform: none;
  }

  .logo {
    width: clamp(110px, 16vw, 130px);
    margin-bottom: 0.6rem;
  }

  /* The scroll hint would overlap the footer on flat screens. */
  .scroll-hint { display: none; }

  /* In flow mode the footer already sits in the flow; drop its bottom clearance
     (no fixed switcher below it) and tighten it. */
  .site-footer {
    padding: 1.5rem 8vw 0.9rem;
    font-size: 0.66rem;
  }
  .site-footer p { line-height: 1.5; }

  /* A fixed switcher would overlay the scrolling content, so let it flow at the
     very end of the page, right below the footer. */
  .lang-switch {
    position: static;
    transform: none;
    padding-bottom: 1.6rem;
    text-align: center;
  }
}