:root{
  --op17-bg0:#10161d;
  --op17-bg1:#2c3440;
  --op17-gold:#c8b084;
  --op17-ivory:#f3efe7;
  --op17-noise:none;
  /* Final handoff palette (soft pearl / white-forward) */
  --op17-handoff-bg0:#f3f2ee;
  --op17-handoff-bg1:#fbfbfa;
  --op17-exit-bg:#f8f8f6;
}

#op17{
  position:fixed;
  inset:0;
  z-index:2147483647;
  display:block;
  overflow:hidden;
  background:
    radial-gradient(1120px 700px at 50% 44%, rgba(255,255,255,0.10), rgba(255,255,255,0) 62%),
    linear-gradient(90deg, rgba(200,176,126,0.05), rgba(255,255,255,0) 24%, rgba(165,178,202,0.08) 100%),
    radial-gradient(980px 620px at 50% 96%, rgba(200,164,88,0.05), rgba(200,164,88,0) 66%),
    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.10;
  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(1280px 780px at 50% 40%, rgba(255,255,255,0), rgba(2,4,7,0.18) 72%, rgba(2,4,7,0.34));
  opacity:0.52;
  transition:opacity 0.45s ease;
  pointer-events:none;
}

#op17 .hud{
  display:none;
}

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

#op17 .hud .tl{ left:max(18px, env(safe-area-inset-left)); top:max(16px, env(safe-area-inset-top)); }
#op17 .hud .tr{ right:max(18px, env(safe-area-inset-right)); top:max(16px, env(safe-area-inset-top)); text-align:right; }
#op17 .hud .bl{ left:max(18px, env(safe-area-inset-left)); bottom:max(16px, env(safe-area-inset-bottom)); }
#op17 .hud .br{ right:max(18px, env(safe-area-inset-right)); bottom:max(16px, env(safe-area-inset-bottom)); text-align:right; }

#op17 .center{
  position:absolute;
  left:50%;
  top:44%;
  transform:translate(-50%,-50%);
  text-align:center;
  pointer-events:none;
  opacity:0;
  width:min(82vw, 520px);
}

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

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

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

#op17 .center .kicker,
#op17 .center .sub{
  text-shadow:0 1px 12px rgba(0,0,0,0.16);
}

#op17 .whiteout{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(1100px 760px at 50% 40%, rgba(0,0,0,0.035), rgba(0,0,0,0) 72%),
    linear-gradient(90deg, rgba(220,212,194,0.20), rgba(255,255,255,0) 24%, rgba(211,217,226,0.18) 100%),
    linear-gradient(180deg, var(--op17-handoff-bg0), var(--op17-handoff-bg1));
  opacity:0;
  transform:scale(1.02);
  transition:opacity 0.62s cubic-bezier(.22,.61,.36,1), transform 0.62s cubic-bezier(.22,.61,.36,1);
}

#op17 .skip{
  position:absolute;
  top:max(14px, env(safe-area-inset-top));
  right:max(14px, env(safe-area-inset-right));
  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(10,12,16,0.18);
  color:rgba(245,241,232,0.86);
  backdrop-filter: blur(8px);
  cursor:pointer;
  transition:opacity 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
}
#op17 .skip:hover{ background:rgba(10,12,16,0.28); }

#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:translate(-50%,-50%) translateY(10px); }
  22%{ opacity:1; transform:translate(-50%,-50%) translateY(0); }
  80%{ opacity:1; }
  100%{ opacity:0; }
}

/* Mobile / narrow portrait tuning */
#op17.op17--mobile .hud{
  font-size:9.5px;
  letter-spacing:0.06em;
}

#op17.op17--mobile .hud .tl,
#op17.op17--mobile .hud .tr,
#op17.op17--mobile .hud .bl,
#op17.op17--mobile .hud .br{
  max-width:calc(50vw - 26px);
  line-height:1.28;
}

#op17.op17--mobile .hud .tl{ left:max(14px, env(safe-area-inset-left)); top:max(14px, env(safe-area-inset-top)); }
#op17.op17--mobile .hud .tr{ right:max(14px, env(safe-area-inset-right)); top:max(14px, env(safe-area-inset-top)); }
#op17.op17--mobile .hud .bl{ left:max(14px, env(safe-area-inset-left)); bottom:max(14px, env(safe-area-inset-bottom)); }
#op17.op17--mobile .hud .br{ right:max(14px, env(safe-area-inset-right)); bottom:max(14px, env(safe-area-inset-bottom)); }

#op17.op17--mobile .center{
  top:40.5%;
  width:min(88vw, 360px);
}

#op17.op17--mobile .center .kicker{
  font-size:10px;
  letter-spacing:0.18em;
}

#op17.op17--mobile .center .rule{
  width:min(48vw, 178px);
  margin:10px auto 9px;
}

#op17.op17--mobile .center .sub{
  font-size:11px;
  letter-spacing:0.08em;
  line-height:1.42;
}

#op17.op17--mobile .skip{
  font-size:11px;
  padding:7px 11px;
}

/* Exit */

/* During outro, strip away the dark treatment, lift to white, then reveal the page underneath. */
#op17.op17--out::before{ opacity:0; }
#op17.op17--out::after{ opacity:0; }
#op17.op17--out .hud,
#op17.op17--out .center{ opacity:0; transition:opacity 0.26s ease; }
#op17.op17--out .skip{ opacity:0; transform:translateY(-4px); }
#op17.op17--out .whiteout{ opacity:1; transform:scale(1); }
#op17.op17--out{
  animation: op17-fadeout 0.34s ease 0.32s forwards;
}

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