/* Base styles and effects. Element geometry/typography lives in layout-new.css (generated). */
@font-face { font-family: "Canva Sans"; src: url("../../font/CanvaSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Canva Sans"; src: url("../../font/CanvaSans-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cloud Loop"; src: url("../../font/CloudLoop-Regular/CloudLoop-Regular/CloudLoop-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Pagkaki"; src: url("../../font/pagkaki/PAGKAKI-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap;
  ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; } /* its own metrics are ~2em tall */
@font-face { font-family: "VT323"; src: url("../../font/VT323/VT323-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Metropolis"; src: url("../../font/gotham-similar-fonts/gotham-similar-fonts/metropolis/Metropolis-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Metropolis"; src: url("../../font/gotham-similar-fonts/gotham-similar-fonts/metropolis/Metropolis-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "FC Subject"; src: url("../../font/FC-Subject/FC%20Subject%20%5BNon-commercial%20use%5D%20Regular%20ver%201.00.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "FC Subject"; src: url("../../font/FC-Subject/FC%20Subject%20%5BNon-commercial%20use%5D%20Bold%20ver%201.00.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "SK Concretica"; src: url("../../font/sk-concretica-font/sk-concretica-trial.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Schoolbell"; src: url("../../font/Schoolbell/Schoolbell-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../../font/Inter/Inter-Regular-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Open Sauce"; src: url("../../font/open-sauce/OpenSauceSans-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Prompt"; src: url("../../font/Prompt/Prompt-Regular-thai.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Sigher"; src: url("../../font/SigherRegular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../../font/Montserrat/Montserrat-VariableFont_wght.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }

:root {
  --font-body: "Canva Sans", system-ui, sans-serif;
  --s: 1;
  --stage-w: 1920; /* stage width in page px; layout-new.css sets the narrower mobile stage */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-snap-type: y proximity; background: #000; }
body { overflow-x: clip; }

/* Each Canva page = one section, full width with the page's 16:9 height, so the whole
   1920x1080 stage shows edge to edge with nothing cropped (script.js sets --s). */
.sec {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; background: var(--bg); scroll-snap-align: start;
}
.stage {
  position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px;
  transform: translate(-50%, -50%) scale(var(--s));
  overflow: hidden; background: var(--bg);
}

/* Elements are absolutely locked to their Canva coordinates. */
.el { position: absolute; transform-origin: 50% 50%; }
.el .px, .el .fx, .el .idle { width: 100%; height: 100%; }
.clip { position: absolute; inset: 0; overflow: hidden; }
.clip img { position: absolute; max-width: none; display: block; user-select: none; -webkit-user-drag: none; }
.el svg { position: absolute; inset: 0; display: block; overflow: visible; }
/* --sx narrows letters (set per text to match Canva's width): lay out wider, then squeeze. */
.txt {
  position: absolute; left: 0; top: 0; width: calc(100% / var(--sx, 1)); scale: var(--sx, 1) 1;
  white-space: pre-wrap; overflow-wrap: normal; transform-origin: 0 0;
}
.txt.mid { inset: 0; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.txt span { display: inline; }
.f-body { font-family: var(--font-body); }
/* Faces Canva uses, picked per Canva font id by FONT_BY_REF in tools/generate.js. Cloud Loop ships
   only a Regular file; Canva uses Cloud Loop Bold, so bold runs get the browser's synthesized bold. */
.f-cloud { font-family: "Cloud Loop", var(--font-body); }
.f-pagkaki { font-family: "Pagkaki", var(--font-body); }
.f-montserrat { font-family: "Montserrat", var(--font-body); }
.f-vt323 { font-family: "VT323", monospace; } /* also the stand-in for Cristik */
.f-concretica { font-family: "SK Concretica", var(--font-body); }
.f-schoolbell { font-family: "Schoolbell", "Prompt", var(--font-body); } /* Schoolbell has no Thai: the browser falls back to Prompt for Thai glyphs */
.f-fcsubject { font-family: "FC Subject", var(--font-body); } /* closest Thai sans to Clear Pro available */
.f-inter { font-family: "Inter", var(--font-body); }
.f-opensauce { font-family: "Open Sauce", var(--font-body); }
.f-sigher { font-family: "Sigher", var(--font-body); }
.f-gotham { font-family: "Metropolis", var(--font-body); } /* Gotham stand-in (no Gotham file in font/) */

/* Hover: jelly bounce, repeating while hovered (bounce in tools/generate.js starts it and sets a
   shared transform-origin, so a folder, its number and its label squash as one) */
.bounce .idle { animation: none .8s ease-in-out infinite; }
@keyframes bounce {
  0%, 100% { scale: 1; translate: 0 0; }
  25% { scale: 1.12 .9; translate: 0 0; }
  45% { scale: .94 1.1; translate: 0 -14px; }
  65% { scale: 1.04 .97; translate: 0 0; }
  80% { scale: .98 1.02; }
}

/* beat (tools/generate.js): quick up-and-down bob, like pointing up */
.beat .idle { animation: beat var(--bt, 1.1s) ease-in-out infinite; }
@keyframes beat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -22px; }
}

/* float (tools/generate.js): a slow drift, forever */
.float .idle, .group.float { animation: float var(--fl, 6s) ease-in-out infinite alternate; }
@keyframes float {
  0% { translate: 0 0; rotate: 0deg; }
  50% { translate: 6px -12px; rotate: 1.5deg; }
  100% { translate: -4px 8px; rotate: -1.5deg; }
}

/* Hover: a band of light sweeps across the host (shine in tools/generate.js). Each element inside
   has its own .shine layer, masked to its shape; the band sits in host coordinates via --gx/--gy. */
@property --shine { syntax: "<length>"; inherits: true; initial-value: -9999px; }
.shine-host:hover { animation: shine-sweep .9s ease-in-out; }
@keyframes shine-sweep { from { --shine: calc(-1 * var(--bw)); } to { --shine: var(--sw); } }
/* shine: 'in' = one sweep each time the section scrolls into view (after a pop, if any) */
.js .sec.in .shine-in { animation: shine-sweep 1.1s ease-in-out .7s both; }
.js .sec.in .shine-in:hover { animation: shine-sweep .9s ease-in-out; }
/* standout: lift the element off the page */
.standout { filter: drop-shadow(0 16px 26px rgb(0 0 0 / .35)); }
/* pulse (tools/generate.js): grows and shrinks, forever */
.pulse .idle { animation: pulse var(--pu, 1.2s) ease-in-out infinite; }
@keyframes pulse { 0%, 100% { scale: 1; } 50% { scale: 1.15; } }
/* shine: 'loop' = a glossy sweep on its own every few seconds */
.shine-loop { animation: shine-loop 3.6s ease-in-out 1s infinite; }
@keyframes shine-loop { 0% { --shine: calc(-1 * var(--bw)); } 35%, 100% { --shine: var(--sw); } }
.shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 38%, rgb(255 255 255 / .9) 50%, transparent 62%) no-repeat;
  background-size: var(--bw) var(--gh);
  background-position: calc(var(--shine) - var(--gx, 0px)) calc(-1 * var(--gy, 0px));
}
.caps { text-transform: uppercase; }
.missing, .no-hit { pointer-events: none; } /* empty slot, position kept */

/* pop (tools/generate.js): springs in each time its section scrolls into view. No other
   element has an entrance effect. */
.js .pop { opacity: 0; }
.js .sec.in .pop { animation: pop .8s var(--pd, 0ms) both; }
/* a popping element that also sweeps on entry runs both, the sweep once it has landed */
.js .sec.in .pop.shine-in { animation: pop .8s var(--pd, 0ms) both, shine-sweep 1.1s ease-in-out calc(var(--pd, 0ms) + .8s) both; }
@keyframes pop {
  0% { opacity: 0; scale: .3; animation-timing-function: cubic-bezier(.2, .8, .3, 1); }
  45% { opacity: 1; scale: 1.1; animation-timing-function: ease-in-out; }
  65% { scale: .94; }
  82% { scale: 1.03; }
  100% { opacity: 1; scale: 1; }
}

/* script.js measures with every animation stopped, so pops and drifts do not skew positions */
.measuring .pop, .measuring .idle, .measuring .group.float, .measuring .shine-host { animation: none !important; }

/* Checking against Canva: ?static stops motion, O = 50% overlay, D = difference (black = match) */
.static .idle, .static .shine-loop { animation: none !important; }
.static .pop { opacity: 1 !important; animation: none !important; }
.sec.ref .stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 9999;
  background: var(--ref) center / 100% 100% no-repeat; opacity: .5;
}
.sec.ref.diff .stage::after { opacity: 1; mix-blend-mode: difference; }

@media (prefers-reduced-motion: reduce) {
  .js .pop, .js .sec.in .pop { opacity: 1; animation: none; }
  .shine-loop, .float .idle, .group.float, .beat .idle, .pulse .idle, .js .sec.in .shine-in { animation: none; }
}

/* Real links laid over the Canva buttons ("สมัครเรียนคลิก", call-back banner). */
.el-link { position: absolute; inset: 0; z-index: 2; border-radius: 999px; }
.el-link:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
#p7-LBZJ1KpdqDcwvl34, #p15-LB4fGnkgNQTMc4bg { pointer-events: none; }