/* ═══════════════════════════════════════════════════════════
   wonder.css — a wonder told as a film
   left: the picture, with glass cards · right: the story
   ═══════════════════════════════════════════════════════════ */

.wonder{height:100vh;height:100dvh;overflow:hidden}
.w-top{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;align-items:center;gap:22px;padding:22px clamp(18px, 3vw, 44px);pointer-events:none}
.w-top > *{pointer-events:auto}
.w-top .brand-s{width:22px;height:34px;flex:none}
.w-crumb{display:flex;align-items:center;gap:10px;font:500 13px/1 var(--sans);color:var(--nav)}
.w-crumb a:hover{color:var(--ink)}
.w-crumb b{color:var(--ink);font-weight:500}
.w-top nav{display:flex;gap:22px;margin-left:auto;font-size:14px;color:var(--nav)}
.w-top nav a:hover{color:var(--ink)}
.w-top .pill{height:40px;padding:0 18px;font-size:14px}
.w-top .pill span{transform:none}

.w-split{display:grid;grid-template-columns:minmax(0, 1.28fr) minmax(0, 1fr);height:100%}

/* ─── left: the picture ─── */
.w-visual{position:relative;overflow:hidden;background:#000;border-right:1px solid var(--line)}
.w-frame{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.4s var(--ease)}
.w-frame.on{opacity:1}
.w-frame img,.w-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 9s linear}
.w-frame.on img,.w-frame.on video{transform:scale(1)}
.w-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(5,5,5,.85), rgba(5,5,5,0) 42%), linear-gradient(90deg, rgba(5,5,5,.35), transparent 30%)}
.w-frame.prologue .blur{filter:blur(28px) brightness(.45) saturate(1.2);transform:scale(1.2)}
.w-frame.prologue .glass-win{left:50%;top:50%;width:auto;height:76%;aspect-ratio:9/16;transform:translate(-50%, -48%);object-fit:contain;filter:drop-shadow(0 0 60px rgba(226,172,56,.35))}
.w-frame.prologue.on .glass-win{transform:translate(-50%, -50%)}
.w-frame.verse img{filter:brightness(.42) saturate(.9)}

.w-caption{position:absolute;left:clamp(20px, 3vw, 44px);bottom:clamp(22px, 4vh, 44px);z-index:5;max-width:min(520px, 60%)}
.w-caption small{display:block;font:600 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.w-caption b{display:block;font:500 clamp(1.8rem, 1rem + 2vw, 3rem)/1.02 var(--serif);color:var(--ink);transition:opacity .6s}

/* glass cards on the inner edge of the picture */
.w-cards{position:absolute;right:clamp(16px, 2.4vw, 36px);top:50%;z-index:6;transform:translateY(-50%);display:grid;gap:12px;width:min(270px, 38%)}
.glass{border-radius:18px;padding:18px 18px 20px;background:rgba(18,16,13,.55);border:1px solid rgba(255,244,220,.13);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);box-shadow:0 30px 80px rgba(0,0,0,.45)}
.glass .lbl{display:flex;align-items:center;gap:10px;font:600 10.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--nav)}
.glass .lbl i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--gold);box-shadow:inset 0 0 0 2px rgba(5,5,5,.8), 0 0 8px rgba(226,172,56,.6)}
.glass .big{display:flex;align-items:baseline;gap:10px;margin:14px 0 4px;font:500 2.4rem/1 var(--serif);color:var(--ink)}
.glass .big small{font:400 1.2rem/1 var(--serif);color:var(--strip)}
.glass .ref{font-size:13px;color:var(--muted)}
.glass .bars{display:flex;gap:5px;margin-top:14px}
.glass .bars i{flex:1;height:3px;border-radius:3px;background:rgba(240,206,128,.16);transition:background .6s}
.glass .bars i.on{background:var(--gold)}
.glass .chip{display:inline-block;margin-top:12px;padding:6px 10px;border-radius:8px;background:rgba(226,172,56,.12);border:1px solid rgba(226,172,56,.25);font:600 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold-hi)}
.glass .win-row{display:flex;gap:14px;align-items:center;margin-top:14px}
.glass .win-row img{width:46px;height:78px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}
.glass .win-row b{display:block;font:500 1.15rem/1.15 var(--serif);color:var(--ink)}
.glass .win-row span{font-size:12.5px;color:var(--muted)}
.glass a.hear{display:inline-flex;gap:8px;margin-top:12px;font-size:13px;color:var(--gold-hi)}

/* ─── right: the story ─── */
.w-story{position:relative;display:flex;flex-direction:column;justify-content:center;padding:110px clamp(24px, 4vw, 72px) 40px;background:radial-gradient(90% 60% at 100% 0%, rgba(226,172,56,.06), transparent 60%), #070605}
.w-head{margin-bottom:clamp(20px, 4vh, 40px)}
.w-head .eyebrow{margin-bottom:14px}
.w-title{font:500 clamp(2.2rem, 1.4rem + 2.2vw, 3.6rem)/1 var(--serif);margin:0;color:var(--ink);letter-spacing:-.005em}
.w-latin{display:block;margin-top:8px;font:italic 400 1.1rem/1 var(--serif);color:var(--gold)}
.w-steps{list-style:none;margin:0;padding:0;position:relative;min-height:clamp(220px, 34vh, 320px)}
.w-step{position:absolute;inset:0 0 auto 0;opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .9s var(--ease), transform .9s var(--ease), visibility 0s .9s}
.w-step.on{opacity:1;visibility:visible;transform:none;transition:opacity 1s var(--ease) .25s, transform 1s var(--ease) .25s}
.w-step .n{font:600 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--strip)}
.w-step h2{font:500 clamp(1.5rem, 1.1rem + 1.1vw, 2.2rem)/1.1 var(--serif);margin:10px 0 6px;color:var(--ink)}
.w-step .ref{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.w-step p{font:400 clamp(1.15rem, 1rem + .45vw, 1.4rem)/1.55 var(--serif);color:#d9d1c2;margin:18px 0 0;max-width:30em}
.w-step blockquote{margin:16px 0 0;font:italic 400 clamp(1.4rem, 1.1rem + .9vw, 2rem)/1.35 var(--serif);color:var(--gold-hi)}
.w-step cite{display:block;margin-top:12px;font:600 12px/1 var(--sans);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.w-next{display:flex;gap:14px;align-items:center;margin-top:26px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--card);transition:border-color .4s}
.w-next:hover{border-color:var(--line-2)}
.w-next img{width:44px;height:74px;object-fit:cover;border-radius:8px}
.w-next small{display:block;font:600 10.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--strip);margin-bottom:6px}
.w-next b{font:500 1.3rem/1.1 var(--serif);color:var(--ink)}

.w-ctrl{display:flex;align-items:center;gap:22px;margin-top:clamp(24px, 5vh, 48px)}
.w-ctrl .pill{height:48px;padding:0 24px;font-size:15px;border:0;cursor:pointer}
.w-ctrl .pill span{transform:none}
.w-ctrl .ghost{background:none;border:0;cursor:pointer;font-size:15px;padding:0}
.w-ctrl .ghost[disabled]{opacity:.3;cursor:default}
.w-dots{display:flex;gap:8px;margin-left:auto}
.w-dots button{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:none;cursor:pointer;font:600 10px/1 var(--sans);color:var(--strip);padding:0;transition:all .4s}
.w-dots button.on{border-color:var(--gold);color:var(--gold-hi);background:rgba(226,172,56,.1)}
.w-hint{margin-top:22px;font-size:12.5px;color:var(--strip)}

/* ─── phones and tall screens: the picture sticks, the story scrolls under it ─── */
@media (max-width: 900px), (max-aspect-ratio: 1/1){
  .wonder{height:auto;overflow:auto}
  .w-split{display:block;height:auto}
  .w-visual{position:sticky;top:0;height:58svh;z-index:2;border-right:0;border-bottom:1px solid var(--line)}
  .w-cards{top:68px;bottom:auto;right:12px;transform:none;width:min(200px, 46%);gap:8px}
  .w-caption{max-width:calc(100% - 40px)}
  .w-cards .glass:nth-child(2){display:none}
  .glass{padding:12px 14px 14px;border-radius:14px}
  .glass .big{font-size:1.7rem;margin:8px 0 2px}
  .w-caption{bottom:16px;max-width:46%}
  .w-caption b{font-size:1.45rem}
  .w-story{padding:28px 20px 60px;justify-content:flex-start}
  .w-steps{min-height:0}
  .w-step{position:relative;opacity:.35;visibility:visible;transform:none;padding:22px 0 30px;border-bottom:1px solid var(--line);transition:opacity .6s}
  .w-step.on{opacity:1}
  .w-ctrl,.w-hint{display:none}
  .w-top{background:linear-gradient(180deg, rgba(5,5,5,.75), transparent);padding:14px 16px}
  .w-top nav,.w-crumb{display:none}
  .w-top .pill{margin-left:auto}
  .w-top{gap:12px}
  .w-top .burger{display:grid}
}

/* without script, every step is simply there to read */
.no-js .w-step{position:relative;opacity:1;visibility:visible;transform:none;margin-bottom:28px}
.no-js .w-frame:first-child{opacity:1}