/* Tentacle Visual Studio — HYBRID palette (decided 2026-11-14): the moodboard's
   petrol ground, cream text and aged-copper gold, with the bioluminescent
   turquoise kept at its v0.3.0 luminance because a dark UI needs the glow to
   survive (the board's own teal is only 4.18:1). Derivation and measurements:
   qa/2026-11-14-moodboard/. Earlier looks stay reachable: ?theme=mood is the
   pure board, ?theme=v030 the original black/neon.
   Display face = Poppins: the geometric sans measured off the logo art
   (single-storey 'a', right-tailed 't', ascender/x-height 1.362). Body copy =
   Montserrat. Original code.
   All motion respects prefers-reduced-motion. */
:root {
  --ink: #0b0f13;                   /* board: darkest petrol, no true black */
  --panel-tint: #0d1c25;            /* board: deep petrol, mixed over ink below */
  --ink-veil: rgba(11, 15, 19, 0.72);
  --panel: color-mix(in srgb, var(--panel-tint) 60%, transparent);
  --line: color-mix(in srgb, var(--teal) 16%, transparent);
  --line-gold: color-mix(in srgb, var(--gold) 22%, transparent);
  --text: #f4efe0;                  /* board cream · 16.73 on petrol */
  --dim: #8fa9ae;                   /* board teal-grey #5b7c82, lifted · 7.74 */
  --teal: #2ee6d6;                  /* tirkizna — v0.3.0 luminance kept · 12.28 */
  --teal-hi: #8df5ec;
  --teal-lo: #0d8b81;
  --gold: #d3a878;                  /* board copper #ae784d, lifted · 8.83 */
  --gold-hi: #f4efe0;               /* board cream */
  --gold-lo: #5f3521;               /* board cocoa bronze */
  --on-teal: #04201e;               /* text on a filled teal button */
  --on-gold: #241a08;               /* text on a filled gold button */
  /* --font-display is the logo's own face (see assets/README.md); set
     --font-body: var(--font-display) to go single-family. */
  --font-display: "Poppins", "Montserrat", system-ui, sans-serif;
  --font-body: "Montserrat", system-ui, sans-serif;
  --radius: 12px;
  --max: 1120px;
  --ease: cubic-bezier(0.22, 0.9, 0.28, 1);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  font: 400 15px/1.75 var(--font-body);
  background:
    radial-gradient(1240px 820px at 78% -14%, color-mix(in srgb, var(--teal) 13%, transparent), transparent 64%),
    radial-gradient(920px 700px at 6% 114%, color-mix(in srgb, var(--gold) 11%, transparent), transparent 62%),
    linear-gradient(180deg, var(--ink), var(--panel-tint) 130%);
  background-attachment: fixed;
}
a { color: var(--teal); text-decoration: none; }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

h1, h2, h3, .logo > span { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.011em; }

#tentacles { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

/* pointer spotlight: one cheap fixed layer, transform-only movement */
.spotlight {
  position: fixed; z-index: 0; top: 0; left: 0; width: 520px; height: 520px;
  margin: -260px 0 0 -260px; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, color-mix(in srgb, var(--teal) 10%, transparent), color-mix(in srgb, var(--teal) 3%, transparent) 45%, transparent 70%);
  transition: opacity 0.6s ease;
}
body.pointer-fine .spotlight { opacity: 1; }

/* scroll progress: one 2px line, transform-only */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 40; transform-origin: 0 50%;
  transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--teal), var(--gold));
}

.grain {
  position: fixed; inset: -60%; z-index: 60; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 0.5s steps(3) infinite;
}
@keyframes grain-shift {
  0% { transform: translate(0, 0); } 33% { transform: translate(-2%, 1.5%); }
  66% { transform: translate(1.5%, -1%); } 100% { transform: translate(0, 0); }
}

.site-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: var(--max); margin: 0 auto; padding: 16px 24px;
  background: var(--ink-veil); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.logo { display: flex; align-items: center; gap: 12px; color: var(--text); }
/* The mark is a masked layer, so one file tints from `color` anywhere on site. */
.logo-mark {
  width: 24px; flex: none; aspect-ratio: 115 / 174; background: currentColor;
  -webkit-mask: url("assets/logo-mark.svg") center / contain no-repeat;
  mask: url("assets/logo-mark.svg") center / contain no-repeat;
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), color 0.4s ease;
}
/* hidden start only when JS runs, so a no-JS visitor still sees the logo */
html.js .logo-mark { opacity: 0; transform: scale(0.86) rotate(-6deg); }
html.js .logo-mark.in { opacity: 1; transform: none; }
.logo > span:not(.logo-mark) { font-size: 24px; letter-spacing: 0.01em; line-height: 1;
  font-weight: 500; text-transform: lowercase; }
.logo em {
  display: block; font-style: normal; font-family: var(--font-display);
  font-weight: 500; font-size: 9px; color: var(--gold);
  letter-spacing: 0.42em; text-transform: uppercase; margin-top: 5px;
}
.logo:hover .logo-mark { color: var(--gold); }
.site-header nav { display: flex; gap: 26px; align-items: center; }
.site-header nav a { color: #cfe4e2; font-family: var(--font-display); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase; }
.site-header nav a:hover { color: var(--gold); }

main { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
section { padding: 110px 0; }

#hero { min-height: 82vh; display: flex; flex-direction: column; justify-content: center; position: relative; }
/* ghost mark: breathes behind the headline, transform+opacity only */
.hero-mark {
  position: absolute; right: -4%; top: 50%; width: min(46vw, 460px); aspect-ratio: 115 / 174;
  transform: translateY(-50%); pointer-events: none; color: var(--teal); opacity: 0.08;
  -webkit-mask: url("assets/logo-mark.svg") center / contain no-repeat;
  mask: url("assets/logo-mark.svg") center / contain no-repeat; background: currentColor;
  animation: breathe 11s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { transform: translateY(-50%) scale(1) rotate(-1.5deg); opacity: 0.055; }
  50%      { transform: translateY(-52%) scale(1.045) rotate(1.5deg); opacity: 0.1; }
}
.eyebrow { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.4em;
  text-transform: uppercase; color: var(--gold); }
h1 { font-size: clamp(2.4rem, 6.4vw, 4.6rem); line-height: 1.12; margin: 14px 0 20px; font-weight: 600; }
.glow {
  background: linear-gradient(100deg, var(--teal) 0%, var(--teal-hi) 30%, var(--gold) 62%, var(--teal) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: shimmer 9s linear infinite;
}
@keyframes shimmer { to { background-position: -260% 0; } }
.lede { max-width: 60ch; color: var(--dim); font-size: 1.05rem; }
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }

/* ticker — pure transform loop, pauses on hover */
.ticker {
  overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 12px 0; margin: 44px 0 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker-track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track span {
  font-family: var(--font-display);
  font-size: 11px; letter-spacing: 0.36em; text-transform: uppercase; color: var(--dim);
  padding: 0 26px; white-space: nowrap;
}
.ticker-track span b { color: var(--teal); font-weight: 500; }
.ticker-track span i { color: var(--gold); font-style: normal; padding-right: 26px; }
@keyframes marquee { to { transform: translateX(-50%); } }

.btn {
  position: relative; overflow: hidden;
  display: inline-block; padding: 12px 26px; border-radius: 999px;
  border: 1px solid var(--teal-lo);
  background: linear-gradient(120deg, color-mix(in srgb, var(--teal) 16%, transparent), color-mix(in srgb, var(--teal) 4%, transparent));
  color: var(--teal-hi); font: 600 12px/1.2 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase;
  transition: transform 0.25s var(--ease), border-color 0.25s ease, color 0.25s ease, box-shadow 0.35s ease;
}
.btn::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  transform: skewX(-18deg); transition: left 0.6s var(--ease);
}
.btn:hover { color: var(--on-teal); border-color: var(--teal); box-shadow: 0 8px 30px color-mix(in srgb, var(--teal) 25%, transparent); transform: translateY(-2px); }
.btn:hover { background: linear-gradient(120deg, var(--teal-hi), var(--teal) 55%, var(--teal-lo)); }
.btn:hover::after { left: 130%; }
.btn-ghost { border-color: var(--line-gold); color: var(--gold-hi); background: transparent; }
.btn-ghost:hover { color: var(--on-gold); border-color: var(--gold); box-shadow: 0 8px 30px color-mix(in srgb, var(--gold) 22%, transparent); background: linear-gradient(120deg, var(--gold-hi), var(--gold) 60%, var(--gold-lo)); }
.btn-sm { padding: 8px 16px; }

h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin: 0 0 34px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.card {
  position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px;
  transition: transform 0.35s var(--ease), border-color 0.35s ease, box-shadow 0.45s ease;
}
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(320px 180px at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--teal) 12%, transparent), transparent 70%);
  opacity: 0; transition: opacity 0.4s ease;
}
.card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--gold) 45%, transparent); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55); }
.card:hover::before { opacity: 1; }
.card h3 { margin: 0 0 12px; font-size: 1.5rem; color: var(--teal-hi); }
.card p { margin: 0; color: var(--dim); }
.flow { margin-top: 30px; color: var(--dim); font-size: 13px; letter-spacing: 1px; }
.flow::before { content: "◆ "; color: var(--gold); }

.work-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.work-card {
  position: relative; border-radius: var(--radius); border: 1px solid var(--line);
  overflow: hidden; display: grid; place-items: center; background: var(--panel);
  transition: transform 0.35s var(--ease), border-color 0.35s ease, box-shadow 0.45s ease;
}
.work-card:hover {
  transform: translateY(-4px) scale(1.012); border-color: color-mix(in srgb, var(--teal) 60%, transparent);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px color-mix(in srgb, var(--teal) 22%, transparent);
}
.work-card[data-ratio="9/16"] { aspect-ratio: 9 / 16; }
.work-card[data-ratio="4/5"]  { aspect-ratio: 4 / 5; }
.work-card[data-ratio="1/1"]  { aspect-ratio: 1 / 1; }
.work-card[data-ratio="16/9"] { aspect-ratio: 16 / 9; }
.work-card::after {
  content: attr(data-label);
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 26px 12px 10px; font-family: var(--font-display); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--text); background: linear-gradient(transparent, rgba(0, 0, 0, 0.88));
}
.work-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.note { color: var(--dim); margin-top: 26px; font-size: 13px; }

#about p { max-width: 66ch; font-size: 1.05rem; }
#contact p { color: var(--dim); }

footer {
  max-width: var(--max); margin: 0 auto; padding: 30px 24px 46px;
  color: var(--dim); font-size: 12px; letter-spacing: 1px; border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
footer .logo-mark { width: 20px; color: var(--teal-lo); }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s ease, transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
/* stagger the card grid so a section arrives in waves, not all at once */
.grid .card, .work-grid .work-card { transition-delay: calc(var(--i, 0) * 45ms); }

/* Word-by-word heading reveal (class "in" added by app.js; hidden state
   only when JS is on, so no-JS still shows everything). */
html.js .w { display: inline-block; overflow: hidden; vertical-align: bottom; }
html.js .w > i {
  display: inline-block; font-style: inherit; transform: translateY(115%);
  transition: transform 0.75s var(--ease);
}
html.js h1.in .w > i, html.js h2.in .w > i { transform: none; }

/* Logo line-draw: only runs on an element that has .draw (app.js adds it
   when the browser can animate stroke-dashoffset cheaply). */
.draw path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.draw .fill-face { opacity: 0; }
html.js .draw.go path { animation: draw-in 1.5s var(--ease) forwards; }
html.js .draw.go .fill-face { animation: fade-face 0.8s ease 1s forwards; }
@keyframes draw-in { to { stroke-dashoffset: 0; } }
@keyframes fade-face { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .grain, .glow, .ticker-track, .hero-mark { animation: none; }
  .hero-mark { opacity: 0.07; transform: translateY(-50%); }
  html.js .logo-mark { opacity: 1; transform: none; }
  html.js .w > i { transform: none; transition: none; }
  .btn, .card, .work-card { transition: none; }
  .spotlight, .progress { display: none; }
  html.js .draw.go path { animation: none; stroke-dashoffset: 0; }
  html.js .draw.go .fill-face { animation: none; opacity: 1; }
}
@media (hover: none), (max-width: 640px) {
  .spotlight { display: none; }
}
@media (max-width: 640px) {
  /* Poppins is wider than the old sans — let the header wrap instead of
     pushing the document past the viewport. */
  .site-header { flex-wrap: wrap; row-gap: 10px; }
  .site-header nav { gap: 12px; flex-wrap: wrap; }
  .site-header nav a { font-size: 10px; letter-spacing: 0.12em; }
  .btn-sm { padding: 7px 13px; letter-spacing: 0.1em; }
  section { padding: 70px 0; }
  .work-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ── moodboard variant (qa/2026-11-14-moodboard) ─────────────────────────────
   Derived from the client's board by scripts/moodboard_palette.py rather than
   eyeballed: the board is 60.3% teal-family / 27.4% warm-family by area, its
   mean saturation is 48% (not neon), and there is no true black anywhere in it
   — the darkest petrol is #0b0f13. Its pigments are #0e8287 (teal) and
   #ae784d (copper); both are too dark to carry body-size text on this ink
   (4.18 and 5.12), so the accents are lifted along the same hue to
   #58b1b6 / #d3a878 and the foam/cream highlights stay as measured.
   Contrast against this theme's ink: text 16.73, teal 7.67, gold 8.83,
   dim 7.74, foam 14.43, cream 16.73 — all AA, most AAA.
   Opt in with ?theme=mood; the default is the hybrid (board ground + the old
   teal luminance), and ?theme=v030 restores the original black/neon look. */
[data-theme="mood"] {
  --ink: #0b0f13;            /* board: darkest petrol-black */
  --panel-tint: #0d1c25;     /* board: deep petrol, not graphite */
  --ink-veil: rgba(11, 15, 19, 0.72);
  --text: #f4efe0;           /* board cream — the only surface above l=82 · 16.73 */
  --dim: #8fa9ae;            /* board teal-grey #5b7c82, lifted for reading comfort · 7.74 */
  --teal: #58b1b6;           /* board #0e8287 lifted · 7.67 */
  --teal-hi: #c8e5e2;        /* water foam · 14.43 */
  --teal-lo: #0f353c;        /* board petrol */
  --gold: #d3a878;           /* board #ae784d lifted · 8.83 */
  --gold-hi: #f4efe0;        /* cream wall · 16.73 */
  --gold-lo: #5f3521;        /* cocoa bronze */
  --on-teal: #06181c;
  --on-gold: #211505;
}
/* the board glows like sea light through water, not like a lamp: cooler,
   wider, and the page floor is petrol rather than black */
[data-theme="mood"] body {
  background:
    radial-gradient(1240px 820px at 78% -14%, color-mix(in srgb, var(--teal) 15%, transparent), transparent 66%),
    radial-gradient(920px 700px at 6% 114%, color-mix(in srgb, var(--gold) 11%, transparent), transparent 62%),
    linear-gradient(180deg, #0b0f13, #0d1c25 130%);
  background-attachment: fixed;
}

/* A/B switch for review — only appears when the URL carries ?ab=1 */
.theme-switch { display: none; }
[data-ab="1"] .theme-switch {
  position: fixed; right: 14px; bottom: 14px; z-index: 60;
  display: inline-flex; gap: 8px; align-items: center;
  padding: 9px 15px; border-radius: 999px; cursor: pointer;
  font: 600 11px/1 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text); background: var(--ink-veil);
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
  backdrop-filter: blur(6px);
}

/* ── v0.3.0 original (true black + neon turquoise + light gold) ──────────────
   Kept reachable for comparison: ?theme=v030. Every value here is what
   shipped between the two palette waves; the contrast numbers were measured
   against pure #000: text 19.6, teal 13.4, gold 12.6. */
[data-theme="v030"] {
  --ink: #000;
  --panel-tint: #081416;
  --ink-veil: rgba(0, 0, 0, 0.72);
  --text: #f4f8f7;
  --dim: #94a8a7;
  --teal: #2ee6d6;
  --teal-hi: #8df5ec;
  --teal-lo: #0d8b81;
  --gold: #e9c479;
  --gold-hi: #f8e8c4;
  --gold-lo: #9c7136;
  --on-teal: #04201e;
  --on-gold: #241a08;
}
[data-theme="v030"] body {
  background:
    radial-gradient(1100px 720px at 84% -12%, color-mix(in srgb, var(--teal) 13%, transparent), transparent 62%),
    radial-gradient(880px 640px at 4% 112%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 60%),
    var(--ink);
  background-attachment: fixed;
}