/* ======================================================
   Sayonara_Alice.exe — v72.12
   Tablet Cinematic Stage + Alice Boot Signature
   ------------------------------------------------------
   Starts from the stable v72.10 video engine/layout.
   This final layer changes only:
   - tablet portrait/landscape composition
   - fail-safe title visibility
   - decorative title signature overlay
====================================================== */

/* ------------------------------------------------------
   1. Fail-safe title: the semantic/base title is never hidden.
   All spectacular motion lives on an aria-hidden duplicate.
------------------------------------------------------ */
.v72-opening .v72-title-base {
  position: relative;
  z-index: 1;
  display: block;
  opacity: 1;
  transition: filter .45s ease, opacity .45s ease;
}

.v72-opening .v72-title-base .v72-title-line,
.v72-opening.is-player-ready:not(.is-title-booted) .v72-title-base .v72-title-line,
.v72-opening.is-title-booted .v72-title-base .v72-title-line {
  opacity: 1 !important;
  visibility: visible !important;
  clip-path: none !important;
  transform: none !important;
  animation: none !important;
}

.v72-opening .v72-title-base .v72-title-alice {
  color: transparent !important;
  background: linear-gradient(108deg, #f4ffff 0%, #aaf8ff 24%, #28d9ff 58%, #5578ff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  filter: drop-shadow(0 0 22px rgb(26 205 255 / .18));
}

.v72-opening.is-player-ready:not(.is-title-booted) .v72-title-base {
  opacity: .76;
  filter: brightness(.83) saturate(.82);
}

.v72-opening.is-title-booted .v72-title-base {
  opacity: 1;
  filter: none;
}

/* Retire the older single shard; the new signature layer owns the entry. */
.v72-opening .v72-title-ignition { display: none !important; }

.v72-title-signature {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: block;
  pointer-events: none;
  opacity: 0;
  overflow: visible;
  mix-blend-mode: screen;
}

.v72-title-signature .v72-signature-line {
  opacity: 1 !important;
  visibility: visible !important;
  clip-path: none !important;
  transform: none !important;
  animation: none !important;
}

.v72-title-signature .v72-signature-line > span {
  display: inline-block;
  opacity: 0;
  transform-origin: 50% 80%;
}

.v72-title-signature .v72-signature-sayonara {
  color: #effeff;
  text-shadow: 0 0 13px rgb(158 247 255 / .38), 0 0 42px rgb(64 114 255 / .24);
}

.v72-title-signature .v72-signature-alice {
  color: #baf8ff !important;
  background: none !important;
  -webkit-text-fill-color: currentColor;
  filter: drop-shadow(0 0 17px rgb(51 220 255 / .72));
}

.v72-title-signature .v72-signature-extension {
  margin-left: .08em;
  font: 500 .18em/1 "Courier New", Consolas, monospace;
  letter-spacing: .04em;
  vertical-align: .23em;
  text-transform: none;
}

.v72-opening.is-player-ready:not(.is-title-booted) .v72-title-signature {
  opacity: 1;
  animation: v72SignatureLayerExit 2.02s linear both;
}

.v72-opening.is-player-ready:not(.is-title-booted) .v72-title-signature .v72-signature-line > span {
  animation: v72SignatureGlyph .62s cubic-bezier(.13,.8,.2,1) calc(.16s + var(--i) * .055s) both;
}

.v72-opening.is-player-ready:not(.is-title-booted) .v72-title-signature .v72-signature-alice > span {
  animation-name: v72SignatureAliceGlyph;
}

.v72-signature-runner {
  position: absolute;
  left: -4%;
  top: 31%;
  width: clamp(1rem, 2.6vw, 2.5rem);
  height: clamp(2px, .22vw, 4px);
  border-radius: 999px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, #d9feff 38%, #58eaff 70%, transparent);
  box-shadow: 0 0 8px #b8fbff, 0 0 26px rgb(49 219 255 / .88), 0 0 54px rgb(64 114 255 / .55);
}

.v72-opening.is-player-ready:not(.is-title-booted) .v72-signature-runner {
  animation: v72SignatureRunner 1.42s cubic-bezier(.18,.72,.18,1) .08s both;
}

.v72-signature-ring {
  position: absolute;
  left: 82%;
  top: 26%;
  width: clamp(1rem, 2.2vw, 2.2rem);
  aspect-ratio: 1;
  border: 1px solid rgb(144 244 255 / .9);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 18px rgb(58 226 255 / .68), inset 0 0 12px rgb(58 226 255 / .35);
}

.v72-opening.is-player-ready:not(.is-title-booted) .v72-signature-ring {
  animation: v72SignatureRing .74s cubic-bezier(.12,.75,.2,1) .8s both;
}

.v72-signature-particles {
  position: absolute;
  left: 78%;
  top: 30%;
  width: 1px;
  height: 1px;
}

.v72-signature-particles i {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 70% 20% 70% 20%;
  opacity: 0;
  background: #bafaff;
  box-shadow: 0 0 9px rgb(73 230 255 / .9);
  transform: rotate(calc(var(--p) * 47deg));
}

.v72-opening.is-player-ready:not(.is-title-booted) .v72-signature-particles i {
  animation: v72SignatureParticle .9s cubic-bezier(.15,.72,.15,1) calc(.76s + var(--p) * .045s) both;
}

.v72-opening.is-title-booted.is-memory-pulsing .v72-title-base::after {
  content: "";
  position: absolute;
  inset: 48% -2% auto;
  height: 1px;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgb(153 248 255 / .9), transparent);
  box-shadow: 0 0 16px rgb(62 223 255 / .7);
  animation: v72SignatureMemoryReply .76s ease-out both;
  pointer-events: none;
}

@keyframes v72SignatureGlyph {
  0% { opacity: 0; transform: translateY(.42em) rotateX(78deg) scale(.72); filter: blur(7px) brightness(.7); }
  58% { opacity: 1; transform: translateY(-.035em) rotateX(0) scale(1.035); filter: blur(0) brightness(1.45); }
  100% { opacity: .72; transform: none; filter: brightness(1.04); }
}

@keyframes v72SignatureAliceGlyph {
  0% { opacity: 0; transform: translate(.08em,.32em) skewX(-9deg) scaleY(.62); filter: blur(8px) brightness(.5); }
  47% { opacity: 1; transform: translate(-.018em,-.02em) skewX(2deg) scaleY(1.08); filter: blur(0) brightness(1.62); }
  72% { transform: translate(.01em,0) skewX(-1deg) scaleY(.98); }
  100% { opacity: .76; transform: none; filter: brightness(1.08); }
}

@keyframes v72SignatureRunner {
  0% { left: -4%; opacity: 0; transform: scaleX(.3); }
  10% { opacity: 1; }
  66% { left: 82%; opacity: 1; transform: scaleX(1); }
  78% { left: 86%; opacity: 1; transform: scaleX(.38) rotate(12deg); }
  100% { left: 86%; opacity: 0; transform: scale(.08) rotate(85deg); }
}

@keyframes v72SignatureRing {
  0% { opacity: 0; transform: scale(.08); }
  22% { opacity: 1; }
  100% { opacity: 0; transform: scale(4.8); border-width: .5px; }
}

@keyframes v72SignatureParticle {
  0% { opacity: 0; transform: translate(0,0) rotate(calc(var(--p) * 47deg)) scale(.2); }
  25% { opacity: .95; }
  100% { opacity: 0; transform: translate(calc((var(--p) - 2.5) * 12px), calc(-18px - var(--p) * 5px)) rotate(calc(150deg + var(--p) * 57deg)) scale(.65); }
}

@keyframes v72SignatureLayerExit {
  0%, 77% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes v72SignatureMemoryReply {
  0% { opacity: 0; transform: translateX(-16%) scaleX(.15); }
  28% { opacity: 1; }
  100% { opacity: 0; transform: translateX(18%) scaleX(1.12); }
}

/* ------------------------------------------------------
   2. Tablet landscape: desktop-like cinematic overlay.
   The dual stage occupies virtually the whole viewport and
   the copy is integrated over memory A, not stacked beneath it.
------------------------------------------------------ */
@media (min-width: 700px) and (max-width: 1199px) and (orientation: landscape) {
  .v72-opening[data-memory-mode="dual"] {
    overflow: hidden !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-opening-shell {
    position: relative !important;
    width: 100% !important;
    min-height: 100svh !important;
    padding: 0 !important;
    display: block !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-opening-header {
    position: absolute !important;
    z-index: 30 !important;
    top: clamp(.72rem, 2.2svh, 1.2rem) !important;
    left: clamp(1rem, 3vw, 2rem) !important;
    right: clamp(1rem, 3vw, 2rem) !important;
    width: auto !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-dual-memory-stage {
    position: absolute !important;
    z-index: 7 !important;
    left: 50% !important;
    top: 50% !important;
    width: min(96vw, calc(86svh * 1.516)) !important;
    max-width: none !important;
    height: auto !important;
    max-height: 86svh !important;
    aspect-ratio: 1040 / 686 !important;
    margin: 0 !important;
    transform: translate(-50%, -48%) !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-opening-copy {
    position: absolute !important;
    z-index: 24 !important;
    left: clamp(1.2rem, 4vw, 3.1rem) !important;
    bottom: clamp(2.2rem, 6.5svh, 4.4rem) !important;
    width: min(39vw, 24rem) !important;
    max-width: min(39vw, 24rem) !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    text-align: left !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-opening-copy::before {
    inset: -3.6rem -4rem -3.4rem -3rem !important;
    opacity: .98 !important;
    filter: blur(8px) !important;
    background: radial-gradient(ellipse at 20% 55%, rgb(0 3 10 / .98) 0%, rgb(0 4 13 / .92) 42%, rgb(0 5 17 / .52) 67%, transparent 87%) !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-opening-kicker,
  .v72-opening[data-memory-mode="dual"] .v72-opening-actions {
    justify-content: flex-start !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-title-sayonara { font-size: clamp(2.2rem, 5.1vw, 4rem) !important; }
  .v72-opening[data-memory-mode="dual"] .v72-title-alice { font-size: clamp(2.7rem, 6.15vw, 4.8rem) !important; }

  .v72-opening[data-memory-mode="dual"] .v72-opening-subtitle {
    max-width: 22rem !important;
    margin: .78rem 0 0 !important;
    font-size: clamp(.76rem, 1.35vw, .98rem) !important;
    line-height: 1.42 !important;
    text-align: left !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-opening-actions {
    width: min(37vw, 23rem) !important;
    margin: .82rem 0 0 !important;
    gap: .55rem !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-enter,
  .v72-opening[data-memory-mode="dual"] .v72-archive-link {
    min-height: 40px !important;
    padding: .62rem .82rem !important;
    font-size: clamp(.52rem, .95vw, .66rem) !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-opening-footer {
    position: absolute !important;
    z-index: 25 !important;
    left: clamp(1rem, 3vw, 2rem) !important;
    right: clamp(1rem, 3vw, 2rem) !important;
    bottom: .65rem !important;
    width: auto !important;
  }
}

/* ------------------------------------------------------
   3. Tablet portrait: a staggered dual-memory cinematic collage.
   Both complete 4:5 portals remain present; their overlap uses the
   viewport height instead of leaving a small horizontal strip.
------------------------------------------------------ */
@media (min-width: 700px) and (max-width: 1199px) and (orientation: portrait) {
  .v72-opening[data-memory-mode="dual"] {
    overflow: hidden !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-opening-shell {
    position: relative !important;
    width: 100% !important;
    min-height: 100svh !important;
    padding: 0 !important;
    display: block !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-opening-header {
    position: absolute !important;
    z-index: 30 !important;
    top: clamp(.7rem, 1.7svh, 1.25rem) !important;
    left: clamp(.85rem, 3vw, 1.8rem) !important;
    right: clamp(.85rem, 3vw, 1.8rem) !important;
    width: auto !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-dual-memory-stage {
    position: absolute !important;
    z-index: 7 !important;
    left: 50% !important;
    top: clamp(3.4rem, 6svh, 5.6rem) !important;
    width: min(94vw, 60rem) !important;
    max-width: none !important;
    height: min(78svh, 68rem) !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    overflow: visible !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-memory-lane {
    position: absolute !important;
    width: min(61vw, 34rem) !important;
    height: auto !important;
    aspect-ratio: 512 / 686 !important;
    margin: 0 !important;
    border-radius: clamp(12px, 2vw, 22px) !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-memory-lane--a {
    left: 0 !important;
    top: 0 !important;
    z-index: 1 !important;
    transform: rotate(-1.2deg) !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-memory-lane--b {
    right: 0 !important;
    bottom: 0 !important;
    z-index: 2 !important;
    transform: rotate(1.2deg) !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-video-portal {
    width: 100% !important;
    height: 100% !important;
    border-radius: inherit !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-opening-copy {
    position: absolute !important;
    z-index: 25 !important;
    left: 50% !important;
    bottom: clamp(3.2rem, 6.4svh, 5.8rem) !important;
    width: min(88vw, 38rem) !important;
    max-width: min(88vw, 38rem) !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-opening-copy::before {
    inset: -4rem -4.2rem -3.2rem !important;
    opacity: .98 !important;
    filter: blur(9px) !important;
    background: radial-gradient(ellipse at 50% 55%, rgb(0 3 11 / .99) 0%, rgb(0 4 15 / .94) 44%, rgb(0 7 20 / .58) 68%, transparent 88%) !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-opening-kicker,
  .v72-opening[data-memory-mode="dual"] .v72-opening-actions {
    justify-content: center !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-title-sayonara { font-size: clamp(2.65rem, 8vw, 5.1rem) !important; }
  .v72-opening[data-memory-mode="dual"] .v72-title-alice { font-size: clamp(3.2rem, 9.65vw, 6.15rem) !important; }

  .v72-opening[data-memory-mode="dual"] .v72-opening-subtitle {
    width: min(76vw, 31rem) !important;
    max-width: min(76vw, 31rem) !important;
    margin: .62rem auto 0 !important;
    text-align: center !important;
    font-size: clamp(.76rem, 1.85vw, 1rem) !important;
    line-height: 1.4 !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-opening-actions {
    width: min(76vw, 31rem) !important;
    margin: .7rem auto 0 !important;
    gap: .55rem !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-enter,
  .v72-opening[data-memory-mode="dual"] .v72-archive-link {
    min-height: 42px !important;
    padding: .66rem .9rem !important;
    font-size: clamp(.54rem, 1.4vw, .68rem) !important;
  }

  .v72-opening[data-memory-mode="dual"] .v72-opening-footer {
    position: absolute !important;
    z-index: 26 !important;
    left: clamp(.85rem, 3vw, 1.8rem) !important;
    right: clamp(.85rem, 3vw, 1.8rem) !important;
    bottom: .65rem !important;
    width: auto !important;
  }
}

/* On short portrait tablets, reduce overlap copy footprint without
   reverting to the miniature horizontal strip. */
@media (min-width: 700px) and (max-width: 900px) and (orientation: portrait) and (max-height: 1050px) {
  .v72-opening[data-memory-mode="dual"] .v72-dual-memory-stage {
    top: 3.2rem !important;
    height: 79svh !important;
  }
  .v72-opening[data-memory-mode="dual"] .v72-memory-lane {
    width: min(57vw, 31rem) !important;
  }
  .v72-opening[data-memory-mode="dual"] .v72-opening-copy {
    bottom: 2.8rem !important;
  }
  .v72-opening[data-memory-mode="dual"] .v72-opening-kicker { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .v72-title-signature { display: none !important; }
  .v72-opening .v72-title-base { opacity: 1 !important; filter: none !important; }
}