/* ==========================================================================
   OcularAI — design tokens
   Colour values are the Figma variables verbatim (get_variable_defs).
   ========================================================================== */

:root {
  /* --- Colour: Figma variable name -> token ---------------------------- */
  --c-mono-light:       #ECF7FF; /* Mono/Light            */
  --c-mono-white:       #FFFFFF; /* Mono/White            */
  --c-mono-dark:        #030C1B; /* Mono/Dark             */
  --c-mono-grey:        #595959; /* Mono/Grey             */
  --c-light-grey:       #F2F2F2; /* Mono/Light - Grey     */
  --c-light-grey-02:    #B3B8C1; /* Mono/Light - Grey 02  */
  --c-light-dark:       #1A2432; /* Mono/Light - Dark     */
  --c-primary-blue:     #071B3C; /* Primary/Blue          */
  --c-sky-blue:         #0087FF; /* Primary/Sky Blue      */
  --c-accent-yellow:    #FFD11A; /* Accent/Yellow         */

  /* Derived surfaces used in the composition */
  --c-ghost-fill:       rgba(236, 247, 255, 0.10); /* hero button fill */
  --c-hairline:         rgba(236, 247, 255, 0.20);

  /* --- Type ------------------------------------------------------------
     Helvetica carries the headings/body; Arame carries every mono-tech
     label ("AI-POWERED …", "[ SCROLL down ]", timestamps, section numbers).
     Both are self-hosted from assets/fonts/ — see @font-face below.       */
  --f-sans: "Helvetica", "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
  --f-tech: "Arame", "Chakra Petch", "Share Tech Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* --- Fluid scale -----------------------------------------------------
     The Figma frame is 1920px wide. Every desktop dimension in this theme
     is written as calc(<figma-px> * var(--s)), so one number scales the whole
     composition. It scales in BOTH directions, at every width down to the
     reflow breakpoint (see base.css).

     It has to. Positions in this theme mix percentages with scaled pixels --
     left: calc(25% + 162 * var(--s)) and the like, straight out of Figma's
     own layout. A percentage tracks its containing block; a scaled pixel
     tracks --s. They only agree while 25% of that block equals 480 *
     var(--s).

     Above 1920 the composition stops growing and centres instead, the way a
     capped site does -- but capping --s alone is what was tried before and it
     pulled the grid apart: at 2560 the left rule stayed at 49px while the
     right one flew out to 2456, because the percentages were still measuring
     the full 2560 viewport while the scaled pixels had stopped at 1920.

     The cap works now because BOTH sides stop together. --s is capped here,
     and .o-page -- the containing block every percentage in the theme
     resolves against -- is capped to the same 1920 and centred (base.css).
     So above 1920: block = 1920, --s = 1, and 25% of the block is 480px is
     480 * var(--s). Below it: block = 100vw, --s = 100vw/1920, and the same
     identity holds. The agreement is never broken, at any width.          */
  /* No cap at 1920: the whole composition is written in these units, so
     letting it grow means a 2560 or a 3840 screen gets the same page at the
     same proportions rather than the 1920 one with empty sides. */
  --s: calc(100vw / 1920);

  /* The same value under a second name. A block that redefines --s on itself
     -- the book-a-demo sheet, sized to fit the window's height -- cannot read
     the inherited --s inside its own declaration; that is a cycle, and the
     property resolves to its guaranteed-invalid value. This gives it
     something to compare against. */
  --s-page: calc(100vw / 1920);

  /* --- Motion ----------------------------------------------------------
     Figma does not expose prototype (Smart Animate) transition curves over
     MCP, so these are tuned by hand. Deliberately slow: the reveals should
     settle rather than snap. Retimes every section at once.               */
  --rv-dur:  1600ms;
  --rv-ease: cubic-bezier(0.16, 1, 0.30, 1);
  --rv-step: 130ms; /* stagger between siblings */

  /* Interaction timings (hover/press), kept separate from the reveals so
     slowing the page down does not make the UI feel sluggish.             */
  --ui-dur:  520ms;
  --ui-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Button corner brackets closing into a full outline. Slower than the rest
     of the UI so the arms visibly travel and meet; the retract is a little
     quicker so moving the pointer away never feels like it lags behind.    */
  --brk-dur:      1600ms;
  --brk-dur-out:  1000ms;
  --brk-ease:     cubic-bezier(0.19, 1, 0.22, 1);

  /* Stroke-draw for inline line art -- the Features cards' icons and the
     About page's standards. One shape's draw, and the gap between shapes.
     Both are scaled together, so the whole sequence keeps its shape when the
     pace changes. */
  --linedraw-dur:  775ms;
  --linedraw-step: 33ms;

  /* Image hover zoom. Deliberately small and slow — the picture drifts in
     rather than snapping. The frame never changes size (see .zoom).        */
  --zoom-scale: 1.06;
  --zoom-dur:   1400ms;
  --zoom-ease:  cubic-bezier(0.22, 1, 0.36, 1);
}

/* Between the reflow breakpoint and about 1440 the composition is merely
   scaled down -- at 1201 it runs at 62.6% -- and at that scale the design's
   own small type lands at 10px, and the smallest of it at 8. Nothing breaks
   in the layout; it just stops being readable. So every font-size of 16
   design px or less is written as max(11px, calc(N * var(--s))): the design
   size from about 1320 up, and a floor of 11 below it. Positions still scale,
   so the composition holds; only the type refuses to keep shrinking.

   Below the reflow breakpoint the scale is pinned so type stays legible;
   layout switches to a stacked flow instead of shrinking further. */
@media (max-width: 1023px), (max-width: 1200px) and (orientation: portrait) {
  :root { --s: 1px; --s-page: 1px; }
}

/* ==========================================================================
   Fonts
   Self-hosted woff2, converted from the supplied TTFs (473KB -> 155KB).
   The ?v= on each src is a cache key: browsers cache font files hard, so bump
   it whenever a face is replaced or the old file will keep being served.
   The .ttf sources live in assets/fonts/Arame/ and assets/fonts/Helvetica/;
   they are not loaded at runtime and can be deleted before shipping.
   Arame carries every mono-tech label (Thin) and the CCTV readouts and F/0n
   numbers (Bold); Helvetica carries headings (Light 300) and body (400).
   ========================================================================== */

@font-face {
  font-family: "Arame";
  src: url("../fonts/arame-thin.woff2?v=1") format("woff2");
  font-weight: 100 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Arame";
  src: url("../fonts/arame-bold.woff2?v=1") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica";
  src: url("../fonts/helvetica-light.woff2?v=1") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Helvetica";
  src: url("../fonts/helvetica-regular.woff2?v=1") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Reset
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--c-mono-dark);
  color: var(--c-mono-light);
  font-family: var(--f-sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Horizontal overflow is clipped by .o-page. Do NOT put overflow-x on <body>:
   it makes body a scroll container, which breaks window scroll position,
   position:sticky and viewport-relative IntersectionObserver. */
html { overflow-x: clip; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--c-accent-yellow); outline-offset: 3px; }

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}