/* gsap-stage.css — styles for the maximum-GSAP motion layer (William 2026-10-02).
 * Cinematic ALWAYS, for every visitor, on every device. No reduced-motion
 * paths anywhere. Requires JavaScript (see the <noscript> notice).
 * Photographic backdrops only; no decorative gradients as backdrops here —
 * scrims over photos only. */

/* ---------- cinematic preloader ---------- */
#gsap-preloader {
  position: fixed; inset: 0; z-index: 5000;
  display: flex; align-items: center; justify-content: center;
  background: #000000;
  transition: none;
}
#gsap-preloader .pre-inner { text-align: center; color: #fff; }
#gsap-preloader .pre-logo {
  font-family: "Chillax", "Nunito", system-ui, sans-serif;
  font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.6rem); letter-spacing: -.02em;
}
#gsap-preloader .pre-logo .dot { color: #ffffff; }
#gsap-preloader .pre-bar { width: min(320px, 60vw); height: 3px; margin: 1.1rem auto 0;
  background: rgba(255,255,255,.14); border-radius: 99px; overflow: hidden; }
#gsap-preloader .pre-bar i { display: block; height: 100%; width: 0%;
  background: #ffffff; border-radius: 99px; }
#gsap-preloader .pre-tag { margin-top: .8rem; font-size: .82rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.55); }
#gsap-preloader.done { pointer-events: none; }

/* ---------- custom cursor ---------- */
#gsap-cursor {
  position: fixed; left: 0; top: 0; z-index: 4999; pointer-events: none;
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 1.5px solid rgba(125,42,232,.85);
  background: rgba(125,42,232,.08);
  mix-blend-mode: normal;
  transition: width .25s, height .25s, margin .25s, background-color .25s, border-color .25s;
  display: none;
}
#gsap-cursor.on { display: block; }
#gsap-cursor.grow { width: 64px; height: 64px; margin: -32px 0 0 -32px;
  background: rgba(125,42,232,.16); border-color: rgba(125,42,232,.5); }
#gsap-cursor .cur-label {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: .6rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: #ffffff; opacity: 0; transition: opacity .2s;
}
#gsap-cursor.grow .cur-label { opacity: 1; }
@media (hover: none), (pointer: coarse) { #gsap-cursor.on { display: none; } }

/* ---------- ScrollSmoother scaffolding ---------- */
#smooth-wrapper { overflow: hidden; }
#smooth-content { will-change: transform; }

/* ---------- signature stage (per page family) ---------- */
.gsap-stage { margin: 3.5rem 0 0; }
.stage-frame {
  position: relative; border: 1px solid var(--line, #262626); border-radius: 22px;
  background: #0a0a0a; overflow: hidden;
  box-shadow: 0 24px 70px rgba(23,10,54,.28);
}
.stage-head { position: relative; z-index: 3; padding: 1.6rem 1.6rem 0; }
.stage-kicker { font-size: .78rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: #ffffff; }
.stage-title { color: #fff; font-size: clamp(1.4rem, 3vw, 2.1rem);
  margin: .35rem 0 .2rem; letter-spacing: -.02em; min-height: 1.2em; }
.stage-sub { color: rgba(255,255,255,.72); max-width: 620px; margin: 0; }
.stage-svg { display: block; width: 100%; height: auto; position: relative; z-index: 2; }
.stage-nodes { position: relative; z-index: 3; display: flex; gap: .6rem; flex-wrap: wrap;
  padding: 0 1.6rem 1.2rem; }
.stage-node {
  font-size: .82rem; font-weight: 700; color: #ffffff;
  border: 1px solid rgba(196,181,253,.4); border-radius: 99px; padding: .42rem .9rem;
  background: rgba(124,58,237,.16);
}
.stage-rail { position: relative; z-index: 3; padding: 0 1.6rem 1.6rem; overflow: clip; }
.stage-rail-track { display: flex; gap: .9rem; cursor: grab; will-change: transform; }
.stage-rail-track:active { cursor: grabbing; }
.stage-card {
  flex: 0 0 230px; border-radius: 16px; overflow: hidden; user-select: none;
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06);
}
.stage-card img { display: block; width: 100%; height: 130px; object-fit: cover;
  pointer-events: none; }
.stage-card p { margin: 0; padding: .7rem .9rem; font-size: .82rem; color: #ffffff; }
.stage-card p strong { display: block; color: #fff; font-size: .88rem; margin-bottom: .15rem; }
.stage-hint { position: relative; z-index: 3; padding: 0 1.6rem 1.4rem;
  font-size: .78rem; color: rgba(255,255,255,.5); }

/* ---------- before / after (tool pages, Draggable + Inertia) ---------- */
.ba-compare { margin: 3rem 0 0; }
.ba-frame { position: relative; border-radius: 20px; overflow: hidden;
  border: 1px solid var(--line, #262626); box-shadow: 0 18px 50px rgba(0,0,0,.5);
  touch-action: none; user-select: none; }
.ba-frame img { display: block; width: 100%; height: clamp(280px, 46vw, 480px);
  object-fit: cover; pointer-events: none; }
.ba-after { position: absolute; inset: 0; overflow: hidden; }
.ba-after img { width: 100%; height: 100%; }
.ba-handle { position: absolute; top: 0; bottom: 0; width: 3px; background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 0 18px rgba(0,0,0,.35); cursor: ew-resize; z-index: 2; }
.ba-knob { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 52px; height: 52px; border-radius: 50%; background: #fff; color: #3b1470;
  display: flex; align-items: center; justify-content: center; font-weight: 900;
  box-shadow: 0 8px 24px rgba(0,0,0,.3); font-size: 1.1rem; }
.ba-tag { position: absolute; top: .9rem; z-index: 2; font-size: .75rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: #fff;
  background: rgba(20,12,45,.62); padding: .35rem .7rem; border-radius: 99px;
  backdrop-filter: blur(6px); }
.ba-tag.before { left: .9rem; } .ba-tag.after { right: .9rem; }
.ba-cap { margin-top: .8rem; color: var(--muted, #5b5b6e); font-size: .95rem; }

/* ---------- Flip view toggle (template pages) ---------- */
.view-toggle { display: inline-flex; gap: .35rem; align-items: center;
  border: 1px solid var(--line, #262626); border-radius: 99px; padding: .3rem;
  background: #fff; margin: .4rem 0 1.2rem; }
.view-toggle button { border: 0; background: transparent; border-radius: 99px;
  padding: .5rem 1.1rem; font-weight: 700; font-size: .88rem; color: var(--muted, #5b5b6e);
  cursor: pointer; }
.view-toggle button.on { background: #2a1650; color: #fff; }
.tpl-listview .tile, .tpl-listview .pg-card { display: flex; }
.tpl-listview .tile img, .tpl-listview .pg-card img { width: 220px; }

/* ---------- ScrollTo TOC (blog / legal / docs) ---------- */
.gs-toc { border: 1px solid var(--line, #262626); border-radius: 16px; padding: 1.1rem 1.3rem;
  background: #0d0d0d; margin: 2.5rem 0 0; }
.gs-toc h2 { font-size: 1rem; margin: 0 0 .6rem; }
.gs-toc ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.gs-toc a { color: #ffffff; font-weight: 600; font-size: .92rem; text-decoration: none; }
.gs-toc a:hover { text-decoration: underline; }

/* ---------- scramble / typewriter hooks ---------- */
[data-scramble] { min-height: 1em; }
.type-caret::after { content: "▍"; color: #ffffff; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- magnetic buttons ---------- */
[data-magnetic] { will-change: transform; display: inline-block; }

/* ---------- hero cinematic scene ---------- */
.hero-scrub-scene { position: relative; }
.hero[data-cine="1"] .mockup { will-change: transform; }

/* ---------- motion-path demo dots ---------- */
.mp-dot { filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)); }

/* ---------- small screens ---------- */
@media (max-width: 640px) {
  .stage-card { flex-basis: 190px; }
  .stage-head { padding: 1.2rem 1.1rem 0; }
  .stage-nodes, .stage-rail { padding-left: 1.1rem; padding-right: 1.1rem; }
  .ba-frame img { height: 300px; }
}