/* TASMU kiosk prototype v0.3: the film, with the logo, copy and navigation laid over it. Site tokens. */
@font-face {
  font-family: Inter;
  src: url("assets/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --night-0: #05060b;
  --accent: #a69aff;
  --mist: #c8c0ff;
  --lilac-pale: #d6d0ff;
  --ink: #f7f6ff;
  --muted: #c3bfd6;
  --glass-fill: rgba(30, 20, 70, 0.32);
  --glass-edge: rgba(200, 192, 255, 0.34);
  --cta-fill: rgba(166, 154, 255, 0.14);
  --cta-fill-press: rgba(166, 154, 255, 0.26);
  --cta-edge: rgba(214, 208, 255, 0.75);
  --font: Inter, "Helvetica Neue", Arial, sans-serif;
  /* v0.12, the 16:9 frame (user, 05/11/2026: "the margins and fonts seem to be fixed, so the text is sometimes
     overlapping ... the main display will be on a 16:9 view on a 40 inches screen, yet I want that to be modular").
     Every page is laid out on a 1920 x 1080 board. --dpx is one board pixel: exactly 1px on the 1920 x 1080 kiosk,
     smaller on smaller screens, so sizes, margins and fonts all scale together and the layout never changes.
     The board is centred in the window (--fx, --fy); films and backgrounds still fill the whole screen around it.
     frame.js gives the same numbers to the scripts. */
  --dpx: min(calc(100vw / 1920), calc(100vh / 1080));
  --fw: calc(1920 * var(--dpx));
  --fh: calc(1080 * var(--dpx));
  --fx: calc((100vw - var(--fw)) / 2);
  --fy: calc((100vh - var(--fh)) / 2);
  --margin: calc(86.4 * var(--dpx));
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--night-0); color: var(--ink); font-family: var(--font); overflow: hidden; }
#stage { position: fixed; inset: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
#stage :is(img, a, video, svg) { -webkit-user-drag: none; }

video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* every animated layer starts hidden; splash.js animates them with GSAP */
#loop, .hero h1, .hero .sub, .hero .gleam, .hero .rule, .brand, .orb-item { visibility: hidden; opacity: 0; }
#fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* The black tint (v0.4.3: "everything feels too purple ... overlay a gradient black across teh site") is baked into the
   films since v0.11 (tools/bake-tint.mjs), so the browser no longer blends it over playing video every frame. */

/* the logo: positioned every frame by splash.js */
.mark {
  position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0;
  background: #ffffff;   /* the logo's colour, tweened to lilac before it pours into the light */
  -webkit-mask: url("assets/brand/logo-tasmu-white.png") center / contain no-repeat;
  mask: url("assets/brand/logo-tasmu-white.png") center / contain no-repeat;
  will-change: transform, opacity, clip-path;
}
/* the glow sits on a wrapper-free layer: a blurred copy of the same mask behind the logo */
.mark-glow { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; filter: blur(calc(14 * var(--dpx)));
  background: #a69aff;
  -webkit-mask: url("assets/brand/logo-tasmu-white.png") center / contain no-repeat;
  mask: url("assets/brand/logo-tasmu-white.png") center / contain no-repeat; }

/* ---------- the hero copy, under the logo ---------- */
.hero {
  position: absolute; left: 50%; top: 52%; transform: translateX(-50%);
  width: calc(1120 * var(--dpx)); text-align: center; pointer-events: none;
}
/* ---------- the CTA: the "gleam edge" shiny button, ported from the React reference to plain CSS ----------
   A lilac arc sweeps round the border (an animated conic gradient), a speckle and a sheen turn across the face,
   and an inner glow breathes. The reference's hover state is the kiosk's live state (.is-live), since a touch
   screen has no hover: splash.js switches it on once the title has revealed. */
@property --gleam-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --gleam-offset { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --gleam-percent { syntax: "<percentage>"; initial-value: 5%; inherits: false; }
@property --gleam-shine { syntax: "<color>"; initial-value: white; inherits: false; }
.gleam {
  --gleam-base: #0f0e18;       /* fill: near black (was deep indigo #150d33; black leads since v0.4.3) */
  --gleam-inset: #241a4a;
  --gleam-label: #f7f6ff;
  --gleam-accent: #a69aff;     /* TASMU lilac */
  --gleam-accent-soft: #d6d0ff; /* pearl lilac */
  --animation: gleam-angle linear infinite;
  --duration: 3s;
  --shadow-size: 2px;
  --transition: 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  isolation: isolate; position: relative; overflow: hidden; cursor: pointer; outline-offset: calc(4 * var(--dpx));
  margin-top: calc(38.4 * var(--dpx)); padding: calc(20.8 * var(--dpx)) calc(41.6 * var(--dpx)); pointer-events: auto;
  font: 500 calc(20.16 * var(--dpx)) / 1.2 var(--font); letter-spacing: 0.01em;
  border: 1px solid transparent; border-radius: calc(999 * var(--dpx)); color: var(--gleam-label);
  background:
    linear-gradient(var(--gleam-base), var(--gleam-base)) padding-box,
    conic-gradient(from calc(var(--gleam-angle) - var(--gleam-offset)), transparent,
      var(--gleam-accent) var(--gleam-percent), var(--gleam-shine) calc(var(--gleam-percent) * 2),
      var(--gleam-accent) calc(var(--gleam-percent) * 3), transparent calc(var(--gleam-percent) * 4)) border-box;
  box-shadow: inset 0 0 0 1px var(--gleam-inset);
  transition: var(--transition);
  transition-property: --gleam-offset, --gleam-percent, --gleam-shine;
}
.gleam::before, .gleam::after, .gleam span::before {
  content: ""; pointer-events: none; position: absolute; inset-inline-start: 50%; inset-block-start: 50%;
  translate: -50% -50%; z-index: -1;
}
.gleam:active { translate: 0 1px; }
/* the speckle: a fine dot grid, revealed by a turning conic mask */
.gleam::before {
  --size: calc(100% - var(--shadow-size) * 3); --position: 2px; --space: calc(var(--position) * 2);
  width: var(--size); height: var(--size);
  background: radial-gradient(circle at var(--position) var(--position), white calc(var(--position) / 4), transparent 0) padding-box;
  background-size: var(--space) var(--space); background-repeat: space;
  mask-image: conic-gradient(from calc(var(--gleam-angle) + 45deg), black, transparent 10% 90%, black);
  border-radius: inherit; opacity: 0.4; z-index: -1;
}
/* the sheen: a soft lilac band turning across the face */
.gleam::after {
  --animation: gleam-shimmer linear infinite;
  width: 100%; aspect-ratio: 1;
  background: linear-gradient(-50deg, transparent, var(--gleam-accent), transparent);
  mask-image: radial-gradient(circle at bottom, transparent 40%, black); opacity: 0.6;
}
.gleam span { z-index: 1; }
/* the breathing inner glow */
.gleam span::before {
  --size: calc(100% + calc(16 * var(--dpx))); width: var(--size); height: var(--size);
  box-shadow: inset 0 -1ex calc(32 * var(--dpx)) calc(4 * var(--dpx)) var(--gleam-accent); opacity: 0;
  transition: opacity var(--transition);
  animation: calc(var(--duration) * 1.5) gleam-breathe linear infinite;
}
.gleam, .gleam::before, .gleam::after {
  animation: var(--animation) var(--duration), var(--animation) calc(var(--duration) / 0.4) reverse paused;
  animation-composition: add;
}
/* live (kiosk) = the reference's hover/focus state: a wider arc, the soft shine, both sweeps running, the glow on */
.gleam:is(.is-live, :hover, :focus-visible) { --gleam-percent: 20%; --gleam-offset: 95deg; --gleam-shine: var(--gleam-accent-soft); }
.gleam:is(.is-live, :hover, :focus-visible), .gleam:is(.is-live, :hover, :focus-visible)::before, .gleam:is(.is-live, :hover, :focus-visible)::after { animation-play-state: running; }
.gleam:is(.is-live, :hover, :focus-visible) span::before { opacity: 1; }
@keyframes gleam-angle { to { --gleam-angle: 360deg; } }
@keyframes gleam-shimmer { to { rotate: 360deg; } }
@keyframes gleam-breathe { from, to { scale: 1; } 50% { scale: 1.2; } }
@media (prefers-reduced-motion: reduce) {
  .gleam, .gleam::before, .gleam::after, .gleam span::before { animation: none !important; }
  .gleam:is(.is-live, :hover, :focus-visible) span::before { opacity: 0; }
  .gleam { transition: none; }
}
/* each word rises out of its own mask */
h1 .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 0.04em 0.08em; margin-bottom: -0.08em; }
h1 .w > span { display: inline-block; will-change: transform, filter, opacity; }
.hero .rule { width: calc(352 * var(--dpx)); height: 1px; margin: calc(20.8 * var(--dpx)) auto 0; transform-origin: 50% 50%;
  background: linear-gradient(90deg, transparent, rgba(214, 208, 255, 0.9), transparent); }
h1 {
  margin: 0; font-weight: 300; letter-spacing: -0.03em; line-height: 1.05;
  font-size: calc(84.48 * var(--dpx)); text-wrap: balance;
  text-shadow: 0 2px calc(24 * var(--dpx)) rgba(10, 4, 30, 0.6);
}
.sub { margin: calc(16 * var(--dpx)) 0 0; font-size: calc(25.92 * var(--dpx)); line-height: 1.45; color: var(--lilac-pale); letter-spacing: 0.01em; text-shadow: 0 2px calc(18 * var(--dpx)) rgba(10, 4, 30, 0.6); }
.cta { /* v0.11: solid glass, no backdrop blur (performance fix 3) */
  display: inline-flex; align-items: center; gap: 0.6em; min-height: calc(66 * var(--dpx)); padding: 0 calc(35.2 * var(--dpx)); margin-top: calc(35.2 * var(--dpx));
  font: 500 calc(20.16 * var(--dpx)) var(--font); color: var(--ink); text-decoration: none;
  background: var(--cta-fill); border: 1px solid var(--cta-edge); border-radius: calc(999 * var(--dpx)); cursor: pointer;
  transition: background 180ms, transform 180ms var(--ease-out);
}
.cta:hover { background: rgba(166, 154, 255, 0.2); }
.cta:active { transform: scale(0.97); background: var(--cta-fill-press); }
:focus-visible { outline: calc(3 * var(--dpx)) solid var(--mist); outline-offset: calc(4 * var(--dpx)); }

/* ---------- the navigator ---------- */
.brand { position: absolute; left: calc(var(--fx) + var(--margin)); top: calc(var(--fy) + 37.8 * var(--dpx)); }
.brand img { height: calc(91.8 * var(--dpx)); width: auto; display: block; filter: drop-shadow(0 0 calc(12 * var(--dpx)) rgba(166, 154, 255, 0.5)); }

/* review aid (temporary): skip the film to the navigator */
.skip { /* v0.11: solid glass, no backdrop blur (performance fix 3) */
  position: absolute; right: calc(var(--fx) + 92 * var(--dpx)); bottom: calc(var(--fy) + 28 * var(--dpx)); z-index: 5;
  min-height: calc(48 * var(--dpx)); padding: 0 calc(19.2 * var(--dpx)); font: 500 calc(15 * var(--dpx)) var(--font); color: var(--lilac-pale); cursor: pointer;
  background: rgba(14, 8, 40, 0.73); border: 1px solid rgba(214, 208, 255, 0.35); border-radius: calc(999 * var(--dpx));
}
.skip:hover { color: var(--ink); border-color: var(--cta-edge); }
#stage[data-phase="nav"] .skip { display: none; }
/* the restart button (v0.11, user: "add refresh button at the bottom right corner on the splash and navigator ... make it
   subtle"): a small faint ring in the corner, brighter when touched; pages (z-index 4) cover it */
.restart {
  position: absolute; right: calc(var(--fx) + 28 * var(--dpx)); bottom: calc(var(--fy) + 28 * var(--dpx)); z-index: 3;
  width: calc(48 * var(--dpx)); height: calc(48 * var(--dpx)); padding: 0; display: grid; place-items: center; cursor: pointer;
  border-radius: 50%; border: 1px solid rgba(214, 208, 255, 0.22); background: rgba(8, 8, 12, 0.35); color: rgba(214, 208, 255, 0.5);
  opacity: 0.55; transition: opacity 250ms, color 250ms, border-color 250ms;
}
.restart svg { width: calc(20 * var(--dpx)); height: calc(20 * var(--dpx)); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.restart:hover, .restart:active, .restart:focus-visible { opacity: 1; color: #fff; border-color: rgba(214, 208, 255, 0.6); }

/* ---------- the orbs: the original hub's glowing pearls, smaller, all eight on screen at once ----------
   Each is placed by splash.js at its orb centre (GSAP x/y); --d is the orb's diameter, --lw the label width. */
.orbs { position: absolute; inset: 0; pointer-events: none; }
.orb-item {
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  color: var(--ink); text-decoration: none; pointer-events: auto; -webkit-tap-highlight-color: transparent;
}
.orb-item .orb {
  position: absolute; left: calc(var(--d) / -2); top: calc(var(--d) / -2); width: var(--d); height: var(--d);
  border-radius: 50%; overflow: hidden; display: block;
  box-shadow: 0 0 0 1px rgba(214, 208, 255, 0.4), 0 0 calc(var(--d) * 0.28) rgba(166, 154, 255, 0.5),
              inset 0 calc(var(--d) * -0.1) calc(var(--d) * 0.22) rgba(5, 6, 11, 0.5);
  transition: box-shadow 400ms var(--ease-out);
}
.orb-item .orb img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.03); }
/* the original's glass: a soft top-left highlight and the slow sheen crossing each pearl */
.orb-item .glass-hl { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none;
  background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.22), transparent 38%); }
.orb-item .glass-hl::after { content: ""; position: absolute; inset: -30%;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0) 60%);
  animation: orb-sheen 9s ease-in-out infinite; animation-delay: var(--gd, 0s); }
@keyframes orb-sheen { 0%, 55% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
.orb-item:is(:hover, :focus-visible, .is-pressed) .orb {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85), 0 0 calc(var(--d) * 0.5) rgba(186, 170, 255, 0.85),
              inset 0 calc(var(--d) * -0.1) calc(var(--d) * 0.22) rgba(5, 6, 11, 0.4);
}
.orb-item:focus-visible { outline: none; }
/* the label beside each pearl (v0.6, user: "no need for the cards next to each pearl ... now that we have the black
   color to see if we get something more legible with no need for the dark pills"): no pill, only the number on a
   hairline and the title, held off the city by a soft dark shadow behind the text (not a box) */
.orb-item .lb {
  position: absolute; top: 0; translate: 0 -50%; width: max-content; max-width: var(--lw);
  text-align: left; pointer-events: none; isolation: isolate;
}
.orb-item.side-r .lb { left: calc(var(--d) / 2 + calc(20 * var(--dpx))); }
.orb-item.side-l .lb { right: calc(var(--d) / 2 + calc(20 * var(--dpx))); text-align: right; max-width: min(var(--lw), calc(170 * var(--dpx))); }
.orb-item .lb::before {   /* the shadow: a soft, borderless darkening that fades out at its edges */
  content: ""; position: absolute; inset: calc(-22 * var(--dpx)) calc(-30 * var(--dpx)); z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(3, 3, 6, 0.62), rgba(3, 3, 6, 0.3) 60%, rgba(3, 3, 6, 0));
}
.orb-item .lb-no {
  display: inline-flex; align-items: center; gap: calc(10 * var(--dpx)); margin-bottom: calc(6 * var(--dpx));
  font-size: calc(14 * var(--dpx)); font-weight: 600; letter-spacing: 0.22em; color: #d6d0ff;
  text-shadow: 0 0 calc(8 * var(--dpx)) rgba(0, 0, 0, 0.9);
}
.orb-item .lb-no::after { content: ""; width: calc(26 * var(--dpx)); height: 1px; background: rgba(255, 255, 255, 0.65); }
.orb-item.side-l .lb-no { flex-direction: row-reverse; }
.orb-item .lb-title {
  display: block; font-weight: 400; font-size: calc(23.04 * var(--dpx)); line-height: 1.18; letter-spacing: -0.005em; text-wrap: balance;
  color: #ffffff; text-shadow: 0 0 calc(14 * var(--dpx)) rgba(0, 0, 0, 0.85), 0 0 calc(4 * var(--dpx)) rgba(0, 0, 0, 0.9), 0 1px 2px rgba(0, 0, 0, 0.9);
}
.orb-item.is-big .lb-title { font-size: calc(42.24 * var(--dpx)); font-weight: 300; letter-spacing: 0.02em; }
.orb-item.is-big .lb-no { font-size: calc(15 * var(--dpx)); }
.orb-item:is(:hover, :focus-visible, .is-pressed) .lb-title { text-shadow: 0 0 calc(18 * var(--dpx)) rgba(170, 140, 255, 0.8), 0 0 calc(4 * var(--dpx)) rgba(0, 0, 0, 0.9), 0 2px calc(10 * var(--dpx)) rgba(5, 3, 20, 0.85); }
/* a section without content yet says so on tap, in the site's placeholder style */
.orb-item .lb-note {
  position: absolute; left: calc(var(--lw) / -2); width: var(--lw); top: calc(var(--d) / 2 + calc(10 * var(--dpx)));
  font-size: calc(13 * var(--dpx)); line-height: 1.35; text-align: center; color: var(--lilac-pale);
  border: 1px dashed rgba(214, 208, 255, 0.6); border-radius: calc(10 * var(--dpx)); padding: 0.35em 0.6em;
  background: rgba(16, 10, 44, 0.6); opacity: 0; visibility: hidden; pointer-events: none;
}