/* autyr hero: "scroll to fix" (rebuilt 2026-11-08 on GSAP ScrollTrigger + SplitText, Lenis on desktop) */
:root{--red:#ff3b30;--card:#fbf8f1}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* ---------- global nav (shown after the hero) ---------- */
.gnav{position:fixed;inset:0 0 auto;z-index:90;opacity:0;pointer-events:none;transition:opacity .3s}
.gnav.show{opacity:1}.gnav.show *{pointer-events:auto}
.navrow{display:flex;justify-content:space-between;align-items:center;padding:18px var(--pad)}
.navrow .logo{display:block;line-height:0}
.navrow .logo svg{height:30px;width:auto;display:block;overflow:visible}
.navrow ul{display:flex;gap:4px;list-style:none;background:var(--paper);border:1.5px solid var(--ink);border-radius:99px;padding:4px}
.navrow li a{display:block;padding:7px 14px;border-radius:99px;font-size:14px}
.navrow li a:hover{background:var(--line)}
.navrow li a.cta{background:var(--ink);color:var(--acc)}

/* ---------- section + stage ---------- */
.fix{position:relative;height:520vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--paper);color:var(--ink)}
.stage.off *,.stage.off *::before,.stage.off *::after{animation-play-state:paused!important}

/* ---------- the bad 2004 site ---------- */
.bad{position:absolute;inset:0;z-index:2}
.b-tiles{position:absolute;inset:0;background-color:#fff7c2;
  background-image:radial-gradient(#ff5fb0 1.6px,transparent 2px),radial-gradient(#3a7bff 1.6px,transparent 2px);
  background-size:38px 38px;background-position:0 0,19px 19px}
.b-marq{position:absolute;left:0;right:0;top:0;height:30px;background:#000;border-bottom:3px ridge #f0f;overflow:hidden;white-space:nowrap}
.b-marq span{display:inline-block;padding-left:100%;font:700 14px/30px "Times New Roman",serif;color:#ff0;animation:marq 14s linear infinite}
@keyframes marq{to{transform:translateX(-100%)}}
.b-side{position:absolute;left:0;top:30px;bottom:0;width:170px;background:#c0c0c0;border-right:3px ridge #eee;padding:16px 12px;display:grid;align-content:start;gap:8px;font:13px "Times New Roman",serif}
.b-side a{display:block;background:#d4d0c8;border:2px outset #fff;padding:6px 8px;color:#00e;text-decoration:underline}
.b-side a:nth-child(2n){color:#551a8b}
.b-side .gb{margin-top:14px;background:#ffef7a;border:2px dashed #e00;padding:8px;font:700 13px "Comic Sans MS","Chalkboard SE",cursive;color:#e00;text-align:center}
.b-side .wr{margin-top:8px;text-align:center;font:11px Arial,sans-serif;color:#333}

.p{position:absolute;transform-origin:0 0}
.p .face,.p .in{display:block}
.comic{font-family:"Comic Sans MS","Comic Sans","Chalkboard SE","Marker Felt",cursive}

.pp-logo{left:210px;top:calc(30px + 3.5vh)}
.wa{display:inline-block;font:400 52px/1 Impact,"Arial Black",sans-serif;letter-spacing:.01em;background:linear-gradient(180deg,#ffef00 10%,#ff7a00 50%,#ff00a8 90%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1.5px #000;filter:drop-shadow(4px 4px 0 #0033ff);transform:skewX(-10deg)}
.pp-logo small{display:block;font:italic 15px "Times New Roman",serif;color:#a00;margin:4px 0 0 30px}
.pp-nav{left:210px;top:calc(30px + 15vh)}
.tbl{display:flex;border:2px outset #fff;background:#c0c0c0;font:15px "Times New Roman",serif;white-space:nowrap}
.tbl a{padding:6px 14px;border-right:2px groove #fff;color:#00e;text-decoration:underline}
.tbl a:nth-child(2n){color:#551a8b}.tbl a:last-child{border-right:0}
.pp-head{left:210px;top:27vh;white-space:nowrap}
.pp-head .txt{font-weight:700;font-size:clamp(40px,4.6vw,68px);color:#ff1493;text-shadow:3px 3px 0 #ff0,6px 6px 0 #0033ff}
.pp-copy{left:210px;top:41vh;width:360px}
.pp-copy .in{background:#fff;border:2px inset #aaa;padding:12px 14px;font:15px/1.35 "Times New Roman",serif;color:#00c}
.pp-copy b{display:block;color:#e00;font:700 18px Arial,sans-serif;margin-bottom:4px}.pp-copy i{color:#888}
.pp-btn{left:210px;top:62vh}
.blink{display:inline-block;font:900 21px "Arial Black",Arial,sans-serif;color:#fff;text-shadow:2px 2px 0 #060;background:linear-gradient(#9dff6a,#1f9e1f);border:4px outset #b6ffa0;padding:10px 22px;white-space:nowrap;animation:bl 1s steps(1) infinite}
@keyframes bl{50%{background:linear-gradient(#ff7ad1,#c20077);border-color:#ffb0e3}}
.pp-counter{left:210px;top:74vh}
.counter{font:13px "Times New Roman",serif;color:#000;background:#fff;border:2px inset #aaa;padding:6px 10px;white-space:nowrap}
.counter b{font:13px "Courier New",monospace;background:#000;color:#0f0;padding:1px 4px;letter-spacing:2px}
.pp-ie{left:210px;top:81vh}
.badges{display:flex;gap:6px}
.badges span{width:88px;height:31px;display:grid;place-items:center;text-align:center;font:700 9px/1.05 Verdana,sans-serif;border:1px solid #000;padding:2px}
.badges span:nth-child(1){background:#1c5bd6;color:#ff0}.badges span:nth-child(2){background:#000;color:#0f0}.badges span:nth-child(3){background:#fff;color:#c00}
.b-upd{position:absolute;left:210px;bottom:2vh}
.upd{font:12px "Times New Roman",serif;color:#333;white-space:nowrap}.upd u{color:#00e}
.pp-popup{left:50vw;top:13vh;width:340px}
.w98{background:#fff;border:3px outset #ddd;box-shadow:8px 8px 0 #0006;font-family:Arial,sans-serif;color:#000}
.w98 .tb{background:linear-gradient(90deg,#000080,#1084d0);color:#fff;font-weight:700;font-size:13px;padding:4px 8px;display:flex;justify-content:space-between}
.w98 .tb b{background:#c0c0c0;color:#000;padding:0 6px;border:2px outset #fff;font-size:11px}
.w98 .bd{padding:16px;text-align:center}
.w98 h5{font:400 22px/1.05 Impact,"Arial Black",sans-serif;color:#e00;margin-bottom:8px;animation:bl2 .8s steps(1) infinite}
@keyframes bl2{50%{color:#00f}}
.w98 p{font-size:13px;margin-bottom:10px}
.w98 .f{display:flex;gap:6px;justify-content:center}
.w98 .f span{border:2px inset #ccc;padding:4px 6px;font-size:12px;color:#777;width:62%;text-align:left}
.w98 .f u{border:2px outset #ddd;background:#ff0;font-weight:700;font-size:12px;padding:4px 10px;text-decoration:none}
.pp-burst{left:44vw;top:5vh}
.burst{width:112px;height:112px;display:grid;place-items:center;background:#ff2a2a;color:#ff0;font:400 30px Impact,sans-serif;clip-path:polygon(50% 0,61% 22%,85% 10%,78% 36%,100% 45%,79% 58%,90% 85%,63% 76%,50% 100%,37% 76%,10% 85%,21% 58%,0 45%,22% 36%,15% 10%,39% 22%);animation:spin 6s linear infinite}
@keyframes spin{to{rotate:360deg}}
.pp-uc{left:47vw;top:71vh}
.uc{width:220px;padding:8px 10px;background:repeating-linear-gradient(-45deg,#ffd400 0 14px,#111 14px 28px)}
.uc div{background:#ffd400;color:#000;font:400 19px Impact,"Arial Black",sans-serif;text-align:center;padding:4px;letter-spacing:.04em}
.pp-img{left:46vw;top:49vh}
.broken{width:220px;height:140px;border:2px inset #aaa;background:#eee;display:grid;place-items:center;text-align:center;font:12px Arial,sans-serif;color:#555}
.broken span{display:block;font-size:26px;color:#c00}
.pp-stock{right:3vw;top:7vh;width:min(22vw,320px)}
.stock{aspect-ratio:16/9;position:relative;overflow:hidden;border:6px solid #fff;box-shadow:0 6px 18px #0005;background:radial-gradient(circle at 30% 40%,#f7c58a,#d98b5a 30%,#8a5a44 60%,#3e3a4a)}
.stock .wm{position:absolute;left:8%;top:34%;rotate:-22deg;font:700 32px Arial,sans-serif;color:#ffffff70;white-space:nowrap}
.stock .cap{position:absolute;left:0;right:0;bottom:0;background:#0009;color:#fff;font:italic 13px Georgia,serif;padding:6px 10px}
.pp-n1{right:2.5vw;top:50vh}.pp-n2{right:2.5vw;top:61vh}.pp-n3{right:2.5vw;top:72vh}
.notif{width:300px;background:#f6f6f6ee;border-radius:16px;padding:12px 14px;font:13px/1.35 -apple-system,"Helvetica Neue",Arial,sans-serif;color:#222;box-shadow:0 10px 30px #0004;display:grid;gap:2px}
.notif b{font-size:14px}.notif span{color:#666}.notif.red b{color:#d70015}

/* ---------- the clean autyr hero (end state) ---------- */
.clean{position:absolute;inset:0;z-index:4;pointer-events:none}
.clean>*{position:absolute;pointer-events:auto}
html.js .clean .c{opacity:0;visibility:hidden}
.c-nav{left:0;right:0;top:0}
.c-copy{left:var(--pad);top:15vh;width:min(410px,36vw)}
.c-copy .eb{display:block;font-family:var(--m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:12px}
.c-copy p{font-size:clamp(17px,1.4vw,20px);line-height:1.4;color:#3a3933}
.c-cta{left:var(--pad);top:calc(15vh + 132px)}
.c-cta a{display:inline-flex;gap:10px;align-items:center;background:var(--acc);color:var(--ink);font-weight:600;font-size:16px;padding:15px 26px;border-radius:99px;box-shadow:0 0 0 1.5px var(--ink);transition:transform .2s}
.c-cta a:hover{transform:translateY(-3px) rotate(-1deg)}
.c-head{left:var(--pad);bottom:3vh;font-weight:700;font-size:clamp(64px,11.4vw,210px);line-height:.86;letter-spacing:-.055em;white-space:nowrap;padding-bottom:.06em}
.c-head em{font-family:var(--s);font-weight:400;letter-spacing:-.02em;padding:0 .06em;
  background:linear-gradient(var(--acc),var(--acc)) no-repeat 0 88%/var(--hl,0%) 30%}
.c-hint{right:var(--pad);bottom:calc(3vh + 6px);font-family:var(--m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}

/* ---------- guides, selection boxes, message, score ---------- */
.guides{position:absolute;inset:0;z-index:5;pointer-events:none}
.gl{position:absolute;background:rgba(255,59,48,.6)}
.gl.v{top:0;bottom:0;width:1px;transform-origin:50% 0}
.gl.h{left:0;right:0;height:1px;transform-origin:0 50%}
.gl i{position:absolute;font:500 10px/1 var(--m);letter-spacing:.04em;color:#fff;background:var(--red);padding:3px 6px;white-space:nowrap;font-style:normal}
.gl.h i{right:calc(var(--pad) + 8px);top:-17px}.gl.h.l i{right:auto;left:calc(var(--pad) + 8px)}
.gl.v i{top:52%;left:6px}
.sels{position:absolute;inset:0;z-index:6;pointer-events:none}
.sel{position:absolute;border:1.5px solid var(--red);opacity:0;visibility:hidden}
.sel::before,.sel::after{content:"";position:absolute;width:7px;height:7px;background:#fff;border:1.5px solid currentColor;color:var(--red)}
.sel::before{left:-5px;top:-5px}.sel::after{right:-5px;bottom:-5px}
.sel b{position:absolute;left:-1.5px;bottom:100%;margin-bottom:5px;font:500 10.5px/1 var(--m);letter-spacing:.03em;color:#fff;background:var(--red);padding:4px 7px;white-space:nowrap;border-radius:3px 3px 3px 0}

.msg{position:absolute;inset:0;z-index:8;display:grid;place-items:center;pointer-events:none}
.msg .mcard{position:relative;background:var(--paper);color:var(--ink);padding:40px 46px 34px;width:min(680px,88vw);box-shadow:0 30px 80px -20px #0006}
.msg .crop i{position:absolute;background:var(--red)}
.msg .crop i:nth-child(1){left:-18px;right:-18px;top:0;height:1px}.msg .crop i:nth-child(2){left:-18px;right:-18px;bottom:0;height:1px}
.msg .crop i:nth-child(3){top:-18px;bottom:-18px;left:0;width:1px}.msg .crop i:nth-child(4){top:-18px;bottom:-18px;right:0;width:1px}
.msg .lab{display:block;font:500 11px var(--m);letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin-bottom:14px}
.msg .big{font-weight:700;font-size:clamp(34px,4.6vw,66px);line-height:.95;letter-spacing:-.045em}
.msg .big em{font-family:var(--s);font-weight:400;letter-spacing:-.01em}
.msg .pill{display:inline-flex;gap:10px;align-items:center;margin-top:22px;background:var(--ink);color:var(--acc);font:500 12px var(--m);letter-spacing:.08em;text-transform:uppercase;padding:11px 18px;border-radius:99px}
.msg .pill span{display:inline-block;animation:nudge 1.4s ease-in-out infinite}
@keyframes nudge{50%{transform:translateY(4px)}}

.chip{position:absolute;left:auto;right:var(--pad);bottom:3vh;z-index:8;display:flex;gap:12px;align-items:center;background:#fff;border:1.5px solid var(--ink);border-radius:99px;padding:6px 16px 6px 8px;font:500 11px var(--m);letter-spacing:.08em;text-transform:uppercase;opacity:0;visibility:hidden;white-space:nowrap}
.chip b{font:700 22px/1 var(--d);letter-spacing:-.04em;color:var(--red);background:#fff;border-radius:99px;padding:4px 8px;min-width:52px;text-align:center}
.chip i{width:1px;height:16px;background:#0003}

/* ---------- mobile ---------- */
@media (max-width:760px){
  .fix{height:420vh}
  .navrow ul li:not(:last-child){display:none}
  .navrow .logo svg{height:24px}
  .b-side,.pp-ie,.pp-img,.pp-stock,.b-upd,.pp-n3{display:none}
  .b-marq{height:24px}.b-marq span{font-size:12px;line-height:24px}
  .pp-logo{left:5vw;top:calc(24px + 3svh)}.wa{font-size:34px}.pp-logo small{font-size:12px}
  .pp-nav{left:5vw;top:calc(24px + 12.5svh)}.tbl{font-size:12px}.tbl a{padding:5px 7px}
  .pp-head{left:5vw;top:50svh;white-space:normal;width:86vw}.pp-head .txt{font-size:36px;line-height:1.05}
  .pp-copy{left:5vw;top:30svh;width:62vw}.pp-copy .in{font-size:13px}
  .pp-btn{left:5vw;top:63svh}.blink{font-size:15px;padding:8px 14px}
  .pp-counter{left:5vw;top:71svh}
  .pp-popup{left:auto;right:3vw;top:30svh;width:60vw}.w98 h5{font-size:17px}.w98 .bd{padding:10px}.w98 p{font-size:11px}
  .pp-burst{left:auto;right:4vw;top:calc(24px + 2svh)}.burst{width:78px;height:78px;font-size:21px}
  .pp-uc{left:auto;right:4vw;top:17svh}.uc{width:150px}.uc div{font-size:14px}
  .pp-n1{right:auto;left:6vw;top:78svh}.pp-n2{right:auto;left:10vw;top:87svh}.notif{width:84vw}
  .c-copy{top:12svh;width:84vw}
  .c-cta{top:calc(12svh + 112px)}
  .c-head{font-size:14.6vw;bottom:2.5svh}
  .gl.v i{display:none}
  .c-hint{display:none}
  .msg .mcard{padding:28px 24px 24px}.msg .big{font-size:36px}
  .chip{display:none}
  .sel b{font-size:9.5px}
}

/* ---------- reduced motion: same story, no movement ---------- */
@media (prefers-reduced-motion:reduce){
  .fix{height:220vh}
  .bad,.msg{transition:opacity .4s}
  .stage.fixed .bad,.stage.fixed .msg{opacity:0;visibility:hidden}
  html.js .clean .c{transition:opacity .4s}
  .stage.fixed .clean .c{opacity:1;visibility:visible}
  .guides{opacity:.35}
  .b-marq span,.burst,.blink,.w98 h5,.msg .pill span{animation:none}
}
html:not(.js) .bad,html:not(.js) .msg,html:not(.js) .guides{display:none}

@media (max-width:860px){.navrow ul li:not(:last-child){display:none}}

.c-head>div{padding-bottom:.14em;margin-bottom:-.14em}

/* ---------- landing centrepiece: the split "a" drawn in ASCII (ascii-mark.js) ---------- */
.c-mark{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.clean>:not(.c-mark){z-index:1}
html.js .clean .c-mark{opacity:1;visibility:visible}
#fx{position:absolute;inset:0;width:100%;height:100%;z-index:7;pointer-events:none}
.gnav.dk .logo svg [fill="#0d0d0b"]{fill:#f1eee6}
.gnav.dk .logo svg [stroke="#0d0d0b"]{stroke:#f1eee6}