/* ============================================================================
   PINOVIO BASE SYSTEM  —  the default-quality starting point (Stack A, vanilla)
   ----------------------------------------------------------------------------
   COPY THIS FILE IN AT THE START OF EVERY VANILLA BUILD. Do not re-derive tokens
   from memory — that is how output drifts back to generic. This file is the
   "positive recipe": the structural craft (type scale, spacing rhythm, radius
   tiers, layered shadows, motion, component anatomy, a11y) is already locked at
   an agency-level bar. Per project you swap ONLY the BRAND LAYER at the top.

   Two layers:
     1. BRAND LAYER  — accent hue + fonts + warmth. RE-PICK per project at the
        Phase 1 foundation gate (with RENDERED swatches, never hex-in-text).
     2. SYSTEM LAYER — everything below. Brand-agnostic. Leave the structure;
        only the values keyed off the brand layer change.

   The demonstration brand values below are deliberately NON-generic (owned
   cobalt, a display+body pairing) so "generic" is never the path of least
   resistance. They are a starting default, not a mandate — override per brand.

   Before presenting anything built on this file, run:
       scripts/quality-gate.sh <your-built-files>
   A hard-fail there is a defect, not a note.
   ========================================================================== */


/* ============================================================================
   1. BRAND LAYER  🔒  — the ONLY part you swap per project (Phase 1 gate)
   ========================================================================== */
:root {
  /* --- Typefaces ---------------------------------------------------------
     Pair TWO faces: a display face with character for headings + a readable
     body. Shipping one face everywhere (esp. Inter-only) is itself an AI tell.
     Load the @font-face / <link> for these in the page head.
     Demo default: Bricolage Grotesque (display) + Inter (body).            */
  --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* --- Accent (OWNED hue — Mono + Blue Punch brand, 2026-07-03) ----------
     Sampled from the actual logo mark (assets/pinovio-logo-branded.png):
     electric sky/azure #30bdfd. Blue is the ONLY brand accent this build —
     used deliberately (CTAs, headline moments, key numbers), never as a
     background wash. World-derived: it's the logo's own color.              */
  --accent-050: #ebf5fa;
  --accent-100: #cae9f7;
  --accent-300: #72d2fe;
  --accent-500: #30bdfd;   /* base — the one you actually reach for */
  --accent-600: #02a1e9;   /* hover / pressed fill */
  --accent-700: #027cb3;   /* deep / active */
  --accent-soft: color-mix(in srgb, var(--accent-500) 12%, transparent);
  --accent-ring: color-mix(in srgb, var(--accent-500) 32%, transparent);

  /* No spark token this brand — blue is the single punch. (--spark-500 dropped.) */

  /* --- Neutrals: COOL-SHIFTED MONO (award-audit floor: never pure poles) --
     Mono + Blue Punch runs black/white/gray, but both poles carry a 1–2%
     cool (blue-leaning) cast so the canvas reads considered, not sterile,
     and sits in-family with the electric accent.                            */

  /* Dark side (hero / signal / CTA / footer) */
  --d-bg:       #0a0b0d;   /* page — cool near-black */
  --d-surface:  #131417;   /* raised card */
  --d-surface-2:#1b1c20;   /* higher / hover */
  --d-text:     #f4f5f7;
  --d-muted:    #999ba1;
  --d-line:     color-mix(in srgb, #dbe4f0 9%, transparent);

  /* Light side (content sections) — cool-shifted white/gray, NOT pure #fff */
  --l-bg:       #fafbfc;
  --l-surface:  #f3f4f6;
  --l-surface-2:#eaebee;
  --l-text:     #0a0b0d;
  --l-muted:    #686b72;
  --l-line:     #e2e4e8;
}


/* ============================================================================
   1.5 VIBE LAYER — four axes that tune the SAME system to any brief.
   Decided at the Phase-1 gate alongside the brand layer (SKILL.md).
   Calibrated 2026-07 against 8 Awwwards SOTD winners across vibes: the craft
   floor below is what they all share; these axes are where they differ.
   ========================================================================== */
:root {
  /* AXIS 1 — Weight voice. Award-tier display type gets its authority from
     SCALE + solid leading + tight tracking — weight is a personality choice:
       light  300–400  (product-cinema, editorial-luxury)
       medium 500–600  (warm-tech, most SaaS — the safest default)
       heavy  700–900  (playful-bold, brutalist, sport)
     Heavy-everywhere is a tell; so is timid-small-and-bold.                */
  --display-weight: 700;   /* Mono+Blue Punch: heavy voice, but 700 not 900 —
                              authority comes from step-6 scale + solid leading */

  /* AXIS 2 — Radius personality. Radius is a VIBE signal, not a constant:
       sharp  → hairline borders, 0–2px corners (editorial, luxury, HUD)
       soft   → the default scale below (tech, SaaS, local service)
       round  → pill-first buttons/chips, 20px+ cards (friendly, playful)
     Override the radius scale + --btn-radius together; never mix modes.   */
  --btn-radius: var(--radius-sm);   /* sharp: 2px · round: var(--radius-pill) */

  /* AXIS 3 — Temperature: set in the BRAND LAYER canvas pairs above.
     Warm cream ↔ cool graphite. Never pure #fff / #000 at either pole —
     every reference site warm- or cool-shifts both.                        */

  /* AXIS 4 — Chrome density: minimal (one CTA, bare nav) ↔ HUD-dense
     (corner annotations, indices, live details). Pick ONE and commit;
     half-HUD reads accidental. Kit classes: .index/.annot-line/.hud-*.    */
}


/* ============================================================================
   2. SYSTEM LAYER — brand-agnostic craft. Leave the structure intact.
   ========================================================================== */
:root {
  /* --- Type scale (Major third, 1.25). Use TOKENS, never raw rem/px. ----- */
  --step--2: 0.694rem;   /* 11px — micro labels, legal */
  --step--1: 0.833rem;   /* 13px — captions, fine print */
  --step-0:  1.0625rem;  /* 17px — body (reads warmer than 16 for marketing) */
  --step-1:  1.25rem;    /* 20px — lead paragraph */
  --step-2:  1.5rem;     /* 24px — card titles, small headings */
  --step-3:  clamp(1.75rem, 2.4vw, 2.1rem);   /* section headings */
  --step-4:  clamp(2.25rem, 4vw, 3rem);       /* page headings */
  --step-5:  clamp(2.9rem, 6vw, 4.25rem);     /* hero display */
  --step-6:  clamp(3.6rem, 8vw, 6rem);        /* oversize hero */

  --leading-solid:  0.95;   /* hero display at step-5/6 — award-tier is 0.88–1.05 */
  --leading-tight:  1.08;   /* large headings */
  --leading-snug:   1.2;
  --leading-normal: 1.6;    /* body */
  --tracking-display: -0.025em; /* step-5/6 display wants -2%…-3% */
  --tracking-tight: -0.02em;   /* large headings */
  --tracking-wide:  0.08em;    /* uppercase eyebrows/labels */

  /* --- Spacing (4px base on an 8px rhythm). Every gap comes from here. ---- */
  --space-1: 0.25rem;  /*  4 */
  --space-2: 0.5rem;   /*  8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96  — section breathing room */
  --space-10: 8rem;    /* 128 — hero / big section */

  /* --- Radius — a SCALE, not one value. Uniform radius reads templated. --- */
  --radius-xs:   6px;    /* inputs, small chips */
  --radius-sm:   8px;    /* buttons, small cards */
  --radius-md:   12px;   /* cards */
  --radius-lg:   16px;   /* feature panels */
  --radius-xl:   22px;   /* hero panels, large media */
  --radius-pill: 999px;  /* pills, nav chips */

  /* --- Shadows — subtle + LAYERED (border-first à la Linear/Vercel).
     No single big blurry drop (0 28px 68px …) — that's the 2019 Bootstrap tell.
     Prefer a hairline border for resting state; use shadow for elevation only. */
  --shadow-xs: 0 1px 2px rgba(16,24,40,0.05);
  --shadow-sm: 0 1px 2px rgba(16,24,40,0.06), 0 2px 6px rgba(16,24,40,0.05);
  --shadow-md: 0 4px 12px rgba(16,24,40,0.08), 0 12px 28px rgba(16,24,40,0.06);
  --shadow-lg: 0 8px 24px rgba(16,24,40,0.10), 0 24px 48px rgba(16,24,40,0.08);

  /* --- Motion tokens — one vocabulary, reused. ---------------------------- */
  --dur-fast: 150ms;   /* press feedback, small state changes */
  --dur:      220ms;   /* default transition */
  --dur-slow: 420ms;   /* reveals, larger moves */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);   /* the workhorse */
  --ease-spring: cubic-bezier(0.34, 1.46, 0.64, 1); /* playful entrances */
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);

  /* --- Layout ------------------------------------------------------------- */
  --container: 1120px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --measure: 62ch;   /* max body line length */
}


/* ---------------------------------------------------------------------------
   Base elements
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: var(--leading-normal);
  color: var(--l-text);
  background: var(--l-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--display-weight);   /* vibe axis 1 — see VIBE LAYER */
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 {
  font-size: var(--step-5);
  line-height: var(--leading-solid);
  letter-spacing: var(--tracking-display);
}
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-3); }
h4 { font-size: var(--step-2); }

p  { margin: 0 0 var(--space-4); max-width: var(--measure); }
a  { color: var(--accent-600); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Eyebrow / kicker — uppercase, tracked, mono-ish. Big "not-AI" signal. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent-600);
  margin: 0 0 var(--space-3);
}

/* ---------------------------------------------------------------------------
   Layout primitives
   ------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Sections breathe. Vary the rhythm — don't make every section the same height. */
.section        { padding-block: var(--space-9); }
.section--tight { padding-block: var(--space-7); }
.section--tall  { padding-block: var(--space-10); }

/* Dark/light section skins (Option B: dark hero → light content) */
.section--dark  { background: var(--d-bg);  color: var(--d-text); }
.section--dark .eyebrow { color: var(--accent-300); }
.section--dark a { color: var(--accent-300); }


/* ---------------------------------------------------------------------------
   Buttons — variants + sizes + real states. ONE system, reused everywhere.
   Do NOT locally override .btn per page (that's how the site drifted before).
   ------------------------------------------------------------------------- */
.btn {
  --btn-py: 0.75rem;
  --btn-px: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--btn-py) var(--btn-px);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--btn-radius);   /* vibe axis 2 — see VIBE LAYER */
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
}
/* Press feedback: quick scale-down reads instant + tactile (Emil Kowalski). */
.btn:active { transform: scale(0.97); }

/* Accessible focus ring on keyboard nav only. */
.btn:focus-visible,
a:focus-visible,
.input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Sizes */
.btn--sm { --btn-py: 0.5rem;  --btn-px: 0.875rem; font-size: var(--step--1); }
.btn--lg { --btn-py: 0.95rem; --btn-px: 1.6rem;   font-size: var(--step-1); }
.btn--pill { border-radius: var(--radius-pill); }
.btn--block { width: 100%; }

/* Primary — the ONE clear action per section. */
.btn--primary {
  background: var(--accent-500);
  color: #f7faff;
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--accent-600);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* Secondary — supporting action. Border-first, not a second loud fill. */
.btn--secondary {
  background: var(--accent-soft);
  color: var(--accent-700);
  border-color: color-mix(in srgb, var(--accent-500) 24%, transparent);
}
.btn--secondary:hover {
  background: color-mix(in srgb, var(--accent-500) 18%, transparent);
  transform: translateY(-1px);
}

/* Ghost — tertiary / low-emphasis. */
.btn--ghost {
  background: transparent;
  color: var(--l-text);
  border-color: var(--l-line);
}
.btn--ghost:hover {
  background: var(--l-surface-2);
  border-color: color-mix(in srgb, var(--l-text) 20%, transparent);
}
.section--dark .btn--ghost { color: var(--d-text); border-color: var(--d-line); }
.section--dark .btn--ghost:hover { background: var(--d-surface-2); }


/* ---------------------------------------------------------------------------
   Cards — hairline border + subtle layered shadow, hover lift. Not a big blur.
   ------------------------------------------------------------------------- */
.card {
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--accent-500) 22%, transparent);
}
/* Lit surface: a 1px top highlight so the card catches light. */
.card--lit { position: relative; }
.card--lit::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent,
              color-mix(in srgb, #fff 70%, transparent), transparent);
  border-radius: inherit;
}

.section--dark .card {
  background: var(--d-surface);
  border-color: var(--d-line);
  box-shadow: none;
}
.section--dark .card:hover { background: var(--d-surface-2); }


/* ---------------------------------------------------------------------------
   Forms — inputs share the radius/focus system.
   ------------------------------------------------------------------------- */
.field { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.field > label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--l-muted);
}
.input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font: inherit;
  color: var(--l-text);
  background: var(--l-surface);
  border: 1px solid var(--l-line);
  border-radius: var(--radius-xs);
  transition: border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.input:focus { outline: none; border-color: var(--accent-500); }
.input[aria-invalid="true"] { border-color: #e5484d; }
.field__error { color: #e5484d; font-size: var(--step--1); }


/* ---------------------------------------------------------------------------
   Media frames — media is never naked. Every reference site (8/8, 2026-07
   Awwwards audit) sets photography/video/canvas inside a framed container
   inset on the canvas, not raw edge-to-edge. Radius follows the vibe axis.
   ------------------------------------------------------------------------- */
.media-frame {
  --media-radius: var(--radius-xl);   /* sharp vibe: 2px · round vibe: keep */
  position: relative;
  overflow: hidden;
  border-radius: var(--media-radius);
  border: 1px solid var(--l-line);
  background: var(--l-surface-2);
}
.section--dark .media-frame { border-color: var(--d-line); background: var(--d-surface); }
.media-frame > img,
.media-frame > video,
.media-frame > canvas { display: block; width: 100%; height: 100%; object-fit: cover; }


/* ---------------------------------------------------------------------------
   Annotation kit — the "engineered" layer that separates award-tier pages
   from clean-but-flat ones: numbered indices, ruler lines, corner HUD
   details, typographic utility links. Use per chrome-density axis: minimal
   pages take .index only; HUD-dense pages use the full kit. Never half-HUD.
   ------------------------------------------------------------------------- */

/* Numbered index — "01", "02" beside section titles / cards / nav items. */
.index {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  color: var(--accent-600);
}
.section--dark .index { color: var(--accent-300); }

/* Ruler line — full-width dotted rule with labels at each end.
   <div class="annot-line"><span>PRODUCT 01</span><span>NAME</span></div>   */
.annot-line {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--l-muted);
}
.annot-line > span { flex: none; }
.annot-line::after {
  content: '';
  flex: 1;
  order: 1;
  border-top: 1px dotted color-mix(in srgb, currentColor 45%, transparent);
}
.annot-line > span:last-child { order: 2; }
.section--dark .annot-line { color: var(--d-muted); }

/* Corner HUD label — tiny mono caps pinned to a corner of a relative parent.
   The device behind Elva's credits, Sakazuki's clock, Balmoral's season.   */
.hud-corner {
  position: absolute;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--l-muted);
  margin: var(--space-5);
}
.hud-corner--tl { top: 0; left: 0; }
.hud-corner--tr { top: 0; right: 0; text-align: right; }
.hud-corner--bl { bottom: 0; left: 0; }
.hud-corner--br { bottom: 0; right: 0; text-align: right; }
.section--dark .hud-corner { color: var(--d-muted); }

/* Typographic utility link — "(X)" "(IG)" instead of icon buttons. */
.txt-link {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  text-decoration: none;
}
.txt-link::before { content: '('; }
.txt-link::after  { content: ')'; }
.txt-link:hover { text-decoration: underline; text-underline-offset: 3px; }


/* ---------------------------------------------------------------------------
   Grain — film-grain overlay for any large flat field (hero, CTA, dark
   sections). Every audited site textures its flat areas; untextured flat
   dark = the "cheap" tell. ~4% opacity: felt, not seen.
   ------------------------------------------------------------------------- */
.grain { position: relative; }
.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ---------------------------------------------------------------------------
   CTA affordance — trailing arrow-in-circle. A filled/outlined circle with
   an arrow after the label out-converts a bare text button and reads crafted.
   <a class="btn btn--primary">Book a call <span class="btn__circle">→</span></a>
   ------------------------------------------------------------------------- */
.btn__circle {
  display: inline-grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, currentColor 14%, transparent);
  font-size: 0.85em;
  transition: transform var(--dur) var(--ease-out);
}
.btn:hover .btn__circle { transform: translateX(2px); }


/* ---------------------------------------------------------------------------
   Motion — scroll reveals DEFAULT-ON via native CSS scroll-driven animation.
   Zero JS. Any page that links this file gets motion (fixes "6 pages had none").
   Progressive: browsers without support just show content (no broken state).
   ------------------------------------------------------------------------- */
.reveal { opacity: 1; }   /* fallback: fully visible if no scroll-timeline */

@supports (animation-timeline: view()) {
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    animation: reveal-in linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 30%;
  }
  /* Vary the axis/timing so it doesn't read as one repeated fade-up. */
  .reveal--left  { transform: translateX(-24px); }
  .reveal--right { transform: translateX(24px); }
  .reveal--scale { transform: scale(0.96); }
  .reveal[data-delay="1"] { animation-range: entry 10% cover 35%; }
  .reveal[data-delay="2"] { animation-range: entry 15% cover 40%; }
  .reveal[data-delay="3"] { animation-range: entry 20% cover 45%; }
}
@keyframes reveal-in {
  to { opacity: 1; transform: none; }
}

/* Hover-lift utility for any element that should confirm interactivity. */
.lift { transition: transform var(--dur) var(--ease-out); }
.lift:hover { transform: translateY(-2px); }


/* ---------------------------------------------------------------------------
   Accessibility — reduced motion kills ALL of the above cleanly.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}