/* The hats scene (assets/js/hats-scene.js): the six jobs, each just an icon and a name; Sage's red
   ball, to the right of them on wide screens and under them on narrow ones; and Nomi flying the
   whole section on .hats-rig. The finished work shares the jobs' grid cell: each card lands in its
   job's slot and pushes that tile out (.pushed). Without the scene (reduced motion, no rig) the
   cards show in place of the jobs. Loads after hats-seal.css. */
.hats-scene{margin-top:44px;display:grid;grid-template-columns:minmax(0,1fr);align-items:center}
.hats-scene .hats-sage{display:contents}
.hats-scene .hats{grid-area:1/1;margin-top:0;grid-template-columns:repeat(2,minmax(0,1fr))}
.hats-scene .hat{transition:opacity .45s ease,transform .5s cubic-bezier(.4,0,.2,1)}
.hats-scene .hat.pushed{opacity:0;transform:translateX(-44px) scale(.94);pointer-events:none}
.hats-scene:not(.hs-on) .hats{visibility:hidden}
.hats-scene .hats-ball{grid-area:2/1;justify-self:center;margin-top:44px}
/* wide: the ball keeps its own column to the right of the jobs */
@media (min-width:1001px){
  .hats-scene{grid-template-columns:60% 1fr}
  .hats-scene .hats-ball{grid-area:1/2;margin-top:0}
  html[data-theme="ink"] .hats-scene .hat:not(:nth-child(3n+1)){border-left:0}
  html[data-theme="ink"] .hats-scene .hat:nth-child(2n){border-left:1px solid var(--line)}
}
.hat-ic.gone{visibility:hidden}

/* --spin turns the swirl; --gulp swells the glow each time she swallows something */
.hats-ball{--spin:0deg;--gulp:0;--bx:0px;--by:0px;position:relative;z-index:2;width:clamp(150px,17vw,210px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 34% 30%,#ff9d7e 0%,#e0553a 22%,var(--jade) 52%,#6b160a 100%);box-shadow:0 0 calc(44px + 34px * var(--gulp)) calc(6px + 16px * var(--gulp)) rgba(207,65,40,calc(.36 + .3 * var(--gulp))),inset -14px -18px 32px rgba(60,8,2,.45);transform:translate(var(--bx),var(--by)) scale(calc(1 + .07 * var(--gulp)))}
.hats-ball.move{transition:transform 1.3s cubic-bezier(.45,0,.2,1)}
.hb-swirl{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(255,226,206,0) 0deg,rgba(255,226,206,.42) 38deg,rgba(255,226,206,0) 92deg,rgba(255,226,206,0) 180deg,rgba(255,226,206,.3) 222deg,rgba(255,226,206,0) 276deg);mix-blend-mode:soft-light;transform:rotate(var(--spin));-webkit-mask-image:radial-gradient(closest-side,#000 64%,transparent 100%);mask-image:radial-gradient(closest-side,#000 64%,transparent 100%)}

/* the finished work, in the same cards as the platforms scene below, two across like the jobs, one slot per job */
.hats-out{grid-area:1/1;align-self:stretch;position:relative;z-index:1;list-style:none;margin:0;padding:0 14px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:0 22px;align-items:center}
.hats-out .sc-ic{background:var(--ink);color:var(--paper)}
.hats-out .sc-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hats-out .sc-ic svg .r{stroke:none;fill:var(--jade)}
.hs-on .hats-out .suck-card{opacity:0;will-change:transform,opacity}
.hs-on .hats-out .sc-ck{transform:scale(0);transition:transform .35s cubic-bezier(.3,1.7,.5,1)}
.hs-on .hats-out .suck-card.done .sc-ck{transform:scale(1)}

.hats-rig{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .5s ease;--nomi-ink:#1b1a17}
.hats-rig.on{opacity:1}
html[data-ink="night"] .hats-rig{--nomi-ink:#f2ece0}
.hats-fly{position:absolute;left:0;top:0;width:52px;height:52px;color:var(--ink)}
.hats-fly svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .55s cubic-bezier(.5,0,.75,0),opacity .55s ease}
.hats-fly svg .r{stroke:none;fill:var(--jade)}
.hats-fly.sink svg{transform:scale(.15);opacity:0}

@media (max-width:1000px){
  .hats-fly{width:40px;height:40px}
}
/* phone: the cards stack one per row inside the jobs' area */
@media (max-width:640px){
  .hats-out{grid-template-columns:minmax(0,1fr);grid-auto-rows:auto;gap:8px;padding:0;align-content:center}
  .hats-out .suck-card{padding:10px 12px}
}