/* Home hero stickers, ported from the old site (encore/website: desk.mjs,
   pages.mjs, encore.css "hero stickers (round 10)", encore.js).
   Five die-cut stickers around the title (owner's pick, 5 Nov 2026): iMac G3,
   iMac G4, iMac Aluminium, the classic mouse and the "old iMacs" folder (which
   pops five more iMacs). A white border and a soft shadow follow each object's
   outline. Physical objects: fixed colours.
   .stk positions and tilts, .stk__a slaps on, .stk__f floats, .stk__p peels
   (and carries the drag offset set by js/stickers.js).
   Placement is anchored to the centre of the page (the title is 792 px wide
   from 1053 px up) with a 24 px floor at the edges, so the stickers stay clear
   of the title, the subtitle and the buttons at every width.
   Only .hero__deco, .stk* and .tidy are styled here. */

.hero{position:relative}
.hero__deco{--stk-sh:rgba(0,0,0,.2);position:absolute;left:0;top:0;width:100%;height:100%;z-index:3;pointer-events:none;overflow:hidden}
@supports (overflow:clip){.hero__deco{overflow:visible;overflow-x:clip}}

.stk{position:absolute;pointer-events:auto}
.stk__p>*{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.stk:hover .stk__p>*{transform:translateY(-6px) rotate(-4deg) scale(1.05)}
.stk img{-webkit-user-drag:none;pointer-events:none;max-width:none}
/* with JS: pick up, drag, throw */
.stk-on .stk{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.stk-on .stk.is-drag{cursor:grabbing}
.stk-on .stk.s5{cursor:pointer}
.stk--pop{z-index:3;left:0;top:0}
.stk--pop[hidden]{display:none}
.hero__deco .mouse{display:block;width:66px;height:auto;transition:transform .12s ease}
.is-click .mouse{transform:scale(.95)}
.is-click .mouse__btn{fill-opacity:.1}
.s5 .stk-ic__s{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.s5.is-open .stk-ic__s{transform:scale(1.1) rotate(-5deg)}

/* the die-cut look: white rim drawn by stacked drop-shadows, then the soft shadow */
.hero__deco .cut{display:block;filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(2px 2px 0 #fff) drop-shadow(-2px -2px 0 #fff) drop-shadow(2px -2px 0 #fff) drop-shadow(-2px 2px 0 #fff) drop-shadow(0 5px 7px var(--stk-sh))}
.cut--img img{width:100%;height:auto}

/* the folder, a desktop icon with its label */
.stk-ic{display:inline-block;width:auto;text-align:center;color:#1a1a1a}
.stk-ic__s{display:block;width:64px;height:auto;margin:0 auto}
.stk-ic__l{display:inline-block;margin-top:4px;padding:1px 6px;border-radius:4px;background:#fff;font-size:12px;font-weight:500;line-height:1.35;letter-spacing:0}

/* "Tidy up": appears once a sticker has moved, puts them all back */
.tidy{position:absolute;right:20px;top:104px;z-index:4;height:30px;padding:0 14px;border-radius:999px;background:var(--soft);color:var(--grey);font:500 13px/30px var(--f);cursor:pointer;transition:background .2s,color .2s}
.tidy:hover{background:rgba(64,64,64,.12);color:var(--ink)}
.tidy[hidden]{display:none}

/* ---------- placement (hero coordinates; the nav covers the top 92 px) ----------
   1200 px and up: each sticker sits in the middle of the free band beside the
   title (the title is 792 px wide, so that band's centre is 25% - 198px from the
   edge), nudged a little for a hand-placed feel. Three on the left, two on the
   right, mirrored by weight: the big G3 high on the left answers the big
   Aluminium low on the right. */
.s2{left:calc(25% - 198px - 75px - 8px);top:150px;transform:rotate(-6deg)}
.s6{left:calc(25% - 198px - 33px + 34px);top:362px;transform:rotate(-12deg)}
.s5{left:calc(25% - 198px - 38px - 14px);top:552px;transform:rotate(-4deg)}
.s4{right:calc(25% - 198px - 50px + 14px);top:160px;transform:rotate(6deg)}
.s8{right:calc(25% - 198px - 70px - 6px);top:404px;transform:rotate(5deg)}
/* 1200 to 1399 px: the same five, a size smaller */
@media (max-width:1399px){
  .s2{left:calc(25% - 198px - 64px - 6px)}
  .s2 .cut{width:128px!important}
  .s6{left:calc(25% - 198px - 33px + 26px)}
  .s5{left:calc(25% - 198px - 38px - 8px)}
  .s4{right:calc(25% - 198px - 44px + 10px)}
  .s4 .cut{width:88px!important}
  .s8{right:calc(25% - 198px - 60px - 4px)}
  .s8 .cut{width:120px!important}
}
/* 768 to 1199 px: the band above the title and the sides of the buttons */
@media (max-width:1199px){
  .s6{display:none}
  .s2{left:4%;top:100px}
  .s2 .cut{width:104px!important}
  .s4{right:5%;top:100px}
  .s4 .cut{width:76px!important}
  .s5{left:5%;top:auto;bottom:44px}
  .s8{right:4%;top:auto;bottom:40px}
  .s8 .cut{width:108px!important}
}
/* phones: no room beside or above the title without crowding it, so the
   stickers rest (as the old site did on its smallest screens, fewer to none);
   the dot grid stays */
@media (max-width:767px){
  .hero__deco,.tidy{display:none}
}

/* ---------- the dot grid of the old hero ----------
   Same dots as the old site (1 px, 28 px apart, black at 14%), behind the
   title and the stickers, fading out over the last 180 px of the hero. */
.hero{isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(0,0,0,.14) 1px,transparent 1.4px);background-size:28px 28px;background-position:14px 14px;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 180px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 180px),transparent)}

/* ---------- motion (only when wanted) ---------- */
@keyframes stkSlap{0%{opacity:0;transform:translateY(-14px) scale(1.15) rotate(-8deg)}38%{opacity:1;transform:translateY(1px) scale(.97) rotate(2deg)}62%{transform:translateY(-1px) scale(1.015) rotate(-.8deg)}82%{transform:scale(.997) rotate(.25deg)}100%{opacity:1;transform:none}}
@keyframes stkFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(.6deg)}}
@media (prefers-reduced-motion:no-preference){
  /* they land once the headline has, one after another */
  .stk__a{animation:stkSlap .72s cubic-bezier(.25,.8,.3,1) both}
  .stk__f{animation:stkFloat 7s ease-in-out infinite}
  .s2 .stk__a{animation-delay:1.10s}
  .s4 .stk__a{animation-delay:1.18s}
  .s6 .stk__a{animation-delay:1.26s}
  .s8 .stk__a{animation-delay:1.34s}
  .s5 .stk__a{animation-delay:1.42s}
  .s2 .stk__f{animation-delay:-2.3s}
  .s8 .stk__f{animation-delay:-4.6s}
  .s4 .stk__f{animation-delay:-1.2s}
  .s5 .stk__f{animation-delay:-5.5s}
  .s6 .stk__f{animation-delay:-3.4s}
}
@media (prefers-reduced-motion:reduce){
  .stk__p>*,.hero__deco .mouse,.s5 .stk-ic__s{transition:none}
  .stk:hover .stk__p>*{transform:none}
}

.s9{right:calc(25% - 198px + 98px);top:540px;transform:rotate(-7deg)}
.s9 .stk__a{animation-delay:1.5s}
@media (max-width:1023px){.s9{display:none}}