/* Hero "I need..." tiles: one mini system per need. Children size in cqw against .nt.
   Tile order matches the locked list: a website, my Google listing sorted, a wiki, an AI assistant, an app I own, I'm not sure where to start.
   Base styles hold each tile's finished state, so reduced motion (animation: none) shows it without extra rules. */
.nt{--f:var(--paper);position:relative;container-type:inline-size;border:var(--line) solid var(--ink);border-radius:4.4cqw;background:var(--f);box-shadow:var(--sh-md);overflow:hidden}
.nt-stage{position:absolute;left:6cqw;right:6cqw;top:6cqw;bottom:19cqw;transition:opacity 300ms}
.nt-lb{position:absolute;left:6cqw;bottom:5cqw;font-weight:800;font-size:max(12px,6.2cqw);letter-spacing:-.03em;line-height:1;white-space:nowrap;color:var(--ink)}
.nt-bar{display:block;height:2cqw;border-radius:9px;background:var(--ink);opacity:.22}
.nt .tks{width:70%;height:70%}
.nt .tks path{fill:none;stroke:var(--ink);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.nt .hxs{display:block;overflow:visible}
.nt .hxs path{fill:var(--coral);stroke:var(--ink);stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-width:2px}
.nt .hxs.sm path{stroke-width:1.5px}

/* in the hero: six slots, the typed need lights its tile. Inactive tiles dim the picture only; the label stays full ink. */
.tiles .nt{position:absolute;inset:0;transition:transform 420ms var(--ease),box-shadow 420ms var(--ease)}
.tiles .slot[role="button"]{cursor:pointer;border-radius:4.4cqw}
.tiles .nt:not(.on) .nt-stage{opacity:.45}
.tiles .slot[role="button"]:hover .nt:not(.on) .nt-stage{opacity:.8}
.tiles .nt.on{transform:translate(-2px,-3px) rotate(-2deg);box-shadow:var(--sh-lg);z-index:4}
.tiles.all .nt .nt-stage{opacity:1}
.tiles .nt.moon.on{z-index:6}

/* Website: header, cards and button snap in; a cursor clicks the button */
.web{height:100%;border:var(--line) solid var(--ink);border-radius:3cqw;background:var(--paper);overflow:hidden;display:flex;flex-direction:column}
.wb-top{flex:none;height:6cqw;border-bottom:var(--line) solid var(--ink);display:flex;gap:1.2cqw;align-items:center;padding:0 2.2cqw}
.wb-top i{width:1.9cqw;aspect-ratio:1;border-radius:50%;border:var(--line) solid var(--ink);background:var(--pink)}
.wb-top i:nth-child(2){background:var(--butter)}.wb-top i:nth-child(3){background:var(--mint)}
.wb-body{flex:1;min-height:0;padding:2.2cqw;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:8cqw 1fr 5.4cqw;gap:1.8cqw}
.wb-body>i{display:block;border:var(--line) solid var(--ink);border-radius:2cqw;animation:wb-pop 6s var(--ease) infinite backwards}
.wb-h{grid-column:1/-1;background:var(--pink);animation-delay:.2s!important}
.wb-c{background:var(--butter);animation-delay:.55s!important}
.wb-c.b{background:var(--mint);animation-delay:.75s!important}
.wb-body>i.wb-btn{grid-column:1/-1;justify-self:center;width:24cqw;border-radius:var(--r-pill);background:var(--ink);animation:wb-pop 6s var(--ease) 1s infinite backwards,wb-click 6s ease infinite}
.wb-cur{position:absolute;left:50%;top:calc(100% - 6.4cqw);width:7cqw;height:7cqw;margin-left:-1.5cqw;margin-top:-.9cqw;z-index:3;opacity:0;animation:wb-cur 6s cubic-bezier(.5,0,.3,1) infinite}
.wb-cur path{fill:var(--paper);stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
@keyframes wb-pop{0%{opacity:0;transform:translateY(-3cqw) scale(.6) rotate(-6deg)}8%{opacity:1;transform:scale(1.08) rotate(2deg)}12%,86%{opacity:1;transform:none}92%,100%{opacity:0;transform:scale(.8)}}
@keyframes wb-click{0%,55%{background:var(--ink)}57%,84%{background:var(--coral)}90%,100%{background:var(--ink)}}
@keyframes wb-cur{0%,28%{transform:translate(26cqw,14cqw);opacity:0}34%{opacity:1}50%{transform:none;scale:1}54%{scale:.78}58%,82%{transform:none;scale:1;opacity:1}90%,100%{transform:translate(10cqw,6cqw);opacity:0}}

/* Google listing: a pin drops, the name fills in, five stars pop, then the call and route buttons */
.gl{height:100%;border:var(--line) solid var(--ink);border-radius:3cqw;background:var(--paper);padding:2.6cqw 3cqw;display:flex;flex-direction:column;justify-content:space-between}
.gl-top{display:flex;align-items:center;gap:2.6cqw}
.gl-pin{flex:none;width:11cqw;aspect-ratio:156/180;animation:gl-pin 6s var(--ease) infinite}
.gl-pin svg{width:100%;height:100%}
.gl-nm{flex:1;display:flex;flex-direction:column;gap:1.8cqw}
.gl-nm i{display:block;height:2.4cqw;border-radius:9px;background:var(--ink);transform-origin:left;animation:gl-bar 6s cubic-bezier(.4,0,.2,1) infinite}
.gl-nm i:first-child{width:80%}
.gl-nm i:last-child{width:50%;opacity:.22;animation-delay:.14s}
.gl-st{display:flex;gap:1.2cqw}
.gl-st svg{width:6.6cqw;aspect-ratio:156/180;animation:gl-pop 6s var(--ease) infinite backwards}
.nt .gl-st .hxs path{fill:var(--butter)}
.gl-st svg:nth-child(2){animation-delay:.14s}.gl-st svg:nth-child(3){animation-delay:.28s}.gl-st svg:nth-child(4){animation-delay:.42s}.gl-st svg:nth-child(5){animation-delay:.56s}
.gl-bt{display:flex;gap:2cqw}
.gl-bt i{display:block;flex:1;height:6cqw;border:var(--line) solid var(--ink);border-radius:var(--r-pill);background:var(--pink);animation:gl-pop 6s var(--ease) 1.6s infinite backwards}
.gl-bt i+i{background:var(--mint);animation-delay:1.8s}
@keyframes gl-pin{0%,3%{opacity:0;transform:translateY(-9cqw) scale(.7)}9%{opacity:1;transform:translateY(1.2cqw) scale(1.08)}13%,86%{opacity:1;transform:none}92%,100%{opacity:0;transform:scale(.8)}}
@keyframes gl-bar{0%,8%{transform:scaleX(0)}20%,86%{transform:none}92%,100%{transform:scaleX(0)}}
@keyframes gl-pop{0%,2%{opacity:0;transform:scale(.2) rotate(-14deg)}8%{opacity:1;transform:scale(1.25) rotate(3deg)}12%,84%{opacity:1;transform:none}90%,100%{opacity:0;transform:scale(.4)}}

/* Wiki: pages in the sidebar light up in turn and the page fills with text, then a link pill pops */
.wk{height:100%;display:grid;grid-template-columns:28cqw minmax(0,1fr);gap:2.4cqw}
.wk-nv{display:flex;flex-direction:column;gap:2cqw;justify-content:center}
.wk-nv i{display:block;height:6.4cqw;border:var(--line) solid var(--ink);border-radius:var(--r-pill);background:var(--paper)}
.wk-nv i:nth-child(1){animation:wk-pop 6s var(--ease) infinite backwards,wk-a1 6s ease infinite}
.wk-nv i:nth-child(2){background:var(--cyan);animation:wk-pop 6s var(--ease) .14s infinite backwards,wk-a2 6s ease infinite}
.wk-nv i:nth-child(3){animation:wk-pop 6s var(--ease) .28s infinite backwards}
.wk-pg{border:var(--line) solid var(--ink);border-radius:3cqw;background:var(--paper);padding:3cqw;display:flex;flex-direction:column;gap:2cqw;justify-content:center;min-width:0}
.wk-t,.wk-l{display:block;transform-origin:left}
.wk-t{height:3.6cqw;width:58%;border-radius:9px;background:var(--ink);animation:wk-ln 6s cubic-bezier(.4,0,.2,1) infinite}
.wk-l{height:2cqw;border-radius:9px;background:var(--ink);opacity:.22;animation:wk-ln 6s cubic-bezier(.4,0,.2,1) infinite}
.wk-l:nth-of-type(2){animation-delay:.12s}.wk-l:nth-of-type(3){width:86%;animation-delay:.24s}.wk-l:nth-of-type(4){width:60%;animation-delay:.36s}
.wk-k{align-self:flex-start;width:20cqw;height:5.4cqw;border:var(--line) solid var(--ink);border-radius:var(--r-pill);background:var(--mint);animation:wk-k 6s var(--ease) infinite}
@keyframes wk-pop{0%,2%{opacity:0;transform:translateX(-5cqw) scale(.7)}8%{opacity:1;transform:scale(1.06)}12%,86%{opacity:1;transform:none}92%,100%{opacity:0;transform:scale(.8)}}
@keyframes wk-a1{0%,12%{background:var(--paper)}16%,34%{background:var(--mint)}38%,100%{background:var(--paper)}}
@keyframes wk-a2{0%,36%{background:var(--paper)}40%,88%{background:var(--cyan)}94%,100%{background:var(--paper)}}
@keyframes wk-ln{0%,12%{transform:scaleX(0)}24%,34%{transform:none}38%{transform:scaleX(0)}50%,86%{transform:none}92%,100%{transform:scaleX(0)}}
@keyframes wk-k{0%,56%{opacity:0;transform:scale(.2)}62%{opacity:1;transform:scale(1.25)}66%,88%{opacity:1;transform:none}94%,100%{opacity:0;transform:scale(.4)}}

/* AI assistant: a question arrives, three dots, then the answer fills in and ticks */
.ai{height:100%;display:flex;flex-direction:column;justify-content:space-between;gap:2cqw}
.ai-u{align-self:flex-end;width:50cqw;height:9cqw;border:var(--line) solid var(--ink);border-radius:3cqw;background:var(--paper);display:flex;align-items:center;padding:0 3cqw;transform-origin:right bottom;animation:ai-pop 6s var(--ease) infinite}
.ai-u .nt-bar{flex:1;opacity:.4}
.ai-r{display:flex;align-items:flex-end;gap:2cqw}
.ai-av{flex:none;width:10cqw;aspect-ratio:156/180;transform-origin:center bottom;animation:ai-pop2 6s var(--ease) infinite}
.ai-av svg{width:100%;height:100%}
.ai-b{position:relative;flex:1;height:17cqw;border:var(--line) solid var(--ink);border-radius:3cqw;background:var(--paper);padding:3cqw;display:flex;flex-direction:column;gap:2cqw;justify-content:center;transform-origin:left bottom;animation:ai-pop2 6s var(--ease) infinite}
.ai-b .nt-bar{transform-origin:left;animation:ai-ln 6s cubic-bezier(.4,0,.2,1) infinite}
.ai-b .nt-bar+.nt-bar{width:62%;animation-delay:.14s}
.ai-dots{position:absolute;left:3cqw;top:50%;display:flex;gap:1.6cqw;translate:0 -50%;opacity:0;animation:ai-dots 6s linear infinite}
.ai-dots i{display:block;width:2.4cqw;aspect-ratio:1;border-radius:50%;background:var(--ink);animation:ai-bounce 600ms ease-in-out infinite alternate}
.ai-dots i:nth-child(2){animation-delay:.15s}.ai-dots i:nth-child(3){animation-delay:.3s}
.ai-tk{position:absolute;right:-2.4cqw;top:-2.4cqw;width:6.4cqw;aspect-ratio:1;border-radius:50%;border:var(--line) solid var(--ink);background:var(--ok);display:grid;place-items:center;animation:ai-tk 6s var(--ease) infinite}
@keyframes ai-pop{0%,3%{opacity:0;transform:scale(.3) rotate(-6deg)}9%{opacity:1;transform:scale(1.08)}13%,86%{opacity:1;transform:none}92%,100%{opacity:0;transform:scale(.8)}}
@keyframes ai-pop2{0%,20%{opacity:0;transform:scale(.3) rotate(6deg)}27%{opacity:1;transform:scale(1.08)}31%,86%{opacity:1;transform:none}92%,100%{opacity:0;transform:scale(.8)}}
@keyframes ai-dots{0%,30%{opacity:0}32%,44%{opacity:1}46%,100%{opacity:0}}
@keyframes ai-bounce{to{translate:0 -1.4cqw}}
@keyframes ai-ln{0%,46%{transform:scaleX(0)}58%,86%{transform:none}92%,100%{transform:scaleX(0)}}
@keyframes ai-tk{0%,62%{scale:0}68%{scale:1.25}72%,88%{scale:1}94%,100%{scale:0}}

/* Your own app: a contact moves lead, call, won (a board you own) */
.crm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3cqw;height:100%}
.lane{border:var(--line-dash);border-radius:3cqw;padding:2cqw;display:flex;flex-direction:column;gap:2cqw}
.lane .hd{display:block;height:2.4cqw;width:62%;border-radius:9px;background:var(--ink)}
.lane .sp{display:block;height:12cqw;flex:none}
.cc{height:12cqw;flex:none;border:var(--line) solid var(--ink);border-radius:2.6cqw;background:var(--paper);display:flex;align-items:center;gap:1.4cqw;padding:0 1.6cqw}
.cc .av{flex:none;width:5cqw;aspect-ratio:1;border-radius:50%;border:var(--line) solid var(--ink);background:var(--peach)}
.cc .nt-bar{flex:1}
.cc.mv{position:absolute;left:2.3cqw;top:8.6cqw;width:22.6cqw;z-index:2;transform:translate(60.6cqw,0);animation:crm-mv 6s cubic-bezier(.5,0,.3,1) infinite}
.cc.mv .av{background:var(--pink)}
.cc .tk{position:absolute;right:-2.4cqw;top:-2.4cqw;width:6.4cqw;aspect-ratio:1;border-radius:50%;border:var(--line) solid var(--ink);background:var(--ok);display:grid;place-items:center;animation:crm-tk 6s var(--ease) infinite}
@keyframes crm-mv{
  0%{transform:none;opacity:0}5%{opacity:1;transform:none;box-shadow:var(--sh-0)}
  14%{transform:translateY(-1.4cqw) rotate(-5deg) scale(1.07);box-shadow:var(--sh-md)}
  30%{transform:translate(30.3cqw,-1.4cqw) rotate(4deg) scale(1.07);box-shadow:var(--sh-md)}
  36%,50%{transform:translate(30.3cqw,0);box-shadow:var(--sh-0)}
  58%{transform:translate(30.3cqw,-1.4cqw) rotate(-5deg) scale(1.07);box-shadow:var(--sh-md)}
  72%{transform:translate(60.6cqw,-1.4cqw) rotate(4deg) scale(1.07);box-shadow:var(--sh-md)}
  78%,94%{transform:translate(60.6cqw,0);box-shadow:var(--sh-0);opacity:1}
  100%{transform:translate(60.6cqw,0);opacity:0}}
@keyframes crm-tk{0%,77%{scale:0}82%{scale:1.25}86%,94%{scale:1}100%{scale:0}}

/* Not sure where to start: a blank tile turns to night sky, a rocket pops out, hovers, crouches and leaves the page.
   The sky, stars and rocket sit in .ms-stage so the inactive state can dim the picture and leave the labels alone. */
.nt.moon{border-style:dashed;overflow:visible;z-index:3}
.ms-stage{position:absolute;inset:0;border-radius:inherit;transition:opacity 300ms}
.tiles .nt.moon:not(.on) .ms-stage{opacity:.45}
.tiles .slot[role="button"]:hover .nt.moon:not(.on) .ms-stage{opacity:.8}
.tiles.all .nt.moon .ms-stage{opacity:1}
.ms-sky{position:absolute;inset:0;border-radius:inherit;background:var(--ink);opacity:0;animation:ms-sky 7s ease infinite}
.ms-blank{position:absolute;left:50%;top:44%;width:30cqw;aspect-ratio:1;translate:-50% -50%;border:var(--line) dashed var(--ink);border-radius:5cqw;display:grid;place-items:center;animation:ms-blank 7s var(--ease) infinite}
.ms-blank::before,.ms-blank::after{content:"";position:absolute;width:10cqw;height:2.2cqw;border-radius:9px;background:var(--ink)}
.ms-blank::after{rotate:90deg}
.ms-st{position:absolute;width:3.4cqw;aspect-ratio:168/192;background:var(--butter);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);scale:0;animation:ms-st 7s var(--ease) infinite}
.ms-r{position:absolute;left:50%;bottom:10cqw;width:16cqw;height:31cqw;margin-left:-8cqw;scale:0;z-index:5;animation:ms-r 7s cubic-bezier(.45,0,.3,1) infinite}
.ms-r>i{position:absolute;display:block;border:var(--line) solid var(--ink)}
.ms-r .bd{left:2.5cqw;right:2.5cqw;top:0;height:24cqw;background:var(--paper);border-radius:50% 50% 28% 28%/62% 62% 16% 16%}
.ms-r .wn{left:50%;top:7cqw;width:6cqw;aspect-ratio:1;translate:-50% 0;border-radius:50%;background:var(--cyan)}
.ms-r .fn{bottom:7cqw;width:5.4cqw;height:9cqw;background:var(--pink)}
.ms-r .fn.l{left:0;border-radius:70% 0 2cqw 2cqw;rotate:-6deg}
.ms-r .fn.r{right:0;border-radius:0 70% 2cqw 2cqw;rotate:6deg}
.ms-r .fl{left:50%;top:22cqw;width:7cqw;height:9cqw;translate:-50% 0;background:var(--butter);border-radius:50% 50% 50% 50%/28% 28% 72% 72%;transform-origin:50% 0;animation:ms-fl 160ms ease-in-out infinite alternate}
.ms-r .fl::after{content:"";position:absolute;left:28%;right:28%;top:12%;height:52%;border-radius:inherit;background:var(--coral)}
.ms-pf{position:absolute;left:calc(50% - 10cqw);bottom:5cqw;width:10cqw;aspect-ratio:1;border-radius:50%;border:var(--line) solid var(--ink);background:var(--paper);scale:0;opacity:0;z-index:4;animation:ms-pf 7s ease-out infinite}
.ms-pf.b{left:calc(50% + 1cqw);width:8cqw;animation-delay:.08s}
.ms-lb{z-index:4;animation:ms-lb1 7s ease infinite}
.ms-lb.b{opacity:0;color:var(--paper);animation-name:ms-lb2}
@keyframes ms-sky{0%,16%{opacity:0}24%,88%{opacity:1}96%,100%{opacity:0}}
@keyframes ms-blank{0%,14%{scale:1;opacity:1}18%{scale:1.1;opacity:1}22%,92%{scale:.4;opacity:0}100%{scale:1;opacity:1}}
@keyframes ms-st{0%,22%{scale:0}28%,86%{scale:1}92%,100%{scale:0}}
@keyframes ms-r{
  0%,17%{scale:0;transform:translateY(-4cqw)}
  24%{scale:1.15}28%{scale:1;transform:translateY(-2cqw) rotate(-3deg)}
  36%{transform:translateY(1cqw) rotate(2deg)}44%{transform:translateY(-1cqw) rotate(-1deg)}52%{transform:translateY(1cqw) rotate(1deg)}
  60%{scale:1;transform:translateY(3cqw) scale(1.06,.9)}
  64%{transform:translateY(-6cqw) scale(.94,1.08);animation-timing-function:cubic-bezier(.6,0,.9,.6)}
  82%{scale:1;transform:translateY(-160vh) scale(.9,1.15)}
  83%,100%{scale:0;transform:translateY(-160vh)}}
@keyframes ms-fl{from{scale:1 .75}to{scale:1.05 1.25}}
@keyframes ms-pf{0%,61%{scale:0;opacity:0}63%{opacity:1;scale:.6}74%{scale:1.3;opacity:1}84%,100%{scale:1.5;opacity:0}}
@keyframes ms-lb1{0%,18%{opacity:1}22%,92%{opacity:0}100%{opacity:1}}
@keyframes ms-lb2{0%,20%{opacity:0;translate:0 2cqw}26%,88%{opacity:1;translate:0 0}94%,100%{opacity:0}}

.nb-paused .nt *,.nb-paused .nt{animation-play-state:paused!important}

/* reduced motion: every tile shows its finished state (base.css already switches animation off) */
@media (prefers-reduced-motion:reduce){
  .ai-dots{display:none}
  .ms-sky{opacity:1}.ms-blank{opacity:0}.ms-st{scale:1}.ms-r{scale:1;transform:none}.ms-pf{opacity:0}.ms-lb{opacity:0}.ms-lb.b{opacity:1}
}