/* ARARA landing foundation.
   Sections stay in their original cascade order: base, typography, scene layout,
   scroll layout and compositor hints. */

@font-face {
  font-family: "Onest";
  src: url("/assets/fonts/onest-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --ink: #08051e;
  --paper: #f5ead7;
  --paper-muted: rgba(245, 234, 215, 0.68);
  --red: #b7242e;
  --red-bright: #e7443f;
  --gold: #eab75a;
  --purple: #5a287d;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font-display: "Unbounded", "Arial Black", sans-serif;
  --font-ui: "Onest", "Segoe UI", sans-serif;
  --font-story: "Literata", Georgia, serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: #050314;
}

html.is-cue-programmatic {
  scroll-behavior: auto !important;
  overflow-anchor: none;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  color: var(--paper);
  background: #050314;
  font-family: var(--font-ui);
}

body.is-loading { overflow: hidden; }

button,
a { -webkit-tap-highlight-color: transparent; }

button { font: inherit; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 6px;
}

.shell {
  width: min(1420px, calc(100% - 68px));
  margin-inline: auto;
}

.loader {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 22px;
  background: #07041b;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}

.loader.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.loader p {
  margin: 0;
  color: rgba(245, 234, 215, 0.52);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.loader__eye {
  position: relative;
  width: 64px;
  height: 32px;
  overflow: hidden;
  border: 2px solid #8b1d2b;
  border-radius: 70% 20% 70% 20%;
  background: #110914;
  transform: rotate(-4deg);
  animation: blink 2.4s ease-in-out infinite;
}

.loader__eye i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  border: 5px solid #b48635;
  border-radius: 50%;
  background: #020205;
  box-shadow: 0 0 14px rgba(234, 183, 90, 0.45);
  transform: translate(-50%, -50%);
}

.hero {
  isolation: isolate;
  position: sticky;
  z-index: 1;
  top: 0;
  width: 100%;
  min-height: 100svh;
  height: 100svh;
  height: 100dvh;
  overflow: clip;
  background: var(--ink);
  --scroll-p: 0;
  --scene-x: 0px;
  --scene-y: 0px;
  --scene-scale: 1.05;
  --left-retreat: 0px;
  --right-retreat: 0px;
  --left-drop: 0px;
  --right-drop: 0px;
  --content-opacity: 1;
  --content-y: 34px;
  --content-scale: 0.98;
  --cta-opacity: 0;
  --cta-y: 62px;
  --cta-scale: 0.94;
  --scroll-hint-opacity: 0.72;
}

.reveal-runway {
  position: relative;
  z-index: 0;
  height: 62svh;
  min-height: 310px;
  background: #050314;
}

.scene {
  position: absolute;
  z-index: -20;
  inset: -3%;
  background: url("/assets/scene-2_5d/plates/clean-far.webp") center / cover no-repeat;
  transform: scale(var(--scene-scale)) translate(var(--scene-x), var(--scene-y));
}

.atmosphere {
  position: absolute;
  z-index: -4;
  left: 25%;
  right: 25%;
  bottom: -5%;
  height: 48%;
  opacity: var(--mist-opacity, 0.24);
  background: radial-gradient(ellipse, rgba(117, 73, 170, 0.42), transparent 68%);
  filter: blur(32px);
  transform: translate(var(--mist-x, 0px), var(--mist-y, 0px)) scale(var(--mist-scale, 1));
}

.vignette {
  position: absolute;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(1, 1, 10, 0.28), transparent 26%, transparent 74%, rgba(1, 1, 10, 0.28)),
    linear-gradient(0deg, rgba(2, 1, 12, 0.78), transparent 34%, rgba(4, 2, 18, 0.12) 68%, rgba(2, 1, 12, 0.42));
}

.nav {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding-top: max(clamp(22px, 4vh, 42px), env(safe-area-inset-top));
}

.wordmark {
  display: grid;
  width: max-content;
  color: var(--paper);
  text-decoration: none;
  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.65);
}

.wordmark strong {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1;
}

.wordmark span {
  margin-top: 6px;
  color: rgba(245, 234, 215, 0.55);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.2em;
}

.nav__stamp {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(245, 234, 215, 0.54);
}

.nav__stamp span {
  display: grid;
  width: 30px;
  height: 30px;
  place-content: center;
  border: 1px solid rgba(234, 183, 90, 0.54);
  color: var(--gold);
  font-family: var(--font-story);
  font-size: 12px;
  transform: rotate(4deg);
}

.nav__stamp small {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.sound {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 0;
  border: 0;
  color: var(--paper);
  background: none;
  cursor: pointer;
}

.sound__text {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.sound__icon {
  display: flex;
  height: 15px;
  align-items: center;
  gap: 2px;
}

.sound__icon i {
  display: block;
  width: 2px;
  height: 4px;
  border-radius: 2px;
  background: var(--gold);
}

.sound[aria-pressed="true"] .sound__icon i { animation: wave 0.75s ease-in-out infinite alternate; }
.sound[aria-pressed="true"] .sound__icon i:nth-child(2) { animation-delay: -0.25s; }
.sound[aria-pressed="true"] .sound__icon i:nth-child(3) { animation-delay: -0.5s; }
.sound[aria-pressed="true"] .sound__icon i:nth-child(4) { animation-delay: -0.1s; }

.hero__content {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  display: flex;
  width: min(560px, 42vw);
  align-items: center;
  flex-direction: column;
  text-align: center;
  opacity: var(--content-opacity);
  transform: translate(-50%, calc(-50% + var(--content-y))) scale(var(--content-scale));
}

.kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(245, 234, 215, 0.64);
}

.kicker span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
}

.kicker i {
  display: block;
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.kicker i:last-child { transform: scaleX(-1); }

.arara-line {
  margin: 18px 0 6px;
  color: var(--gold);
  font-family: var(--font-story);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.08em;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
  opacity: 0;
  animation: appear 1s var(--ease) 0.85s forwards;
}

.hero h1 {
  margin: 0;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(62px, 7.2vw, 112px);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.9;
  -webkit-text-stroke: 0.35px rgba(61, 10, 31, 0.52);
  text-shadow: 3px 4px 0 #8d2033, 0 15px 28px rgba(1, 0, 8, 0.72);
}

.intro {
  margin: 23px 0 28px;
  color: rgba(245, 238, 222, 0.84);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 500;
  line-height: 1.55;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.88);
}

.hero__content .intro { margin-bottom: 20px; }
.hero__content .mega-cta { margin-top: 0; }

.cta-reveal {
  width: max-content;
  opacity: var(--cta-opacity);
  transform: translateY(var(--cta-y)) scale(var(--cta-scale));
  transform-origin: 50% 20%;
  will-change: opacity, transform;
}

.primary {
  display: flex;
  min-width: 206px;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 15px 19px 15px 23px;
  border: 1px solid rgba(234, 183, 90, 0.62);
  color: var(--paper);
  background: rgba(18, 8, 31, 0.42);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: background 0.35s ease, border-color 0.35s ease, transform 0.35s var(--ease);
}

.primary svg {
  width: 18px;
  fill: none;
  stroke: var(--gold);
  stroke-linecap: round;
  stroke-width: 1.5;
}

.primary:hover {
  border-color: var(--gold);
  background: rgba(87, 28, 57, 0.54);
  transform: translateY(2px);
}

.side-note {
  position: absolute;
  z-index: 5;
  top: 54%;
  color: rgba(245, 234, 215, 0.36);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.18em;
  writing-mode: vertical-rl;
}

.side-note--left { left: 27px; transform: rotate(180deg); }
.side-note--right { right: 27px; }

.scroll-mark {
  position: absolute;
  z-index: 5;
  bottom: max(25px, env(safe-area-inset-bottom));
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 9px;
  opacity: var(--scroll-hint-opacity);
  transform: translate(-50%, calc(var(--scroll-p) * 16px));
}

.scroll-mark span {
  position: relative;
  width: 1px;
  height: 34px;
  overflow: hidden;
  background: rgba(245, 234, 215, 0.22);
}

.scroll-mark span::after {
  position: absolute;
  inset: -50% 0 50%;
  background: var(--gold);
  content: "";
  animation: scroll-line 2.1s ease-in-out infinite;
}

.scroll-mark small {
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.scroll-progress {
  position: absolute;
  z-index: 8;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: rgba(245, 234, 215, 0.08);
  transform: scaleX(var(--scroll-p));
  transform-origin: left;
}

.scroll-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--red), var(--gold));
}

.story {
  position: relative;
  z-index: 2;
  margin-top: 0;
}

.story__beat {
  display: flex;
  width: 100%;
  min-height: 100svh;
  align-items: center;
  padding: 12vh max(6vw, 28px);
  pointer-events: none;
}

.story__beat--right { justify-content: flex-end; }
.story__beat--center { justify-content: center; text-align: center; }
.story__beat--center .story__copy { width: min(680px, 92vw); }

.story__copy {
  width: min(430px, 42vw);
  opacity: 0;
  text-shadow: 0 5px 22px rgba(0, 0, 0, 0.95);
  transform: translateY(34px);
  transition: opacity 0.8s ease, transform 1s var(--ease);
  pointer-events: auto;
}

.story__beat.is-active .story__copy {
  opacity: 1;
  transform: translateY(0);
}

.story__copy > span {
  color: var(--gold);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.2em;
}

.story__copy h2 {
  margin: 13px 0 17px;
  color: #f8edda;
  font-family: var(--font-display);
  font-size: clamp(34px, 4.1vw, 64px);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.93;
  -webkit-text-stroke: 0.3px rgba(73, 18, 38, 0.5);
  text-shadow: 3px 4px 0 rgba(139, 31, 52, 0.78), 0 14px 26px rgba(0, 0, 0, 0.72);
}

.story__beat--center .story__copy h2 {
  font-size: clamp(40px, 5vw, 74px);
}

.story__copy p {
  width: min(360px, 100%);
  margin: 0;
  color: rgba(245, 234, 215, 0.76);
  font-family: var(--font-story);
  font-size: clamp(15px, 1.35vw, 19px);
  font-style: italic;
  line-height: 1.65;
}

.story__beat--right p { margin-left: auto; }

.story__return {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(234, 183, 90, 0.55);
  color: var(--paper);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
}

.mega-cta {
  isolation: isolate;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  width: clamp(250px, 24vw, 336px);
  min-height: clamp(82px, 7.4vw, 102px);
  align-content: center;
  align-items: center;
  column-gap: 22px;
  row-gap: 5px;
  margin: 30px auto 0;
  padding: 18px 21px 17px 25px;
  overflow: hidden;
  border: 1px solid #5f3908;
  border-radius: 6px;
  color: #1e1407;
  background:
    linear-gradient(90deg, rgba(122, 70, 7, 0.13) 0 1px, transparent 1px) 22px 0 / 46px 100%,
    radial-gradient(ellipse at 50% 0%, rgba(255, 253, 207, 0.78), transparent 54%),
    linear-gradient(180deg, #ffdf61 0%, #efbd35 62%, #d3931c 100%);
  box-shadow:
    0 4px 0 #7f4b0b,
    0 7px 0 rgba(21, 10, 2, 0.72),
    0 22px 42px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 224, 119, 0.2),
    0 0 54px rgba(239, 183, 54, 0.34),
    inset 0 1px 0 rgba(255, 255, 225, 0.9),
    inset 0 -7px 13px rgba(105, 55, 5, 0.2);
  cursor: pointer;
  transform: translateY(0);
  transition: filter 0.35s ease, transform 0.35s var(--ease), box-shadow 0.35s ease;
  animation: mega-breathe 5.2s ease-in-out infinite;
}

.mega-cta::before,
.mega-cta::after {
  position: absolute;
  content: "";
  pointer-events: none;
}

.mega-cta::before {
  z-index: 0;
  top: -70%;
  bottom: -70%;
  left: -42%;
  width: 20%;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 224, 0.5), transparent);
  transform: skewX(-18deg);
  animation: mega-shine 5.2s ease-in-out infinite;
}

.mega-cta::after {
  z-index: 0;
  inset: 6px;
  border: 1px solid rgba(68, 36, 4, 0.2);
  border-radius: 2px;
}

.mega-cta span {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  font-family: var(--font-ui);
  font-size: clamp(25px, 2.3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.92;
  text-shadow: 0 1px 0 rgba(255, 248, 182, 0.72);
}

.mega-cta small {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  color: rgba(61, 34, 5, 0.72);
  font-family: var(--font-ui);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.19em;
}

.mega-cta b {
  position: relative;
  z-index: 1;
  grid-column: 2;
  grid-row: 1 / 3;
  display: grid;
  width: 43px;
  height: 43px;
  place-items: center;
  border: 1px solid rgba(44, 25, 4, 0.38);
  border-radius: 50%;
  background: rgba(255, 243, 164, 0.2);
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 600;
  transition: color 0.3s ease, background 0.3s ease, transform 0.35s var(--ease);
}

.mega-cta:hover {
  filter: brightness(1.06) saturate(1.04);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #7f4b0b, 0 9px 0 rgba(21, 10, 2, 0.7), 0 28px 48px rgba(224, 160, 31, 0.28), 0 0 58px rgba(239, 183, 54, 0.38), inset 0 1px 0 rgba(255, 255, 225, 0.92), inset 0 -7px 13px rgba(105, 55, 5, 0.18);
}

.mega-cta:hover b { color: #f8ca43; background: #261606; transform: rotate(8deg); }

.mega-cta:active { transform: translateY(4px); }
.mega-cta.is-bursting { animation: mega-click 0.46s var(--ease); }

.portal-transition {
  position: fixed;
  z-index: 99;
  inset: 0;
  display: grid;
  overflow: hidden;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  background:
    radial-gradient(ellipse at 50% 54%, rgba(124, 34, 112, .38), transparent 42%),
    linear-gradient(180deg, rgba(6, 3, 17, .82), rgba(15, 6, 30, .96));
  -webkit-backdrop-filter: blur(10px) saturate(1.12);
  backdrop-filter: blur(10px) saturate(1.12);
  pointer-events: none;
  isolation: isolate;
}

.portal-transition::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, transparent 30%, rgba(255, 222, 150, .09) 49%, transparent 68%),
    radial-gradient(circle at 50% 48%, rgba(242, 186, 83, .16), transparent 26%);
  content: "";
}

.portal-transition__halo {
  position: absolute;
  z-index: 0;
  width: min(56vw, 620px);
  aspect-ratio: 1;
  border: 1px solid rgba(246, 201, 118, .2);
  border-radius: 50%;
  box-shadow:
    inset 0 0 90px rgba(137, 41, 124, .17),
    0 0 110px rgba(235, 178, 77, .08);
}

.portal-transition__money {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
}

.portal-transition__note {
  position: absolute;
  top: -18vh;
  left: calc(50% + var(--note-x));
  display: grid;
  width: clamp(38px, 4.8vw, 66px);
  aspect-ratio: 1.72;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 4px 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 239, 185, .58);
  border-radius: 4px;
  color: #251329;
  background:
    radial-gradient(circle at 78% 50%, rgba(255, 249, 214, .78) 0 9%, transparent 10%),
    linear-gradient(135deg, #f7dda0 0%, #d99a37 48%, #9b3e78 100%);
  box-shadow: 0 12px 28px rgba(4, 1, 10, .32);
  opacity: 0;
  transform: translateX(-50%) rotate(var(--note-rotation)) scale(var(--note-scale));
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.portal-transition__note::before {
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(77, 30, 69, .25);
  border-radius: 2px;
  content: "";
}

.portal-transition__note b,
.portal-transition__note span {
  position: relative;
  z-index: 1;
}

.portal-transition__note b {
  font: 950 clamp(9px, 1vw, 14px)/1 Onest, system-ui, sans-serif;
  letter-spacing: -.05em;
}

.portal-transition__note span {
  font: 900 clamp(4px, .45vw, 7px)/1 Onest, system-ui, sans-serif;
  letter-spacing: .02em;
}

.portal-transition__coin {
  position: absolute;
  top: -12vh;
  left: calc(50% + var(--coin-x));
  display: grid;
  width: clamp(17px, 2.2vw, 29px);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 240, 178, .72);
  border-radius: 50%;
  color: #4b2448;
  background:
    radial-gradient(circle at 34% 28%, #fff5c5 0 7%, transparent 8%),
    radial-gradient(circle, #f6d77d 0 38%, #ce8b2e 40% 66%, #7f355f 69% 100%);
  box-shadow: 0 8px 22px rgba(4, 1, 10, .3);
  opacity: 0;
  place-items: center;
  font: 950 clamp(7px, .8vw, 11px)/1 Onest, system-ui, sans-serif;
  transform: translateX(-50%) rotate(var(--coin-rotation)) scale(var(--coin-scale));
  will-change: transform, opacity;
}

.portal-transition__coin::after {
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(90, 40, 71, .32);
  border-radius: 50%;
  content: "";
}

.portal-transition__copy {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 9px;
  text-align: center;
}

.portal-transition__copy small,
.portal-transition__copy span {
  font-family: Onest, system-ui, sans-serif;
  text-transform: uppercase;
}

.portal-transition__copy small {
  color: #e8b85b;
  font-size: clamp(7px, .72vw, 10px);
  font-weight: 850;
  letter-spacing: .24em;
}

.portal-transition__copy strong {
  color: #fff9eb;
  font-family: Onest, system-ui, sans-serif;
  font-size: clamp(30px, 5.6vw, 78px);
  font-weight: 950;
  letter-spacing: -.045em;
  line-height: .92;
  text-shadow: 0 12px 42px rgba(3, 1, 9, .65);
  text-transform: uppercase;
}

.portal-transition__copy span {
  color: rgba(255, 240, 210, .55);
  font-size: clamp(6px, .62vw, 9px);
  font-weight: 700;
  letter-spacing: .17em;
}

body.is-entering .hero { animation: scene-into-payout 1.05s cubic-bezier(.32, .72, .2, 1) both; }
body.is-entering .portal-transition {
  visibility: visible;
  animation: payout-open 1.05s ease-out both;
}
body.is-entering .portal-transition::before { animation: payout-sheen 1.05s ease-out both; }
body.is-entering .portal-transition__halo { animation: payout-halo 1.05s cubic-bezier(.2, .7, .2, 1) both; }
body.is-entering .portal-transition__copy { animation: payout-copy 1.05s cubic-bezier(.2, .7, .2, 1) both; }
body.is-entering .portal-transition__note {
  animation: payout-note .92s cubic-bezier(.18, .54, .28, 1) var(--note-delay) both;
}
body.is-entering .portal-transition__coin {
  animation: payout-coin .78s cubic-bezier(.2, .58, .3, 1) var(--coin-delay) both;
}

@keyframes blink {
  0%, 44%, 54%, 100% { transform: rotate(-4deg) scaleY(1); }
  49% { transform: rotate(-4deg) scaleY(0.08); }
}

@keyframes appear {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes wave { to { height: 15px; } }

@keyframes scroll-line {
  from { transform: translateY(-35%); }
  to { transform: translateY(200%); }
}

@keyframes mega-breathe {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.045); }
}

@keyframes mega-shine {
  0%, 54% { left: -42%; opacity: 0; }
  60% { opacity: 0.55; }
  72%, 100% { left: 118%; opacity: 0; }
}

@keyframes mega-click {
  0% { transform: scale(1); }
  34% { transform: translateY(4px) scale(0.965); }
  70% { transform: translateY(-1px) scale(1.012); }
  100% { transform: scale(1); }
}

@keyframes scene-into-payout {
  0% { opacity: 1; transform: scale(1); filter: brightness(1) saturate(1); }
  58% { opacity: .74; transform: scale(1.018); filter: brightness(.9) saturate(1.08); }
  100% { opacity: .16; transform: scale(1.035); filter: brightness(.45) saturate(1.12); }
}

@keyframes payout-open {
  0% { opacity: 0; }
  20%, 100% { opacity: 1; }
}

@keyframes payout-sheen {
  0% { opacity: 0; transform: translateX(-18%); }
  32% { opacity: 1; }
  100% { opacity: .45; transform: translateX(18%); }
}

@keyframes payout-halo {
  0% { opacity: 0; transform: scale(.72); }
  42% { opacity: 1; }
  100% { opacity: .72; transform: scale(1.05); }
}

@keyframes payout-copy {
  0% { opacity: 0; transform: translateY(16px) scale(.96); }
  38%, 82% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: .8; transform: translateY(-3px) scale(1.006); }
}

@keyframes payout-note {
  0% {
    opacity: 0;
    transform: perspective(480px) translate3d(-50%, -8vh, 0) rotateX(-18deg) rotateY(0deg) rotateZ(var(--note-rotation)) scale(var(--note-scale));
  }
  10% { opacity: .96; }
  34% {
    opacity: 1;
    transform: perspective(480px) translate3d(calc(-50% + var(--note-drift-a)), 34vh, 18px) rotateX(22deg) rotateY(72deg) rotateZ(var(--note-rotation-mid)) scale3d(var(--note-scale-thin), var(--note-scale), 1);
  }
  68% {
    opacity: 1;
    transform: perspective(480px) translate3d(calc(-50% + var(--note-drift-b)), 78vh, -12px) rotateX(-14deg) rotateY(-38deg) rotateZ(var(--note-rotation-late)) scale(var(--note-scale));
  }
  100% {
    opacity: 0;
    transform: perspective(480px) translate3d(calc(-50% + var(--note-drift)), 124vh, 0) rotateX(28deg) rotateY(34deg) rotateZ(var(--note-rotation-end)) scale(var(--note-scale-end));
  }
}

@keyframes payout-coin {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -6vh, 0) rotateY(0deg) rotateZ(var(--coin-rotation)) scale(var(--coin-scale));
  }
  15% { opacity: 1; }
  52% {
    opacity: 1;
    transform: translate3d(calc(-50% + var(--coin-drift-mid)), 48vh, 12px) rotateY(410deg) rotateZ(var(--coin-rotation-mid)) scale(var(--coin-scale));
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(-50% + var(--coin-drift)), 116vh, 0) rotateY(850deg) rotateZ(var(--coin-rotation-end)) scale(var(--coin-scale-end));
  }
}

@media (max-width: 1100px) {
  .hero__content { width: min(530px, 56vw); }
  .story__copy { width: min(390px, 44vw); }
  .story__beat--center .story__copy { width: min(570px, 82vw); }
  .story__beat--center .story__copy h2 { font-size: clamp(38px, 5.4vw, 58px); }
  .mega-cta { width: clamp(260px, 29vw, 304px); min-height: clamp(82px, 9vw, 94px); }
}

@media (max-width: 760px) {
  .shell { width: min(100% - 32px, 650px); }
  .nav { grid-template-columns: 1fr auto; padding-top: max(19px, env(safe-area-inset-top)); }
  .nav__stamp { display: none; }
  .sound__text { display: none; }

  .hero__content {
    top: 45%;
    width: calc(100% - 58px);
  }

  .hero h1 {
    font-size: clamp(44px, 13.5vw, 66px);
    letter-spacing: -0.07em;
  }

  .kicker { gap: 8px; }
  .kicker span { font-size: 9px; letter-spacing: 0.13em; }
  .kicker i { width: 17px; }
  .arara-line { margin: 13px 0 4px; font-size: 24px; }
  .intro { margin-block: 15px 23px; font-size: 16px; }
  .primary { min-width: 181px; padding: 14px 18px; }

  .side-note { display: none; }
  .scroll-mark small { display: none; }

  .story__beat {
    align-items: flex-end;
    padding: 18vh 24px max(16vh, 110px);
  }

  .story__beat--right { justify-content: flex-start; text-align: left; }

  .story__copy {
    width: min(88vw, 390px);
    padding-left: 18px;
    border-left: 1px solid rgba(234, 183, 90, 0.46);
  }

  .story__copy h2 { font-size: clamp(32px, 10vw, 48px); }
  .story__beat--right p { margin-left: 0; }

  .story__beat--center {
    align-items: center;
    justify-content: center;
    padding-bottom: 14vh;
    text-align: center;
  }

  .story__beat--center .story__copy {
    width: min(88vw, 420px);
    padding-left: 0;
    border-left: 0;
  }

  .story__beat--center .story__copy h2 { font-size: clamp(34px, 10.5vw, 50px); }
  .reveal-runway { height: 68svh; min-height: 340px; }
  .mega-cta { width: min(278px, 78vw); min-height: 84px; padding-inline: 22px 18px; }
  .mega-cta span { font-size: clamp(26px, 8vw, 32px); }
}

@media (max-width: 390px) {
  .hero__content { top: 43%; width: calc(100% - 34px); }
  .hero h1 { font-size: clamp(40px, 12.2vw, 47px); }
  .intro { margin-top: 13px; }
  .story__beat { padding-inline: 18px; }
  .story__beat--center .story__copy h2 { font-size: clamp(32px, 10vw, 40px); }
  .mega-cta { width: min(268px, 82vw); min-height: 82px; }
}

@media (max-aspect-ratio: 4/5) and (min-width: 761px) {
  .hero__content { width: min(560px, 70vw); }
}

@media (min-width: 761px) and (max-height: 720px) {
  .hero__content { top: 49%; width: min(500px, 46vw); }
  .nav { padding-top: max(18px, env(safe-area-inset-top)); }
  .story__beat { padding-block: 10vh; }
  .hero h1 { font-size: clamp(52px, 6.2vw, 82px); }
  .intro { margin-block: 13px 16px; }
  .mega-cta { min-height: 78px; }
}

@media (min-aspect-ratio: 2/1) and (min-width: 1000px) {
  .hero__content { width: min(500px, 38vw); }
  .hero h1 { font-size: clamp(58px, 6.3vw, 94px); }
  .story__copy h2 { font-size: clamp(32px, 3.4vw, 56px); }
  .story__beat--center .story__copy h2 { font-size: clamp(38px, 4vw, 64px); }
}

@media (max-height: 620px) and (orientation: landscape) {
  .hero__content { top: 52%; width: min(460px, 44vw); }
  .arara-line { margin-top: 9px; }
  .intro { margin-block: 10px 14px; }
  .scroll-mark { bottom: 12px; }
  .reveal-runway { height: 54svh; min-height: 230px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .hero__content { opacity: 1; transform: translate(-50%, -50%); }
  .cta-reveal { opacity: 1; transform: none; }
  .reveal-runway { height: 18svh; min-height: 90px; }
  .story__copy { opacity: 1; transform: none; }
  .scene { transform: scale(1.05); }
}

@media (prefers-reduced-data: reduce) {
  .atmosphere { display: none; }
  .primary { backdrop-filter: none; }
}

.motion-lite .atmosphere {
  filter: blur(18px);
}

.motion-lite .primary { backdrop-filter: none; }

/* -------------------------------------------------------------------------- */

:root {
  --font-display: "Arial Black", sans-serif;
  --font-ui: "Onest", "Segoe UI", sans-serif;
}

/* Clean, restrained typography for optional text overlays. */
.wordmark strong,
.hero h1,
.portal-transition strong {
  font-family: var(--font-display);
}

.wordmark strong {
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.08em;
}

.wordmark span {
  margin-top: 5px;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: lowercase;
}

.sound { gap: 0; }
.kicker { gap: 10px; }

.kicker span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

.arara-line {
  margin: 14px 0 9px;
  color: var(--gold);
  font-family: var(--font-ui);
  font-size: clamp(18px, 1.8vw, 26px);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: lowercase;
}

.hero h1 {
  color: #f6ead8;
  font-size: clamp(62px, 7.4vw, 116px);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.88;
  -webkit-text-stroke: 0;
  text-shadow:
    0 5px 0 #8d2033,
    0 17px 30px rgba(1, 0, 8, 0.76);
}

.hero__content {
  width: min(620px, 46vw);
}

.hero__content .mega-cta {
  margin-top: 24px;
}

.mega-cta {
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr;
  min-height: 78px;
  padding: 16px 18px 15px 24px;
}

.mega-cta span {
  grid-column: 1;
  grid-row: 1;
  font-size: clamp(24px, 2.1vw, 32px);
  letter-spacing: -0.02em;
}

.mega-cta b {
  grid-column: 2;
  grid-row: 1;
}

.scroll-mark { gap: 0; }

.portal-transition strong {
  font-weight: 400;
  -webkit-text-stroke: 0;
}

@media (max-width: 1100px) {
  .hero__content {
    width: min(560px, 52vw);
  }
}

@media (max-width: 760px) {
  .hero__content {
    top: 46%;
    width: calc(100% - 42px);
  }

  .hero h1 {
    font-size: clamp(46px, 14vw, 68px);
    letter-spacing: -0.06em;
  }

  .arara-line {
    margin: 11px 0 7px;
    font-size: 20px;
  }

  .mega-cta {
    width: min(252px, 74vw);
    min-height: 74px;
  }
}

@media (max-width: 390px) {
  .hero__content { top: 44%; }

  .hero h1 {
    font-size: clamp(42px, 12.8vw, 50px);
  }
}

/* -------------------------------------------------------------------------- */

/* Accessible labels and the live offer layout. */

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  font-family: sans-serif !important;
}

.mega-cta {
  isolation: isolate;
  position: relative;
  display: block;
  width: clamp(330px, 47vw, 720px);
  min-height: 0;
  aspect-ratio: 3 / 1;
  margin: 0 auto;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  color: transparent;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transform: translate3d(0, 0, 0) scale(1);
  transition: transform .26s cubic-bezier(.16, 1, .3, 1);
}

.mega-cta::before,
.mega-cta::after,
.mega-cta > b {
  display: none !important;
}

.mega-cta:hover {
  filter: none;
  transform: translate3d(0, -2px, 0) scale(1.012);
  box-shadow: none;
}

.mega-cta:active {
  transform: translate3d(0, 1px, 0) scale(.985);
}

.mega-cta.is-bursting {
  animation: mega-click .46s cubic-bezier(.16, 1, .3, 1);
}

.reveal-runway {
  height: 200svh;
  min-height: 200vh;
}

.hero__content {
  top: 50% !important;
  bottom: auto !important;
  left: 50%;
  width: min(920px, 100vw);
  opacity: 1 !important;
  transform: translate3d(-50%, -50%, 0) !important;
  pointer-events: none;
}

.cta-reveal {
  width: 100%;
  opacity: var(--cta-opacity, 0);
  transform:
    translate3d(0, var(--cta-y, 72px), 0)
    scale(var(--cta-scale, .9));
  transform-origin: 50% 50%;
  will-change: opacity, transform;
  pointer-events: none;
}

.hero.is-cta-visible .cta-reveal {
  pointer-events: auto;
}

@media (max-width: 900px), (any-pointer: coarse) {
  .atmosphere { display: none; }

  .hero__content {
    top: 52% !important;
    width: 100vw;
  }

  .mega-cta {
    width: min(94vw, 620px);
  }
}

@media (max-width: 430px) {
  .mega-cta { width: 96vw; }
}

@media (max-width: 1000px) and (orientation: landscape) and (max-height: 620px) {
  .hero__content { top: 51% !important; }
  .mega-cta { width: min(58vw, 590px); }
}

@media (prefers-reduced-motion: reduce) {
  .cta-reveal {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* Scroll geometry and compositor budget. */

html,
body,
.hero {
  touch-action: pan-y;
}

.scene {
  background-image: url("/assets/scene-2_5d/plates/clean-far.webp") !important;
}

.reveal-runway {
  height: 520svh !important;
  min-height: 520vh !important;
}

.cta-reveal {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform, opacity;
}

@media (max-width: 900px), (any-pointer: coarse) {
  .hero {
    height: 100svh !important;
    min-height: 100svh !important;
  }

  .reveal-runway {
    height: 400svh !important;
    min-height: 400svh !important;
  }

  .cta-reveal {
    transform-style: flat;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-reveal {
    will-change: auto;
  }
}