/* ============================================================
   Fresh Detailing 95 — base.css
   Reset, design tokens, typography, utilities
   ============================================================ */

@font-face {
  font-family: "Bebas Neue";
  src: url("../fonts/bebas-neue-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Bebas Neue";
  src: url("../fonts/bebas-neue-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02FF, U+1E00-1EFF, U+2020, U+2113;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02FF, U+1E00-1EFF, U+2020, U+2113;
}
/* Roboto Light — réservée au titre de voiture des bandes « Nos réalisations »,
   reprise du site de référence donné par le client (muller-prestige.com). */
@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto-latin.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "Roboto";
  src: url("../fonts/roboto-latin-ext.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02FF, U+1E00-1EFF, U+2020, U+2113;
}

@layer reset, tokens, base, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  html, body { height: 100%; }
  body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: none; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; padding: 0; }
  table { border-collapse: collapse; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer tokens {
  :root {
    /* ---- Couleurs de base ---- */
    --c-bg: #08080a;
    --c-bg-soft: #0d0d10;
    --c-bg-elevated: #131318;
    --c-surface: rgba(255, 255, 255, 0.035);
    --c-surface-strong: rgba(255, 255, 255, 0.06);
    --c-border: rgba(255, 255, 255, 0.09);
    --c-border-strong: rgba(255, 255, 255, 0.16);

    --c-text: #f3f1ea;
    --c-text-soft: rgba(243, 241, 234, 0.68);
    --c-text-faint: rgba(243, 241, 234, 0.42);

    /* ---- Accent or / chrome / rouge ---- */
    --c-gold-100: #f6e6b4;
    --c-gold-300: #e8c877;
    --c-gold-500: #cda254;
    --c-gold-700: #96742f;
    --gradient-gold: linear-gradient(135deg, var(--c-gold-100) 0%, var(--c-gold-300) 45%, var(--c-gold-500) 100%);

    --c-chrome-100: #eef0f3;
    --c-chrome-400: #b7bcc4;
    --c-chrome-700: #565a61;

    --c-red-500: #c8323f;
    --c-red-400: #e24954;

    --c-success: #4caf7d;

    /* ---- Typo ---- */
    --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --fs-xs: 0.75rem;
    --fs-sm: 0.875rem;
    --fs-base: 1rem;
    --fs-md: 1.125rem;
    --fs-lg: 1.375rem;
    --fs-xl: 1.75rem;
    --fs-2xl: clamp(2rem, 1.6rem + 1.8vw, 3rem);
    --fs-3xl: clamp(2.6rem, 1.9rem + 3vw, 4.5rem);
    --fs-4xl: clamp(3.4rem, 2.2rem + 5.2vw, 7rem);

    /* ---- Spacing ---- */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;
    --space-3xl: 9rem;

    --container-w: 1280px;
    --container-pad: clamp(1.25rem, 4vw, 3rem);
    /* Approximate fixed-header height — keeps pinned scrollytelling stages
       clear of the header. Not load-bearing for layout elsewhere. */
    --header-h: 76px;

    /* ---- Radii / shadows ---- */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 28px;
    --radius-pill: 999px;

    --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 24px 80px rgba(0, 0, 0, 0.55);
    --shadow-gold: 0 8px 30px rgba(205, 162, 84, 0.25);

    /* ---- Motion ---- */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast: 0.2s;
    --dur-med: 0.45s;
    --dur-slow: 0.9s;

    --z-nav: 100;
    --z-cursor: 200;
    --z-overlay: 300;
    --z-toast: 400;

    color-scheme: dark;
  }
}

@layer base {
  html {
    scroll-behavior: auto; /* smooth-scroll module drives real scrolling */
    font-size: 16px;
  }

  body {
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 400;
  }

  /* Grain overlay — always on, cheap (tiled small PNG/WebP, opacity only).
     mix-blend-mode was tried here first but forces the compositor to
     re-blend this fixed full-viewport layer against scrolling content on
     every frame, which was a measurable source of scroll jank; plain
     opacity composites once and stays cheap. */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: url("../img/noise.webp");
    background-size: 128px 128px;
    background-repeat: repeat;
    opacity: 0.045;
  }

  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.05;
    text-transform: uppercase;
  }
  h5, h6 {
    font-family: var(--font-body);
    font-weight: 700;
    line-height: 1.3;
  }

  h1 { font-size: var(--fs-4xl); }
  h2 { font-size: var(--fs-3xl); }
  h3 { font-size: var(--fs-2xl); }
  h4 { font-size: var(--fs-xl); font-family: var(--font-body); font-weight: 800; text-transform: none; letter-spacing: 0; }

  p { color: var(--c-text-soft); }

  ::selection { background: var(--c-gold-300); color: #1a1206; }

  :focus-visible {
    outline: 2px solid var(--c-gold-300);
    outline-offset: 3px;
    border-radius: 4px;
  }

  /* Progressive enhancement gate — see assets/js/main.js.
     [data-reveal] only hides content once .js class proves JS booted. */
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
  }
  .js [data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  }
  .js [data-reveal-stagger] > * {
    opacity: 0;
    transform: translateY(24px);
  }
  .js [data-reveal-stagger].is-visible > * {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s var(--ease-out) var(--stagger-delay, 0s),
                transform 0.7s var(--ease-out) var(--stagger-delay, 0s);
  }

  /* Custom cursor (cursor.js) is a decorative overlay that follows the
     native pointer — it does not replace it. Client explicitly wants both
     visible together, so no `cursor: none` here. */
}

@layer utilities {
  .container {
    width: 100%;
    max-width: var(--container-w);
    margin-inline: auto;
    padding-inline: var(--container-pad);
  }

  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--c-gold-300);
  }
  .eyebrow::before {
    content: "";
    width: 28px;
    height: 1px;
    background: var(--gradient-gold);
  }

  .text-gradient-gold {
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .section {
    position: relative;
    padding-block: var(--space-2xl);
  }
  @media (max-width: 640px) {
    .section { padding-block: var(--space-xl); }
  }

  .section-head {
    max-width: 46rem;
    margin-bottom: var(--space-lg);
  }
  .section-head.center { margin-inline: auto; text-align: center; }

  .sr-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: var(--z-toast);
    background: var(--c-gold-300);
    color: #1a1206;
    padding: 0.75em 1.25em;
    border-radius: var(--radius-sm);
    font-weight: 700;
  }
  .sr-skip:focus { left: var(--space-sm); top: var(--space-sm); }
}