/* ==========================================================================
   DEGENERATE — CINEMATIC ENTRANCE
   A self-contained overlay above the homepage. Nothing here styles the site.
   Everything is scoped to .dgi / html.dgi-on.
   ========================================================================== */

/* Before the overlay mounts: black cover, so the homepage never flashes. */
html.dgi-on { background: #000; overflow: hidden; }
html.dgi-on body { overflow: hidden; }
html.dgi-on.dgi-reveal { background: transparent; }
html.dgi-on:not(.dgi-mounted) body::before {
  content: ""; position: fixed; inset: 0; z-index: 2147483000; background: #000;
}

.dgi {
  --mint: #48D7AE;
  --peach: #FF9F68;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --cond: "wdth" 62;

  position: fixed; inset: 0;
  z-index: 2147483001;
  overflow: hidden;
  background: #000;
  color: #fff;
  font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: none;
}
.dgi *, .dgi *::before, .dgi *::after { box-sizing: border-box; margin: 0; padding: 0; }
.dgi.is-done { pointer-events: none; }

/* Wide screens: a portrait stage, centred, with the same image as an ambient fill. */
.dgi__ambient {
  position: absolute; inset: -40px;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.dgi__ambient img {
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(34px) brightness(.38) saturate(1.1);
}
.dgi__ambient.is-on { opacity: 1; }

.dgi__stage {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: min(100vw, 56.25vh);
  transform: translateX(-50%);
  container-type: inline-size;
  overflow: hidden;
}
@media (max-aspect-ratio: 3/4) { .dgi__stage { width: 100vw; } }

/* ---------- Backgrounds ---------- */
.dgi__bg {
  position: absolute; inset: 0;
  opacity: 0;
  will-change: transform, opacity, filter;
}
.dgi__bg img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.dgi__bg--mars img  { object-position: 72% 50%; }
.dgi__bg--earth img { object-position: 50% 50%; }

/* Scrims carry legibility; the photographs stay untouched. */
.dgi__bg::after { content: ""; position: absolute; inset: 0; transition: opacity .9s ease; }
.dgi__bg--mars::after {
  background:
    linear-gradient(to bottom, rgba(0,0,0,.45) 0, rgba(0,0,0,0) 14%),
    linear-gradient(to top, rgba(0,0,0,.55) 0, rgba(0,0,0,0) 26%);
}
.dgi__bg--earth::after {
  background: radial-gradient(ellipse 85% 34% at 50% 57%, rgba(0,0,0,.62), rgba(0,0,0,0) 100%);
}
.dgi__dim {                                   /* extra dim for Stage 03 copy */
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 95% 42% at 50% 36%, rgba(0,0,0,.55), rgba(0,0,0,0) 100%);
  opacity: 0; transition: opacity .9s ease;
}

/* Stage 01 → 02: from darkness into another world */
.dgi__bg--mars { transform: scale(1.14); filter: brightness(.25); }
.dgi.s-mars .dgi__bg--mars {
  opacity: 1; transform: scale(1); filter: brightness(1);
  transition: opacity 1.3s ease, transform 2.2s var(--ease-out), filter 1.8s ease;
}
/* Stage 03: very subtle camera push, same frame */
.dgi.s-confirm .dgi__bg--mars {
  transform: scale(1.045);
  transition: transform 3.4s cubic-bezier(.25,.1,.25,1);
}
.dgi.s-confirm .dgi__dim { opacity: 1; }
/* Stage 03 → 04 */
.dgi.s-earth .dgi__bg--mars {
  opacity: 0; transform: scale(1.16); filter: brightness(.4);
  transition: opacity .9s ease-in, transform 1.1s ease-in, filter .9s ease;
}
.dgi__bg--earth { transform: scale(1.12) translateY(2%); }
.dgi.s-earth .dgi__bg--earth {
  opacity: 1; transform: none;
  transition: opacity 1.2s ease .35s, transform 2.6s var(--ease-out) .35s;
}

/* ---------- Chrome ---------- */
.dgi__logo {
  position: absolute; left: 0; right: 0;
  top: calc(env(safe-area-inset-top, 0px) + 22px);
  text-align: center;
  font-size: 14px; font-weight: 800; font-variation-settings: "wdth" 125;
  letter-spacing: -0.018em; line-height: 1;
  opacity: 0; transform: translateY(-6px);
  transition: opacity .8s ease, transform .9s var(--ease-out);
}
.dgi__logo sup { font-size: 5.5px; font-weight: 500; margin-left: 2px; vertical-align: top; position: relative; top: -1px; }
.dgi.has-logo .dgi__logo { opacity: 1; transform: none; }

.dgi__skip {
  position: absolute; right: 16px;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  height: 30px; padding: 0 6px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
  opacity: 0; transition: opacity .6s ease .8s, color .2s ease;
}
.dgi__skip:hover { color: #fff; }
.dgi__skip:focus-visible, .dgi button:focus-visible { outline: 1px solid rgba(255,255,255,.8); outline-offset: 3px; }
.dgi.has-logo .dgi__skip { opacity: 1; }

/* ---------- Type ---------- */
.dgi__h {
  font-weight: 900;
  font-variation-settings: var(--cond);
  text-transform: uppercase;
  letter-spacing: -0.012em;
  line-height: .87;
}
.dgi__h .ln { display: block; overflow: hidden; padding-bottom: .04em; margin-bottom: -.04em; }
.dgi__h .ln > span { display: inline-block; transform: translateY(108%); transition: transform .9s var(--ease-out); }
.dgi__h .ln:nth-child(2) > span { transition-delay: .09s; }
.dgi__h .ln:nth-child(3) > span { transition-delay: .18s; }
.dgi__h .ln:nth-child(4) > span { transition-delay: .27s; }
.is-in .dgi__h .ln > span, .dgi__h.is-in .ln > span { transform: none; }
.dgi .q { color: var(--peach); }

.dgi__track {
  font-size: 10px; font-weight: 500;
  letter-spacing: .22em; line-height: 1.75;
  text-transform: uppercase;
}

.dgi__scene {
  position: absolute; inset: 0;
  visibility: hidden;
}
.dgi__scene.is-live { visibility: visible; }

/* ---------- Stage 01 — The opening ---------- */
.dgi__s1 { display: grid; place-items: center; text-align: center; }
.dgi__s1 .dgi__h { font-size: 14.3cqw; margin-top: -10vh; }
.dgi .dgi__s1 .dgi__h .ln--or > span {
  color: var(--peach);
  transform: translateY(60%) scale(.9);
  opacity: 0;
  transition: transform .42s cubic-bezier(.2, 1.5, .35, 1), opacity .16s linear;
  transition-delay: 0s !important;
}
.dgi .dgi__s1.is-or .dgi__h .ln--or > span { transform: none; opacity: 1; }
.dgi__s1 .ln--or { margin-top: .05em; }
.dgi__cue {
  position: absolute; left: 0; right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 9vh);
  display: grid; justify-items: center; gap: 18px;
  font-size: 8.5px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(255,255,255,.7);
  opacity: 0; transition: opacity .7s ease;
}
.dgi__cue i { display: block; width: 1px; height: 38px; background: rgba(255,255,255,.75); transform-origin: top; transform: scaleY(0); transition: transform .8s var(--ease-out); }
.dgi__s1.is-cue .dgi__cue { opacity: 1; }
.dgi__s1.is-cue .dgi__cue i { transform: none; }
.dgi__s1.is-out .dgi__h, .dgi__s1.is-out .dgi__cue {
  opacity: 0; filter: blur(8px); transform: translateY(-14px);
  transition: opacity .55s ease, filter .55s ease, transform .7s ease;
}

/* ---------- Stage 02 — The prediction ---------- */
.dgi__q {
  position: absolute;
  left: 8.2cqw; right: 6cqw;
  top: calc(22.85% - 1.9cqw);
  font-size: 12.4cqw;
  text-shadow: 0 2px 30px rgba(0,0,0,.28);
}
.dgi__s2.is-out .dgi__q .ln > span {
  transform: translateY(-110%);
  transition: transform .55s cubic-bezier(.55, 0, .7, .2);
}
.dgi__s2.is-out .dgi__q .ln:nth-child(2) > span { transition-delay: .05s; }
.dgi__s2.is-out .dgi__q .ln:nth-child(3) > span { transition-delay: .1s; }
.dgi__s2.is-out .dgi__q .ln:nth-child(4) > span { transition-delay: .15s; }

.dgi__picks {
  position: absolute;
  left: 7.1cqw; right: 5.4cqw;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 15.5cqw);
  display: grid; grid-template-columns: 1fr 1fr; gap: 2.3cqw;
}
.dgi__pick {
  position: relative;
  height: 13.8cqw; min-height: 50px;
  border-radius: 999px;
  border: 1.5px solid;
  background: rgba(8, 15, 12, .78);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: inherit;
  font-size: 7.6cqw; font-weight: 800;
  font-variation-settings: "wdth" 92;
  letter-spacing: -0.01em;
  cursor: pointer;
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s ease, transform .9s var(--ease-out), box-shadow .3s ease, border-color .3s ease, background-color .3s ease;
}
.dgi__pick--yes { color: var(--mint); border-color: rgba(72, 215, 174, .62); box-shadow: inset 0 0 18px rgba(72,215,174,.08); }
.dgi__pick--no  { color: var(--peach); border-color: rgba(255, 159, 104, .62); box-shadow: inset 0 0 18px rgba(255,159,104,.08); background: rgba(16, 10, 7, .78); }
.dgi__s2.is-btn .dgi__pick { opacity: 1; transform: none; }
@media (hover: hover) {
  .dgi__pick--yes:hover { border-color: var(--mint); box-shadow: inset 0 0 22px rgba(72,215,174,.18), 0 0 24px rgba(72,215,174,.18); }
  .dgi__pick--no:hover  { border-color: var(--peach); box-shadow: inset 0 0 22px rgba(255,159,104,.18), 0 0 24px rgba(255,159,104,.18); }
}
.dgi__pick:active { transform: scale(.97); transition-duration: .08s; }
/* Picked: tactile press, pulse, lift */
.dgi__pick.is-picked {
  transform: scale(1.06);
  border-color: currentColor;
  transition: transform .5s cubic-bezier(.2, 1.6, .35, 1), border-color .2s ease, box-shadow .3s ease;
}
.dgi__pick--yes.is-picked { box-shadow: inset 0 0 26px rgba(72,215,174,.25), 0 0 34px rgba(72,215,174,.35); }
.dgi__pick--no.is-picked  { box-shadow: inset 0 0 26px rgba(255,159,104,.25), 0 0 34px rgba(255,159,104,.35); }
.dgi__pick::after {
  content: ""; position: absolute; inset: -1.5px; border-radius: inherit;
  border: 1.5px solid currentColor; opacity: 0; pointer-events: none;
}
.dgi__pick.is-picked::after { animation: dgi-pulse .9s var(--ease-out) forwards; }
@keyframes dgi-pulse {
  0%   { opacity: .75; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.35, 1.9); }
}
.dgi__pick.is-dropped { opacity: 0; transform: scale(.94); transition: opacity .35s ease, transform .45s ease; }
.dgi__s2.is-out .dgi__pick.is-picked {
  opacity: 0; transform: scale(1.06) translateY(12px);
  transition: opacity .45s ease .45s, transform .6s ease .45s;
}

/* ---------- Stage 03 — The confirmation ---------- */
.dgi__s3 {
  display: grid; justify-items: center; align-content: start;
  text-align: center;
  padding-top: calc(22.5vh - 7cqw);
  padding-top: calc(22.5dvh - 7cqw);
}
.dgi__tick { width: 13cqw; height: 13cqw; max-width: 60px; max-height: 60px; overflow: visible; }
.dgi__tick circle { fill: rgba(0,0,0,.35); stroke: var(--peach); stroke-width: 1.6; stroke-dasharray: 151; stroke-dashoffset: 151; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset .75s cubic-bezier(.65,0,.35,1); }
.dgi__tick path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 26; stroke-dashoffset: 26; transition: stroke-dashoffset .38s cubic-bezier(.65,0,.35,1) .62s; }
.dgi__s3.is-in .dgi__tick circle, .dgi__s3.is-in .dgi__tick path { stroke-dashoffset: 0; }
.dgi__s3 .dgi__h { margin-top: 6cqw; font-size: 8.8cqw; }
.dgi__s3 .dgi__h .ln > span { transition-delay: .55s; }
.dgi__s3 .dgi__h .ln:nth-child(2) > span { transition-delay: .64s; }
.dgi__s3 .dgi__track { margin-top: 5.5cqw; opacity: 0; transition: opacity 1s ease 1.15s; text-shadow: 0 1px 14px rgba(0,0,0,.5); }
.dgi__s3.is-in .dgi__track { opacity: 1; }
.dgi .dgi__s3.is-out > * { opacity: 0; transform: translateY(-10px); transition: opacity .45s ease, transform .6s ease; }

/* ---------- Stage 04 — Every moment has a price ---------- */
.dgi__s4 {
  display: grid; justify-items: center; align-content: start;
  text-align: center;
  padding-top: 49vh;
  padding-top: 49dvh;
}
.dgi__s4 .dgi__h { font-size: 12.45cqw; }
.dgi__s4 .dgi__track { margin-top: 6.5cqw; opacity: 0; transition: opacity .9s ease .6s; }
.dgi__s4.is-in .dgi__track { opacity: 1; }
.dgi__bar {
  position: relative;
  width: 44cqw; height: 2px; margin-top: 11cqw;
  background: rgba(255,255,255,.18);
  overflow: hidden;
  opacity: 0; transition: opacity .6s ease .8s;
}
.dgi__bar i { position: absolute; inset: 0; background: var(--peach); transform-origin: left; transform: scaleX(0); }
.dgi__s4.is-in .dgi__bar { opacity: 1; }
.dgi__s4.is-run .dgi__bar i { transform: scaleX(1); transition: transform var(--bar, 2.2s) cubic-bezier(.45,.05,.4,1); }
.dgi .dgi__s4.is-out > * { opacity: 0; transition: opacity .3s ease; }

/* ---------- Stage 05 — Into the website ---------- */
.dgi__strips { position: absolute; inset: 0; visibility: hidden; }
.dgi__strips.is-live { visibility: visible; }
.dgi__strip {
  position: absolute; top: 0; bottom: 0;
  overflow: hidden;
  will-change: transform;
}
.dgi__strip > div { position: absolute; top: 0; bottom: 0; }
.dgi__strip img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.dgi__strip::after {                          /* glass edge, as in the storyboard */
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px;
  background: linear-gradient(to bottom, rgba(255,255,255,.08), rgba(255,255,255,.55) 45%, rgba(255,255,255,.12));
  opacity: 0; transition: opacity .2s ease;
}
.dgi__strip::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right, rgba(0,0,0,0) 55%, rgba(0,0,0,.45));
  opacity: 0; transition: opacity .25s ease;
}
.dgi.s-wipe .dgi__strip::after, .dgi.s-wipe .dgi__strip::before { opacity: 1; }


/* ---------- Reduced motion: same story, no travel ---------- */
@media (prefers-reduced-motion: reduce) {
  .dgi *, .dgi *::before, .dgi *::after { transition-duration: .4s !important; transition-delay: 0s !important; animation: none !important; }
  .dgi__bg, .dgi.s-mars .dgi__bg--mars, .dgi.s-confirm .dgi__bg--mars, .dgi.s-earth .dgi__bg--mars, .dgi__bg--earth, .dgi.s-earth .dgi__bg--earth { transform: none !important; filter: none !important; }
  .dgi .dgi__h .ln > span { transform: none !important; opacity: 0; }
  .dgi .is-in .dgi__h .ln > span, .dgi .dgi__h.is-in .ln > span { opacity: 1; }
  .dgi .dgi__s1 .dgi__h .ln--or > span { opacity: 0; }
  .dgi .dgi__s1.is-or .dgi__h .ln--or > span { opacity: 1; }
  .dgi .dgi__s2.is-out .dgi__q .ln > span { opacity: 0; }
  .dgi__pick, .dgi__s2.is-btn .dgi__pick, .dgi__pick.is-picked, .dgi__pick.is-dropped { transform: none !important; }
  .dgi__s4.is-run .dgi__bar i { transition-duration: 1.6s !important; }
}