/* ══ Home work-card thumbnails (see thumbs.js) ═════════════════════
   .th is the frame, fixed to the Figma thumbnail ratio 1192:708 so nothing is ever cropped.
   Each layer is .el (placed in %, carries the pointer parallax) > i (the entrance) > img
   (the idle motion once it has landed). Motion lengths are in cqw, i.e. % of card width.  */

.wc-thumb.th{flex:none;position:relative;aspect-ratio:1192/708;overflow:hidden;container-type:size;
  background:var(--thbg);border:2.5px solid var(--ink);isolation:isolate}
.th .el{position:absolute;display:block;z-index:2;
  transform:translate(calc(var(--px,0) * var(--z,0) * -1cqw),calc(var(--py,0) * var(--z,0) * -1cqw));
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.th .el i{display:block}
.th .el img{display:block;width:100%;height:auto;-webkit-user-select:none;user-select:none;pointer-events:none}
.th .logo{z-index:3}

/* ── ULS and Relique: pieces fly out from behind the name to their places ── */
.th .pop i{opacity:0;transform:translate(var(--tx),var(--ty)) rotate(var(--spin)) scale(.18);
  transition:transform .45s cubic-bezier(.55,0,.8,.3),opacity .2s ease .15s}
.th.on .pop i{opacity:1;transform:none;
  transition:transform .9s cubic-bezier(.28,1.4,.42,1) var(--dl),opacity .18s ease var(--dl)}
.th.on .pop img{animation:th-bob calc(3s + var(--z) * 1.1s) ease-in-out calc(var(--dl) + .95s) infinite}
@keyframes th-bob{50%{transform:translateY(-1.1cqw) rotate(1.8deg)}}

.th-uls .logo i,.th-relique .logo i{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.th-uls.on .logo i{transform:scale(.93);transition:transform .7s cubic-bezier(.3,1.6,.5,1)}
.th-relique.on .logo i{transform:scale(.95);transition:transform .9s cubic-bezier(.2,.7,.2,1)}

.th-relique .pop i{filter:blur(5px)}
.th-relique.on .pop i{filter:none;
  transition:transform .95s cubic-bezier(.28,1.3,.42,1) var(--dl),opacity .2s ease var(--dl),filter .6s ease var(--dl)}
.th .glow{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .6s ease;
  background:radial-gradient(46% 42% at 50% 51%,rgba(222,178,112,.26),rgba(222,178,112,0) 72%)}
.th.on .glow{opacity:1;transition:opacity 1.1s ease .1s}

/* ── Canva AI: gradient washes in, orb and sparkles pop, cursor glides in and clicks ── */
.th .wash{left:0;top:0;width:100%;z-index:1}
.th .wash i{opacity:0;transform:scale(1.12);transition:opacity .45s ease,transform .6s ease}
.th.on .wash i{opacity:1;transform:none;transition:opacity .8s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}
.th .orb i{opacity:0;transform:scale(0) rotate(-140deg);transition:transform .35s ease-in,opacity .2s ease .1s}
.th.on .orb i{opacity:1;transform:none;transition:transform 1s cubic-bezier(.3,1.5,.5,1) .12s,opacity .25s ease .12s}
.th.on .orb img{animation:th-float 3.4s ease-in-out 1.2s infinite}
.th .cur{z-index:4}
.th .cur i{opacity:0;transform:translate(15cqw,17cqw) rotate(14deg);transition:transform .35s ease-in,opacity .2s ease}
.th.on .cur i{opacity:1;transform:none;transition:transform .95s cubic-bezier(.2,.85,.25,1) .4s,opacity .3s ease .4s}
.th.on .cur img{animation:th-click .45s ease 1.35s both}
.th .spark i{opacity:0;transform:scale(0) rotate(-70deg);transition:transform .35s ease-in,opacity .2s ease .1s}
.th.on .spark i{opacity:1;transform:none;transition:transform .95s cubic-bezier(.3,1.6,.5,1) .24s,opacity .25s ease .24s}
.th.on .spark img{animation:th-twinkle 2.6s ease-in-out 1.2s infinite}
@keyframes th-float{50%{transform:translateY(-1.4cqw) scale(1.03)}}
@keyframes th-click{45%{transform:scale(.8) translate(-6%,-6%)}100%{transform:none}}
@keyframes th-twinkle{50%{transform:scale(1.09) rotate(9deg)}}

/* ── ICCC: the device field is a canvas behind the title ── */
.th canvas.dots{position:absolute;inset:0;width:100%;height:100%;z-index:1;display:block}

@media (prefers-reduced-motion:reduce){
  .th .el,.th .el i,.th .el img,.th .glow{transition-duration:.001s !important;transition-delay:0s !important;animation:none !important}
}

/* ── Phones: reel cards. Each project card fills most of the screen and snaps to centre as you
   scroll, with the next one peeking below, still inactive; the centred card plays its animation
   (thumbs.js activates the card in the middle band of the viewport on touch screens). The
   thumbnail grows to fill the card; pieces are centre-anchored, so they spread out, not crop. */
@media (max-width:900px){
  .wc-thumb.th{aspect-ratio:auto;flex:1 1 auto;min-height:0}
  .th .wash{height:100%}
  .th .wash i,.th .wash img{height:100%}
  .th .wash img{object-fit:cover}
  /* a phone card is narrow, so pieces sized by width read small in the tall frame: scale them up */
  .th .pop,.th .orb,.th .cur,.th .spark{scale:1.55}
  .th .logo{scale:1.28}
  .th-iccc-surveillance .logo{scale:1.12}
}