/* ─────────────────────────────────────────────────────────────────────────────
   Shams Al-Duha — design system
   Warm morning light: crimson from the logo, sun gold, cream grounds.
   Contrast (on --bg #FFFBF6): ink 15.9 · ink-2 6.6 · red 5.1 · red-strong 6.7
   white on red-strong 6.9 · gold-deep 5.2. Brand gold is decoration only.
   ───────────────────────────────────────────────────────────────────────────── */

/* Later layers win. Reveal motion sits last so a component's own transition
   never cancels its entrance. */
@layer tokens, base, components, layout, shared, sections, motion;

@property --magic-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --btn-bg {
  syntax: "<color>";
  inherits: true;
  initial-value: #B5121C;
}

@layer tokens {
  :root {
    color-scheme: light;

    /* Colour */
    --bg:          #FFFBF6;
    --bg-deep:     #FBF2E7;
    --ink:         #2B1D1B;
    --ink-2:       #6B5752;
    --white:       #FFFFFF;

    --red:         #D7141F;  /* brand: display text, icons, fills */
    --red-strong:  #B5121C;  /* small red text, filled buttons */
    --red-deeper:  #950E17;  /* hover / pressed */
    --red-soft:    #FFF0EB;
    --red-border:  #F5C6BD;
    --red-mist:    #FFF7F3;

    --gold:        #E9B23A;
    --gold-bright: #F7D14A;
    --gold-deep:   #8E620C;  /* gold text on light grounds */
    --gold-soft:   #FFF4D6;
    --gold-border: #F1DB9E;

    --line:        rgb(60 30 24 / 0.09);
    --line-strong: rgb(60 30 24 / 0.16);

    /* Glass */
    --glass:        linear-gradient(140deg, rgb(255 255 255 / 0.8), rgb(255 255 255 / 0.52));
    --glass-solid:  rgb(255 255 255 / 0.78);
    --glass-border: rgb(255 255 255 / 0.82);
    --glass-blur:   saturate(160%) blur(18px);

    /* Ambient light */
    --glow-red:  rgb(215 20 31 / 0.09);
    --glow-gold: rgb(247 209 74 / 0.3);

    /* Marker swash, drawn under highlighted words */
    --highlight-ink: rgb(247 209 74 / 0.6);
    --mark-highlight: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 80' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='d' x='-3%25' y='-20%25' width='106%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6 0.05' numOctaves='2' seed='11' result='g'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='g' scale='7' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23d)'%3E%3Cpath d='M9 14 C 90 7 200 5 306 6 C 408 7 500 4 590 9 C 597 28 596 52 590 68 C 492 73 392 71 292 72 C 192 74 92 76 12 72 C 4 56 3 32 9 14 Z' opacity='0.92'/%3E%3Cpath d='M24 30 C 150 24 300 27 462 23 C 520 22 562 24 588 28 L 586 50 C 470 55 300 52 150 57 C 92 58 48 59 22 57 Z' opacity='0.35'/%3E%3C/g%3E%3C/svg%3E");

    /* Type */
    --font-display: "El Messiri", "El Messiri Fallback Win", "El Messiri Fallback Android", serif;
    --font-body:    "Readex Pro", "Readex Pro Fallback Win", "Readex Pro Fallback Android", system-ui, sans-serif;

    --fs-display: clamp(2.55rem, 1.45rem + 4.4vw, 5.1rem);
    --fs-h2:      clamp(1.95rem, 1.4rem + 2.1vw, 3.15rem);
    --fs-h3:      clamp(1.2rem, 1.08rem + 0.5vw, 1.45rem);
    --fs-lead:    clamp(1.08rem, 1rem + 0.35vw, 1.28rem);
    --fs-body:    1.0625rem;
    --fs-small:   0.9375rem;
    --fs-caption: 0.8125rem;

    --lh-tight: 1.22;
    --lh-heading: 1.3;
    --lh-body: 1.9;

    /* Space — 4px rhythm */
    --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
    --s-5: 1.25rem;  --s-6: 1.5rem;   --s-8: 2rem;     --s-10: 2.5rem;
    --s-12: 3rem;    --s-16: 4rem;
    --section-y: clamp(4.5rem, 3rem + 6vw, 8.5rem);

    /* Layout */
    --container: 1200px;
    --gutter: clamp(1.25rem, 0.6rem + 3vw, 3rem);
    --header-h: 76px;
    --hero-foot: clamp(4.5rem, 3rem + 3vw, 6rem);

    /* Radius */
    --r-xs: 10px;
    --r-sm: 14px;
    --r-md: 22px;
    --r-lg: 30px;
    --r-xl: 44px;
    --r-pill: 999px;

    /* Shadow — tinted toward the brand so elevation never looks grey */
    --shadow-sm: 0 1px 2px rgb(60 30 24 / 0.05), 0 4px 14px -6px rgb(120 32 20 / 0.12);
    --shadow-md: 0 2px 4px rgb(60 30 24 / 0.04), 0 18px 40px -22px rgb(120 32 20 / 0.26);
    --shadow-lg: 0 3px 8px rgb(60 30 24 / 0.05), 0 36px 80px -36px rgb(120 32 20 / 0.36);
    --shadow-inset: inset 0 1px 0 rgb(255 255 255 / 0.85);
    --shadow-red:       0 10px 24px -12px rgb(181 18 28 / 0.55);
    --shadow-red-hover: 0 16px 32px -14px rgb(149 14 23 / 0.6);

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --dur-fast: 180ms;
    --dur-base: 420ms;
    --dur-slow: 900ms;
  }
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
@layer base {
  @font-face {
    font-family: "Readex Pro";
    src: url("../fonts/readex-pro.woff2") format("woff2");
    font-weight: 300 600;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "El Messiri";
    src: url("../fonts/el-messiri.woff2") format("woff2");
    font-weight: 500 700;
    font-style: normal;
    font-display: swap;
  }
  /* Metric-matched fallbacks so the late font swap never shifts the layout. */
  @font-face {
    font-family: "Readex Pro Fallback Win";
    src: local("Segoe UI"), local("SegoeUI");
    size-adjust: 106.01%;
    ascent-override: 94.33%;
    descent-override: 23.58%;
    line-gap-override: 0%;
  }
  @font-face {
    font-family: "Readex Pro Fallback Android";
    src: local("Noto Sans Arabic"), local("NotoSansArabic-Regular");
    size-adjust: 109.23%;
    ascent-override: 91.55%;
    descent-override: 22.89%;
    line-gap-override: 0%;
  }
  @font-face {
    font-family: "El Messiri Fallback Win";
    src: local("Segoe UI Bold"), local("SegoeUI-Bold");
    size-adjust: 102.88%;
    ascent-override: 99.05%;
    descent-override: 52.88%;
    line-gap-override: 0%;
  }
  @font-face {
    font-family: "El Messiri Fallback Android";
    src: local("Noto Sans Arabic Bold"), local("NotoSansArabic-Bold");
    size-adjust: 98.37%;
    ascent-override: 103.58%;
    descent-override: 55.3%;
    line-gap-override: 0%;
  }

  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  [hidden] { display: none !important; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + var(--s-6));
    interpolate-size: allow-keywords;
    overflow-x: clip;
  }
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  body {
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 400;
    line-height: var(--lh-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }

  img, picture, svg, video { display: block; max-width: 100%; }
  img { height: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; padding: 0; }
  blockquote, figure { margin: 0; }

  /* Arabic never takes letter-spacing: it breaks the joins between letters. */
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--lh-heading);
    color: var(--ink);
    text-wrap: balance;
  }
  p { text-wrap: pretty; }

  .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }
  .num { font-variant-numeric: tabular-nums; }

  .container {
    width: min(100% - (var(--gutter) * 2), var(--container));
    margin-inline: auto;
  }
  .section { padding-block: var(--section-y); position: relative; }

  /* Kept in the layout (not display:none) so gradients inside symbols paint. */
  .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

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

  .skip-link {
    position: fixed;
    inset-inline-start: var(--s-4);
    top: var(--s-4);
    z-index: 100;
    padding: var(--s-3) var(--s-5);
    border-radius: var(--r-pill);
    background: var(--ink);
    color: var(--white);
    font-weight: 500;
    transform: translateY(-160%);
    transition: transform var(--dur-base) var(--ease-out);
  }
  .skip-link:focus-visible { transform: translateY(0); }

  :focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 3px;
    border-radius: var(--r-xs);
  }

  ::selection { background: var(--gold-soft); color: var(--red-deeper); }
}

/* ── Components ────────────────────────────────────────────────────────────── */
@layer components {
  /* Buttons */
  .btn {
    --btn-bg: var(--red-strong);
    --btn-fg: var(--white);
    --btn-border: transparent;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: 3.25rem;
    padding: 0 var(--s-6);
    border-radius: var(--r-pill);
    border: 1px solid var(--btn-border);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-weight: 500;
    font-size: var(--fs-body);
    line-height: 1;
    white-space: nowrap;
    isolation: isolate;
    transition:
      transform var(--dur-base) var(--ease-out),
      background-color var(--dur-fast) linear,
      border-color var(--dur-fast) linear,
      box-shadow var(--dur-base) var(--ease-out),
      --btn-bg var(--dur-fast) linear;
  }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0) scale(0.98); transition-duration: var(--dur-fast); }

  .btn--primary { box-shadow: var(--shadow-red); }
  .btn--primary:hover { --btn-bg: var(--red-deeper); box-shadow: var(--shadow-red-hover); }

  .btn--ghost {
    --btn-bg: rgb(255 255 255 / 0.6);
    --btn-fg: var(--ink);
    --btn-border: var(--line-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
  }
  .btn--ghost:hover { --btn-bg: var(--white); --btn-border: var(--red-border); }

  .btn--sm { min-height: 2.6rem; padding: 0 var(--s-5); font-size: var(--fs-small); }

  .btn__icon { width: 1.15em; height: 1.15em; flex: none; }
  /* Arrows point to the end of the reading direction: left in RTL. */
  .btn__icon--arrow { transition: transform var(--dur-base) var(--ease-out); }
  .btn:hover .btn__icon--arrow { transform: translateX(-3px); }

  /* Magic button: a red-and-gold border orbits the pill, a sheen crosses its
     face every few seconds and three sparkles twinkle. */
  .btn--magic {
    --btn-border: transparent;
    overflow: hidden;
    border-width: 1.5px;
    background:
      linear-gradient(var(--btn-bg), var(--btn-bg)) padding-box,
      conic-gradient(from var(--magic-angle), var(--gold-border), var(--gold-bright), var(--red), var(--red-deeper), var(--gold-bright), var(--gold-border)) border-box;
    animation: magic-orbit 5s linear infinite;
  }
  .btn--magic::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(100deg, transparent 32%, rgb(255 255 255 / 0.45) 48%, rgb(255 240 190 / 0.14) 56%, transparent 68%);
    translate: 120% 0;
    animation: magic-sheen 5.5s var(--ease-out) 1.2s infinite;
    pointer-events: none;
  }
  .btn--magic:hover { box-shadow: 0 0 0 5px rgb(247 209 74 / 0.28), var(--shadow-red-hover); }
  .btn--magic::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(100deg, transparent 32%, rgb(255 255 255 / 0.5) 48%, transparent 68%);
    translate: 120% 0;
    pointer-events: none;
  }
  .btn--magic:hover::before { translate: -120% 0; transition: translate 0.9s var(--ease-out); }

  .btn__sparkles { fill: var(--gold-bright); overflow: visible; }
  .btn__sparkles .spark {
    transform-box: fill-box;
    transform-origin: center;
    animation: spark-twinkle 2.8s ease-in-out infinite;
  }
  .btn__sparkles .spark--b { animation-delay: 0.6s; }
  .btn__sparkles .spark--c { animation-delay: 1.2s; }
  .btn--magic:hover .spark { animation-duration: 0.9s; }

  @keyframes magic-orbit { to { --magic-angle: 360deg; } }
  @keyframes magic-sheen { 0% { translate: 120% 0; } 24%, 100% { translate: -120% 0; } }
  @keyframes spark-twinkle {
    0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
    50%      { opacity: 0.35; transform: scale(0.5) rotate(45deg); }
  }

  /* Round icon button */
  .icon-btn {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--white);
    color: var(--ink);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast) linear, opacity var(--dur-base) linear;
  }
  .icon-btn:hover { transform: translateY(-2px); color: var(--red-strong); }
  .icon-btn svg { width: 1.2rem; height: 1.2rem; }

  /* Autoplay toggle with a countdown ring */
  .autoplay-toggle { position: relative; }
  .icon-btn .autoplay-toggle__ring {
    position: absolute;
    inset: -1px;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    rotate: -90deg;
    pointer-events: none;
  }
  .autoplay-toggle__ring circle {
    fill: none;
    stroke: var(--red);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
  }
  .autoplay-toggle.is-counting .autoplay-toggle__ring circle {
    animation: autoplay-count var(--autoplay-ms, 3000ms) linear forwards;
  }
  @keyframes autoplay-count { to { stroke-dashoffset: 0; } }
  .autoplay-toggle__icon--play,
  .autoplay-toggle[data-state="paused"] .autoplay-toggle__icon--pause { display: none; }
  .autoplay-toggle[data-state="paused"] .autoplay-toggle__icon--play { display: block; }

  /* Stickers */
  .sticker { display: block; pointer-events: none; user-select: none; }
  @keyframes sticker-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
  }
  @keyframes rays-spin { to { rotate: 360deg; } }

  /* Marker swash under a phrase; draws in from the start of the line. */
  .highlight { position: relative; z-index: 0; display: inline-block; white-space: nowrap; }
  .highlight::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: calc(var(--hl-baseline, 0.833em) - 0.44em);
    height: 0.6em;
    inset-inline: -0.16em -0.12em;
    background: var(--highlight-ink);
    -webkit-mask: var(--mark-highlight) center / 100% 100% no-repeat;
    mask: var(--mark-highlight) center / 100% 100% no-repeat;
    rotate: -0.8deg;
  }
  .is-revealed .highlight::before {
    animation: highlight-draw 0.8s var(--ease-out) 0.3s both;
  }
  @keyframes highlight-draw {
    from { clip-path: inset(0 0 0 100%); }
    to   { clip-path: inset(0 0 0 0); }
  }

  /* Eyebrow: a short rule and the label */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--red-strong);
  }
  .eyebrow::before {
    content: "";
    width: 1.6rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(to left, var(--red), var(--gold));
  }

  /* Chips */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    min-height: 1.75rem;
    padding: 0 var(--s-3);
    border-radius: var(--r-pill);
    background: var(--red-soft);
    color: var(--red-strong);
    font-size: var(--fs-caption);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
  }
  .chip--quiet { background: var(--bg-deep); color: var(--ink-2); }
  .chip--gold { background: var(--gold-soft); color: var(--gold-deep); box-shadow: inset 0 0 0 1px var(--gold-border); }
  .chip__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
  .chip__icon { width: 0.85rem; height: 0.85rem; color: var(--gold); }

  /* Section heading */
  .section-head {
    position: relative;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--s-8);
    margin-bottom: clamp(2.25rem, 1.5rem + 2.5vw, 3.75rem);
  }
  .section-head__text { max-width: 40rem; display: grid; gap: var(--s-3); justify-items: start; }
  .section-head__title { font-size: var(--fs-h2); line-height: var(--lh-tight); }
  .section-head__lead { color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.8; }
  @media (max-width: 900px) {
    .section-head { flex-direction: column; align-items: start; }
  }

  /* Text link whose underline draws from the start of the line */
  .text-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--red-strong);
    font-weight: 500;
    white-space: nowrap;
    background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
    transition: background-size var(--dur-base) var(--ease-out);
    padding-bottom: 2px;
  }
  .text-link:hover { background-size: 100% 1px; background-position: 100% 100%; }
  .text-link svg { width: 1.05em; height: 1.05em; transition: transform var(--dur-base) var(--ease-out); }
  .text-link:hover svg { transform: translateX(-3px); }

  /* Glass surface */
  .glass {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-inset), var(--shadow-md);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
  }

  /* Warm light that follows the pointer across interactive cards. */
  .glow { position: relative; overflow: hidden; }
  .glow::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
      radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgb(255 255 255 / 0.5), transparent 40%),
      radial-gradient(520px circle at var(--mx, 50%) var(--my, 0%), rgb(247 209 74 / 0.16), transparent 46%);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out);
    pointer-events: none;
  }
  @media (hover: hover) {
    .glow:hover::after { opacity: 1; }
  }

  /* Icon tile */
  .icon-tile {
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    flex: none;
    border-radius: var(--r-sm);
    background: var(--white);
    color: var(--red);
    box-shadow: var(--shadow-sm);
  }
  .icon-tile svg { width: 1.5rem; height: 1.5rem; }
}

/* ── Layout ────────────────────────────────────────────────────────────────── */
@layer layout {
  /* Header: a floating glass island. JS adds
       .is-scrolled — after the first 24px (denser glass)
       .is-compact  — once reading is under way (narrower, slimmer)
     and writes --progress (0–1) for the reading hairline. */
  .site-header {
    position: fixed;
    inset: var(--s-3) 0 auto;
    z-index: 50;
    pointer-events: none;
  }

  .site-header__bar {
    position: relative;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-6);
    height: var(--header-h);
    max-width: 100%;
    margin-inline: auto;
    padding-inline: var(--s-4) var(--s-3);
    border-radius: var(--r-pill);
    background-color: rgb(255 255 255 / 0.5);
    border: 1px solid rgb(255 255 255 / 0.78);
    box-shadow: var(--shadow-inset), 0 12px 30px -20px rgb(120 32 20 / 0.3);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    transition:
      height var(--dur-slow) var(--ease-out),
      max-width var(--dur-slow) var(--ease-out),
      background-color var(--dur-base) linear,
      box-shadow var(--dur-base) linear;
  }
  .site-header.is-scrolled .site-header__bar {
    background-color: rgb(255 255 255 / 0.76);
    box-shadow: var(--shadow-inset), var(--shadow-md);
  }
  .site-header.is-compact .site-header__bar { height: 62px; max-width: 1060px; }
  /* The slimmer island keeps only the sign-in icon, as narrower bars already do. */
  .site-header.is-compact .header-login { width: 2.6rem; padding: 0; }
  .site-header.is-compact .header-login__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .site-header.is-compact .brand__name { font-size: 1.25rem; }
  .site-header.is-compact .brand__sub { opacity: 0; max-height: 0; }
  .site-header.is-compact .brand__logo { width: 2.5rem; height: 2.5rem; }

  .site-header__progress {
    position: absolute;
    inset: auto var(--s-8) -1px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(to left, var(--red), var(--gold-bright));
    transform-origin: right;
    transform: scaleX(var(--progress, 0));
    opacity: 0;
    transition: opacity var(--dur-base) linear;
  }
  .site-header.is-scrolled .site-header__progress { opacity: 0.9; }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    color: var(--ink);
    white-space: nowrap;
  }
  .brand__logo {
    width: 3rem;
    height: 3rem;
    flex: none;
    border-radius: 50%;
    background: var(--white);
    box-shadow: 0 0 0 2px var(--white), 0 8px 18px -8px rgb(181 18 28 / 0.55);
    transition: width var(--dur-slow) var(--ease-out), height var(--dur-slow) var(--ease-out);
  }
  .brand__text { display: grid; line-height: 1.2; }
  .brand__name {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 700;
    transition: font-size var(--dur-slow) var(--ease-out);
  }
  .brand__sub {
    max-height: 1.4em;
    overflow: hidden;
    color: var(--ink-2);
    font-size: 0.75rem;
    font-weight: 500;
    transition: opacity var(--dur-base) linear, max-height var(--dur-slow) var(--ease-out);
  }

  /* Navigation: a soft pill glides to the link being pointed at and settles
     on the section being read (JS sets --pill-*). */
  .site-nav { position: relative; display: flex; align-items: center; gap: var(--s-1); }
  .site-nav__pill {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--pill-w, 0);
    height: var(--pill-h, 0);
    translate: var(--pill-x, 0) var(--pill-y, 0);
    border-radius: var(--r-pill);
    background: var(--red-soft);
    box-shadow: inset 0 0 0 1px rgb(245 198 189 / 0.75);
    opacity: var(--pill-o, 0);
    transition:
      translate var(--dur-base) var(--ease-out),
      width var(--dur-base) var(--ease-out),
      opacity var(--dur-fast) linear;
  }
  .site-nav__pill.is-instant { transition: none; }
  .site-nav a {
    position: relative; /* paints above the pill */
    padding: var(--s-2) var(--s-3);
    white-space: nowrap;
    border-radius: var(--r-pill);
    color: var(--ink-2);
    font-size: var(--fs-small);
    font-weight: 500;
    transition: color var(--dur-fast) linear;
  }
  .site-nav a:hover { color: var(--ink); }
  .site-nav a[aria-current] { color: var(--red-strong); }
  .site-nav:not(.has-pill) a[aria-current="page"] { background: var(--red-soft); }

  .site-header__actions { display: flex; align-items: center; gap: var(--s-2); }
  .menu-toggle { display: none; }
  .header-login .btn__icon { width: 1.05rem; height: 1.05rem; }
  /* On narrower bars the sign-in link keeps only its icon. */
  @media (max-width: 1400px) {
    .header-login { width: 2.6rem; padding: 0; }
    .header-login__label {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }

  /* Mobile menu */
  .mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    align-content: start;
    gap: var(--s-8);
    padding: calc(var(--header-h) + var(--s-6)) var(--gutter) var(--s-8);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgb(255 251 246 / 0.88);
    backdrop-filter: saturate(150%) blur(24px);
    -webkit-backdrop-filter: saturate(150%) blur(24px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
  }
  .mobile-menu.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
  html.menu-open { overflow: hidden; }
  .mobile-menu__links { display: grid; gap: var(--s-2); }
  .mobile-menu__links a {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3.6svh, 2rem);
    font-weight: 600;
    padding-block: clamp(0.2rem, 0.8svh, 0.5rem);
    border-bottom: 1px solid var(--line);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-out), color var(--dur-fast) linear;
    transition-delay: calc(var(--i, 0) * 60ms);
  }
  .mobile-menu__links a:hover { color: var(--red-strong); }
  .mobile-menu__links a[aria-current="page"] { color: var(--red-strong); border-bottom-color: var(--red-border); }
  .mobile-menu.is-open .mobile-menu__links a { opacity: 1; transform: none; }
  .mobile-menu__close { position: absolute; top: calc(var(--s-3) + 14px); inset-inline-end: calc(var(--gutter) + var(--s-2)); }

  @media (max-width: 1100px) {
    .site-nav { display: none; }
    .menu-toggle { display: grid; }
  }
  @media (max-width: 900px) {
    :root { --header-h: 64px; }
    .site-header__bar { padding-inline: var(--s-3) var(--s-2); height: 64px; }
    .site-header.is-compact .site-header__bar { height: 58px; }
    .brand__logo { width: 2.6rem; height: 2.6rem; }
    .brand__name { font-size: 1.3rem; }
  }
  @media (max-width: 480px) {
    .site-header__actions .btn { display: none; }
    .brand__sub { font-size: 0.7rem; }
  }

  /* Ambient light behind glass */
  .ambient {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(closest-side at var(--glow-a, 20% 40%), var(--glow-gold), transparent),
      radial-gradient(closest-side at var(--glow-b, 80% 60%), var(--glow-red), transparent);
  }

  /* Footer */
  .site-footer {
    position: relative;
    padding-block: var(--s-16) calc(var(--s-8) + 3.6rem + clamp(1rem, 2.4vw, 1.75rem));
    background: var(--bg-deep);
  }
  .site-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(to left, var(--red), var(--gold-bright) 50%, var(--red));
  }
  .site-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.2fr;
    gap: var(--s-12);
  }
  .site-footer__about { display: grid; gap: var(--s-4); align-content: start; justify-items: start; max-width: 26rem; }
  .site-footer__about p { color: var(--ink-2); }
  .site-footer .brand__sub { direction: ltr; text-align: end; }
  .site-footer__title { font-size: 1.1rem; margin-bottom: var(--s-4); }
  .site-footer__list { display: grid; gap: var(--s-2); justify-items: start; }
  .site-footer__list a { color: var(--ink-2); transition: color var(--dur-fast) linear; }
  .site-footer__list a:hover { color: var(--red-strong); }
  .site-footer__note { color: var(--ink-2); }

  .social { display: flex; gap: var(--s-2); }
  .social a {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--white);
    color: var(--ink-2);
    border: 1px solid var(--line);
    transition: color var(--dur-fast) linear, transform var(--dur-base) var(--ease-out), border-color var(--dur-fast) linear;
  }
  .social a:hover { color: var(--red-strong); border-color: var(--red-border); transform: translateY(-2px); }
  .social svg { width: 1.2rem; height: 1.2rem; }

  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
    margin-top: var(--s-12);
    padding-top: var(--s-6);
    border-top: 1px solid var(--line);
    color: var(--ink-2);
    font-size: var(--fs-small);
  }
  .site-footer__motto { font-family: var(--font-display); font-weight: 600; color: var(--red-strong); }

  @media (max-width: 900px) {
    .site-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-10); }
    .site-footer__about { grid-column: 1 / -1; }
  }
  @media (max-width: 560px) {
    .site-footer__grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 900px) {
    .site-footer__list { gap: 0; }
    .site-footer__list a { display: inline-block; padding-block: 0.5rem; }
  }

  /* Floating WhatsApp button, shown once the hero is behind the reader */
  .fab {
    position: fixed;
    z-index: 40;
    inset-block-end: clamp(1rem, 2.4vw, 1.75rem);
    inset-inline-end: clamp(1rem, 2.4vw, 1.75rem);
    display: grid;
    place-items: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    background: #1FA855;
    color: var(--white);
    box-shadow: 0 14px 30px -12px rgb(20 120 60 / 0.65), inset 0 1px 0 rgb(255 255 255 / 0.35);
    opacity: 0;
    visibility: hidden;
    translate: 0 14px;
    transition:
      opacity var(--dur-base) var(--ease-out),
      translate var(--dur-slow) var(--ease-out),
      transform var(--dur-base) var(--ease-out),
      visibility 0s linear var(--dur-base);
  }
  .fab::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 0 rgb(31 168 85 / 0.45);
    animation: fab-pulse 2.8s var(--ease-out) infinite;
  }
  .fab svg { width: 1.7rem; height: 1.7rem; }
  .fab:hover { transform: translateY(-3px) scale(1.04); }
  html.is-past-hero .fab { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
  html.menu-open .fab { opacity: 0; visibility: hidden; }
  @keyframes fab-pulse {
    0%   { box-shadow: 0 0 0 0 rgb(31 168 85 / 0.45); }
    70%, 100% { box-shadow: 0 0 0 16px rgb(31 168 85 / 0); }
  }
}

/* ── Motion: first-screen entrance and scroll reveal ───────────────────────── */
@layer motion {
  /* Pure CSS, so the hero never waits for JavaScript. */
  @keyframes enter-rise { from { opacity: 0; translate: 0 22px; } }
  @keyframes enter-soft { from { opacity: 0; translate: 0 14px; filter: blur(8px); } }
  @keyframes enter-pop  { from { opacity: 0; scale: 0.9; filter: blur(6px); } }
  [data-enter] { animation: enter-rise 0.7s var(--ease-out) backwards; animation-delay: calc(40ms + var(--i, 0) * 70ms); }
  [data-enter="soft"] { animation-name: enter-soft; }
  [data-enter="pop"] { animation-name: enter-pop; animation-duration: 1s; }

  /* Hidden only while the script is running, so the page reads without it. */
  .js [data-reveal] {
    opacity: 0;
    translate: 0 26px;
    transition:
      opacity 0.9s var(--ease-out),
      translate 1.1s var(--ease-out),
      filter 1.1s var(--ease-out);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .js [data-reveal="soft"] { filter: blur(8px); }
  .js [data-reveal].is-revealed { opacity: 1; translate: 0 0; filter: blur(0); }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js [data-reveal] { opacity: 1; translate: none; filter: none; transition: none; }
    [data-enter] { animation: none; }
    .btn--magic, .btn--magic::after, .btn__sparkles .spark, .sticker, .fab::before,
    .is-revealed .highlight::before { animation: none; }
    .btn--magic::after { opacity: 0; }
    .btn--magic::before { display: none; }
    .btn, .icon-btn, .text-link, .text-link svg, .social a, .fab,
    .site-header__bar, .brand__logo, .brand__name, .brand__sub, .site-nav__pill,
    .mobile-menu, .mobile-menu__links a, .glow::after { transition-duration: 0.01ms; }
  }
}