/* KIDTASTIC VISUAL web, tatabahasa grafik "sedap mata" (spec ~/Desktop/grafik-engine/KIDTASTIC-VISUAL.md). Resipi nombor dari kidtasticstaykl.com, kod ditulis semula. Semua warna dari CSS var. Dark mode ikut sistem + [data-theme="light|dark"] pada . */ @font-face{font-family:"Bricolage";src:url(fonts/bricolage-800.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap} @font-face{font-family:"Figtree";src:url(fonts/figtree-var.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap} @font-face{font-family:"Bricolage Fallback";src:local("Arial Black"),local("Arial Bold"),local("Arial");size-adjust:92%;ascent-override:96%} @font-face{font-family:"Figtree Fallback";src:local("Arial");size-adjust:102%;ascent-override:94%} /* ---------- TOKEN (cerah) ---------- */ :root{ /* kertas dan dakwat */ --cream:#FBF5EA; --paper:#FFFDF8; --sand:#EFE4D0; --sand-bg:#F6ECDB; --sky-bg:#DCEEF8; --ink:#1E2342; --ink-soft:#545A78; --line:#EFE4D0; --rule:#EAF2F8; /* palet peranan (tepu). --on-* = warna teks atas isi tu */ --brand:#C8325F; --brand-text:#A3204C; --on-brand:#FFFDF8; --brand-s:#8E1F42; --sun:#FFC940; --on-sun:#1E2342; --sun-s:#D99A00; --hl:#FFE25C; --on-hl:#1E2342; /* highlighter */ --pass:#7FD4B5; --on-pass:#1E2342; --pass-s:#3E9C7B; --pass-text:#1C6B4E; --sky:#8FCBF0; --on-sky:#1E2342; --sky-s:#4E97C4; --coral:#FF6B57; --lav:#BBA8F0; --night:#1E2342; --night-2:#2A3160; --on-night:#FBF5EA; --on-night-soft:#C9CDE0; --bezel:#1E2342; --stk-line:#1E2342; --stk-paper:#FFFDF8; /* pelekat kekal tepu dalam dua mod */ /* bayang bertint dakwat, spread negatif = duduk BAWAH objek */ --sh-rgb:30,35,66; --sh-big:0 30px 60px -30px rgba(var(--sh-rgb),.55); --sh-card:0 1px 0 var(--sand),0 18px 40px -18px rgba(var(--sh-rgb),.5); --sh-soft:0 1px 0 var(--sand),0 20px 40px -30px rgba(var(--sh-rgb),.45); --sh-drop:drop-shadow(0 22px 22px rgba(var(--sh-rgb),.28)); /* bentuk dan gerak */ --r-sm:12px; --r-md:20px; --r-lg:28px; --r-xl:44px; --ease-bounce:cubic-bezier(.34,1.56,.64,1); --ease-out:cubic-bezier(.23,1,.32,1); --tilt-unit:2deg; /* niche override, exam dewasa = 1deg */ --f-display:"Bricolage","Bricolage Fallback",system-ui,sans-serif; --f-text:"Figtree","Figtree Fallback",system-ui,sans-serif; --gutter:clamp(1.1rem,4.6vw,5rem); --maxw:76rem; --sec-y:clamp(4rem,9vw,8.5rem); --bar-h:64px; color-scheme:light; } /* ---------- TOKEN (gelap). Dua blok sama, satu ikut sistem, satu paksa ---------- */ @media (prefers-color-scheme:dark){:root:not([data-theme="light"]){ --cream:#161B26; --paper:#1F2635; --sand:rgba(255,253,248,.08); --sand-bg:#1A2030; --sky-bg:#18222F; --ink:#E6EAF2; --ink-soft:#A8B2C3; --line:rgba(255,253,248,.10); --rule:rgba(143,203,240,.13); --brand:#EE7FA4; --brand-text:#F59AB8; --on-brand:#161B26; --brand-s:#B24E72; --sun:#FFC940; --on-sun:#1E2342; --sun-s:#B98300; --hl:#E9CC45; --on-hl:#161B26; --pass:#7FD4B5; --on-pass:#1E2342; --pass-s:#3E8C70; --pass-text:#8FE0C2; --sky:#8FCBF0; --on-sky:#1E2342; --sky-s:#3F7FA8; --night:#10141D; --night-2:#232A44; --on-night:#E6EAF2; --on-night-soft:#A8B2C3; --bezel:#343D55; --sh-rgb:0,0,0; --sh-big:0 0 0 1px rgba(255,253,248,.08),0 30px 60px -30px rgba(0,0,0,.45); --sh-card:0 0 0 1px rgba(255,253,248,.08),0 18px 40px -18px rgba(0,0,0,.45); --sh-soft:0 0 0 1px rgba(255,253,248,.08),0 20px 40px -30px rgba(0,0,0,.45); --sh-drop:drop-shadow(0 22px 22px rgba(0,0,0,.45)); color-scheme:dark; }} :root[data-theme="dark"]{ --cream:#161B26; --paper:#1F2635; --sand:rgba(255,253,248,.08); --sand-bg:#1A2030; --sky-bg:#18222F; --ink:#E6EAF2; --ink-soft:#A8B2C3; --line:rgba(255,253,248,.10); --rule:rgba(143,203,240,.13); --brand:#EE7FA4; --brand-text:#F59AB8; --on-brand:#161B26; --brand-s:#B24E72; --sun:#FFC940; --on-sun:#1E2342; --sun-s:#B98300; --hl:#E9CC45; --on-hl:#161B26; --pass:#7FD4B5; --on-pass:#1E2342; --pass-s:#3E8C70; --pass-text:#8FE0C2; --sky:#8FCBF0; --on-sky:#1E2342; --sky-s:#3F7FA8; --night:#10141D; --night-2:#232A44; --on-night:#E6EAF2; --on-night-soft:#A8B2C3; --bezel:#343D55; --sh-rgb:0,0,0; --sh-big:0 0 0 1px rgba(255,253,248,.08),0 30px 60px -30px rgba(0,0,0,.45); --sh-card:0 0 0 1px rgba(255,253,248,.08),0 18px 40px -18px rgba(0,0,0,.45); --sh-soft:0 0 0 1px rgba(255,253,248,.08),0 20px 40px -30px rgba(0,0,0,.45); --sh-drop:drop-shadow(0 22px 22px rgba(0,0,0,.45)); color-scheme:dark; } /* ---------- ASAS ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar-h) + 12px)} body{margin:0;background:var(--cream);color:var(--ink);font:400 1.125rem/1.6 var(--f-text);-webkit-font-smoothing:antialiased;overflow-x:clip} img,svg,picture{display:block;max-width:100%} img{height:auto} a{color:inherit} h1,h2,h3,.display{font-family:var(--f-display);font-weight:800;font-variation-settings:"opsz" 96;letter-spacing:-.035em;line-height:1;margin:0;text-wrap:balance} h1{font-size:clamp(2.7rem,1.6rem + 4.6vw,5.4rem)} h2{font-size:clamp(2.2rem,1.4rem + 3.3vw,4.2rem)} h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem);letter-spacing:-.02em;line-height:1.15} p{margin:0} .lede{font-size:clamp(1.12rem,1.05rem + .35vw,1.3rem);color:var(--ink-soft);max-width:34rem} .small{font-size:.9rem;color:var(--ink-soft)} .t2{color:var(--brand-text)} /* warna kedua dalam tajuk */ .hl{color:var(--on-hl);background:linear-gradient(transparent 12%,var(--hl) 12%,var(--hl) 94%,transparent 94%);padding:0 .12em;border-radius:.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone} .skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--paper);color:var(--ink);padding:10px 16px;border-radius:var(--r-sm)} .skip:focus{left:8px} :where(a,button,summary,[tabindex]):focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 6px var(--sun);border-radius:10px} .wrap{width:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto} .vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ---------- BUTANG ---------- */ .btn{--b:var(--ink);--on:var(--cream);display:inline-flex;align-items:center;gap:.6em;min-height:52px;padding:.85em 1.4em .85em 1.15em;border:0;border-radius:999px;background:var(--b);color:var(--on);font:800 1.02rem/1.1 var(--f-text);letter-spacing:-.005em;text-decoration:none;cursor:pointer;white-space:nowrap; box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 8px 18px -8px rgba(var(--sh-rgb),.55);transition:transform .16s var(--ease-out),box-shadow .2s var(--ease-out)} .btn svg{width:1.1em;height:1.1em;flex:none} .btn--brand{--b:var(--brand-text);--on:var(--on-brand)} .btn--sun{--b:var(--sun);--on:var(--on-sun)} .btn--ghost{--b:transparent;--on:var(--ink);box-shadow:inset 0 0 0 2px var(--line)} @media (hover:hover) and (pointer:fine){.btn:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 14px 26px -10px rgba(var(--sh-rgb),.6)}} /* ---------- HEADER + TOGOL TEMA ---------- */ .bar{position:sticky;top:0;z-index:90;height:var(--bar-h);display:flex;align-items:center;background:color-mix(in oklab,var(--cream) 92%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);box-shadow:0 1px 0 var(--line)} .bar .wrap{display:flex;align-items:center;gap:14px} .logo{display:inline-flex;align-items:center;gap:10px;font:800 1.3rem/1 var(--f-display);letter-spacing:-.03em;text-decoration:none;color:var(--ink)} .logo svg{width:30px;height:30px} .bar nav{margin-left:auto;display:flex;gap:22px;font-weight:700;font-size:.98rem} .bar nav a{text-decoration:none;padding:10px 2px} .bar__end{display:flex;align-items:center;gap:10px} .bar nav+.bar__end{margin-left:18px} .bar .btn{min-height:44px;padding:.6em 1.1em;font-size:.95rem} .theme-btn{width:44px;height:44px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)} .theme-btn svg{width:20px;height:20px} .theme-btn .i-sun,.theme-btn .i-moon,.theme-btn .i-auto{display:none} :root:not([data-theme]) .theme-btn .i-auto,:root[data-theme="light"] .theme-btn .i-sun,:root[data-theme="dark"] .theme-btn .i-moon{display:block} @media (max-width:860px){.bar nav{display:none}.bar__end{margin-left:auto}} @media (max-width:420px){.bar .btn--cta-bar{display:none}} /* ---------- SEKSYEN, latar berirama + tepi berbentuk ---------- */ .sec{--bg:var(--cream);position:relative;background:var(--bg);padding-block:var(--sec-y);overflow-x:clip} .sec--cream{--bg:var(--cream)} .sec--paper{--bg:var(--paper)} .sec--sky{--bg:var(--sky-bg)} .sec--sand{--bg:var(--sand-bg)} .sec--night{--bg:var(--night);color:var(--on-night)} .sec--night .lede,.sec--night .small{color:var(--on-night-soft)} .sec--night .t2{color:var(--sun)} /* tepi kerang, bonggol warna seksyen ni menjulur ke seksyen atas */ .edge::before{content:"";position:absolute;left:0;right:0;top:-17px;height:18px;pointer-events:none; background:radial-gradient(circle at 24px 24px,var(--bg) 21.5px,transparent 22.5px) 0 0/48px 24px repeat-x} .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,5rem);align-items:center} .split--rev>:first-child{order:2} .stack{display:grid;gap:clamp(.9rem,1.6vw,1.3rem);justify-items:start} @media (max-width:860px){.split{grid-template-columns:minmax(0,1fr)}.split--rev>:first-child{order:0}} /* ---------- BINGKAI FOTO/SCREENSHOT (A3) ---------- */ .frame{--c:var(--sun);position:relative;margin:0;padding:10px;border-radius:var(--r-xl);background:var(--c);box-shadow:var(--sh-big)} .frame>img,.frame>picture>img,.frame>picture{border-radius:34px;width:100%} .frame>picture{overflow:hidden} /* topeng bentuk, bayang pindah ke drop-shadow pada pembungkus sebab clip-path potong box-shadow */ .mask-wrap{position:relative;filter:var(--sh-drop)} .frame--mask{--mask:inset(0 round var(--r-xl));clip-path:var(--mask);padding:7px;background:var(--paper);box-shadow:none;border-radius:0} .frame--mask>*{clip-path:var(--mask-in,var(--mask));border-radius:0!important} .frame--mask>picture>img{border-radius:0} /* telefon, bezel dakwat + pulau */ .frame--phone{--mask:inset(0 round 52px);--mask-in:inset(0 round 42px);padding:11px;background:var(--bezel);max-width:340px} .frame--phone>picture{padding-top:38px;background:var(--screen,var(--paper))} .frame--phone::after{content:"";position:absolute;top:21px;left:50%;width:84px;height:24px;translate:-50% 0;border-radius:99px;background:var(--island,var(--bezel));z-index:2} /* slip, sisi berlekuk macam slip keputusan + kaki bergerigi */ .frame--slip{--mask:url(#m-slip)} /* ---------- POLAROID + PITA ---------- */ .polaroid{--tilt:calc(var(--tilt-unit) * -1.2);position:relative;margin:0;padding:12px 12px 52px;border-radius:10px;background:var(--paper);box-shadow:var(--sh-card);rotate:var(--tilt)} .polaroid img{border-radius:4px;width:100%} .polaroid figcaption{position:absolute;left:16px;right:16px;bottom:14px;font:700 .95rem/1.2 var(--f-text);color:var(--ink-soft)} .tape{position:absolute;top:-14px;left:50%;width:110px;height:28px;translate:-50% 0;rotate:3deg;border-radius:3px;background:color-mix(in oklab,var(--tape,var(--hl)) 72%,transparent);z-index:2} /* ---------- KAD KAPSYEN (bertindih bucu bawah foto) ---------- */ .caption-card{position:absolute;z-index:3;left:clamp(-3rem,-3vw,-.75rem);bottom:clamp(1rem,3vw,2rem);width:min(22rem,86%);display:grid;gap:4px;padding:16px 20px 18px;border-radius:var(--r-md);background:var(--paper);color:var(--ink);box-shadow:var(--sh-card)} .caption-card>b{font-size:1.05rem;line-height:1.25} .caption-card>span{font-size:.95rem;line-height:1.45;color:var(--ink-soft)} .caption-card>small{font-size:.8rem;color:var(--ink-soft);display:flex;align-items:center;gap:8px} .caption-card>small::before{content:"";width:16px;height:2px;background:var(--brand)} @media (max-width:560px){.caption-card{position:relative;left:auto;bottom:auto;width:auto;margin:-2.2rem 12px 0}} /* ---------- CHIP, plat perkataan 3D tebal (A6) ---------- */ .chips{display:flex;flex-wrap:wrap;gap:.35em .3em;align-items:flex-start;font-size:clamp(1.9rem,1.2rem + 3vw,3.6rem)} .chip{--c:var(--sun);--on:var(--on-sun);--s:var(--sun-s);--r:calc(var(--tilt-unit) * -1);position:relative;display:inline-block;padding:.14em .42em .2em;border-radius:.26em;background:var(--c);color:var(--on); font:800 1em/1 var(--f-display);font-variation-settings:"opsz" 96;letter-spacing:-.035em;white-space:nowrap;rotate:var(--r);transform-origin:50% 100%; box-shadow:0 .12em 0 var(--s),0 .4em .7em -.3em rgba(var(--sh-rgb),.45)} .chip::after{content:"";position:absolute;top:.2em;right:.22em;width:.16em;height:.16em;border-radius:50%;background:rgba(255,255,255,.55)} .chip:nth-child(even){--r:var(--tilt-unit)} .chip--brand{--c:var(--brand);--on:var(--on-brand);--s:var(--brand-s)} .chip--pass{--c:var(--pass);--on:var(--on-pass);--s:var(--pass-s)} .chip--sky{--c:var(--sky);--on:var(--on-sky);--s:var(--sky-s)} .chip--sm{font-size:clamp(1rem,.9rem + .5vw,1.25rem);padding:.3em .6em .34em} /* ---------- PELEKAT (A7) ---------- */ .stickers{position:absolute;inset:0;pointer-events:none;z-index:4} .sticker{--r:0deg;position:absolute;width:var(--w,48px);height:auto;rotate:var(--r);pointer-events:none;z-index:4} .sticker--float{animation:k-float 6s ease-in-out infinite} @keyframes k-float{0%,100%{translate:0 0}50%{translate:0 -8px}} @keyframes k-twinkle{0%,100%{scale:1;opacity:1}50%{scale:.78;opacity:.7}} .sticker--twinkle{animation:k-twinkle 3.6s ease-in-out infinite} /* ---------- NOTA KERTAS + SENARAI SEMAK (A8) ---------- */ .paper-note{position:relative;width:min(100%,32rem);padding:32px 30px 28px;border-radius:6px;rotate:-1.5deg;color:var(--ink); background:var(--paper) repeating-linear-gradient(transparent 0 36px,var(--rule) 36px 38px);background-position:0 62px;box-shadow:var(--sh-card)} .paper-note h3{margin-bottom:10px} .paper-note .tape{--tape:var(--pass)} .checks{list-style:none;margin:0;padding:0;display:grid;gap:0} .check{position:relative;display:flex;align-items:center;gap:12px;min-height:38px;font-weight:600;line-height:1.3} .check__box{width:22px;height:22px;flex:none;border-radius:6px;box-shadow:inset 0 0 0 2px var(--ink);display:grid;place-items:center} .check__box svg,.check__strike{overflow:visible} .check__box svg{width:20px;height:20px} .check__box path,.check__strike path{fill:none;stroke:var(--brand);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0} .check__box path{stroke-width:3.4px} .check__txt{position:relative} .check__strike{position:absolute;left:-3px;top:50%;width:calc(100% + 6px);height:12px;translate:0 -45%} .check__strike path{stroke-width:2.6px;opacity:.85} .check.is-done .check__txt{color:var(--ink-soft)} /* ---------- COP BULAT ---------- */ .stamp{--c:var(--pass-text);position:absolute;display:grid;place-items:center;width:7.4em;aspect-ratio:1;border-radius:50%;rotate:-12deg;text-align:center; color:var(--c);font:800 1rem/1 var(--f-display);letter-spacing:.04em;text-transform:uppercase;background:color-mix(in oklab,var(--paper) 88%,transparent); box-shadow:inset 0 0 0 3px var(--c),inset 0 0 0 7px var(--paper),inset 0 0 0 9px var(--c);z-index:5} .stamp b{display:block;font-size:1.75em;letter-spacing:-.01em} .stamp small{display:block;font-size:.62em;margin-top:.3em;letter-spacing:.14em} .stamp--brand{--c:var(--brand-text)} /* ---------- NOMBOR BESAR (A9) ---------- */ .big-stat{--c:var(--brand);display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:.2rem 1.2rem} .big-stat__num{font:800 clamp(6rem,3rem + 13vw,14rem)/.8 var(--f-display);font-variation-settings:"opsz" 96;letter-spacing:-.06em;color:var(--c);font-variant-numeric:tabular-nums;padding-top:.08em} .big-stat__label{display:grid;gap:4px;padding-bottom:.6rem} .big-stat__label b{font:800 clamp(1.3rem,1.1rem + .8vw,1.9rem)/1.1 var(--f-display);letter-spacing:-.02em} .big-stat__label span{color:var(--ink-soft);max-width:22rem} @media (max-width:560px){.big-stat{grid-template-columns:minmax(0,1fr)}.big-stat__label{padding-bottom:0}} .sec--night .big-stat__label span{color:var(--on-night-soft)} /* ---------- PIL FOTO DALAM AYAT (A11) ---------- */ .inline-pill{--tilt:calc(var(--tilt-unit) * 2);display:inline-block;vertical-align:-.1em;width:1.55em;height:.92em;margin-inline:.1em;border-radius:.42em;overflow:hidden;rotate:var(--tilt);background:var(--sand); box-shadow:0 .12em .3em -.08em rgba(var(--sh-rgb),.35),0 0 0 .06em var(--paper)} .inline-pill img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 0)} /* ---------- METER (data dilukis) ---------- */ .meter{--v:0;--goal:85;--c:var(--pass);position:relative;height:22px;border-radius:99px;background:var(--line);box-shadow:inset 0 0 0 2px var(--line)} .meter__fill{position:absolute;inset:0 auto 0 0;width:calc(var(--v) * 1%);border-radius:inherit;background:var(--c);box-shadow:inset 0 -4px 0 var(--pass-s)} .meter__goal{position:absolute;top:-8px;bottom:-8px;left:calc(var(--goal) * 1%);width:3px;border-radius:2px;background:var(--ink)} /* ---------- BAR MELEKAT MOBILE (A13) ---------- */ .sticky-bar{display:none} @media (max-width:860px){ .sticky-bar{position:fixed;z-index:80;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:color-mix(in oklab,var(--cream) 94%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); box-shadow:0 -1px 0 var(--line),0 -12px 30px -18px rgba(var(--sh-rgb),.4);transition:transform .32s var(--ease-out)} .sticky-bar__proof{font-size:.84rem;line-height:1.3;color:var(--ink-soft)} .sticky-bar__proof b{color:var(--ink);font-size:.95rem} .sticky-bar .btn{margin-left:auto;min-height:48px;font-size:.95rem;padding:.7em 1.1em} html.js .sticky-bar{transform:translateY(110%)} html.js .sticky-bar.is-on{transform:none} body{padding-bottom:84px} } /* ---------- GERAK (A14). Tanpa JS atau reduced-motion = keadaan akhir ---------- */ @media (prefers-reduced-motion:no-preference){ html.js [data-in] .chip{opacity:0;scale:.55;translate:0 .5em;transition:opacity .25s var(--ease-out),scale .6s var(--ease-bounce),translate .6s var(--ease-bounce);transition-delay:calc(var(--i,0) * 110ms + .1s)} html.js [data-in].is-in .chip{opacity:1;scale:1;translate:0 0} html.js [data-in] .check__box path,html.js [data-in] .check__strike path{stroke-dashoffset:1;transition:stroke-dashoffset .35s var(--ease-out)} html.js [data-in] .check__box path{transition-delay:calc(var(--i,0) * 260ms + .3s)} html.js [data-in] .check__strike path{transition-duration:.4s;transition-delay:calc(var(--i,0) * 260ms + .55s)} html.js [data-in].is-in .check.is-done path{stroke-dashoffset:0} html.js [data-in] .check.is-done .check__txt{transition:color .3s calc(var(--i,0) * 260ms + .55s)} html.js [data-in]:not(.is-in) .check.is-done .check__txt{color:var(--ink)} html.js [data-in] .stamp{opacity:0;scale:1.7;transition:opacity .2s var(--d,1.8s),scale .45s var(--ease-bounce) var(--d,1.8s)} html.js [data-in].is-in .stamp{opacity:1;scale:1} html.js [data-in] .meter__fill{width:0;transition:width 1.2s var(--ease-out) .25s} html.js [data-in].is-in .meter__fill{width:calc(var(--v) * 1%)} html.js [data-in] .big-stat__num{clip-path:inset(100% 0 0);transition:clip-path .9s var(--ease-out)} html.js [data-in].is-in .big-stat__num{clip-path:inset(-10%)} html.js [data-in] .draw path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s var(--ease-out) var(--d,.2s)} html.js [data-in].is-in .draw path{stroke-dashoffset:0} html.js [data-in] .pop{opacity:0;scale:.6;transition:opacity .2s var(--d,.3s),scale .55s var(--ease-bounce) var(--d,.3s)} html.js [data-in].is-in .pop{opacity:1;scale:1} } @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}