/* ===== ตั้งใจทำ design · Interactive layer =====
   Thesis: the page behaves like the design tools we work in.
   Everything here is progressive: without fx.js the page looks exactly as before. */

/* Scroll progress: a ruler line under the header */
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--yellow);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* ---------- Hero canvas ---------- */
.collage.fx{perspective:1400px}
.collage.fx .stage{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.16,1,.3,1)}
.collage.fx .piece,.collage.fx .tag{
  transform:translate3d(calc(var(--dx,0px) + var(--px,0px)),calc(var(--dy,0px) + var(--py,0px)),var(--z,0px)) rotate(var(--r,0deg));
  transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .25s var(--ease);
}
.collage.fx .p-web{--r:-3deg;--z:20px}
.collage.fx .p-poster{--r:5deg;--z:60px}
.collage.fx .p-social{--r:-6deg;--z:90px}
.collage.fx .p-stand{--r:2deg;--z:40px}
.collage.fx .tag{--z:120px}
.collage.fx .piece{cursor:grab;touch-action:pan-y}
.collage.fx .piece:focus-visible{outline:none}
.collage.fx .piece.dragging{cursor:grabbing;transition:box-shadow .25s var(--ease);box-shadow:0 40px 80px -24px rgba(23,47,114,.35),0 12px 30px -12px rgba(15,21,38,.2)}
.collage.fx .tag.dragging{transition:none}

/* Figma-style selection frame */
.sel{position:absolute;pointer-events:none;border:2px solid var(--yellow);border-radius:4px;opacity:0;transition:opacity .15s var(--ease);z-index:20}
.sel.on{opacity:1}
.sel i{position:absolute;width:9px;height:9px;background:var(--yellow)}
.sel i:nth-child(1){left:-5px;top:-5px}.sel i:nth-child(2){right:-5px;top:-5px}
.sel i:nth-child(3){left:-5px;bottom:-5px}.sel i:nth-child(4){right:-5px;bottom:-5px}
.sel b{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);background:var(--yellow);color:var(--ink);font:700 11.5px/1 var(--font-body);padding:5px 8px;border-radius:4px;white-space:nowrap;letter-spacing:.01em}

.canvas-hint{position:absolute;left:0;right:0;bottom:-44px;justify-content:center;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);white-space:nowrap;transition:opacity .4s var(--ease)}
.canvas-hint svg{width:16px;height:16px;color:var(--brand-700)}
.canvas-hint.gone{opacity:0}

/* ---------- Brand switcher (consistency section) ---------- */
.swatches{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 18px;color:var(--on-dark-2);font-size:14.5px}
.swatches .sw-row{display:flex;gap:10px}
.swatches button{width:34px;height:34px;border-radius:50%;border:2px solid transparent;background:var(--c);cursor:pointer;position:relative;transition:transform .15s var(--ease),border-color .15s}
.swatches button:hover{transform:scale(1.08)}
.swatches button[aria-checked="true"]{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.swatches button:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
.swatches .sw-note{flex-basis:100%;font-size:13.5px;color:var(--on-dark-3)}
.sizes.fx .sz::before{background:var(--accent,var(--brand-bright));transition:background .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1)}
.sizes.fx.flip .sz::before{transform:scale(.6)}
.sizes.fx .sz:nth-child(2)::before{transition-delay:.04s}
.sizes.fx .sz:nth-child(3)::before{transition-delay:.08s}
.sizes.fx .sz:nth-child(4)::before{transition-delay:.12s}
.sizes.fx .sz:nth-child(5)::before{transition-delay:.16s}

/* ---------- Service cards: light follows the pointer ---------- */
.fx-hover .svc:hover{background:radial-gradient(260px circle at var(--mx,50%) var(--my,-40%),var(--brand-50),transparent 70%),var(--surface)}
.fx-hover .svc .svc-ico{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.fx-hover .svc:hover .svc-ico{transform:translateY(-3px) rotate(-4deg)}

/* ---------- Work gallery: mockups tilt in 3D ---------- */
.fx-hover .wk .art{perspective:900px}
.fx-hover .wk .art > *{transform:rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateZ(0);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.fx-hover .wk:hover .art > *{transition-duration:.12s}
.fx-hover .wk{transition:box-shadow .3s var(--ease),transform .3s var(--ease)}
.fx-hover .wk:hover{box-shadow:var(--shadow);transform:translateY(-3px)}

/* ---------- Magnetic primary buttons ---------- */
.fx-hover .btn-primary,.fx-hover .btn-dark{transform:translate(var(--bx,0),var(--by,0))}
.fx-hover .btn-primary:hover,.fx-hover .btn-dark:hover{transform:translate(var(--bx,0),calc(var(--by,0px) - 2px))}

/* ---------- Strip pauses on hover ---------- */
.strip:hover .strip-track{animation-play-state:paused}

/* ---------- Form success: check draws itself ---------- */
.form.sent .done .ok{animation:pop .5s cubic-bezier(.16,1,.3,1) both}
.form.sent .done .ok svg{stroke-dasharray:30;stroke-dashoffset:30;animation:draw .5s .2s cubic-bezier(.16,1,.3,1) forwards}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}

/* Themed browser surfaces */
::selection{background:var(--yellow-200);color:var(--ink)}
html{scrollbar-color:var(--brand-600) var(--surface-2)}

@media (prefers-reduced-motion:reduce){
  .collage.fx .stage,.collage.fx .piece,.collage.fx .tag{transition:none!important}
  .form.sent .done .ok svg{stroke-dashoffset:0}
}