:root{
  --op17-bg0:#05070b;
  --op17-bg1:#0b1730;
  --op17-gold:#c8a458;
  --op17-ivory:#f5f1e8;
  /* Match the site's subtle grain texture */
  --op17-noise:url('../img/noise.png');
  /* Final handoff palette (blends into the site hero) */
  --op17-handoff-bg0:#02040a;
  --op17-handoff-bg1:#0b3c71;
}

#op17{
  position:fixed;
  inset:0;
  z-index:2147483647;
  display:block;
  overflow:hidden;
  background:
    radial-gradient(900px 560px at 50% 46%, rgba(255,255,255,0.08), rgba(255,255,255,0) 60%),
    radial-gradient(900px 560px at 50% 90%, rgba(200,164,88,0.08), rgba(200,164,88,0) 62%),
    linear-gradient(180deg, var(--op17-bg1), var(--op17-bg0));
}

#op17 canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

/* Fine grain like the site texture (but kept clean) */
#op17::before{
  content:"";
  position:absolute;
  inset:-20%;
  background-image:var(--op17-noise);
  background-size:420px 420px;
  opacity:0.14;
  transition:opacity 0.45s ease;
  mix-blend-mode:overlay;
  pointer-events:none;
}

/* Subtle vignette for depth (minimal) */
#op17::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(1200px 700px at 50% 40%, rgba(0,0,0,0), rgba(0,0,0,0.44) 72%, rgba(0,0,0,0.72));
  opacity:0.85;
  transition:opacity 0.45s ease;
  pointer-events:none;
}

#op17 .hud{
  position:absolute;
  inset:0;
  pointer-events:none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:12px;
  letter-spacing:0.08em;
  color:rgba(245,241,232,0.62);
}

#op17 .hud .tl,
#op17 .hud .tr,
#op17 .hud .bl,
#op17 .hud .br{
  position:absolute;
  max-width:38vw;
  line-height:1.35;
  text-transform:uppercase;
  white-space:pre;
  opacity:0;
  transform:translateY(6px);
}

#op17 .hud .tl{ left:18px; top:16px; }
#op17 .hud .tr{ right:18px; top:16px; text-align:right; }
#op17 .hud .bl{ left:18px; bottom:16px; }
#op17 .hud .br{ right:18px; bottom:16px; text-align:right; }

#op17 .center{
  position:absolute;
  left:50%;
  bottom: calc(env(safe-area-inset-bottom) + 88px);
  top:auto;
  transform:translateX(-50%);
  z-index:3;
  width:min(86vw, 560px);
  text-align:center;
  pointer-events:none;
  opacity:0;
}

#op17 .center .kicker{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-size:11px;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:rgba(245,241,232,0.62);
}

#op17 .center .rule{
  width:180px;
  height:1px;
  margin:10px auto 10px;
  background:linear-gradient(90deg, rgba(200,164,88,0), rgba(200,164,88,0.82), rgba(200,164,88,0));
  opacity:0.7;
}

#op17 .center .sub{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-size:12px;
  letter-spacing:0.22em;
  color:rgba(245,241,232,0.68);
}

#op17 .skip{
  position:absolute;
  top:14px;
  right:14px;
  z-index:2;
  pointer-events:auto;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  font-size:12px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(245,241,232,0.18);
  background:rgba(0,0,0,0.22);
  color:rgba(245,241,232,0.86);
  backdrop-filter: blur(8px);
  cursor:pointer;
}
#op17 .skip:hover{ background:rgba(0,0,0,0.32); }

#op17.go .hud .tl,
#op17.go .hud .tr,
#op17.go .hud .bl,
#op17.go .hud .br{
  animation: op17-hud 2.15s ease forwards;
}

#op17.go .center{
  animation: op17-center 2.15s ease forwards;
}

@keyframes op17-hud{
  0%{ opacity:0; transform:translateY(8px); }
  18%{ opacity:1; transform:translateY(0); }
  78%{ opacity:1; }
  100%{ opacity:0; }
}

@keyframes op17-center{
  0%{ opacity:0; transform:translateX(-50%) translateY(-160px); }
  22%{ opacity:1; transform:translateX(-50%) translateY(0); }
  78%{ opacity:1; transform:translateX(-50%) translateY(0); }
  100%{ opacity:0; transform:translateX(-50%) translateY(18px); }
}


/* Exit */

/* During outro, remove vignette/grain quickly so the handoff to the hero feels seamless */
#op17.op17--out::before{ opacity:0; }
#op17.op17--out::after{ opacity:0; }
#op17.op17--out .hud{ opacity:0; transition:opacity 0.35s ease; }
#op17.op17--out{
  animation: op17-fadeout 0.55s ease forwards;
}

@keyframes op17-fadeout{
  to{ opacity:0; }
}