/* Layout: two research panels side by side (goals left, frustrations right), cards on top, illustrated scene below. Single light look to match the illustration. */
:root{
  --bg:#f7f8fc;
  --ink:#141c4d;
  --ink-soft:#24308a;
  --muted:#6f7fb3;
  --card:#ffffff;
  --goal:#1677d6;
  --goal-wash:#e6f2fd;
  --goal-line:#b9d8f5;
  --pain:#8443c9;
  --pain-wash:#f2ebfb;
  --pain-line:#dccbf2;
  --teal:#13998a;
  --red:#e5262f;
  --orange:#f2733a;
  --sticky:#fbe08a;
  --display:"Bricolage Grotesque", "Arial Rounded MT Bold", "Segoe UI", system-ui, sans-serif;
  --body:"Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);margin:0}
.wrap{max-width:1240px;margin:0 auto;padding-block:36px 40px;
  padding-left:max(16px, env(safe-area-inset-left, 0px));padding-right:max(16px, env(safe-area-inset-right, 0px))}
header{text-align:center;display:grid;gap:8px;margin-bottom:34px}
h1{font-family:var(--display);font-weight:800;font-size:clamp(28px,4.6vw,56px);letter-spacing:-.035em;line-height:1.02;margin:0;color:var(--ink);text-wrap:balance}
h1 span{display:inline-block}
.sub{font-size:clamp(15px,1.8vw,22px);color:var(--muted);margin:0;font-weight:500}
.board{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.panel{position:relative;border-radius:22px;border:1.5px solid var(--line);background:linear-gradient(180deg,var(--wash),var(--card) 92%);padding:44px 22px 0;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.goals{--line:var(--goal-line);--wash:var(--goal-wash);--acc:var(--goal)}
.pains{--line:var(--pain-line);--wash:var(--pain-wash);--acc:var(--pain)}
.pill{position:absolute;top:0;left:50%;transform:translate(-50%,0);background:var(--acc);color:#fff;font-family:var(--display);font-weight:800;letter-spacing:.06em;font-size:clamp(17px,2vw,26px);padding:6px 34px 8px;border-radius:0 0 20px 20px;white-space:nowrap}
.cards{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:14px;position:relative;z-index:2}
.card{background:var(--card);border-radius:16px;padding:18px 18px 16px;box-shadow:0 1px 0 var(--line),0 8px 24px -16px rgba(20,28,77,.25);display:grid;gap:14px;align-content:start;min-width:0}
.card h2{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.3vw,30px);letter-spacing:-.02em;margin:0 0 2px;color:var(--ink)}
.item{display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:center}
.item p{margin:0;color:var(--ink-soft);font-size:15.5px;line-height:1.38}
.ico{width:76px;height:76px;border-radius:50%;background:var(--wash);display:grid;place-items:center}
.ico.bare{background:none}
.ico svg{width:70px;height:70px;overflow:visible}
.scene{position:relative;margin:-26px -22px 0;z-index:1;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%);mask-image:linear-gradient(180deg,transparent 0,#000 22%)}
.scene{flex:0 0 auto}
.scene .img{position:relative;overflow:hidden;aspect-ratio:2.6;max-width:100%}
.scene img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 100%;transform-origin:50% 70%}
.hot{position:absolute;border-radius:50%;pointer-events:none}
.clock-hot{left:71.9%;top:26%;width:12%;aspect-ratio:1;transform:translate(-50%,-50%);border:3px solid var(--red)}
.chart-hot{left:61%;top:27%;width:3.4%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff 0 25%,rgba(22,119,214,.55) 26% 60%,transparent 62%)}
.foot{display:flex;justify-content:center;margin-top:22px}
.replay{font:600 14px/1 var(--body);color:var(--ink-soft);background:var(--card);border:1.5px solid var(--goal-line);border-radius:999px;padding:11px 20px 11px 16px;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.replay:hover{border-color:var(--goal);color:var(--goal)}
.replay:focus-visible{outline:3px solid var(--goal);outline-offset:3px}
.replay svg{width:16px;height:16px}

/* ---------- SVG parts ---------- */
.fb{transform-box:fill-box}
.draw{stroke-dasharray:1;stroke-dashoffset:0}

/* ---------- Intro sequence (runs on load and on replay; resting state is fully visible) ---------- */
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
@keyframes drop{from{opacity:0;transform:translateY(-22px) rotate(-3deg)}}
@keyframes pop{0%{opacity:0;transform:scale(.4)}70%{transform:scale(1.08)}}
@keyframes pill{from{opacity:0;transform:translate(-50%,-100%)}}
@keyframes drawIn{from{stroke-dashoffset:1}}
@keyframes grow{from{transform:scaleY(0)}}
@keyframes arrowHit{0%{opacity:0;transform:translate(26px,-26px)}60%{opacity:1;transform:translate(-1px,1px)}75%{transform:translate(1px,-1px)}}
@keyframes ring{0%{transform:scale(1)}40%{transform:scale(1.12)}}
@keyframes launch{0%{opacity:0;transform:translate(-14px,14px)}}
@keyframes sceneIn{from{opacity:0;transform:translateY(24px)}}
@keyframes linkIn{from{opacity:0;transform:scale(.5) rotate(-30deg)}}

.run h1 span{animation:drop .7s cubic-bezier(.2,.9,.3,1.2) backwards}
.run h1 span:nth-child(2){animation-delay:.08s}.run h1 span:nth-child(3){animation-delay:.16s}
.run h1 span:nth-child(4){animation-delay:.32s}.run h1 span:nth-child(5){animation-delay:.4s}.run h1 span:nth-child(6){animation-delay:.48s}
.run .sub{animation:rise .6s .6s ease-out backwards}
.run .panel{animation:rise .7s ease-out backwards}
.run .goals{animation-delay:.7s}.run .pains{animation-delay:2.6s}
.run .goals .pill{animation:pill .5s 1s cubic-bezier(.2,.9,.3,1.2) backwards}
.run .pains .pill{animation:pill .5s 2.9s cubic-bezier(.2,.9,.3,1.2) backwards}
.run .card{animation:rise .6s ease-out backwards;animation-delay:calc(var(--d) + .1s)}
.run .item{animation:rise .55s ease-out backwards;animation-delay:var(--d)}
.run .ico{animation:pop .55s cubic-bezier(.2,.9,.3,1.3) backwards;animation-delay:calc(var(--d) + .15s)}
.run .scene{animation:sceneIn .9s ease-out backwards;animation-delay:var(--d)}

/* icon-specific intros */
.run .target .arrow{animation:arrowHit .7s ease-out backwards;animation-delay:calc(var(--d) + .5s)}
.run .target .rings{animation:ring .45s ease-out;animation-delay:calc(var(--d) + .95s);transform-origin:40px 40px}
.run .rocket .body{animation:launch .8s cubic-bezier(.2,.9,.3,1.2) backwards;animation-delay:calc(var(--d) + .3s)}
.run .bars rect{animation:grow .7s cubic-bezier(.2,.9,.3,1.15) backwards;transform-origin:50% 100%}
.run .bars rect:nth-child(1){animation-delay:calc(var(--d) + .35s)}
.run .bars rect:nth-child(2){animation-delay:calc(var(--d) + .5s)}
.run .bars rect:nth-child(3){animation-delay:calc(var(--d) + .65s)}
.run .bars .draw{animation:drawIn .8s ease-out backwards;animation-delay:calc(var(--d) + .8s)}
.run .friction .link{animation:linkIn .5s ease-out backwards;animation-delay:calc(var(--d) + .4s)}

/* ---------- Ambient loops ---------- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(2px,-3px)}}
@keyframes flame{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.6)}}
@keyframes snapL{0%,40%,100%{transform:translate(0,0) rotate(0)}55%,85%{transform:translate(-4px,3px) rotate(-14deg)}}
@keyframes snapR{0%,40%,100%{transform:translate(0,0) rotate(0)}55%,85%{transform:translate(4px,-3px) rotate(-14deg)}}
@keyframes spark{0%,45%,90%,100%{opacity:0}55%,80%{opacity:1}}
@keyframes winL{0%,40%,100%{transform:translate(0,0)}55%,85%{transform:translate(-3px,-2px)}}
@keyframes winR{0%,40%,100%{transform:translate(0,0)}55%,85%{transform:translate(3px,2px)}}
@keyframes race{to{transform:rotate(360deg)}}
@keyframes shake{0%,82%,100%{transform:rotate(0)}85%{transform:rotate(-8deg)}88%{transform:rotate(7deg)}91%{transform:rotate(-5deg)}94%{transform:rotate(3deg)}}
@keyframes tangle{0%{stroke-dashoffset:1;opacity:1}55%{stroke-dashoffset:0;opacity:1}85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes flow{0%{stroke-dashoffset:0}60%,100%{stroke-dashoffset:-24}}
@keyframes stall{0%,55%{opacity:0}65%,95%{opacity:1}100%{opacity:0}}
@keyframes drift{from{transform:scale(1) translate(0,0)}to{transform:scale(1.045) translate(-1%,-.6%)}}
@keyframes pulse{0%{opacity:.9;transform:translate(-50%,-50%) scale(.8)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}
@keyframes glint{0%,100%{opacity:0;transform:translate(-50%,-50%) scale(.6)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.3)}}

.gear .teeth{animation:spin 9s linear infinite;transform-origin:40px 40px}
.rocket .ship{animation:float 2.6s ease-in-out infinite}
.rocket .flame{animation:flame .18s ease-in-out infinite;transform-origin:50% 0}
.friction .wl{animation:winL 3.2s ease-in-out infinite}
.friction .wr{animation:winR 3.2s ease-in-out infinite}
.friction .l1{animation:snapL 3.2s ease-in-out infinite;transform-origin:center}
.friction .l2{animation:snapR 3.2s ease-in-out infinite;transform-origin:center}
.friction .sparks{animation:spark 3.2s linear infinite}
.clock .face{animation:shake 3s ease-in-out infinite;transform-origin:40px 42px}
.clock .min{animation:race 1.6s linear infinite;transform-origin:40px 42px}
.clock .hr{animation:race 19.2s linear infinite;transform-origin:40px 42px}
.clock .sparks{animation:spark 1s linear infinite}
.tangle-ico .scribble{animation:tangle 6s ease-in-out infinite;animation-delay:var(--td,3.4s)}
.flow-ico .dash{stroke-dasharray:4 4;animation:flow 2.4s ease-in-out infinite}
.flow-ico .dash:nth-of-type(2){animation-delay:.8s}.flow-ico .dash:nth-of-type(3){animation-delay:1.6s}
.flow-ico .wait{animation:stall 2.4s linear infinite}
.goals .scene img{animation:drift 16s ease-in-out infinite alternate}
.pains .scene img{animation:drift 14s ease-in-out -7s infinite alternate-reverse;transform-origin:70% 40%}
.clock-hot{animation:pulse 1.6s ease-out infinite;animation-delay:4s;opacity:0}
.chart-hot{animation:glint 3.2s ease-in-out infinite;animation-delay:2.4s;opacity:0}

@media (max-width:980px){.board{grid-template-columns:1fr}.run .pains{animation-delay:1.6s}.run .pains .pill{animation-delay:1.9s}}
@media (max-width:600px){.cards{grid-template-columns:1fr}.item{grid-template-columns:64px 1fr}.ico{width:64px;height:64px}.ico svg{width:58px;height:58px}.panel{padding:44px 14px 0}.scene{margin:-20px -14px 0}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important}.clock-hot,.chart-hot{display:none}.foot{display:none}}

/* Held on first frame until in view (see data-play in JS) */
.pre *,.pre *::before,.pre *::after{animation-play-state:paused!important}

/* Hide replay control while retaining automatic animation. */
.foot{display:none}

/* Compact portfolio sizing */
.wrap{max-width:1100px;padding-block:20px 24px}
header{margin-bottom:24px}
h1{font-size:clamp(26px,3.8vw,42px)}
.sub{font-size:clamp(14px,1.6vw,18px)}
.board{gap:16px}
.panel{padding:40px 16px 0}
.pill{font-size:clamp(16px,1.8vw,21px);padding:6px 25px 8px}
.card{padding:18px 14px}
.card h2{font-size:24px}
.item{grid-template-columns:48px 1fr;gap:10px}
.item p{font-size:14px;line-height:1.45}
.ico{width:48px;height:48px}
.ico svg{width:46px;height:46px}
.scene{margin:0 -16px}
@media(min-width:761px){.board{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.board{grid-template-columns:1fr}}
@media(max-width:600px){.cards{grid-template-columns:1fr}.card h2{font-size:24px}.item{grid-template-columns:48px 1fr}.scene{margin:0 -16px}}