/* ======================================================
   Sayonara_Alice.exe — v72 immersive opening
   Memory Gateway / cinematic entry
====================================================== */

:root {
  --v72-ink: #02040b;
  --v72-night: #050914;
  --v72-cyan: #8cf7ff;
  --v72-electric: #1fd7ff;
  --v72-blue: #4072ff;
  --v72-white: #eefeff;
  --v72-crimson: #b51f46;
  --v72-ease: cubic-bezier(.16, 1, .3, 1);
}

/* --- il canvas del documento -------------------------------------------
   Questa regola non colora l'elemento html: per specifica il background del
   root viene propagato al canvas, che si estende oltre il box del root. E'
   quindi l'unica superficie della pagina che raggiunge le fasce lasciate da
   Safari ai lati di un iPhone in landscape. Il background di `body` non ci
   arriva mai: subentrerebbe solo se il root fosse del tutto trasparente, e
   qui non lo e'.

   Prima era `var(--v72-ink)`, un colore piatto. Le fasce restavano quindi a
   #02040b mentre il contenuto accanto respirava; misurato sul bordo, lo
   scarto tocca 32/255 sul canale blu fra l'8% e il 30% del documento --
   cioe' esattamente hero e prime sezioni, dove si guarda in landscape.

   Le fermate qui sotto sono quel bordo, campionato. Il gradiente e' 180deg,
   quindi uniforme in orizzontale: dove viene disegnato nelle fasce riproduce
   il colore del bordo adiacente alla stessa altezza. Le aree di
   posizionamento coincidono (html e body hanno lo stesso box, margini e
   padding a zero), percio' le due atmosfere restano allineate a qualunque
   scroll.

   I due radial di `body` restano dove sono di proposito: fuori dall'area di
   posizionamento si piastrellerebbero, ricominciando da capo sul bordo.

   LE DUE PROPRIETA' SONO SEPARATE, E NON E' UNO STILE: E' IL PUNTO.
   La shorthand `background: <gradiente>` riporta `background-color` a
   `initial`, cioe' trasparente. Scritta cosi', su Safari reale le fasce sono
   risultate BIANCHE: il motore non vi disegna il background-image e resta
   con il colore del root, che era stato azzerato. Chromium invece estende
   l'immagine e il difetto non si vedeva -- una divergenza che nessun test
   locale poteva mostrare.

   Le due longhand danno quindi due esiti, entrambi accettabili:
     - se il motore disegna l'immagine nelle fasce -> si vede il gradiente;
     - se disegna solo il colore            -> si torna a #02040b, il valore
       che le fasce avevano prima di questo intervento.
   Il bianco non e' piu' raggiungibile. Non aggiungere mai un colore alle
   fermate del gradiente al posto di questa riga: e' il colore del root, non
   il gradiente, l'unica cosa su cui si puo' contare fuori dal viewport.

   Nessuna geometria cambia -- il background non partecipa al layout. Il
   token --v72-ink resta invariato: serve ancora alla .v72-opening-visual.
   --------------------------------------------------------------------- */
html {
  background-color: var(--v72-ink);
  background-image: linear-gradient(180deg,
    #020f1f 0%,
    #021325 4%,
    #02172b 8%,
    #03192b 15%,
    #041b28 30%,
    #051119 45%,
    #04070c 70%,
    #020407 100%);
}

body.v72-home {
  background:
    radial-gradient(circle at 70% 4%, rgba(20, 84, 190, .13), transparent 34rem),
    #05070d;
}

/* v72 abandons the old decorative side rails. The Memory Spine is the
   only persistent vertical navigation language from this version onward. */
body.v72-home .sayonara-edge-rails,
body.v72-archive .sayonara-edge-rails,
body.v72-home > .scroll-indicator {
  display: none !important;
}

.v72-opening {
  position: relative;
  z-index: 21000;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  align-items: stretch;
  background: var(--v72-ink);
  color: var(--v72-white);
}

.v72-opening::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2,4,11,.98) 0%, rgba(2,4,11,.91) 22%, rgba(2,4,11,.36) 58%, rgba(2,4,11,.05) 100%),
    linear-gradient(180deg, rgba(0,0,0,.32), transparent 22%, transparent 70%, rgba(0,0,0,.86));
}

.v72-opening::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .38;
  background:
    linear-gradient(90deg, transparent 0 7.9%, rgba(112,236,255,.10) 8%, transparent 8.1%),
    linear-gradient(180deg, transparent 0 14.9%, rgba(112,236,255,.08) 15%, transparent 15.1%),
    radial-gradient(circle at 74% 46%, transparent 0 18%, rgba(44,122,255,.08) 18.2%, transparent 18.7% 24%, rgba(87,225,255,.05) 24.2%, transparent 24.7%);
  background-size: 100% 100%, 100% 100%, 100% 100%;
  mix-blend-mode: screen;
}

.v72-opening-visual {
  position: absolute;
  inset: -3%;
  z-index: 0;
  margin: 0;
  overflow: hidden;
  background: #02040b;
}

.v72-opening-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 73% 46%, rgba(76,185,255,.16), transparent 29%),
    linear-gradient(90deg, rgba(0,0,0,.88), transparent 58%),
    linear-gradient(180deg, rgba(0,0,0,.18), transparent 60%, rgba(0,0,0,.72));
}

.v72-opening-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 70% 43%;
  filter: brightness(.73) contrast(1.08) saturate(1.04);
  transform: scale(1.055);
  animation: v72OpeningBreath 15s ease-in-out infinite alternate;
  will-change: transform, filter;
}

.v72-opening-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-shadow:
    inset 0 0 12vw 3vw rgba(0,0,0,.62),
    inset 0 -18vh 20vh rgba(0,0,0,.48);
}

.v72-opening-noise {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: .13;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(165,244,255,.13) 4px, transparent 5px),
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.10) 0 1px, transparent 1.5px),
    radial-gradient(circle at 80% 70%, rgba(129,235,255,.08) 0 1px, transparent 1.5px);
  background-size: 100% 7px, 27px 31px, 39px 43px;
  mix-blend-mode: screen;
  mask-image: linear-gradient(90deg, transparent, #000 24%, #000 100%);
}

.v72-opening-shell {
  position: relative;
  z-index: 6;
  width: min(1680px, 100%);
  min-height: inherit;
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 3.3rem) clamp(1.25rem, 5.2vw, 6.8rem) clamp(1.4rem, 4vw, 3.6rem);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(250px, .95fr);
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(2rem, 5vw, 7rem);
}

.v72-opening-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  color: rgba(212,250,255,.64);
  font: 700 clamp(.59rem, .75vw, .72rem)/1.3 "Courier New", Consolas, monospace;
  letter-spacing: .2em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-12px);
  animation: v72CopyReveal .8s var(--v72-ease) .12s forwards;
}

.v72-opening-header::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 23rem;
  background: linear-gradient(90deg, rgba(120,240,255,.3), transparent);
}

.v72-opening-status {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  white-space: nowrap;
}

.v72-opening-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--v72-cyan);
  box-shadow: 0 0 9px rgba(95,239,255,.92), 0 0 24px rgba(64,114,255,.5);
  animation: v72StatusPulse 2.6s ease-in-out infinite;
}

.v72-opening-copy {
  align-self: center;
  max-width: min(760px, 100%);
  padding: clamp(3rem, 10vh, 8rem) 0 clamp(3rem, 7vh, 6rem);
  opacity: 0;
  transform: translateY(28px);
  animation: v72CopyReveal 1.1s var(--v72-ease) .25s forwards;
}

.v72-opening-kicker {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0 0 clamp(1.3rem, 3vh, 2.2rem);
  color: rgba(186,247,255,.72);
  font: 700 clamp(.66rem, .78vw, .78rem)/1.3 "Courier New", Consolas, monospace;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.v72-opening-kicker::before {
  content: "";
  width: clamp(2.8rem, 5vw, 5.8rem);
  height: 1px;
  background: linear-gradient(90deg, var(--v72-electric), rgba(31,215,255,.08));
  box-shadow: 0 0 12px rgba(31,215,255,.42);
}

.v72-opening-title {
  margin: 0;
  width: min-content;
  min-width: 100%;
  font-family: "Segoe UI", Arial, sans-serif;
  font-weight: 800;
  line-height: .78;
  letter-spacing: -.073em;
  text-transform: uppercase;
  text-wrap: balance;
}

.v72-title-line {
  display: block;
}

.v72-title-sayonara {
  font-size: clamp(3.4rem, 8.7vw, 9.4rem);
  color: rgba(240,254,255,.95);
  text-shadow: 0 0 42px rgba(73,166,255,.12);
}

.v72-title-underscore {
  color: #80efff;
  font-weight: 500;
  text-shadow: 0 0 18px rgba(45,218,255,.35);
}

.v72-title-alice {
  margin-top: .12em;
  padding-right: .08em;
  font-size: clamp(4.15rem, 10.4vw, 11.4rem);
  color: transparent;
  background: linear-gradient(108deg, #f4ffff 0%, #aaf8ff 24%, #28d9ff 58%, #5578ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 22px rgba(26,205,255,.18));
}

.v72-title-extension {
  display: inline-block;
  margin-left: .08em;
  font: 500 .18em/1 "Courier New", Consolas, monospace;
  letter-spacing: .04em;
  color: rgba(203,251,255,.78);
  vertical-align: .23em;
  text-transform: none;
}

.v72-opening-subtitle {
  max-width: 37rem;
  margin: clamp(1.7rem, 4vh, 2.7rem) 0 0;
  color: rgba(225,249,255,.76);
  font-size: clamp(1rem, 1.35vw, 1.3rem);
  line-height: 1.65;
  letter-spacing: .015em;
  text-shadow: 0 2px 18px rgba(0,0,0,.8);
}

.v72-opening-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .85rem 1rem;
  margin-top: clamp(1.7rem, 4vh, 2.9rem);
}

.v72-enter,
.v72-archive-link {
  min-height: 48px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .72rem;
  padding: .84rem 1.2rem;
  border-radius: 999px;
  font: 800 .72rem/1 "Courier New", Consolas, monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .35s var(--v72-ease), border-color .35s ease, background .35s ease, box-shadow .35s ease, color .35s ease;
}

.v72-enter {
  border: 1px solid rgba(173,249,255,.66);
  background: linear-gradient(110deg, rgba(220,253,255,.95), rgba(129,240,255,.9));
  color: #03101a;
  box-shadow: 0 0 0 1px rgba(0,215,255,.08), 0 12px 38px rgba(0,156,255,.14), inset 0 1px 0 rgba(255,255,255,.82);
}

.v72-enter::after {
  content: "↓";
  font-size: 1rem;
  transition: transform .35s var(--v72-ease);
}

.v72-archive-link {
  border: 1px solid rgba(130,228,255,.22);
  background: rgba(3,12,25,.36);
  color: rgba(220,251,255,.77);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.v72-enter:hover,
.v72-enter:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px rgba(0,215,255,.15), 0 16px 50px rgba(0,202,255,.25), 0 0 32px rgba(70,114,255,.16);
  outline: none;
}

.v72-enter:hover::after,
.v72-enter:focus-visible::after {
  transform: translateY(3px);
}

.v72-archive-link:hover,
.v72-archive-link:focus-visible {
  transform: translateY(-2px);
  color: #efffff;
  border-color: rgba(130,239,255,.52);
  background: rgba(12,41,68,.46);
  box-shadow: 0 10px 34px rgba(0,120,220,.13);
  outline: none;
}

.v72-opening-side {
  align-self: center;
  justify-self: end;
  width: min(280px, 100%);
  display: grid;
  gap: .8rem;
  padding: 1.1rem 0;
  opacity: 0;
  transform: translateX(24px);
  animation: v72SideReveal 1s var(--v72-ease) .52s forwards;
}

.v72-opening-axis {
  display: grid;
  gap: .25rem;
}

.v72-axis-row {
  position: relative;
  display: grid;
  grid-template-columns: 2.7rem 1fr auto;
  align-items: center;
  gap: .85rem;
  min-height: 43px;
  color: rgba(207,246,255,.55);
  font: 700 .64rem/1.25 "Courier New", Consolas, monospace;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.v72-axis-row::before {
  content: "";
  position: absolute;
  left: 3.55rem;
  right: 4.2rem;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, rgba(87,226,255,.32), rgba(87,226,255,.04));
}

.v72-axis-index {
  color: rgba(137,239,255,.86);
}

.v72-axis-name,
.v72-axis-code {
  position: relative;
  z-index: 1;
  background: rgba(3,7,15,.54);
}

.v72-axis-name { padding-right: .6rem; }
.v72-axis-code { padding-left: .55rem; color: rgba(122,164,255,.78); }

.v72-opening-signature {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(115,225,255,.12);
  color: rgba(209,245,255,.44);
  font: 600 .61rem/1.6 "Courier New", Consolas, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.v72-opening-footer {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 1.5rem;
  opacity: 0;
  animation: v72CopyReveal .9s var(--v72-ease) .75s forwards;
}

.v72-opening-coordinate {
  color: rgba(190,241,255,.34);
  font: 600 .58rem/1.5 "Courier New", Consolas, monospace;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.v72-opening-coordinate:last-child {
  text-align: right;
}

.v72-scroll-cue {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(218,251,255,.58);
  display: grid;
  justify-items: center;
  gap: .62rem;
  padding: .2rem 1rem;
  font: 700 .58rem/1 "Courier New", Consolas, monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
}

.v72-scroll-cue:hover,
.v72-scroll-cue:focus-visible {
  color: #efffff;
  outline: none;
}

.v72-scroll-cue-line {
  position: relative;
  display: block;
  width: 1px;
  height: 31px;
  overflow: hidden;
  background: rgba(104,225,255,.18);
}

.v72-scroll-cue-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent, #a7f9ff, transparent);
  transform: translateY(-100%);
  animation: v72ScrollLine 2s ease-in-out infinite;
}

.v72-memory-orbit {
  position: absolute;
  z-index: 5;
  right: clamp(7vw, 9vw, 11vw);
  top: 50%;
  width: min(44vw, 670px);
  aspect-ratio: 1;
  border: 1px solid rgba(105,226,255,.06);
  border-radius: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  box-shadow: 0 0 70px rgba(20,98,255,.04), inset 0 0 70px rgba(20,98,255,.03);
  animation: v72OrbitDrift 18s linear infinite;
}

.v72-memory-orbit::before,
.v72-memory-orbit::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  border: 1px solid rgba(105,226,255,.055);
}

.v72-memory-orbit::before { inset: 9%; }
.v72-memory-orbit::after { inset: 22%; border-style: dashed; }

/* Enter transition: the scene recedes into the archive instead of simply
   disappearing. The section remains in document flow, so no layout jump. */
body.is-entering .v72-opening-copy,
body.is-entering .v72-opening-side,
body.is-entering .v72-opening-header,
body.is-entering .v72-opening-footer {
  opacity: 0 !important;
  transform: translateY(-22px) !important;
  transition: opacity .42s ease, transform .62s var(--v72-ease);
}

body.is-entering .v72-opening-image {
  transform: scale(1.11);
  filter: brightness(.98) contrast(1.12) saturate(1.12);
  transition: transform 1.1s var(--v72-ease), filter .7s ease;
}

body.is-entering .v72-opening::before {
  opacity: .35;
  transition: opacity .7s ease;
}

/* The historical navbar remains intact but is off-stage during the gateway. */
html.v72-js body.is-opening #site-navbar,
html.v72-js body.is-entering #site-navbar {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none !important;
  translate: 0 -145%;
}

html.v72-js body.has-entered #site-navbar,
body.v72-archive #site-navbar {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition: opacity .52s ease, translate .9s var(--v72-ease), width .35s ease, padding .35s ease, background .35s ease !important;
}

/* A lighter first landing after the gateway; contents and features are kept. */
body.v72-home .hero-manifest {
  position: relative;
  min-height: min(920px, 96svh);
  padding-top: clamp(8rem, 13vh, 11rem);
  background:
    radial-gradient(circle at 72% 42%, rgba(41,123,255,.16), transparent 33rem),
    linear-gradient(180deg, #03050b, #070b13 72%, transparent);
}

body.v72-home .hero-manifest::before {
  content: "SIGNAL / MEMORY / WORLD";
  position: absolute;
  top: clamp(5.8rem, 10vh, 7.5rem);
  left: clamp(1.1rem, 5vw, 6rem);
  color: rgba(130,226,255,.28);
  font: 700 .58rem/1 "Courier New", Consolas, monospace;
  letter-spacing: .22em;
}

body.v72-home .hero-manifest .hero-art-frame {
  box-shadow: 0 28px 90px rgba(0,0,0,.48), 0 0 60px rgba(22,113,255,.09);
}

@keyframes v72OpeningBreath {
  0% { transform: scale(1.055) translate3d(0, 0, 0); filter: brightness(.70) contrast(1.08) saturate(1.02); }
  100% { transform: scale(1.09) translate3d(-.5%, -.4%, 0); filter: brightness(.78) contrast(1.1) saturate(1.08); }
}

@keyframes v72CopyReveal {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes v72SideReveal {
  to { opacity: 1; transform: translateX(0); }
}

@keyframes v72StatusPulse {
  0%, 100% { opacity: .42; transform: scale(.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

@keyframes v72ScrollLine {
  0% { transform: translateY(-100%); }
  55%, 100% { transform: translateY(120%); }
}

@keyframes v72OrbitDrift {
  to { transform: translateY(-50%) rotate(360deg); }
}

@media (max-width: 1100px) {
  .v72-opening-shell {
    grid-template-columns: minmax(0, 1fr) minmax(200px, .4fr);
    column-gap: 2rem;
  }
  .v72-opening-side { width: min(225px, 100%); }
  .v72-axis-row { grid-template-columns: 2.3rem 1fr; }
  .v72-axis-row::before { left: 3rem; right: 0; }
  .v72-axis-code { display: none; }
}

@media (max-width: 780px) {
  .v72-opening::before {
    background:
      linear-gradient(180deg, rgba(2,4,11,.35) 0%, rgba(2,4,11,.16) 31%, rgba(2,4,11,.78) 64%, rgba(2,4,11,.98) 100%),
      linear-gradient(90deg, rgba(2,4,11,.28), transparent 75%);
  }

  .v72-opening-image {
    object-position: 52% 34%;
    filter: brightness(.7) contrast(1.08) saturate(1.03);
  }

  .v72-opening-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    padding: 1.15rem clamp(1rem, 5vw, 1.7rem) max(1rem, env(safe-area-inset-bottom));
  }

  .v72-opening-header {
    font-size: .56rem;
    letter-spacing: .15em;
  }

  .v72-opening-header::after { display: none; }

  .v72-opening-copy {
    align-self: end;
    width: 100%;
    padding: 40vh 0 clamp(1.2rem, 4vh, 2.2rem);
  }

  .v72-opening-kicker { margin-bottom: 1.1rem; }

  .v72-title-sayonara { font-size: clamp(2.65rem, 14vw, 5.2rem); }
  .v72-title-alice { font-size: clamp(3.2rem, 16.8vw, 6.3rem); }

  .v72-opening-subtitle {
    max-width: 31rem;
    margin-top: 1.3rem;
    font-size: clamp(.9rem, 3.7vw, 1.08rem);
    line-height: 1.5;
  }

  .v72-opening-side { display: none; }

  .v72-opening-actions {
    margin-top: 1.35rem;
    gap: .65rem;
  }

  .v72-enter,
  .v72-archive-link {
    min-height: 44px;
    padding: .75rem 1rem;
    font-size: .62rem;
    letter-spacing: .11em;
  }

  .v72-opening-footer {
    grid-template-columns: 1fr auto;
    gap: .6rem;
  }

  .v72-opening-coordinate:first-child { display: none; }
  .v72-opening-coordinate:last-child { font-size: .52rem; }
  .v72-scroll-cue { justify-self: start; padding-left: 0; }
  .v72-scroll-cue-line { height: 22px; }
  .v72-memory-orbit { right: -32vw; top: 32%; width: 90vw; opacity: .6; }

  body.v72-home .hero-manifest {
    min-height: auto;
    padding-top: 7rem;
  }
}

@media (max-width: 420px) {
  .v72-opening-copy { padding-top: 36vh; }
  .v72-opening-header .v72-opening-instance { display: none; }
  .v72-opening-actions { align-items: stretch; }
  .v72-enter, .v72-archive-link { width: 100%; }
  .v72-opening-coordinate:last-child { display: none; }
  .v72-opening-footer { grid-template-columns: 1fr; }
}

@media (orientation: landscape) and (max-height: 640px) {
  .v72-opening-shell { padding-top: .8rem; padding-bottom: .8rem; }
  .v72-opening-copy { padding: 2.6rem 0 1.2rem; }
  .v72-opening-kicker { margin-bottom: .8rem; }
  .v72-opening-subtitle { margin-top: 1rem; line-height: 1.35; }
  .v72-opening-actions { margin-top: 1rem; }
  .v72-opening-footer { display: none; }
  .v72-title-sayonara { font-size: clamp(2.8rem, 10vw, 5.4rem); }
  .v72-title-alice { font-size: clamp(3.3rem, 12vw, 6.4rem); }
}

@media (prefers-reduced-motion: reduce) {
  .v72-opening *,
  .v72-opening *::before,
  .v72-opening *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .v72-opening-header,
  .v72-opening-copy,
  .v72-opening-side,
  .v72-opening-footer {
    opacity: 1;
    transform: none;
  }

  .v72-opening-image { transform: none; }

  html.v72-js body.is-opening #site-navbar,
  html.v72-js body.is-entering #site-navbar {
    opacity: 1 !important;
    visibility: visible;
    pointer-events: auto !important;
    translate: 0 0;
  }
}

/* ======================================================
   v72.01 — Random Living Memories
   Twenty portrait clips become a controlled cinematic portal.
   Only the selected clip is requested; the rest remain dormant.
====================================================== */

.v72-opening {
  --v72-adaptive-shade: .62;
  --v72-adaptive-copy-surface: .47;
  --v72-adaptive-shadow: .85;
  --v72-adaptive-ambient-brightness: .64;
  --v72-adaptive-portal-brightness: .94;
  --v72-opening-poster: url("../img/site/blue_memory_gate_master.webp");
}

.v72-opening::before {
  background:
    linear-gradient(
      90deg,
      rgb(2 4 11 / var(--v72-adaptive-shadow)) 0%,
      rgb(2 4 11 / var(--v72-adaptive-shade)) 29%,
      rgb(2 4 11 / .26) 61%,
      rgb(2 4 11 / .08) 100%
    ),
    linear-gradient(180deg, rgb(0 0 0 / .35), transparent 22%, transparent 68%, rgb(0 0 0 / .91));
  transition: background .72s ease, opacity .7s ease;
}

.v72-opening-fallback,
.v72-opening-fallback img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.v72-opening-fallback {
  z-index: 0;
  margin: 0;
}

.v72-opening-fallback .v72-opening-image {
  object-position: 70% 43%;
  opacity: .5;
  filter: brightness(.42) saturate(.88) contrast(1.08);
}

.v72-opening-ambient {
  position: absolute;
  z-index: 1;
  inset: -9%;
  background-image:
    linear-gradient(90deg, rgb(2 4 11 / .76), rgb(2 4 11 / .18) 68%, rgb(2 4 11 / .44)),
    var(--v72-opening-poster);
  background-size: cover;
  background-position: center;
  filter:
    blur(34px)
    brightness(var(--v72-adaptive-ambient-brightness))
    saturate(1.24)
    contrast(1.08);
  transform: scale(1.13);
  opacity: .96;
  transition: filter .72s ease, opacity .5s ease;
}

.v72-video-portal {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 70%;
  height: min(88vh, 920px);
  height: min(88svh, 920px);
  aspect-ratio: 512 / 686;
  overflow: hidden;
  border-radius: clamp(24px, 2.2vw, 42px);
  background: #02040b var(--v72-opening-poster) center / cover no-repeat;
  box-shadow:
    0 42px 110px rgb(0 0 0 / .58),
    0 0 0 1px rgb(143 242 255 / .14),
    0 0 80px rgb(34 116 255 / .19),
    inset 0 0 50px rgb(0 0 0 / .25);
  transform: translate(-50%, -50%) perspective(1400px) rotateY(-2deg) scale(.985);
  transform-origin: 50% 50%;
  opacity: 0;
  animation: v72LivingPortalReveal 1.25s var(--v72-ease) .08s forwards;
  transition: filter .72s ease, box-shadow .72s ease, transform 1.1s var(--v72-ease), opacity .45s ease;
  filter: brightness(var(--v72-adaptive-portal-brightness)) saturate(1.04) contrast(1.035);
  will-change: transform, filter;
}

.v72-opening-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0;
  transform: scale(1.018);
  transition: opacity .7s ease, transform 1.1s var(--v72-ease);
}

.v72-opening.has-living-video .v72-opening-video {
  opacity: 1;
}

.v72-opening.is-video-poster .v72-opening-video,
.v72-opening.is-video-fallback .v72-opening-video {
  opacity: 0;
}

.v72-video-sheen,
.v72-video-edge {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.v72-video-sheen {
  z-index: 2;
  background:
    linear-gradient(120deg, rgb(255 255 255 / .11), transparent 18%, transparent 67%, rgb(50 165 255 / .1)),
    linear-gradient(180deg, rgb(0 0 0 / .08), transparent 36%, rgb(0 0 0 / .25));
  mix-blend-mode: screen;
}

.v72-video-edge {
  z-index: 3;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgb(167 248 255 / .12),
    inset 0 0 46px rgb(0 0 0 / .27),
    inset 0 -68px 72px rgb(0 0 0 / .31);
}

.v72-opening-vignette {
  z-index: 5;
  box-shadow:
    inset 0 0 15vw 4vw rgb(0 0 0 / .58),
    inset 0 -20vh 22vh rgb(0 0 0 / .62);
}

.v72-opening-copy {
  position: relative;
  isolation: isolate;
}

.v72-opening-copy::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -2.8rem -3.5rem -2.6rem -3.2rem;
  pointer-events: none;
  opacity: var(--v72-adaptive-copy-surface);
  background: radial-gradient(ellipse at 34% 48%, rgb(1 4 12 / .96) 0%, rgb(1 4 12 / .72) 39%, transparent 76%);
  filter: blur(12px);
  transition: opacity .72s ease;
}

.v72-opening-title,
.v72-opening-subtitle,
.v72-opening-kicker {
  text-shadow:
    0 2px 12px rgb(0 0 0 / var(--v72-adaptive-shadow)),
    0 0 34px rgb(0 0 0 / .55);
}

.v72-opening-side {
  position: relative;
  z-index: 8;
  padding: 1.25rem 1.05rem;
  border-radius: 18px;
  background: linear-gradient(135deg, rgb(2 7 17 / .18), rgb(2 7 17 / .51));
  box-shadow: inset 0 0 0 1px rgb(132 232 255 / .055);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

.v72-memory-now {
  color: rgb(139 239 255 / .52);
  letter-spacing: .13em;
}

body.is-entering .v72-video-portal {
  transform: translate(-50%, -50%) perspective(1200px) rotateY(0deg) scale(1.09);
  filter: brightness(1.08) saturate(1.13) contrast(1.05);
  box-shadow: 0 0 110px rgb(42 157 255 / .32), 0 0 0 1px rgb(180 250 255 / .2);
}

body.is-entering .v72-opening-video {
  transform: scale(1.07);
}

@keyframes v72LivingPortalReveal {
  from {
    opacity: 0;
    transform: translate(-50%, -48%) perspective(1400px) rotateY(-4deg) scale(.94);
    filter: brightness(.45) saturate(.82) contrast(1.08);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) perspective(1400px) rotateY(-2deg) scale(.985);
  }
}

@media (max-width: 1180px) {
  .v72-video-portal {
    left: 72%;
    height: min(82svh, 790px);
  }

  .v72-opening-side {
    width: min(215px, 100%);
  }
}

@media (max-width: 780px) {
  .v72-opening::before {
    background:
      linear-gradient(180deg, rgb(2 4 11 / .18) 0%, rgb(2 4 11 / .08) 31%, rgb(2 4 11 / .7) 62%, rgb(2 4 11 / .98) 100%),
      linear-gradient(90deg, rgb(2 4 11 / .18), transparent 72%);
  }

  .v72-opening-ambient {
    inset: -12%;
    filter:
      blur(24px)
      brightness(var(--v72-adaptive-ambient-brightness))
      saturate(1.2)
      contrast(1.08);
  }

  .v72-video-portal {
    top: 32%;
    left: 50%;
    width: min(94vw, 470px);
    height: auto;
    max-height: 69svh;
    border-radius: 0 0 34px 34px;
    transform: translate(-50%, -50%) scale(1.01);
    box-shadow: 0 26px 70px rgb(0 0 0 / .48), 0 0 50px rgb(38 125 255 / .17);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 77%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 77%, transparent 100%);
  }

  .v72-opening-copy::before {
    inset: -2rem -1.5rem -2rem;
    opacity: calc(var(--v72-adaptive-copy-surface) + .12);
    background: radial-gradient(ellipse at 34% 62%, rgb(1 4 12 / .96), rgb(1 4 12 / .66) 52%, transparent 82%);
  }

  .v72-opening-copy {
    padding-top: 42vh;
  }

  .v72-opening-vignette {
    box-shadow: inset 0 0 16vw 4vw rgb(0 0 0 / .32), inset 0 -29vh 25vh rgb(0 0 0 / .76);
  }

  body.is-entering .v72-video-portal {
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@media (max-width: 420px) {
  .v72-video-portal {
    top: 30%;
    width: 100vw;
    max-height: 67svh;
    border-radius: 0;
  }

  .v72-opening-copy {
    padding-top: 39vh;
  }

  .v72-memory-now {
    display: none;
  }
}

@media (orientation: landscape) and (max-height: 640px) {
  .v72-video-portal {
    left: 72%;
    top: 50%;
    width: auto;
    height: 108svh;
    max-height: none;
    border-radius: 24px;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v72-video-portal {
    opacity: 1;
    animation: none !important;
    transform: translate(-50%, -50%) !important;
  }

  .v72-opening-video {
    display: none;
  }
}