/* ═══════════════════════════════════════════════════════════
   ABOUT THE EYE — Cinematic Scene-by-Scene
   Ogni scena è un fotogramma: peso, composizione, impatto.
   ═══════════════════════════════════════════════════════════ */

:root {
  --ab-bg:      #080808;
  --ab-ink:     #edeae2;
  --ab-dim:     rgba(237,234,226,.95);
  --ab-dimmer:  rgba(237,234,226,.85);
  --ab-copper:  #c4914a;
  --ab-copper2: rgba(196,145,74,.15);
  --ab-serif:   'Cinzel', 'Georgia', serif;
  --ab-sans:    'Raleway', 'Helvetica Neue', Arial, sans-serif;
  --ab-dur:     .85s;
  --ab-ease:    cubic-bezier(.22,1,.36,1);
}

/* ──────────────────────────────────────────
   OVERLAY
────────────────────────────────────────── */
#about-overlay {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: #080808;  /* sfondo base nero */
  display: none;
  opacity: 0;
  transition: opacity .55s ease;
}
#about-overlay.open    { display: block; }
#about-overlay.visible { opacity: 1; }

/* Canvas sfondo animato — piena schermata, visibile SOTTO le scene */
#ab-bg-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 801;
  pointer-events: none;
  display: block;
  opacity: 1;
}

/* Film sopra il canvas */
.ab-film        { z-index: 802; background: transparent; }
.ab-close       { z-index: 820; }
.ab-progress-bar{ z-index: 821; }

/* Close */
.ab-close {
  position: fixed;
  top: 24px; right: 26px;
  z-index: 820;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid rgba(237,234,226,.25);
  color: rgba(237,234,226,.90);
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color .2s, color .2s, opacity .45s;
  opacity: 0;
}
.ab-close.shown { opacity: 1; }
.ab-close:hover { border-color: rgba(237,234,226,.7); color: var(--ab-ink); }

/* Progress bar */
.ab-progress-bar {
  position: fixed; top: 0; left: 0;
  height: 1px; width: 0%;
  background: var(--ab-copper);
  z-index: 821;
  transition: width .45s ease, opacity .4s;
  opacity: 0;
}
.ab-progress-bar.shown { opacity: 1; }

/* ──────────────────────────────────────────
   FILM — scroll container
────────────────────────────────────────── */
.ab-film {
  position: absolute; inset: 0;
  overflow-y: scroll; overflow-x: hidden;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
}
.ab-film::-webkit-scrollbar { display: none; }

/* ──────────────────────────────────────────
   SCENE — base: NESSUN BACKGROUND — devono essere trasparenti
   per permettere al canvas di essere visibile
────────────────────────────────────────── */
.ab-scene {
  position: relative;
  width: 100%; height: 100vh;
  display: flex; align-items: center; justify-content: center;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  background: transparent;
}

/* Animazione entrata — ogni scena gestisce i propri children */
.ab-scene [data-in] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--ab-dur) var(--ab-ease),
              transform var(--ab-dur) var(--ab-ease);
}
.ab-scene.active [data-in="1"] { opacity:1; transform:none; transition-delay:.06s; }
.ab-scene.active [data-in="2"] { opacity:1; transform:none; transition-delay:.22s; }
.ab-scene.active [data-in="3"] { opacity:1; transform:none; transition-delay:.40s; }
.ab-scene.active [data-in="4"] { opacity:1; transform:none; transition-delay:.60s; }
.ab-scene.active [data-in="5"] { opacity:1; transform:none; transition-delay:.80s; }

/* Uscita verso l'alto */
.ab-scene.exiting [data-in] {
  opacity: 0 !important;
  transform: translateY(-16px) !important;
  transition: opacity .4s ease, transform .4s ease !important;
  transition-delay: 0s !important;
}

/* ══════════════════════════════════════════
   SCENA 0 — TITLE CARD
   "THE EYE" enorme come watermark di sfondo,
   contenuto piccolo e preciso al centro-sinistra.
══════════════════════════════════════════ */
.s0 { justify-content: flex-start; align-items: flex-end; }

/* Testo di sfondo — tagliato dal bordo, puramente decorativo */
.s0-bg-text {
  position: absolute;
  bottom: -0.18em; right: -0.06em;
  font-family: var(--ab-serif);
  font-size: clamp(180px, 26vw, 340px);
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px rgba(196,145,74,.35);
  text-stroke: 1px rgba(196,145,74,.35);
  letter-spacing: -4px;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 1.2s ease .3s;
}
.s0.active .s0-bg-text { opacity: 1; }

.s0-content {
  position: absolute;
  left: clamp(32px, 8vw, 96px);
  bottom: clamp(80px, 14vh, 140px);
  display: flex; flex-direction: column; gap: 16px;
}
.s0-label {
  font-family: var(--ab-sans);
  font-size: 10px; letter-spacing: 7px;
  text-transform: uppercase;
  color: var(--ab-copper);
}
.s0-title {
  font-family: var(--ab-serif);
  font-size: clamp(64px, 10vw, 128px);
  font-weight: 700; line-height: .95;
  color: var(--ab-ink); letter-spacing: 1px;
}
.s0-sub {
  font-family: var(--ab-sans);
  font-size: clamp(12px, 1.3vw, 14px);
  font-weight: 300; letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ab-dim);
}

/* Freccia scroll */
.s0-hint {
  position: absolute;
  right: clamp(28px, 5vw, 56px);
  top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column;
  align-items: center; gap: 10px;
  opacity: 0;
  animation: s0hint 2.2s ease-in-out infinite 1.5s;
}
.s0-hint-line {
  width: 1px; height: 56px;
  background: linear-gradient(to bottom, transparent, var(--ab-copper));
}
.s0-hint-word {
  font-family: var(--ab-sans);
  font-size: 8px; letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ab-copper);
  writing-mode: vertical-rl;
}
@keyframes s0hint {
  0%,100% { opacity:.40; transform: translateY(-50%) translateY(0); }
  50%     { opacity:.85; transform: translateY(-50%) translateY(8px); }
}

/* ══════════════════════════════════════════
   SCENA 1 — NOT
   "NOT" gigantissimo come struttura, le negazioni
   a destra come corpo secondario.
══════════════════════════════════════════ */
.s1 { justify-content: flex-end; }

.s1-not {
  position: absolute;
  left: clamp(-20px, -2vw, 0px);
  top: 50%; transform: translateY(-50%);
  font-family: var(--ab-serif);
  font-size: clamp(200px, 28vw, 380px);
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px rgba(196,145,74,.50);
  text-stroke: 1px rgba(196,145,74,.50);
  line-height: 1; letter-spacing: -8px;
  user-select: none; pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease .1s;
}
.s1.active .s1-not { opacity: 1; }

.s1-list {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  gap: 0;
  margin-right: clamp(32px, 8vw, 100px);
  max-width: 480px;
}
.s1-item {
  font-family: var(--ab-serif);
  padding: 22px 0;
  border-bottom: 1px solid rgba(237,234,226,.12);
  letter-spacing: .3px;
  line-height: 1.2;
}
.s1-item:last-child { border-bottom: none; }
.s1-i1 {
  font-size: clamp(20px, 3vw, 34px);
  font-weight: 700;
  color: var(--ab-ink);
}
.s1-i2, .s1-i3 {
  font-size: clamp(16px, 2.2vw, 26px);
  font-weight: 400;
  color: #edeae2;
}

/* ══════════════════════════════════════════
   SCENA 2 — MONUMENT
   Frase unica centrata, dimensione massima.
   Linea orizzontale rame come asse.
══════════════════════════════════════════ */
.s2 {
  flex-direction: column;
  gap: 0;
}

.s2-eyeline {
  font-family: var(--ab-sans);
  font-size: 11px; letter-spacing: 8px;
  color: var(--ab-copper);
  margin-bottom: 32px;
  align-self: center;
}

.s2-phrase {
  font-family: var(--ab-serif);
  font-size: clamp(32px, 5.5vw, 72px);
  font-weight: 700;
  color: var(--ab-ink);
  line-height: 1.15;
  letter-spacing: -.5px;
  text-align: center;
  max-width: 860px;
  padding: 0 clamp(28px, 6vw, 80px);
  position: relative;
}
/* Linea rame laterale sinistra */
.s2-phrase::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, var(--ab-copper), transparent);
  opacity: .65;
}

/* ══════════════════════════════════════════
   SCENA 3 — NUMBERS
   "1.4M" enorme watermark a destra,
   testo spiegazione a sinistra strutturato.
══════════════════════════════════════════ */
.s3 { justify-content: flex-start; align-items: center; }

.s3-num {
  position: absolute;
  right: clamp(-30px, -2vw, -10px);
  top: 50%; transform: translateY(-50%);
  font-family: var(--ab-serif);
  font-size: clamp(160px, 22vw, 300px);
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px rgba(196,145,74,.45);
  text-stroke: 1px rgba(196,145,74,.45);
  line-height: 1; letter-spacing: -6px;
  user-select: none; pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease .1s;
}
.s3.active .s3-num { opacity: 1; }

.s3-body {
  position: relative; z-index: 2;
  margin-left: clamp(32px, 8vw, 96px);
  max-width: 420px;
  display: flex; flex-direction: column; gap: 18px;
}
.s3-label {
  font-family: var(--ab-sans);
  font-size: 9px; letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--ab-copper);
}
.s3-text {
  font-family: var(--ab-sans);
  font-size: clamp(15px, 2vw, 21px);
  font-weight: 300;
  color: #edeae2;
  line-height: 1.85;
  letter-spacing: .3px;
  margin: 0;
}

/* ══════════════════════════════════════════
   SCENA 4 — PRESENCE / CREDITS
   Header grande, poi tre righe in stile
   "credits di film" con numero e voce.
══════════════════════════════════════════ */
.s4 { align-items: center; justify-content: center; }

.s4-wrap {
  width: 100%;
  max-width: 700px;
  padding: 0 clamp(32px, 8vw, 80px);
  display: flex; flex-direction: column; gap: 40px;
}
.s4-head {
  font-family: var(--ab-serif);
  font-size: clamp(18px, 2.8vw, 32px);
  font-weight: 400;
  color: var(--ab-copper);
  letter-spacing: .5px;
  line-height: 1.4;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(196,145,74,.3);
}
.s4-credits {
  display: flex; flex-direction: column; gap: 0;
}
.s4-row {
  display: flex; align-items: baseline; gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(237,234,226,.10);
}
.s4-row:last-child { border-bottom: none; }
.s4-num {
  font-family: var(--ab-sans);
  font-size: 10px; letter-spacing: 3px;
  color: var(--ab-copper);
  min-width: 28px; flex-shrink: 0;
}
.s4-word {
  font-family: var(--ab-serif);
  font-size: clamp(28px, 5vw, 64px);
  font-weight: 700;
  color: var(--ab-ink);
  line-height: 1;
  letter-spacing: -.5px;
}

/* ══════════════════════════════════════════
   SCENA 5 — TOGETHER / LARGER
   Composizione verticale asimmetrica:
   "Together," piccolo → "something larger." enorme.
══════════════════════════════════════════ */
.s5 { justify-content: flex-start; align-items: flex-end; }

.s5-wrap {
  position: relative;
  width: 100%;
  padding: 0 clamp(32px, 8vw, 80px) clamp(60px, 10vh, 100px);
  display: flex; flex-direction: column; gap: 12px;
}
.s5-pre {
  font-family: var(--ab-sans);
  font-size: clamp(14px, 1.8vw, 20px);
  font-weight: 300; letter-spacing: 3px;
  text-transform: uppercase;
  color: #edeae2;
}
.s5-big {
  font-family: var(--ab-serif);
  font-size: clamp(54px, 10vw, 130px);
  font-weight: 700;
  color: var(--ab-ink);
  line-height: .95; letter-spacing: -2px;
}
.s5-line {
  width: 48px; height: 1px;
  background: var(--ab-copper);
  opacity: .65;
  margin: 8px 0;
}
.s5-sub {
  font-family: var(--ab-sans);
  font-size: clamp(12px, 1.4vw, 15px);
  font-weight: 300; letter-spacing: 1.5px;
  color: var(--ab-dimmer);
  max-width: 360px;
}

/* ══════════════════════════════════════════
   SCENA 6 — DISAPPEAR
   Label piccola sopra, poi tre parole enormi
   con strikethrough decorativo rame.
══════════════════════════════════════════ */
.s6 { flex-direction: column; justify-content: center; align-items: flex-start; }

.s6-label {
  position: absolute;
  top: clamp(30px, 6vh, 60px);
  left: clamp(32px, 8vw, 80px);
  font-family: var(--ab-sans);
  font-size: 10px; letter-spacing: 4px;
  text-transform: uppercase;
  color: #edeae2;
}
.s6-list {
  width: 100%;
  padding: 0 clamp(32px, 8vw, 80px);
  display: flex; flex-direction: column; gap: 0;
}
.s6-item {
  padding: 14px 0;
  border-bottom: 1px solid rgba(237,234,226,.10);
  overflow: hidden;
}
.s6-item:last-child { border-bottom: none; }
.s6-strike {
  display: inline-block;
  font-family: var(--ab-serif);
  font-size: clamp(44px, 9vw, 110px);
  font-weight: 700; line-height: 1;
  color: #edeae2;
  letter-spacing: -1px;
  text-decoration: line-through;
  text-decoration-color: rgba(196,145,74,.70);
  text-decoration-thickness: 2px;
}

/* ══════════════════════════════════════════
   SCENA 7 — TO REMAIN
   Due righe: piccola sbiadita + enorme bianca.
   Occupa quasi tutta la schermata.
══════════════════════════════════════════ */
.s7 { justify-content: flex-start; align-items: flex-end; }

.s7-wrap {
  width: 100%;
  padding: 0 clamp(28px, 6vw, 72px) clamp(48px, 8vh, 80px);
  display: flex; flex-direction: column; gap: 10px;
}
.s7-not {
  font-family: var(--ab-sans);
  font-size: clamp(13px, 1.6vw, 17px);
  font-weight: 300; letter-spacing: 2px;
  text-transform: uppercase;
  color: #edeae2;
}
.s7-remain {
  font-family: var(--ab-serif);
  font-size: clamp(72px, 14vw, 180px);
  font-weight: 700;
  color: var(--ab-ink);
  line-height: .9; letter-spacing: -3px;
  /* Lieve gradient per profondità */
  background: linear-gradient(135deg, #edeae2 60%, rgba(196,145,74,.9));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ══════════════════════════════════════════════════════
   SCENA 8 — FINALE EPICO
   L'iris occupa tutta la scena, pulsa lentamente.
   Titolo monumentale con gradient rame/bianco.
   CTA con alone luminoso al hover.
══════════════════════════════════════════════════════ */
.s8 { flex-direction: column; justify-content: center; align-items: center; }

/* Watermark "THE EYE" gigantissimo dietro tutto */
.s8-bg-word {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--ab-serif);
  font-size: clamp(100px, 18vw, 240px);
  font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1px rgba(196,145,74,.07);
  text-stroke: 1px rgba(196,145,74,.07);
  white-space: nowrap;
  letter-spacing: 14px;
  user-select: none; pointer-events: none;
  opacity: 0;
  transition: opacity 2.5s ease .8s;
}
.s8.active .s8-bg-word { opacity: 1; }

/* Iris — quasi tutta la viewport, pulsa */
.s8-iris {
  position: absolute;
  width: min(90vw, 90vh);
  height: min(90vw, 90vh);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 2s ease .1s;
}
.s8.active .s8-iris { opacity: 1; }

.s8-r {
  position: absolute; border-radius: 50%;
  border: 1px solid;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.s8-r0 { width:100%; height:100%; border-color: rgba(196,145,74,.04); animation: iris-pulse 7s ease-in-out infinite 0.0s; }
.s8-r1 { width:84%;  height:84%;  border-color: rgba(196,145,74,.08); animation: iris-pulse 7s ease-in-out infinite 0.5s; }
.s8-r2 { width:68%;  height:68%;  border-color: rgba(196,145,74,.14); animation: iris-pulse 7s ease-in-out infinite 1.0s; }
.s8-r3 { width:52%;  height:52%;  border-color: rgba(196,145,74,.22); animation: iris-pulse 7s ease-in-out infinite 1.5s; }
.s8-r4 { width:36%;  height:36%;  border-color: rgba(196,145,74,.33); animation: iris-pulse 7s ease-in-out infinite 2.0s; }
.s8-r5 { width:20%;  height:20%;  border-color: rgba(196,145,74,.48); animation: iris-pulse 7s ease-in-out infinite 2.5s; }

@keyframes iris-pulse {
  0%,100% { opacity: .75; transform: translate(-50%,-50%) scale(1); }
  50%     { opacity: 1;   transform: translate(-50%,-50%) scale(1.025); }
}

/* Raggi diagonali */
.s8-spoke {
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; height: 1px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(196,145,74,.05) 30%,
    rgba(196,145,74,.10) 50%,
    rgba(196,145,74,.05) 70%,
    transparent 100%);
  transform-origin: center center;
  animation: spoke-glow 7s ease-in-out infinite;
}
.s8-sp1 { transform: translate(-50%,-50%) rotate(0deg); }
.s8-sp2 { transform: translate(-50%,-50%) rotate(45deg); }
.s8-sp3 { transform: translate(-50%,-50%) rotate(90deg); }
.s8-sp4 { transform: translate(-50%,-50%) rotate(135deg); }
@keyframes spoke-glow {
  0%,100% { opacity: .5; }
  50%     { opacity: 1; }
}

/* Punti centrali */
.s8-dot {
  position: absolute;
  width: 5%; height: 5%;
  border-radius: 50%;
  border: 1px solid rgba(196,145,74,.55);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  animation: iris-pulse 5s ease-in-out infinite;
}
.s8-dot-inner {
  position: absolute;
  width: 2%; height: 2%;
  border-radius: 50%;
  background: var(--ab-copper);
  opacity: .90;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
}

/* Contenuto centrale */
.s8-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  align-items: center; gap: 20px;
  text-align: center;
  padding: 0 clamp(24px, 6vw, 80px);
}

/* "— CHAPTER IX —" */
.s8-eyeline {
  font-family: var(--ab-sans);
  font-size: 9px; letter-spacing: 8px;
  text-transform: uppercase;
  color: var(--ab-copper);
}

/* Titolo — monumentale */
.s8-headline {
  font-family: var(--ab-serif);
  font-size: clamp(52px, 10vw, 128px);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -1px;
  margin: 0;
  background: linear-gradient(160deg, #edeae2 35%, rgba(196,145,74,.95) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Divisore */
.s8-divider {
  width: 64px; height: 1px;
  background: linear-gradient(to right, transparent, var(--ab-copper), transparent);
}

/* Corpo */
.s8-purpose {
  font-family: var(--ab-sans);
  font-size: clamp(11px, 1.3vw, 14px);
  font-weight: 300; letter-spacing: 2px;
  text-transform: uppercase;
  color: #edeae2;
  max-width: 420px;
  line-height: 2;
}

/* Wrapper CTA */
.s8-cta-wrap {
  display: flex; flex-direction: column;
  align-items: center; gap: 20px;
  margin-top: 6px;
}

/* ──────────────────────────────────────────
   CTA
────────────────────────────────────────── */
.ab-cta-btn {
  display: inline-flex; align-items: center; gap: 12px;
  background: transparent;
  border: 1px solid var(--ab-copper);
  color: var(--ab-copper);
  font-family: var(--ab-sans);
  font-size: 10px; letter-spacing: 3.5px;
  text-transform: uppercase;
  padding: 15px 36px;
  cursor: pointer;
  transition: background .25s, color .25s;
}
.ab-cta-btn:hover { background: var(--ab-copper); color: var(--ab-bg); }
.ab-cta-btn i { font-size: 10px; }

/* Versione epica — alone dorato al hover */
.ab-cta-epic {
  font-size: 11px; letter-spacing: 5px;
  padding: 20px 56px;
  position: relative; overflow: hidden;
  transition: background .3s, color .3s, box-shadow .4s, transform .2s;
}
.ab-cta-epic::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(196,145,74,.10) 50%,
    transparent 100%);
  transform: translateX(-100%);
  transition: transform .55s ease;
}
.ab-cta-epic:hover::before { transform: translateX(100%); }
.ab-cta-epic:hover {
  background: var(--ab-copper);
  color: var(--ab-bg);
  box-shadow: 0 0 48px rgba(196,145,74,.40), 0 0 90px rgba(196,145,74,.18);
  transform: translateY(-2px);
}
.ab-cta-epic:active { transform: translateY(0); }

/* Firma testuale (usata altrove) */
.ab-sig {
  font-family: var(--ab-serif);
  font-size: 11px; letter-spacing: 4px;
  color: rgba(237,234,226,.65);
  text-transform: uppercase;
}
.ab-sig span {
  font-family: var(--ab-sans);
  font-size: 10px; letter-spacing: 2px;
  font-weight: 300;
}

/* Firma immagine — scena finale */
.ab-sig-img {
  width: clamp(180px, 28vw, 340px);
  height: auto;
  opacity: 0;
  filter: drop-shadow(0 0 18px rgba(196,145,74,.30));
  transition: opacity 1.2s ease, filter .4s ease;
  pointer-events: none;
  margin-top: 4px;
}
.s8.active .ab-sig-img {
  opacity: 0.88;
}
.ab-sig-img:hover {
  opacity: 1;
  filter: drop-shadow(0 0 28px rgba(196,145,74,.55));
}

/* ──────────────────────────────────────────
   RESPONSIVE
────────────────────────────────────────── */
@media (max-width: 768px) {
  .s0-title  { font-size: clamp(52px, 14vw, 96px); }
  .s0-hint   { right: 16px; }
  .s1-not    { font-size: clamp(130px, 36vw, 240px); letter-spacing: -4px; }
  .s1-list   { margin-right: 24px; }
  .s1-i1     { font-size: clamp(18px, 5vw, 28px); }
  .s2-phrase { font-size: clamp(26px, 6vw, 48px); }
  .s3-num    { font-size: clamp(120px, 28vw, 200px); }
  .s3-body   { margin-left: 28px; }
  .s4-word   { font-size: clamp(32px, 8vw, 52px); }
  .s5-big    { font-size: clamp(44px, 12vw, 88px); }
  .s6-strike { font-size: clamp(38px, 11vw, 72px); }
  .s7-remain { font-size: clamp(60px, 16vw, 110px); letter-spacing: -2px; }
  .s8-iris     { width: min(95vw, 75vh); height: min(95vw, 75vh); }
  .s8-headline { font-size: clamp(44px, 12vw, 88px); }
  .ab-cta-epic { padding: 16px 36px; }
  .ab-close  { top: 14px; right: 14px; }
}

@media (max-width: 480px) {
  .s0-title  { font-size: 54px; }
  .s1-not    { font-size: 28vw; }
  .s2-phrase { font-size: 24px; padding: 0 24px; }
  .s3-num    { display: none; }
  .s3-body   { margin-left: 24px; }
  .s4-word   { font-size: 36px; }
  .s5-big    { font-size: 14vw; }
  .s6-strike { font-size: 13vw; }
  .s7-remain { font-size: 15vw; }
  .ab-cta-btn{ padding: 13px 26px; }
}