/* Cinematic 5-second opening sequence */
.intro-locked {
  overflow: hidden !important;
  overscroll-behavior: none;
}

.opening-sequence {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: end center;
  overflow: hidden;
  isolation: isolate;
  background: #10070a;
  color: #fff9f1;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.opening-photo-layer,
.opening-photo-placeholder,
.opening-vignette,
.opening-grain,
.opening-frame,
.opening-portal,
.opening-wipes {
  position: absolute;
  inset: 0;
}

.opening-photo-layer {
  z-index: -6;
  overflow: hidden;
  background: #090708;
  transform: scale(1.025);
  animation: openerKenBurns 5s cubic-bezier(.2,.65,.2,1) both;
  transition: transform 1.25s cubic-bezier(.16,1,.3,1), filter 1.1s ease, opacity .9s ease;
}

.opening-photo-backdrop,
.opening-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.opening-photo-backdrop {
  object-fit: cover;
  object-position: 50% 42%;
  filter: grayscale(1) blur(28px) brightness(.34) contrast(1.08);
  transform: scale(1.13);
  opacity: 0;
  transition: opacity .75s ease;
}

.opening-photo {
  object-fit: cover;
  object-position: 50% 42%;
  filter: grayscale(1) contrast(1.04) brightness(.9);
  opacity: 0;
  transition: opacity .8s ease;
}

.opening-sequence.photo-ready .opening-photo,
.opening-sequence.photo-ready .opening-photo-backdrop { opacity: 1; }

.opening-photo-placeholder {
  background:
    radial-gradient(circle at 50% 36%, rgba(255,255,255,.12), transparent 28%),
    linear-gradient(160deg,#12090c,#310712 62%,#0b0708);
}

.opening-vignette {
  z-index: -5;
  background:
    linear-gradient(180deg,rgba(7,3,4,.14) 0%,rgba(7,3,4,.02) 34%,rgba(7,3,4,.28) 62%,rgba(50,3,15,.9) 100%),
    radial-gradient(circle at 50% 42%,transparent 30%,rgba(4,2,3,.16) 68%,rgba(4,2,3,.48) 100%);
  transition: opacity .75s ease;
}

.opening-grain {
  z-index: -4;
  opacity: .13;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.opening-frame {
  z-index: 2;
  inset: 16px;
  border: 1px solid rgba(215,182,122,.55);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  transform: scale(.97);
  opacity: 0;
  animation: openerFrameIn 1.1s .25s cubic-bezier(.16,1,.3,1) forwards;
  pointer-events: none;
}

.opening-copy {
  z-index: 5;
  width: min(760px, calc(100% - 40px));
  margin-bottom: clamp(50px, 8vh, 92px);
  text-align: center;
  text-shadow: 0 4px 20px rgba(0,0,0,.45);
  transition: transform .8s cubic-bezier(.16,1,.3,1), opacity .6s ease, filter .7s ease;
}

.opening-kicker {
  margin-bottom: 10px;
  font: 600 8px/1 var(--sans, Inter, Arial, sans-serif);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: #e5c78d;
  opacity: 0;
  transform: translateY(12px);
  animation: openerTextIn .8s .55s cubic-bezier(.16,1,.3,1) forwards;
}

.opening-names {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: clamp(8px, 1.4vw, 18px);
  font-family: var(--script, 'Bastliga One', 'Snell Roundhand', 'Segoe Script', cursive);
  font-size: clamp(66px, 9vw, 138px);
  line-height: .82;
  color: #fff9f2;
  opacity: 0;
  transform: translateY(20px) scale(.98);
  animation: openerNamesIn 1s .75s cubic-bezier(.16,1,.3,1) forwards;
}

.opening-names i {
  font-family: var(--serif, Didot, 'Times New Roman', serif);
  font-size: .32em;
  font-weight: 400;
  color: #dcb970;
}

.opening-divider {
  width: min(320px, 62%);
  margin: 18px auto 12px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  color: #dcb970;
  font: 400 13px/1 Georgia,serif;
  opacity: 0;
  animation: openerTextIn .75s 1.15s ease forwards;
}

.opening-divider span {
  height: 1px;
  background: linear-gradient(90deg,transparent,rgba(220,185,112,.85));
}
.opening-divider span:last-child { transform: scaleX(-1); }

.opening-date {
  font: 600 11px/1 var(--sans, Inter, Arial, sans-serif);
  letter-spacing: .42em;
  color: rgba(255,250,244,.94);
  opacity: 0;
  animation: openerTextIn .75s 1.35s ease forwards;
}

.opening-enter {
  margin-top: 22px;
  font: 500 7px/1 var(--sans, Inter, Arial, sans-serif);
  letter-spacing: .27em;
  text-transform: uppercase;
  color: rgba(255,250,244,.72);
  opacity: 0;
  animation: openerTextIn .7s 1.65s ease forwards, openerPromptPulse 2s 2.4s ease-in-out infinite;
}

.opening-progress {
  width: min(220px, 52vw);
  height: 1px;
  margin: 14px auto 0;
  overflow: hidden;
  background: rgba(255,255,255,.2);
  opacity: 0;
  animation: openerTextIn .5s 1.8s ease forwards;
}

.opening-progress span {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left;
  background: linear-gradient(90deg,#b88a48,#f0d9a7);
  animation: openerProgress 5s linear forwards;
}

.opening-portal {
  z-index: 8;
  inset: 50% auto auto 50%;
  width: 10vmin;
  height: 10vmin;
  border-radius: 50%;
  transform: translate(-50%,-50%) scale(0);
  background: rgba(255,250,244,.98);
  box-shadow: 0 0 0 1px rgba(183,137,70,.55), 0 0 90px rgba(255,245,230,.75);
  pointer-events: none;
  opacity: 0;
}

.opening-wipes {
  z-index: 9;
  display: grid;
  grid-template-columns: repeat(6,1fr);
  pointer-events: none;
  overflow: hidden;
}

.opening-wipes span {
  height: 120%;
  align-self: center;
  background: linear-gradient(180deg,#5e0718 0%,#880e29 45%,#fff8ef 100%);
  box-shadow: 0 0 30px rgba(0,0,0,.18);
  transform: translateY(110%) skewY(-6deg) scaleY(1.08);
  opacity: .98;
}

.opening-wipes span:nth-child(even) {
  transform: translateY(-110%) skewY(6deg) scaleY(1.08);
  background: linear-gradient(180deg,#fff8ef 0%,#8b0e2a 55%,#580615 100%);
}

.opening-sequence.is-leaving .opening-photo-layer {
  transform: scale(1.16) rotate(-.55deg);
  filter: blur(6px) brightness(.68);
}
.opening-sequence.is-leaving .opening-vignette { opacity: .9; }
.opening-sequence.is-leaving .opening-copy {
  opacity: 0;
  transform: translateY(-48px) scale(.95);
  filter: blur(8px);
}
.opening-sequence.is-leaving .opening-frame {
  animation: openerFrameOut .7s ease forwards;
}
.opening-sequence.is-leaving .opening-portal {
  animation: openerPortal .95s .48s cubic-bezier(.7,0,.2,1) forwards;
}
.opening-sequence.is-leaving .opening-wipes span {
  animation: openerWipeUp .95s cubic-bezier(.76,0,.24,1) forwards;
}
.opening-sequence.is-leaving .opening-wipes span:nth-child(even) {
  animation-name: openerWipeDown;
}
.opening-sequence.is-leaving .opening-wipes span:nth-child(2) { animation-delay:.04s; }
.opening-sequence.is-leaving .opening-wipes span:nth-child(3) { animation-delay:.08s; }
.opening-sequence.is-leaving .opening-wipes span:nth-child(4) { animation-delay:.12s; }
.opening-sequence.is-leaving .opening-wipes span:nth-child(5) { animation-delay:.16s; }
.opening-sequence.is-leaving .opening-wipes span:nth-child(6) { animation-delay:.20s; }

@keyframes openerKenBurns {
  from { transform: scale(1.025) translate3d(0,0,0); }
  to { transform: scale(1.105) translate3d(0,-1.1%,0); }
}
@keyframes openerFrameIn {
  from { opacity:0; transform:scale(.97); }
  to { opacity:1; transform:scale(1); }
}
@keyframes openerFrameOut {
  to { opacity:0; transform:scale(1.06); }
}
@keyframes openerTextIn {
  to { opacity:1; transform:none; }
}
@keyframes openerNamesIn {
  to { opacity:1; transform:none; }
}
@keyframes openerPromptPulse {
  0%,100% { opacity:.5; }
  50% { opacity:1; }
}
@keyframes openerProgress {
  from { transform:scaleX(0); }
  to { transform:scaleX(1); }
}
@keyframes openerWipeUp {
  0% { transform:translateY(110%) skewY(-6deg) scaleY(1.08); }
  58% { transform:translateY(0) skewY(-2deg) scaleY(1.08); }
  100% { transform:translateY(-118%) skewY(5deg) scaleY(1.08); }
}
@keyframes openerWipeDown {
  0% { transform:translateY(-110%) skewY(6deg) scaleY(1.08); }
  58% { transform:translateY(0) skewY(2deg) scaleY(1.08); }
  100% { transform:translateY(118%) skewY(-5deg) scaleY(1.08); }
}
@keyframes openerPortal {
  0% { opacity:0; transform:translate(-50%,-50%) scale(0); }
  30% { opacity:.9; }
  100% { opacity:1; transform:translate(-50%,-50%) scale(22); }
}

@media (min-width: 900px) {
  .opening-photo {
    object-fit: contain;
    object-position: 50% 50%;
  }
  .opening-photo-backdrop { object-position: 50% 45%; }
  .opening-copy { margin-bottom: clamp(40px,7vh,78px); }
}

@media (max-width: 620px) {
  .opening-frame { inset: 9px; }
  .opening-photo { object-position: 50% 42%; }
  .opening-copy {
    width: calc(100% - 28px);
    margin-bottom: max(38px, calc(env(safe-area-inset-bottom) + 30px));
  }
  .opening-kicker { font-size:6px; letter-spacing:.28em; }
  .opening-names {
    flex-direction: column;
    gap: 2px;
    align-items: center;
    font-size: clamp(68px, 21vw, 100px);
    line-height: .72;
  }
  .opening-names i { font-size:.28em; margin:4px 0 2px; }
  .opening-divider { width:54%; margin:14px auto 11px; }
  .opening-date { font-size:8px; letter-spacing:.34em; }
  .opening-enter { margin-top:18px; font-size:6px; letter-spacing:.22em; }
  .opening-progress { width:42vw; }
}

@media (prefers-reduced-motion: reduce) {
  .opening-photo-layer,
  .opening-frame,
  .opening-kicker,
  .opening-names,
  .opening-divider,
  .opening-date,
  .opening-enter,
  .opening-progress,
  .opening-progress span,
  .opening-wipes span,
  .opening-portal {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
  }
  .opening-sequence.is-leaving { opacity:0; transition:opacity .25s ease; }
}