@tailwind base;
@tailwind components;
@tailwind utilities;

/* Real fonts from the live-site rip (served from public/landing/assets). Poppins
   is loaded via next/font (sets --font-sans). Licensed Neue Haas / Zen Kaku /
   Fragment Mono come from the ripped files below. */
@font-face {
  font-family: "NeueHaasDisplay";
  src: url("/landing/assets/052-asset.otf") format("opentype");
  font-weight: 400 500;
  font-display: swap;
}
@font-face {
  font-family: "ZenKaku";
  src: url("/landing/assets/078-asset.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "ZenKaku";
  src: url("/landing/assets/077-asset.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "FragmentMono";
  src: url("/landing/assets/056-asset.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

/**
 * Design-system CSS variables — values from the LIVE site rip
 * (landing-rip/tokens.json). Tailwind colors reference these (tailwind.config.ts).
 */
:root {
  /* Brand */
  --brand: 77 30 247; /* #4D1EF7 */
  --brand-deep: 64 0 255; /* #4000FF — pressed/active */
  --brand-fg: 252 252 253;

  /* Text / neutrals (by live-site usage) */
  --ink: 252 252 253; /* primary text, near-white */
  --paper: 0 0 0; /* page background, black */
  --muted: 120 126 129; /* secondary text */
  --line: 223 223 223; /* hairlines */
  --card: 34 36 37; /* dark card surface */
  --off-white: 244 243 243;

  /* Themed surface (defaults to dark chrome) */
  --surface: 0 0 0;
  --surface-fg: 252 252 253;

  /* Fonts — the brand is Neue Haas (display + body) + Fragment Mono (labels),
     with Zen Kaku as the JP fallback. No Poppins. */
  --font-sans: "NeueHaasDisplay", "ZenKaku";
  --font-display: "NeueHaasDisplay", "ZenKaku";
  --font-mono: "FragmentMono";
}

[data-theme="light"] {
  --surface: 255 255 255;
  --surface-fg: 0 0 0;
}

@layer base {
  html {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  body {
    @apply bg-paper text-ink font-sans antialiased;
  }
  h1, h2, h3, h4 {
    @apply font-display;
    text-wrap: balance;
  }
  ::selection {
    background: rgb(var(--brand));
    color: rgb(var(--brand-fg));
  }
}

@layer utilities {
  .container-site {
    @apply mx-auto w-full max-w-site px-5 md:px-8;
  }

  /* Scandinavian precision motifs — faint hairline ruling used as a structural
     device. Vertical columns by default; --grid-gap controls pitch. Color rides
     on --line so it inverts cleanly on light vs dark. */
  .grid-rules-v {
    background-image: repeating-linear-gradient(
      to right,
      rgb(var(--line) / var(--grid-alpha, 0.06)) 0 1px,
      transparent 1px var(--grid-gap, 88px)
    );
  }
  .grid-rules {
    background-image:
      repeating-linear-gradient(
        to right,
        rgb(var(--line) / var(--grid-alpha, 0.05)) 0 1px,
        transparent 1px var(--grid-gap, 88px)
      ),
      repeating-linear-gradient(
        to bottom,
        rgb(var(--line) / var(--grid-alpha, 0.05)) 0 1px,
        transparent 1px var(--grid-gap, 88px)
      );
  }
  /* Hairline that fades at both ends — for section rules that shouldn't touch edges. */
  .rule-fade {
    background: linear-gradient(
      to right,
      transparent,
      rgb(var(--line) / 0.18) 12%,
      rgb(var(--line) / 0.18) 88%,
      transparent
    );
  }
}

/* Barcode tick reveal — vertical bars wipe up in sequence. */
@keyframes barcode-rise {
  from { transform: scaleY(0.04); opacity: 0; }
  to { transform: scaleY(1); opacity: 1; }
}

/* Scroll-reveal primitive (Reveal / RevealImage). Visible by default: the hidden
   state only applies once JS sets data-reveal, so no-JS / headless renders ship
   content visible, never blank. */
[data-reveal] {
  transition:
    opacity var(--reveal-dur, 1.5s) cubic-bezier(0.16, 1, 0.3, 1),
    transform var(--reveal-dur, 1.5s) cubic-bezier(0.16, 1, 0.3, 1),
    filter var(--reveal-dur, 1.5s) cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
/* Cinematic: a gentle rise, a hair of scale, and a soft focus-pull. */
[data-reveal="hidden"] {
  opacity: 0;
  transform: translateY(var(--reveal-y, 42px)) scale(0.984);
  filter: blur(6px);
}
[data-reveal="in"] {
  opacity: 1;
  transform: none;
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@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;
  }
}