/* Motion-film engine: the frame, captions, devices and player every portfolio film shares (D31).
   Self-contained on purpose: a film page loads only this file and its own app CSS, so nothing from
   the site or the prototypes can collide with the class names an app mock needs.
   Canvas   1280x720 landscape, or 720x1280 portrait when the frame is under 560px wide.
   Devices  .dev-phone (a 430x932 app in a 300px phone) and .dev-window (a desktop app in a window,
            with or without a browser bar). Sizes are set by film.js as CSS variables.
   Thai     never letter-spaced and never set in the mono face. */

:root {
  --bg: #0A0B0C; --film: #0d0f11;
  --line: rgba(237, 237, 230, 0.10); --line-2: rgba(237, 237, 230, 0.20);
  --text: #EDEDE6; --text-2: #A3A39B; --text-3: #6F6F69;
  --accent: #C8F135; --accent-ink: #0A0B0C;
  --f-display: "Anuphan", "Noto Sans Thai", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}
* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--f-display); -webkit-font-smoothing: antialiased; }
body.embed, html:has(body.embed) { background: transparent; }
h1, h2, h3, p { margin: 0; }

/* standalone page (not embedded) */
.film-page { max-width: 1280px; margin: 0 auto; padding: 40px clamp(16px, 4vw, 56px) 64px; }
.film-page__head { margin-bottom: 24px; }
.film-page__head .k { font: 500 12px/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.film-page__head h1 { margin-top: 12px; font-size: clamp(28px, 3.6vw, 48px); font-weight: 600; line-height: 1.2; }
.film-page__head a { color: var(--text-2); font-size: 14px; }
body.embed .film-page { padding: 0; max-width: none; }
body.embed .film-page__head { display: none; }

/* ---- the frame ---- */
.film { position: relative; aspect-ratio: 16 / 9; border-radius: 22px; overflow: hidden; background: var(--film); border: 1px solid var(--line); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.film.port { aspect-ratio: 9 / 16; border-radius: 18px; width: min(100%, calc(88svh * 9 / 16)); margin: 0 auto; }
body.embed .film.port { width: 100%; }
.cv { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0; overflow: hidden; visibility: hidden; }
.port .cv { width: 720px; height: 1280px; }
.cv.ready { visibility: visible; }
.cv-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 50% 70% at 70% 50%, #000 15%, transparent 75%); opacity: .5; }
.port .cv-grid { mask-image: radial-gradient(ellipse 80% 45% at 50% 65%, #000 15%, transparent 75%); }
.scene { position: absolute; inset: 0; }

.bignum { position: absolute; left: 600px; right: 0; top: 50%; height: 500px; margin-top: -250px; overflow: hidden; pointer-events: none; }
.dev-window .bignum { left: 440px; }
.port .bignum { left: 0; top: 836px; }
.bn { position: absolute; inset: 0; text-align: center; font: 600 480px/500px var(--f-display); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px rgba(237,237,230,.09); }

/* the rig is the device's resting place; .cam inside it is the camera */
.rig { position: absolute; left: var(--rx); top: var(--ry); width: var(--fw); height: var(--fh); margin: calc(var(--fh) / -2) 0 0 calc(var(--fw) / -2); transform: scale(var(--rs, 1)); }
.cam { position: absolute; inset: 0; will-change: transform; }
.screen-clip { position: absolute; overflow: hidden; }
.scaler { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.app { position: absolute; inset: 0; overflow: hidden; }

/* phone */
.phone { position: absolute; inset: 0; border-radius: 44px; background: #1b1d20; box-shadow: 0 0 0 1px rgba(237,237,230,.14), 0 50px 90px -30px rgba(0,0,0,.85); }
.dev-phone .screen-clip { left: 9px; top: 9px; right: 9px; bottom: 9px; border-radius: 36px; background: #fff; }

/* window (desktop app), optionally with a browser bar */
.win { position: absolute; inset: 0; border-radius: 14px; background: #1b1d20; box-shadow: 0 0 0 1px rgba(237,237,230,.16), 0 50px 90px -30px rgba(0,0,0,.85); }
.win-bar { position: absolute; left: 0; right: 0; top: 0; height: var(--bar); display: flex; align-items: center; gap: 8px; padding: 0 14px; }
.win-bar i { width: 11px; height: 11px; border-radius: 50%; background: #3a3d42; }
.win-bar i:nth-child(1) { background: #e0625a; } .win-bar i:nth-child(2) { background: #e1b23c; } .win-bar i:nth-child(3) { background: #5bb560; }
.win-url { margin-left: 12px; flex: 1; max-width: 62%; height: 22px; border-radius: 6px; background: #2a2d31; color: #a3a39b; font: 500 11px/22px var(--f-mono); padding: 0 10px; white-space: nowrap; overflow: hidden; }
.dev-window .screen-clip { left: var(--bz); right: var(--bz); top: calc(var(--bar) + var(--bz)); bottom: var(--bz); border-radius: 0 0 10px 10px; background: #fff; }
.dev-window.no-bar .screen-clip { border-radius: 10px; }

/* the "hand": a touch dot (phone) or a pointer (window), a ripple and a highlight ring, in app units */
.f-finger, .f-ripple { position: absolute; left: 0; top: 0; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; z-index: 41; pointer-events: none; }
.f-finger { background: rgba(29,39,49,.26); border: 2px solid rgba(255,255,255,.95); box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.f-ripple { border: 3px solid #c8f135; z-index: 40; }
.f-cursor { position: absolute; left: 0; top: 0; width: 26px; height: 26px; z-index: 42; pointer-events: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); }
.f-ring { position: absolute; left: 0; top: 0; border: 3px solid #c8f135; border-radius: 14px; box-shadow: 0 0 0 6px rgba(200,241,53,.28); z-index: 39; pointer-events: none; }

/* captions */
.cap-band { display: none; }
.film-over { position: absolute; inset: 0; z-index: 2; pointer-events: none; }   /* film.js: canvas-level layer, under the caption band */
/* tall enough that a three-line caption keeps a solid ground even when the device is zoomed up under it */
.port .cap-band { display: block; position: absolute; left: 0; right: 0; top: 0; height: 560px; background: var(--film); mask-image: linear-gradient(#000 84%, transparent); z-index: 3; }
/* a window zoomed in is wider than the canvas: the captions keep a solid ground of their own */
.dev-window:not(.port) .cap-band { display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 470px; background: var(--film); mask-image: linear-gradient(90deg, #000 88%, transparent); z-index: 3; }
.caps { position: absolute; left: 96px; top: 0; bottom: 0; width: 500px; z-index: 4; pointer-events: none; }
.dev-window .caps { left: 64px; width: 370px; }
.port .caps, .port.dev-window .caps { left: 48px; right: 48px; width: auto; bottom: auto; height: 460px; }
.cap-s, .end { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); }
.port .cap-s, .port .end { top: 64px; transform: none; }
.c-label { font: 500 17px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.c-label b { color: var(--accent); font-weight: 500; }
.c-head { margin-top: 22px; font: 600 64px/1.2 var(--f-display); color: var(--text); text-wrap: balance; }
.c-head em { font-style: normal; color: var(--accent); }
.c-sub { margin-top: 20px; font-size: 24px; line-height: 1.55; color: var(--text-2); }
.dev-window .c-head { font-size: 46px; }
.dev-window .c-sub { font-size: 21px; }
.port .c-label { font-size: 22px; }
.port .c-head { font-size: 66px; margin-top: 24px; }
.port .c-sub { font-size: 30px; margin-top: 22px; }
.end-lab { font: 500 22px/1 var(--f-display); color: var(--text-3); }
.end-n { margin-top: 18px; font: 600 190px/.9 var(--f-display); color: var(--accent); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.end-t { margin-top: 18px; font: 600 40px/1.3 var(--f-display); }
.end-s { margin-top: 14px; font-size: 22px; color: var(--text-2); }
.end .btn { display: inline-flex; align-items: center; margin-top: 30px; min-height: 58px; padding: 0 28px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 500 21px/1 var(--f-display); text-decoration: none; pointer-events: auto; }
.dev-window .end-n { font-size: 112px; }
.dev-window .end-t { font-size: 34px; }
.port .end-lab { font-size: 26px; }
.port .end-n { font-size: 170px; margin-top: 10px; }
.port .end-t { font-size: 46px; }
.port .end-s { font-size: 28px; }
.port .end .btn { display: none; }
/* generous masks: these words carry Thai marks above and below the line */
.wm { display: inline-block; overflow: hidden; vertical-align: top; padding: .3em 0 .32em; margin: -.3em 0 -.32em; }
.wi { display: inline-block; will-change: transform; }
.demo-chip { position: absolute; top: 26px; right: 26px; z-index: 6; font: 500 15px/1 var(--f-display); color: var(--text-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 14px; background: rgba(13,15,17,.72); }
.port .demo-chip { font-size: 20px; top: 22px; right: 22px; }

.bigplay { position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .35s var(--ease); }
.film.paused .bigplay { opacity: 1; }
.bigplay span { width: 84px; height: 84px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; box-shadow: 0 12px 40px rgba(0,0,0,.55); }
.bigplay svg { width: 30px; height: 30px; fill: var(--accent-ink); margin-left: 4px; }

/* player controls */
.ctrl { margin-top: 14px; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; }
.port ~ .ctrl { max-width: calc(88svh * 9 / 16); margin-left: auto; margin-right: auto; }
body.embed .port ~ .ctrl { max-width: none; }
.pp { all: unset; cursor: pointer; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--text); }
.pp svg { width: 15px; height: 15px; fill: currentColor; }
.pp:focus-visible, .chap:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.chaps { display: flex; gap: 6px; min-width: 0; }
.chap { all: unset; cursor: pointer; flex: 1 1 0; min-width: 0; display: grid; gap: 8px; padding: 8px 0; border-radius: 4px; }
.chap i { display: block; height: 3px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.chap i b { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
.chap span { font: 500 11px/1.2 var(--f-mono); letter-spacing: .04em; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chap.on span { color: var(--text); }
.time { font: 500 12px/1 var(--f-mono); color: var(--text-2); font-variant-numeric: tabular-nums; }
@media (max-width: 639px) { .time { display: none; } .chap span { font-size: 9.5px; letter-spacing: 0; } .ctrl { gap: 10px; } .chaps { gap: 4px; } }