/* Corporate to Creator · live class deck (system B: Nate's funnel brand).
   Every slide is authored on a 1600x900 canvas and scaled to fit. */
@font-face{font-family:"Anton";src:url("../assets/fonts/anton.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Inter";src:url("../assets/fonts/inter.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{--bg:#f6f2ec;--bg2:#efe9e0;--ink:#0d0c0b;--t2:#57514a;--t3:#6b645c;--y:#ffdf54;--yd:#e9c21c;--pink:#e94fb9;--card:#fffdf9;--line:rgba(20,18,16,.12);
  --d:"Anton",Impact,sans-serif;--s:"Inter",-apple-system,"Segoe UI",sans-serif;--k:1}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{overflow:hidden;background:#0d0c0b;font-family:var(--s);color:var(--ink);-webkit-font-smoothing:antialiased}
#stage{position:fixed;inset:0}
.slide{position:absolute;inset:0;overflow:hidden}
#bar{position:fixed;left:0;top:0;height:4px;background:var(--y);width:0;transition:width .3s ease;z-index:5}
#counter{position:fixed;right:16px;bottom:12px;z-index:5;font:600 12px/1 var(--s);color:rgba(255,255,255,.55);letter-spacing:.08em;font-variant-numeric:tabular-nums}

/* the 16:9 canvas */
.cv{position:absolute;left:50%;top:50%;width:1600px;height:900px;margin:-450px 0 0 -800px;transform:scale(var(--k));overflow:hidden;
  background:radial-gradient(60% 50% at 50% -10%,rgba(255,223,84,.35),transparent 65%),linear-gradient(180deg,var(--bg),var(--bg2));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:90px 120px}
.cv.dark{background:radial-gradient(55% 50% at 50% 0%,rgba(255,223,84,.14),transparent 65%),radial-gradient(40% 40% at 100% 100%,rgba(233,79,185,.10),transparent 70%),#0d0c0b;color:#fff}
.cv.yel{background:var(--y)}
.cv::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* type */
.h{font-family:var(--d);text-transform:uppercase;line-height:1.02;letter-spacing:.005em;margin:0;font-weight:400}
.h1{font-size:104px}.h2{font-size:78px}.h3{font-size:58px}.h4{font-size:44px}
.sub{font-size:30px;line-height:1.4;color:var(--t2);margin:34px auto 0;max-width:30em}
.dark .sub{color:rgba(255,255,255,.72)}
.ey{font-size:20px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--t3);margin:0 0 30px}
.dark .ey{color:var(--y)}
.hl{background:linear-gradient(transparent 10%,var(--y) 10%,var(--y) 92%,transparent 92%);padding:0 .1em;-webkit-box-decoration-break:clone;box-decoration-break:clone;color:var(--ink)}
.yt{color:var(--y)}
.say{font-size:46px;line-height:1.3;font-weight:600;letter-spacing:-.02em;max-width:24em;margin:0}
.small{font-size:24px;color:var(--t3);margin-top:22px}
.dark .small{color:rgba(255,255,255,.55)}

/* photo layouts */
.full{position:absolute;inset:0}
.full img{width:100%;height:100%;object-fit:cover}
.full::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,12,11,.82) 0%,rgba(13,12,11,.45) 42%,rgba(13,12,11,0) 70%)}
.full.r::after{background:linear-gradient(270deg,rgba(13,12,11,.82) 0%,rgba(13,12,11,.45) 42%,rgba(13,12,11,0) 70%)}
.full.b::after{background:linear-gradient(0deg,rgba(13,12,11,.85) 0%,rgba(13,12,11,.3) 45%,rgba(13,12,11,0) 70%)}
.corner{position:absolute;left:110px;bottom:110px;z-index:2;text-align:left;color:#fff;max-width:720px}
.corner.r{left:auto;right:110px;text-align:right}
.corner .say{color:#fff}
.corner .sub{color:rgba(255,255,255,.8);margin:22px 0 0}
.split{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center;width:100%;text-align:left}
.split.rev>:first-child{order:2}
.framed{border-radius:26px;overflow:hidden;box-shadow:0 50px 90px -40px rgba(13,12,11,.6);border:10px solid #fff;background:#fff}
.framed img{width:100%;height:100%;object-fit:cover;display:block}
.polaroid{background:#fff;padding:18px 18px 70px;box-shadow:0 40px 80px -36px rgba(13,12,11,.55);transform:rotate(-3deg)}
.polaroid img{display:block;width:100%;height:100%;object-fit:cover}
.bw img{filter:grayscale(1) contrast(1.05)}
.cluster{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;width:100%;margin-top:50px}
.cluster img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:16px;box-shadow:0 30px 60px -36px rgba(0,0,0,.55)}

/* SWAP placeholder: what photo goes here */
.swap{display:grid;place-items:center;border:4px dashed rgba(13,12,11,.28);border-radius:26px;background:repeating-linear-gradient(135deg,rgba(255,223,84,.18) 0 18px,transparent 18px 36px);color:var(--t2);font-size:22px;font-weight:600;padding:30px;text-align:center;line-height:1.4}
.swap b{display:block;font-family:var(--d);font-weight:400;font-size:30px;color:var(--ink);text-transform:uppercase;margin-bottom:8px}

/* cards & graphics */
.card{background:var(--card);border:1px solid var(--line);border-radius:26px;box-shadow:0 40px 80px -50px rgba(13,12,11,.6)}
.dark .card{background:#1a1816;border-color:rgba(255,255,255,.1);color:#fff}
.chip{display:inline-flex;align-items:center;gap:10px;background:var(--y);color:var(--ink);font-weight:700;font-size:20px;letter-spacing:.12em;text-transform:uppercase;padding:9px 16px;border-radius:8px}
.nodes{display:flex;align-items:stretch;justify-content:center;gap:0;width:100%;margin-top:70px}
.node{flex:1;max-width:330px;position:relative;padding:0 18px}
.node .dot{width:84px;height:84px;margin:0 auto 26px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--y);font-family:var(--d);font-size:36px;position:relative;z-index:2}
.node:not(:last-child)::after{content:"";position:absolute;top:42px;left:calc(50% + 50px);right:calc(-50% + 50px);height:4px;background:repeating-linear-gradient(90deg,var(--ink) 0 14px,transparent 14px 24px);opacity:.35}
.dark .node .dot{background:var(--y);color:var(--ink)}
.dark .node:not(:last-child)::after{background:repeating-linear-gradient(90deg,#fff 0 14px,transparent 14px 24px)}
.node h4{font-size:28px;line-height:1.25;margin:0;font-weight:700}
.node p{font-size:21px;color:var(--t2);margin:12px 0 0;line-height:1.4}
.dark .node p{color:rgba(255,255,255,.65)}
.mt{display:grid;grid-template-columns:1fr 1fr;gap:40px;width:100%;margin-top:60px}
.mt .card{padding:56px 50px;text-align:left}
.mt .myth{opacity:.6}
.mt .lab{font-family:var(--d);font-size:30px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:22px;display:flex;align-items:center;gap:14px}
.mt .myth .lab{color:#b0352a}
.mt .truth{border:3px solid var(--ink);opacity:1}
.mt .truth .lab span{background:var(--y);padding:2px 12px;border-radius:6px}
.mt p{font-size:36px;line-height:1.3;font-weight:600;margin:0;letter-spacing:-.015em}
.mt .myth p{text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:rgba(176,53,42,.6)}
.num{font-family:var(--d);font-size:230px;line-height:.9;margin:0}
.dark .num{color:var(--y)}

/* entrances (replay on every slide entry; the engine rebuilds the DOM) */
.a{opacity:0;transform:translateY(26px);animation:in .8s cubic-bezier(.16,1,.3,1) forwards}
.a2{animation-delay:.15s}.a3{animation-delay:.3s}.a4{animation-delay:.45s}.a5{animation-delay:.6s}.a6{animation-delay:.75s}.a7{animation-delay:.9s}.a8{animation-delay:1.05s}
@keyframes in{to{opacity:1;transform:none}}
.zoom{animation:zoom 9s ease-out forwards}
@keyframes zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
html.reduced .a{opacity:1;transform:none;animation:none}
html.reduced .zoom{animation:none}

/* UI mocks */
.phone{width:400px;height:820px;border-radius:58px;background:#111;padding:14px;box-shadow:0 60px 100px -40px rgba(0,0,0,.7)}
.phone .scr{width:100%;height:100%;border-radius:46px;background:#fff;overflow:hidden;position:relative;font-family:-apple-system,"Segoe UI",sans-serif;text-align:left}
.notif{position:absolute;left:16px;right:16px;background:rgba(245,245,247,.96);border-radius:22px;padding:16px 18px;display:flex;gap:14px;align-items:center;box-shadow:0 12px 30px -16px rgba(0,0,0,.35)}
.notif .ic{width:44px;height:44px;border-radius:11px;background:#1dbf73;color:#fff;font-weight:800;font-size:26px;display:grid;place-items:center;flex:none}
.notif b{display:block;font-size:17px}
.notif span{font-size:16px;color:#3c3c43}
.fv{font-family:-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;text-align:left;color:#404145}
.fv-green{color:#1dbf73}
.chatline{display:flex;gap:16px;align-items:flex-start;padding:20px 26px;border-bottom:1px solid #efeff0}
.av{width:56px;height:56px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-weight:700;font-size:22px;overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover}