/* ==========================================================================
   Elite Transfer Brussels — base
   Reset, fonts, approved tokens, typography, buttons, motion primitives.
   Section styling lives in styles/sections.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts
   Brown Sugar — approved display/headline face, shipped with the site.
   Manrope    — approved functional/interface face, loaded in the document head.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Brown Sugar";
  src: url("../assets/fonts/brown-sugar.ttf") format("truetype");
  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(--cream);
  color: var(--night);
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, video, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; margin: 0; }

:target { scroll-margin-top: 96px; }


/* --------------------------------------------------------------------------
   Tokens — the approved palette, and nothing else.

     #F3F0E8   field / lightest cream        --cream-light
     #EDE4D5   cream ground                  --cream
     #C8A96B   gold — primary CTA            --gold
     #C9A876   gold — secondary / hover      --gold-alt
     #10171A   night ground                  --night
     #080B0D   deepest night                 --night-deep

   Every translucency, shadow and glass tint below is derived from these six
   values, so no seventh colour is ever introduced.
   -------------------------------------------------------------------------- */
:root {
  --cream-light: #F3F0E8;
  --cream:       #EDE4D5;
  --gold:        #C8A96B;
  --gold-alt:    #C9A876;
  --night:       #10171A;
  --night-deep:  #080B0D;

  /* Ink on the gold CTA. The frames set it in the light cream, which is how
     it ships. That pairing measures 1.97:1 against the gold; switching this
     one token to var(--night) gives 8.2:1 without leaving the palette. */
  --cta-ink: var(--cream-light);

  /* channel values, for the derivations */
  --cream-light-rgb: 243, 240, 232;
  --gold-rgb:        200, 169, 107;
  --night-rgb:        16,  23,  26;
  --night-deep-rgb:    8,  11,  13;

  /* ---- type ----------------------------------------------------------
     Desktop values are read off the 1440 frames; the clamps only carry them
     down to tablet and phone. */
  --font-display: "Brown Sugar", Georgia, serif;
  --font-ui: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-hero:      clamp(2rem, 1.35rem + 1.6vw, 2.75rem);      /* 44px */
  --t-hero-sub:  clamp(1.1rem, 0.92rem + 0.5vw, 1.5rem);     /* 24px */
  --t-title:     clamp(1.75rem, 1.4rem + 1vw, 2.125rem);     /* 34px */
  --t-title-sm:  clamp(1.5rem, 1.28rem + 0.6vw, 1.875rem);   /* 30px */
  --t-lede:      clamp(1.125rem, 1rem + 0.45vw, 1.375rem);   /* 22px */
  --t-body-lg:   clamp(1.0625rem, 1rem + 0.2vw, 1.25rem);    /* 20px */
  --t-body:      clamp(1rem, 0.97rem + 0.1vw, 1.0625rem);    /* 17px */
  --t-small:     0.9375rem;                                  /* 15px */
  --t-micro:     0.8125rem;                                  /* 13px */

  --track-ui:   0.06em;
  --track-wide: 0.14em;

  /* ---- rhythm --------------------------------------------------------- */
  --page:      min(92vw, 1240px);
  --section-y: clamp(4.5rem, 9vw, 9.5rem);
  --radius:    8px;
  --radius-sm: 6px;
  --radius-lg: 10px;

  /* ---- motion --------------------------------------------------------- */
  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.33, 0.10, 0.20, 1);
  --dur:      420ms;
  --dur-slow: 900ms;

  /* ---- glass ----------------------------------------------------------
     Felt, not noticed. Transparency stays inside 5–10%, blur stays low. */
  --glass-tint: rgba(var(--cream-light-rgb), 0.07);
  --glass-edge: rgba(var(--cream-light-rgb), 0.14);
  --glass-blur: 10px;
}


/* --------------------------------------------------------------------------
   Type primitives
   -------------------------------------------------------------------------- */
.section-head { max-width: 46rem; }
.section-head--center { margin-inline: auto; text-align: center; }
/* frame 05 — a centred block whose lines are still set to the left */
.section-head--block  { margin-inline: auto; max-width: 29rem; }

.section-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-title);
  line-height: 1.22;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.section-sub {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--t-lede);
  line-height: 1.38;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-top: clamp(0.9rem, 1.6vw, 1.5rem);
}


/* --------------------------------------------------------------------------
   Buttons — restrained. Hierarchy, typography and contrast do the work.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--t-body);
  font-weight: 500;
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

/* Primary — the approved gold block.
   The glass is in the edge and the shadow, never in the fill: a fine cream
   border and a very soft shadow give the block its depth. On hover and on
   keyboard focus the same thing happens — the gold moves to its second value,
   a ten per cent cream veil passes over it, the edge becomes a little clearer
   and the shadow opens softly. Nothing scales, nothing moves, nothing glows.

   Both states carry the same two shadows in the same order, so the change
   interpolates rather than snapping. */
.btn--primary {
  min-height: 50px;
  padding: 0.85rem 2rem;
  background-color: var(--gold);
  color: var(--cta-ink);
  border-color: rgba(var(--cream-light-rgb), 0.14);
  box-shadow:
    inset 0 0 0 100px rgba(var(--cream-light-rgb), 0),
    0 1px 2px rgba(var(--night-deep-rgb), 0.10);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--gold-alt);
  border-color: rgba(var(--cream-light-rgb), 0.30);
  box-shadow:
    inset 0 0 0 100px rgba(var(--cream-light-rgb), 0.10),
    0 6px 20px rgba(var(--night-deep-rgb), 0.16);
}
.btn--primary:active {
  box-shadow:
    inset 0 0 0 100px rgba(var(--cream-light-rgb), 0.04),
    0 1px 2px rgba(var(--night-deep-rgb), 0.14);
}

/* wide — the gold blocks in frames 03, 04 and 05 */
.btn--wide {
  width: min(100%, 376px);
  line-height: 1.45;
}
.btn--tall { min-height: 76px; }

/* quiet — the translucent CTA that sits on photography (frame 04) */
.btn--quiet {
  min-height: 48px;
  padding: 0.75rem 1.75rem;
  color: var(--cream-light);
  background: rgba(var(--gold-rgb), 0.55);
  border-color: rgba(var(--cream-light-rgb), 0.18);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}
.btn--quiet:hover,
.btn--quiet:focus-visible {
  background: rgba(var(--gold-rgb), 0.72);
  border-color: rgba(var(--cream-light-rgb), 0.28);
}

/* the arrow inside a cue — a very small movement, never more */
.btn__arrow { transition: transform var(--dur) var(--ease); }


/* --------------------------------------------------------------------------
   Focus — always visible, never removed
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.on-cream :focus-visible { outline-color: var(--night); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--gold);
  color: var(--night);
  font-size: var(--t-small);
  letter-spacing: var(--track-ui);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 1rem; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}


/* --------------------------------------------------------------------------
   Section reveal
   ground → heading → supporting text → content → CTA.
   Order is carried by --r; nothing flies, nothing bounces.
   -------------------------------------------------------------------------- */
.has-js [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--dur-slow) var(--ease-soft),
    transform var(--dur-slow) var(--ease-soft);
  transition-delay: calc(var(--r, 0) * 110ms);
}
.is-revealed [data-reveal] { opacity: 1; transform: none; }

/* A CTA that is also a revealed element carries two sets of transitions, and
   the cascade keeps only one declaration — so they are written together here.
   The reveal keeps its staggered delay; the interaction states must not, or
   the button would answer a hover a third of a second late. */
.has-js [data-reveal].btn {
  transition:
    opacity var(--dur-slow) var(--ease-soft) calc(var(--r, 0) * 110ms),
    transform var(--dur-slow) var(--ease-soft) calc(var(--r, 0) * 110ms),
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

/* The cards have the same problem, with one difference: their interaction
   moves them, and the reveal moves them too. So the lift is carried by the
   translate property and the reveal by transform — two independent properties,
   two independent timings, one unchanged movement on screen. */
.has-js [data-reveal].assist-card,
.has-js [data-reveal].fleet-card {
  transition:
    opacity var(--dur-slow) var(--ease-soft) calc(var(--r, 0) * 110ms),
    transform var(--dur-slow) var(--ease-soft) calc(var(--r, 0) * 110ms),
    translate var(--dur-slow) var(--ease),
    box-shadow var(--dur-slow) var(--ease),
    border-color var(--dur) var(--ease);
}

/* the hairline of gold that divides one ground from the next */
.rule-gold {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(to right,
    rgba(var(--gold-rgb), 0) 0%,
    rgba(var(--gold-rgb), 0.5) 20%,
    rgba(var(--gold-rgb), 0.72) 50%,
    rgba(var(--gold-rgb), 0.5) 80%,
    rgba(var(--gold-rgb), 0) 100%);
}


/* --------------------------------------------------------------------------
   Reduced motion — the site stays complete and usable; only movement goes.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  .has-js [data-reveal] { opacity: 1; transform: none; }
}