/**
 * Kohapeal hoitavad kirjatüübid (varem fonts.googleapis.com).
 *
 * Miks: Google'i CSS blokeeris renderdust ja fondi vahetus nihutas hero't
 * (CLS). Oma domeenilt tulevad failid `preload`-iga ette ära ning külastaja
 * IP ei lähe kolmandale osapoolele (GDPR).
 *
 * Failid on Google Fontsi ametlikud woff2-alamhulgad (latin + latin-ext);
 * vietnamese jäeti välja, seda siin ei vajata.
 */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/bricolage-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: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/bricolage-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;
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/figtree-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: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/figtree-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;
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-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: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-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;
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-italic-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: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/instrument-serif-italic-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;
}
/* ── Disainimärgid ("BCirq Stuudio.dc.html") ───────────────────────────── */
  :root {
    --roosa: #df437f;
    /* Sama roosa, aga veidi sügavam — kasutada AINULT pindadel, millel on
       valge tekst (nupud, sildid). Valge #df437f peal annab kontrasti 4,0;
       WCAG AA nõuab 4,5. #d13a75 annab 4,59, brändi ilme jääb samaks. */
    --roosa-nupp: #d13a75;
    --roosa-tume: #c22f68;
    --roosa-hele: #fbeef4;
    --roosa-kesk: #ef9bbc;
    --ploom: #47132f;
    --tekst: #3a1f2b;
    --tekst-hele: #7a5566;
    /* Kontrast roosal taustal (#fbeef4) 4,77:1 — WCAG AA nõuab 4,5:1. */
    --tekst-muted: #9e5273;
    --piir: #f5d9e6;
    --jalus-tekst: #c98aa8;
    --jalus-hele: #e9c3d5;

    --pealkiri: 'Bricolage Grotesque', system-ui, sans-serif;
    --serif: 'Instrument Serif', Georgia, serif;
    --keha: 'Figtree', system-ui, sans-serif;

    --laius: 1200px;
    --sektsioon: 96px;
  }

  * {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    /* Kleepuv navi katab ankrusihtmärgid, kui seda ei kompenseerita. */
    scroll-padding-top: 84px;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }

  body {
    margin: 0;
    font-family: var(--keha);
    color: var(--tekst);
    background: #fff;
    -webkit-font-smoothing: antialiased;
  }

  a {
    color: var(--roosa);
    text-decoration: none;
  }

  a:hover {
    color: var(--roosa-tume);
  }

  img {
    max-width: 100%;
  }

  ::selection {
    background: var(--roosa-kesk);
    color: var(--tekst);
  }

  :focus-visible {
    outline: 3px solid var(--roosa);
    outline-offset: 2px;
  }

  /* ── Korduvad primitiivid ──────────────────────────────────────────────── */
  .konteiner {
    max-width: var(--laius);
    margin: 0 auto;
    padding-inline: 24px;
  }

  .sektsioon {
    padding-block: var(--sektsioon);
  }

  .silt {
    color: var(--roosa);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
  }

  h1,
  h2,
  h3 {
    font-family: var(--pealkiri);
  }

  h2.pealkiri {
    font-weight: 800;
    font-size: clamp(32px, 4.5vw, 52px);
    letter-spacing: -1.5px;
    margin: 0 0 12px;
    text-wrap: balance;
  }

  .sissejuhatus {
    font-size: 19px;
    line-height: 1.6;
    color: var(--tekst-hele);
    max-width: 62ch;
    margin: 0 0 48px;
    text-wrap: pretty;
  }

  .nupp {
    display: inline-block;
    background: var(--roosa-nupp);
    color: #fff;
    font-weight: 700;
    font-size: 17px;
    padding: 16px 34px;
    border-radius: 99px;
    border: none;
    cursor: pointer;
    font-family: var(--keha);
    box-shadow: 0 8px 24px rgb(223 67 127 / 0.35);
    transition:
      background 0.18s ease,
      transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.18s ease;
  }

  .nupp:hover {
    background: var(--roosa-tume);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgb(223 67 127 / 0.42);
  }

  .nupp:active {
    transform: translateY(0);
    box-shadow: 0 6px 16px rgb(223 67 127 / 0.35);
  }

  .nupp--kontuur {
    background: #fff;
    border: 2px solid var(--roosa);
    color: var(--roosa);
    box-shadow: none;
  }

  .nupp--kontuur:hover {
    background: var(--roosa-nupp);
    color: #fff;
  }

  .keskel {
    display: flex;
    justify-content: center;
    margin-top: 44px;
  }

  /* ── Vormiväljad (kontaktivorm + registreerimismodaal) ─────────────────── */
  input[type='text'],
  input[type='email'],
  input[type='tel'],
  input[type='date'],
  select,
  textarea {
    min-width: 0;
    width: 100%;
    padding: 13px 16px;
    border-radius: 14px;
    border: 1.5px solid var(--roosa-kesk);
    background: #fff;
    font-family: var(--keha);
    font-size: 16px;
    color: var(--tekst);
  }

  textarea {
    resize: vertical;
  }

  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    outline: none;
    border-color: var(--roosa);
    box-shadow: 0 0 0 3px rgb(223 67 127 / 0.2);
  }

  [hidden] {
    display: none !important;
  }

  /* ── Animatsioonid ─────────────────────────────────────────────────────
     `.ilmu` = element ilmub kerimisel. Peidetud olek kehtib ainult siis, kui
     JS on olemas (html.js) ja kasutaja pole liikumist keelanud — muidu on
     sisu kohe nähtaval. `--viide` annab ruudustikes astmelise viivituse. */
  @media (prefers-reduced-motion: no-preference) {
    .js .ilmu {
      opacity: 0;
      transform: translateY(20px);
      transition:
        opacity 0.55s ease,
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
      transition-delay: var(--viide, 0ms);
      will-change: opacity, transform;
    }

    .js .ilmu.näha {
      opacity: 1;
      transform: none;
      will-change: auto;
    }

    /* Lehe avanedes: hero tuleb sisse ilma kerimist ootamata.
       `h1` jääb meelega välja — see on lehe LCP-element ja sissetulek
       lükkaks mõõdetud LCP ~1,1 sekundini. */
    .js .tervitus > *:not(h1) {
      animation: tõusePeale 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
      animation-delay: var(--viide, 0ms);
    }

    /* Hero-pilt tuleb sisse ilma viivituseta ja kiiresti: mobiilis on just
       tema lehe LCP-element ja pikk sissetulek lükkas mõõdetud LCP üle
       sekundi. Ainult hajumine — keyframe ei tohi kaldu raami transformi üle
       kirjutada, muidu hüppaks pilt animatsiooni lõpus tagasi. */
    .js .tervitus--hajub > * {
      animation: hajuSisse 0.3s ease both;
    }
  }

  @keyframes tõusePeale {
    from {
      opacity: 0;
      transform: translateY(22px);
    }
  }

  @keyframes hajuSisse {
    from {
      opacity: 0;
    }
  }

  /* Kaartide ühine hover-tõste. */
  .tõuse {
    transition:
      transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.25s ease;
  }

  .tõuse:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgb(58 31 43 / 0.14);
  }

  /* Pildi õrn suum kaardi kohal hõljudes. */
  .suumiraam {
    overflow: hidden;
  }

  .suumiraam img {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .tõuse:hover .suumiraam img {
    transform: scale(1.05);
  }

  @media (prefers-reduced-motion: reduce) {
    .tõuse,
    .suumiraam img {
      transition: none;
    }

    .tõuse:hover {
      transform: none;
    }

    .tõuse:hover .suumiraam img {
      transform: none;
    }
  }

  @media (max-width: 640px) {
    :root {
      --sektsioon: 64px;
    }
  }