/* ==========================================================================
   BOUNCE — Brand foundations
   Shared design tokens, typography and primitives.
   ========================================================================== */

/* ----- Fonts ----- */
/* Inter, variable weight 200-700, self-hosted. Matches the light grotesk
   used across the packaging. Latin + Latin Extended so accented brand names
   (TRESemme, L'Oreal, Boucleme) render correctly. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('../fonts/Inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200 700;
  font-display: swap;
  src: url('../fonts/Inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----- Tokens ----- */
:root {
  /* Core palette, lifted from the tin label */
  --blush:        #FFE7EB;
  --blush-deep:   #FBD8DE;
  --orange:       #FF6B1A;
  --orange-soft:  #FFAF85;
  --orange-tint:  #FFF0E7;
  --ink:          #0B0B0B;
  --ink-70:       rgba(11, 11, 11, .70);
  --ink-45:       rgba(11, 11, 11, .45);
  --ink-15:       rgba(11, 11, 11, .15);
  --ink-08:       rgba(11, 11, 11, .08);
  --paper:        #FFFFFF;
  --cream:        #FBF7F4;

  /* Type */
  --display: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
             Helvetica, Arial, sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
          Helvetica, Arial, sans-serif;

  /* Weights — the brand now runs light. Raise these to go heavier everywhere. */
  --w-hero:    200;   /* the one huge statement */
  --w-display: 300;   /* section headings */
  --w-small:   500;   /* display type below ~20px, needs the extra weight */
  --w-body:    400;
  --w-strong:  600;

  /* Rhythm */
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --maxw: 1240px;
  --radius: 14px;
  --radius-lg: 26px;

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--blush);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }

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

/* ----- Typography primitives ----- */
.display {
  font-family: var(--display);
  font-weight: var(--w-display);
  line-height: 1.02;
  letter-spacing: -.015em;
  text-transform: uppercase;
  margin: 0;
}
.eyebrow {
  font-size: clamp(.66rem, 1.6vw, .76rem);
  font-weight: var(--w-strong);
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 0;
}
.lede {
  font-size: clamp(1.02rem, 2.4vw, 1.2rem);
  font-weight: var(--w-body);
  line-height: 1.6;
  color: var(--ink-70);
  max-width: 46ch;
}

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

/* ----- Buttons ----- */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: 1.05em 2.1em;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-radius: 100px;
  font-weight: var(--w-strong);
  font-size: .88rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--btn-bg);
  transition: transform .35s var(--ease-out), background .25s var(--ease),
              color .25s var(--ease), border-color .25s var(--ease);
  will-change: transform;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--orange { --btn-bg: var(--orange); --btn-fg: #fff; }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--ink);
  border-color: var(--ink-15);
}
.btn--ghost:hover { border-color: var(--ink); }
.btn[disabled] { opacity: .4; pointer-events: none; }

/* Focus — visible, on-brand, never removed */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ----- Accessibility helpers ----- */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -120%);
  z-index: 999; background: var(--ink); color: #fff;
  padding: .8em 1.4em; border-radius: 0 0 10px 10px;
  font-weight: var(--w-strong); font-size: .85rem; text-decoration: none;
  transition: transform .25s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ----- Marquee (echoes the tin lid band) ----- */
.marquee {
  --speed: 34s;
  overflow: hidden;
  background: var(--orange);
  color: #fff;
  padding: .78em 0;
  border-block: 2px solid var(--ink);
  user-select: none;
}
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee var(--speed) linear infinite;
}
.marquee span {
  font-family: var(--display);
  font-weight: var(--w-small);
  font-size: clamp(.8rem, 1.9vw, .98rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  padding-inline: .7em;
  white-space: nowrap;
}
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* ----- Grain overlay ----- */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: .045;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ----- Reveal on scroll ----- */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px) scale(.96);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }