/* ============================================================
   BASE — Google Fonts, reset, global typography, utilities
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&family=Inter:ital,opsz,wght@0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;0,14..32,900;1,14..32,400&family=Montserrat:wght@500;600;700;800;900&display=swap');
@import './tokens.css';

/* ── Layer order ──────────────────────────────────────────── */
@layer reset, tokens, base, layout, components, utilities, overrides;

/* ── Reset ────────────────────────────────────────────────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    hanging-punctuation: first last;
    font-size: 16px;
  }

  body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--c-text);
    background: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
  }

  img, svg, video { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  button { cursor: pointer; border: none; background: none; font: inherit; }
  ul, ol { list-style: none; }

  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    text-wrap: balance;
    line-height: var(--leading-tight);
    font-weight: var(--weight-bold);
  }

  p { text-wrap: pretty; }

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

/* ── Base ─────────────────────────────────────────────────── */
@layer base {
  .container {
    width: 100%;
    max-width: var(--max-w-site);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .section { padding-block: var(--section-py); }

  .visually-hidden {
    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; top: -100%; left: var(--sp-4);
    z-index: var(--z-modal);
    background: var(--c-accent); color: var(--color-white);
    padding: var(--sp-3) var(--sp-6); border-radius: var(--radius-md);
    font-weight: var(--weight-semi);
    transition: top var(--dur-fast);
  }
  .skip-link:focus { top: var(--sp-4); }
}

/* ── Utilities ────────────────────────────────────────────── */
@layer utilities {
  /* Text */
  .text-gold    { color: var(--c-accent); }
  .text-navy    { color: var(--color-navy); }
  .text-white   { color: var(--color-white); }
  .text-muted   { color: var(--c-text-muted); }

  /* Backgrounds */
  .bg-navy      { background: var(--color-navy); }
  .bg-white     { background: var(--color-white); }
  .bg-off-white { background: var(--color-off-white); }

  /* Eyebrow label */
  .eyebrow {
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--c-accent);
  }

  /* ── Buttons ──────────────────────────────────────────── */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 0.875rem 1.75rem;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    border: 2px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    transition:
      background var(--dur-fast) var(--ease-out),
      color      var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out),
      box-shadow var(--dur-fast) var(--ease-out),
      transform  var(--dur-fast) var(--ease-out);
  }
  .btn:hover  { transform: translateY(-1px); }
  .btn:active { transform: translateY(0); }

  .btn-primary {
    background: var(--color-navy);
    color: var(--color-white);
    border-color: var(--color-navy);
  }
  .btn-primary:hover {
    background: var(--color-navy-light);
    border-color: var(--color-navy-light);
    box-shadow: var(--shadow-md);
  }

  .btn-gold {
    background: var(--c-accent);
    color: var(--color-white);
    border-color: var(--c-accent);
  }
  .btn-gold:hover {
    background: var(--c-accent-hover);
    border-color: var(--c-accent-hover);
    box-shadow: var(--shadow-md);
  }

  .btn-outline-navy {
    background: transparent;
    color: var(--color-navy);
    border-color: var(--color-navy);
  }
  .btn-outline-navy:hover {
    background: var(--color-navy);
    color: var(--color-white);
  }

  .btn-outline-gold {
    background: transparent;
    color: var(--c-accent);
    border-color: var(--c-accent);
  }
  .btn-outline-gold:hover {
    background: var(--c-accent);
    color: var(--color-white);
  }

  /* ── Play button ──────────────────────────────────────── */
  .btn-play {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    color: var(--color-navy);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: color var(--dur-fast);
  }
  .btn-play:hover { color: var(--c-accent); }

  .btn-play__icon {
    width: 44px;
    height: 44px;
    border: 2px solid currentColor;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
  }
  .btn-play:hover .btn-play__icon {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: white;
  }

  /* ── Arrow CTA link ───────────────────────────────────── */
  .cta-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--c-accent);
    transition: gap var(--dur-fast);
  }
  .cta-link:hover { gap: var(--sp-3); }
  .cta-link svg { flex-shrink: 0; }
}

/* ── View Transitions ─────────────────────────────────────── */
@layer overrides {
  @media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) {
      animation: 180ms ease-out both vt-fade-out;
    }
    ::view-transition-new(root) {
      animation: 280ms var(--ease-out) both vt-fade-in;
    }
    ::view-transition-old(main-content) {
      animation: 180ms ease-out both vt-slide-out;
    }
    ::view-transition-new(main-content) {
      animation: 280ms var(--ease-out) both vt-slide-in;
    }
  }

  @keyframes vt-fade-in  { from { opacity: 0; } to { opacity: 1; } }
  @keyframes vt-fade-out { from { opacity: 1; } to { opacity: 0; } }
  @keyframes vt-slide-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes vt-slide-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-8px); }
  }
}