:root {
  --black: #000;
  --ink: #03090d;
  --navy: #07151c;
  --cyan: #12d9e6;
  --white: #edf3f4;
  --muted: #98aab1;
  --line: rgba(152, 170, 177, .22);
  --ease: cubic-bezier(.2,.78,.2,1);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--ink); }
body { color: var(--white); font-family: Manrope, Inter, "Segoe UI", Arial, sans-serif; letter-spacing: -.02em; }
button { font: inherit; }

.ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(circle at 65% 40%, #0b2630 0, #041015 38%, #010507 72%); }
.ambient::after { content: ""; position: absolute; inset: 0; opacity: .18; background-image: linear-gradient(rgba(18,217,230,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(18,217,230,.06) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(circle at 70% 45%, #000, transparent 72%); }
.ambient i { position: absolute; width: 42vw; height: 42vw; border-radius: 50%; filter: blur(110px); opacity: .11; background: var(--cyan); animation: drift 18s ease-in-out infinite alternate; }
.ambient i:nth-child(1) { top: -24vw; left: -8vw; }
.ambient i:nth-child(2) { right: -25vw; top: 5vh; animation-delay: -6s; }
.ambient i:nth-child(3) { left: 36vw; bottom: -38vw; animation-delay: -12s; }
@keyframes drift { to { transform: translate3d(5vw,4vh,0) scale(1.15); } }

#deck { position: fixed; inset: 0; perspective: 1400px; }
.slide { position: absolute; inset: 0; display: grid; align-items: center; padding: 8.5vh 6.4vw 9vh; opacity: 0; visibility: hidden; transform: translate3d(4vw,0,-50px) rotateY(-1.5deg); transition: opacity .7s var(--ease), transform .9s var(--ease), visibility .7s; overflow: hidden; }
.slide.active { opacity: 1; visibility: visible; transform: none; z-index: 2; }
.slide.leaving { opacity: 0; transform: translate3d(-3vw,0,-35px); }
.slide::after { content: attr(data-number); position: absolute; right: 5.7vw; bottom: 7.5vh; color: rgba(237,243,244,.08); font-size: clamp(7rem, 17vw, 18rem); font-weight: 800; line-height: .7; pointer-events: none; }

.grid { width: min(88vw, 1640px); height: min(74vh, 880px); margin: auto; display: grid; grid-template-columns: minmax(360px,.82fr) minmax(400px,1.18fr); gap: clamp(32px,5vw,96px); align-items: center; }
.copy { position: relative; z-index: 3; max-width: 690px; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; color: var(--cyan); font-size: clamp(.68rem,.8vw,.86rem); font-weight: 750; letter-spacing: .22em; text-transform: uppercase; }
.eyebrow::before { content:""; width: 38px; height: 1px; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); }
h1 { margin: 0; max-width: 880px; font-size: clamp(3rem,6.4vw,7.4rem); line-height: .93; letter-spacing: -.065em; font-weight: 720; text-wrap: balance; }
h2 { margin: 0; font-size: clamp(2.6rem,4.4vw,5.3rem); line-height: .98; letter-spacing: -.055em; font-weight: 690; text-wrap: balance; }
.accent { color: var(--cyan); text-shadow: 0 0 30px rgba(18,217,230,.16); }
.lead { margin: 30px 0 0; max-width: 660px; color: #c9d4d7; font-size: clamp(1.05rem,1.38vw,1.48rem); line-height: 1.56; letter-spacing: -.018em; }
.facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.fact { padding: 10px 15px; border: 1px solid var(--line); border-radius: 999px; color: #bdcdd1; background: rgba(8,22,28,.56); backdrop-filter: blur(12px); font-size: clamp(.72rem,.78vw,.86rem); letter-spacing: .01em; }
.cta { display: inline-flex; align-items: center; gap: 12px; margin-top: 34px; padding: 15px 21px; color: var(--white); border: 1px solid var(--cyan); background: rgba(18,217,230,.1); border-radius: 3px; font-size: .88rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; box-shadow: 0 0 36px rgba(18,217,230,.09), inset 0 0 24px rgba(18,217,230,.04); }
.cta::after { content: "↗"; color: var(--cyan); font-size: 1rem; }

.visual { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; transform-style: preserve-3d; }
.poster { position: relative; display:block; padding:0; height: min(71vh,840px); aspect-ratio: 941/1672; overflow: hidden; border: 1px solid rgba(165,227,232,.18); border-radius: 5px; background: #071016; box-shadow: 0 48px 90px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.03), 0 0 70px rgba(18,217,230,.08); transform: rotateY(-4deg) rotateX(1deg); transition: transform 1s var(--ease); cursor: zoom-in; }
.poster:focus-visible { outline:2px solid var(--cyan); outline-offset:6px; }
.active .poster { animation: settle 1.15s var(--ease) both; }
@keyframes settle { from { transform: translate3d(50px,16px,-80px) rotateY(-9deg) rotateX(3deg); filter: brightness(.7); } to { transform: rotateY(-4deg) rotateX(1deg); filter: none; } }
.poster img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.005); }
.poster::after { content:""; position:absolute; inset:0; pointer-events:none; box-shadow: inset 0 0 60px rgba(0,0,0,.22); }
.visual::before { content:""; position:absolute; width:58%; height:74%; border-radius:50%; background:rgba(18,217,230,.13); filter:blur(85px); }

.duo { gap: clamp(14px,2vw,30px); }
.duo .poster { height: min(63vh,760px); }
.duo .poster:first-of-type { transform: translateY(-2.5vh) rotateY(7deg); }
.duo .poster:last-of-type { transform: translateY(3vh) rotateY(-6deg); }
.duo .poster + .poster { margin-left: -5%; }
.duo .poster:first-of-type img { animation-delay: -.3s; }

.hero { padding-inline: 5.7vw; }
.hero .grid { grid-template-columns: 1.05fr .95fr; }
.hero .copy { align-self: center; }
.hero .visual { justify-content: flex-end; }
.hero .poster { height: min(74vh,890px); }
.hero .poster.secondary { height: min(57vh,680px); margin-left: -8%; transform: translateY(8vh) rotateY(-8deg); z-index: -1; opacity: .7; }
.hero-mark { display:flex; align-items:center; gap:12px; margin-bottom:28px; color:var(--muted); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; }
.hero-mark i { width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 20px var(--cyan); animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity:.4; transform:scale(.72); } }

.statement .grid { grid-template-columns: .92fr 1.08fr; }
.statement .poster { height: min(68vh,800px); }
.statement .copy { padding-left: 2vw; }
.index-list { margin: 34px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.index-list li { display: grid; grid-template-columns: 38px 1fr; gap: 16px; padding: 15px 0; border-bottom: 1px solid var(--line); color: #b7c6ca; font-size: clamp(.88rem,1vw,1.04rem); }
.index-list b { color: var(--cyan); font-size: .76rem; letter-spacing:.1em; }

.fullbleed { padding: 0; }
.fullbleed .scene { position:absolute; inset:0; }
.fullbleed .scene img { width:100%; height:100%; object-fit:cover; filter:brightness(.46) saturate(.9); transform:scale(1.035); animation:kenburns 16s ease-in-out infinite alternate; }
@keyframes kenburns { to { transform:scale(1.11) translate3d(-1.2%,.8%,0); } }
.fullbleed .scene::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,5,8,.78) 36%,rgba(0,7,10,.18) 73%),linear-gradient(0deg,#02080c 0,transparent 34%); }
.fullbleed .grid { position: relative; z-index: 2; grid-template-columns: minmax(0, 1fr); }
.fullbleed .copy { margin-left: 7vw; max-width: min(660px, 48vw); }
.fullbleed h2 { max-width: 650px; font-size: clamp(2.75rem,4.6vw,5.75rem); line-height: .91; }
.fullbleed .lead { max-width: 590px; }

.finale .grid { grid-template-columns: minmax(390px,.88fr) minmax(360px,1.12fr); }
.finale .copy { max-width: 690px; }
.finale h2 { font-size: clamp(2.75rem,4.8vw,5.8rem); line-height: .92; }
.finale .visual { justify-content: flex-end; }
.finale .poster { height: min(73vh,850px); transform: rotateY(-2deg); }
.finale .visual::after { content:""; position:absolute; inset:7% 5% 6% 10%; z-index:-1; background:radial-gradient(circle,rgba(18,217,230,.13),transparent 68%); filter:blur(35px); }

.topbar { position: fixed; z-index: 20; left: 5.7vw; right: 5.7vw; top: 3.3vh; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; pointer-events: none; }
.topbar img { width: clamp(148px,11vw,212px); height: auto; }
.chapter { color: rgba(237,243,244,.52); font-size: .68rem; font-weight: 700; letter-spacing: .22em; }
.topbar .ghost { justify-self: end; pointer-events: auto; }
.ghost, .round { border: 1px solid var(--line); color: #cbd7da; background: rgba(3,12,16,.58); backdrop-filter: blur(12px); cursor: pointer; transition: .25s ease; }
.ghost:hover, .round:hover { color: #fff; border-color: rgba(18,217,230,.7); background: rgba(18,217,230,.1); }
.ghost { padding: 9px 13px; border-radius: 3px; font-size: .7rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.autoplay-button { display:inline-flex; align-items:center; gap:8px; }
.autoplay-button i { width:7px; height:7px; border-radius:50%; background:#60747a; transition:.25s ease; }
.autoplay-button.is-playing { border-color:rgba(18,217,230,.65); color:#fff; }
.autoplay-button.is-playing i { background:var(--cyan); box-shadow:0 0 14px var(--cyan); animation:pulse 1.2s ease-in-out infinite; }
.round { width: 39px; height: 39px; border-radius: 50%; }

.controls { position: fixed; z-index: 20; left: 5.7vw; right: 5.7vw; bottom: 3.3vh; display: flex; align-items: center; gap: 12px; }
.counter { display:flex; align-items:baseline; gap:7px; width:70px; margin-left:5px; color:rgba(237,243,244,.45); font-size:.72rem; }
.counter b { color:var(--white); font-size:1rem; }
.progress { height: 1px; flex: 1; background: rgba(255,255,255,.14); overflow:hidden; }
.progress i { display:block; width:0; height:100%; background:var(--cyan); box-shadow:0 0 16px var(--cyan); transition:width .65s var(--ease); }

.notes { position:fixed; z-index:40; top:0; right:0; bottom:0; width:min(430px,92vw); padding:28px; background:rgba(4,12,16,.96); border-left:1px solid rgba(18,217,230,.24); box-shadow:-30px 0 80px rgba(0,0,0,.5); transform:translateX(105%); transition:transform .55s var(--ease); backdrop-filter:blur(25px); }
.notes.open { transform:none; }
.notes-head { display:flex; align-items:center; justify-content:space-between; color:var(--cyan); font-size:.7rem; letter-spacing:.18em; }
.notes-head button, .gallery-head button { border:0; background:none; color:#fff; font-size:2rem; cursor:pointer; }
.notes p { margin:15vh 0 22px; font-size:clamp(1.2rem,1.5vw,1.55rem); line-height:1.55; color:#dde6e8; }
.notes small { display:block; padding-top:22px; border-top:1px solid var(--line); color:#7f959b; line-height:1.6; }

.gallery { width:100vw; height:100vh; max-width:none; max-height:none; padding:0; border:0; color:var(--white); background:rgba(2,8,11,.97); }
.gallery::backdrop { background:#000; }
.gallery-head { position:sticky; top:0; z-index:2; display:flex; justify-content:space-between; align-items:center; padding:28px 5vw 22px; background:linear-gradient(#02080b 70%,transparent); }
.gallery-head small { color:var(--cyan); letter-spacing:.2em; }
.gallery-head h2 { margin-top:4px; font-size:clamp(1.8rem,3vw,3.2rem); }
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:18px; padding:12px 5vw 70px; }
.gallery-grid figure { margin:0; position:relative; overflow:hidden; border:1px solid var(--line); background:#081117; box-shadow:0 20px 40px rgba(0,0,0,.28); }
.gallery-grid img { display:block; width:100%; aspect-ratio:941/1672; object-fit:cover; transition:transform .65s var(--ease), filter .4s ease; cursor:zoom-in; }
.gallery-grid figure:hover img { transform:scale(1.025); filter:brightness(1.08); }
.gallery-grid figcaption { position:absolute; left:0; right:0; bottom:0; padding:28px 12px 12px; color:#dce6e8; font-size:.72rem; background:linear-gradient(transparent,rgba(0,0,0,.85)); }

.viewer { width:100vw; height:100vh; max-width:none; max-height:none; margin:0; padding:0; border:0; overflow:hidden; background:rgba(0,0,0,.97); color:var(--white); }
.viewer::backdrop { background:#000; }
.viewer figure { position:absolute; inset:22px 74px 18px; margin:0; display:flex; align-items:center; justify-content:center; }
.viewer img { display:block; width:100%; height:calc(100% - 28px); object-fit:contain; filter:drop-shadow(0 34px 70px rgba(0,0,0,.62)); }
.viewer figcaption { position:absolute; left:50%; bottom:0; transform:translateX(-50%); color:rgba(237,243,244,.65); font-size:.68rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; white-space:nowrap; }
.viewer-close { position:absolute; z-index:3; right:24px; top:18px; width:46px; height:46px; border:1px solid var(--line); border-radius:50%; color:#fff; background:rgba(4,14,18,.72); font-size:1.8rem; cursor:pointer; }
.viewer-nav { position:absolute; z-index:3; top:50%; width:46px; height:46px; margin-top:-23px; border:1px solid var(--line); border-radius:50%; color:#fff; background:rgba(4,14,18,.72); cursor:pointer; }
.viewer-prev { left:18px; }
.viewer-next { right:18px; }
.viewer-close:hover,.viewer-nav:hover { border-color:var(--cyan); background:rgba(18,217,230,.12); }

.hint { position:fixed; z-index:22; left:50%; top:50%; transform:translate(-50%,-50%); padding:13px 18px; color:#bed0d4; background:rgba(0,5,8,.82); border:1px solid var(--line); border-radius:4px; opacity:0; pointer-events:none; animation:hint 4.5s ease 1s both; }
@keyframes hint { 0%,100%{opacity:0} 15%,75%{opacity:1} }

.active .reveal { animation:reveal .85s var(--ease) both; }
.active .reveal:nth-child(2){animation-delay:.08s}.active .reveal:nth-child(3){animation-delay:.16s}.active .reveal:nth-child(4){animation-delay:.24s}.active .reveal:nth-child(5){animation-delay:.32s}
@keyframes reveal { from { opacity:0; transform:translateY(24px); filter:blur(7px); } to { opacity:1; transform:none; filter:none; } }

@media (max-width: 900px) {
  .slide { padding: 9vh 6vw 12vh; }
  .grid, .hero .grid, .statement .grid { grid-template-columns:1fr 1fr; gap:4vw; }
  h1 { font-size:clamp(2.2rem,7vw,4rem); }
  h2, .fullbleed h2 { font-size:clamp(2rem,5.5vw,3.4rem); }
  .lead { font-size:.98rem; margin-top:18px; }
  .facts { margin-top:18px; }
  .poster { height:min(62vh,690px); }
  .duo .poster { height:min(51vh,600px); }
  .finale .grid { grid-template-columns:1fr 1fr; }
  .finale .poster { height:min(63vh,700px); }
  .control-label { display:none; }
}

@media (max-height: 760px) {
  .fullbleed .copy { max-width: min(590px, 50vw); }
  .fullbleed h2 { max-width: 580px; font-size: clamp(2.45rem, 4.15vw, 4.65rem); }
  .fullbleed .lead { margin-top: 20px; font-size: clamp(.92rem, 1.12vw, 1.16rem); line-height: 1.45; }
  .fullbleed .cta { margin-top: 23px; padding: 12px 17px; }
}

@media (max-height: 620px) {
  .fullbleed h2 { font-size: clamp(2.1rem, 3.7vw, 3.8rem); }
  .fullbleed .lead { margin-top: 14px; line-height: 1.38; }
  .fullbleed .cta { margin-top: 16px; }
}

@media (max-width: 640px) and (orientation: portrait) {
  .slide { padding: 10vh 7vw 13vh; }
  .grid, .hero .grid, .statement .grid { grid-template-columns:1fr; height:80vh; gap:2vh; }
  .copy { align-self:end; }
  .lead { display:none; }
  .facts { display:none; }
  .visual { height:44vh; justify-content:center!important; }
  .poster, .hero .poster, .statement .poster { height:43vh; }
  .duo .poster { height:38vh; }
  .fullbleed .copy { margin:10vh 8vw 0; }
  .finale .grid { grid-template-columns:1fr; }
  .finale .poster { height:43vh; }
  .topbar { left:7vw; right:7vw; }
  .chapter { display:none; }
  .controls { left:7vw; right:7vw; }
  .viewer figure { inset:58px 12px 16px; }
  .viewer-nav { bottom:18px; top:auto; }
}

@media print {
  @page { size: 16in 9in; margin: 0; }
  html, body { overflow: visible; background:#03090d; }
  .ambient, .topbar, .controls, .notes, .gallery, .hint { display:none!important; }
  #deck { position:static; }
  .slide { position:relative; width:16in; height:9in; padding:.72in 1in; opacity:1!important; visibility:visible!important; transform:none!important; page-break-after:always; overflow:hidden; }
  .slide:last-child { page-break-after:auto; }
  .grid { width:14in; height:7.5in; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}