/* ==========================================================================
   Animated logo intro — the real badge assembles itself, then the curtain parts.
   Pure CSS timeline (no JS needed to play it); theme.js only decides when to play / leave.
   ========================================================================== */
@layer sections {
  :root {
    --crust-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 30' preserveAspectRatio='none'%3E%3Cpath d='M0 30V16l22-9 21 11 27-14 24 12 31-15 20 11 29-13 26 14 33-16 22 12 28-11 24 13 32-15 25 12 30-13 21 12 27-14 23 11 33-12 24 14 28-15 22 12 31-10 21 13 26-14 23 11V30Z'/%3E%3C/svg%3E");
    --badge-silhouette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='46 1.5 101 77'%3E%3Cpath d='M96.5 7.2 140.9 22.4V57.6L96.5 72.8 52.1 57.6V22.4Z' fill='%23000'/%3E%3C/svg%3E");
  }

  .intro { position: fixed; inset: 0; z-index: var(--z-intro); display: none; background: transparent; cursor: progress; }
  .is-intro .intro { display: block; }
  html.is-intro, html.is-intro body { overflow: hidden; }

  /* two curtains meet in the middle with a torn "crust" edge */
  .intro__curtain { position: absolute; left: 0; right: 0; height: 50.4%; z-index: 1; background: var(--c-ink); transition: transform 1.05s var(--ease-in-out) 0.12s; will-change: transform; }
  .intro__curtain--top { top: 0; }
  .intro__curtain--bottom { bottom: 0; }
  .intro__curtain::after { content: ''; position: absolute; left: 0; right: 0; height: clamp(18px, 3vw, 34px); background: var(--c-ink); -webkit-mask: var(--crust-mask) 0 0 / 600px 100% repeat-x; mask: var(--crust-mask) 0 0 / 600px 100% repeat-x; }
  .intro__curtain--top::after { bottom: calc(-1 * clamp(17px, 3vw, 33px)); transform: scaleY(-1); }
  .intro__curtain--bottom::after { top: calc(-1 * clamp(17px, 3vw, 33px)); }
  .intro.is-out .intro__curtain--top { transform: translateY(-104%); }
  .intro.is-out .intro__curtain--bottom { transform: translateY(104%); }

  .intro__stage { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; gap: clamp(1rem, 2.4vw, 1.75rem); transition: opacity 0.45s var(--ease-out), transform 0.9s var(--ease-in-out); }
  .intro.is-out .intro__stage { opacity: 0; transform: scale(0.86) translateY(-1.5rem); }

  .intro__halo { position: absolute; width: min(120vw, 1100px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, rgb(217 164 65 / 0.34), rgb(217 164 65 / 0.1) 46%, transparent 72%); opacity: 0; transform: scale(0.5); animation: intro-halo 2.2s var(--ease-out) 0.2s forwards; }
  @keyframes intro-halo { to { opacity: 1; transform: scale(1); } }

  .intro__logo-wrap { position: relative; width: clamp(250px, 36vw, 450px); }
  .intro__logo { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 30px 60px rgb(0 0 0 / 0.55)); }
  /* a single diagonal shine, clipped to the hexagon */
  .intro__logo-wrap::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 34%, rgb(255 244 214 / 0.8) 50%, transparent 66%) 0 0 / 260% 100% no-repeat;
    background-position: 130% 0;
    -webkit-mask: var(--badge-silhouette) center / 100% 100% no-repeat; mask: var(--badge-silhouette) center / 100% 100% no-repeat;
    mix-blend-mode: soft-light; animation: intro-shine 1.1s var(--ease-in-out) 2.05s both;
  }
  @keyframes intro-shine { from { background-position: 130% 0; } to { background-position: -40% 0; } }

  .intro__tag { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.46em; text-transform: uppercase; color: var(--c-caramel); padding-left: 0.46em; opacity: 0; transform: translateY(10px); animation: intro-tag 0.9s var(--ease-out) 1.75s forwards; }
  @keyframes intro-tag { to { opacity: 1; transform: none; } }

  /* ---- the badge, part by part ---- */
  .intro .lb-hair, .intro .lb-frame { stroke-dasharray: 100; stroke-dashoffset: 100; animation: lb-draw 1.15s var(--ease-in-out) 0.2s both; }
  .intro .lb-frame { fill-opacity: 0; animation: lb-draw 1.15s var(--ease-in-out) 0.35s both, lb-fill 0.6s ease-out 1.05s both; }
  @keyframes lb-draw { to { stroke-dashoffset: 0; } }
  @keyframes lb-fill { to { fill-opacity: 1; } }

  .intro .lb-sky { opacity: 0; animation: lb-fade 0.7s ease-out 0.85s both; }
  .intro .lb-rays-wrap { transform-origin: 96.5px 35px; animation: lb-fan 1.5s var(--ease-out) 0.8s both; }
  @keyframes lb-fan { from { opacity: 0; transform: scale(0.15) rotate(-48deg); } to { opacity: 1; transform: none; } }
  .intro .lb-glow { opacity: 0; animation: lb-fade 1s ease-out 1.2s both; }
  .intro .lb-field { animation: lb-pour 1.05s var(--ease-out) 1s both; }
  @keyframes lb-pour { from { transform: translateY(38px); } to { transform: none; } }
  @keyframes lb-fade { to { opacity: 1; } }

  .intro .lb-ch { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; animation: lb-rise 0.8s var(--ease-out) both; animation-delay: calc(1.15s + var(--k, 0) * 0.085s); }
  .intro .lb-ch:nth-child(1) { --k: 0; } .intro .lb-ch:nth-child(2) { --k: 1; } .intro .lb-ch:nth-child(3) { --k: 2; }
  .intro .lb-ch:nth-child(4) { --k: 3; } .intro .lb-ch:nth-child(5) { --k: 4; } .intro .lb-ch:nth-child(6) { --k: 4.6; }
  @keyframes lb-rise { from { opacity: 0; transform: translateY(9px) scale(0.86); } to { opacity: 1; transform: none; } }

  .intro .lb-band { transform-origin: 96.5px 40px; animation: lb-unfurl 0.9s var(--ease-out) 1.45s both; }
  @keyframes lb-unfurl { from { transform: scaleX(0); } to { transform: none; } }
  .intro .lb-tail-l { transform-origin: 66px 44px; animation: lb-tail-l 0.7s var(--ease-spring) 1.95s both; }
  .intro .lb-tail-r { transform-origin: 127px 44px; animation: lb-tail-r 0.7s var(--ease-spring) 1.95s both; }
  @keyframes lb-tail-l { from { opacity: 0; transform: translateX(14px) scaleX(0.2); } to { opacity: 1; transform: none; } }
  @keyframes lb-tail-r { from { opacity: 0; transform: translateX(-14px) scaleX(0.2); } to { opacity: 1; transform: none; } }
  .intro .lb-rtxt { clip-path: inset(-2% 100% -2% 0); animation: lb-type 0.9s var(--ease-in-out) 1.8s both; }
  @keyframes lb-type { to { clip-path: inset(-2% -1% -2% 0); } }

  .intro .lb-spoon-wrap { transform-origin: 97.2px 55.9px; animation: lb-spoon 1.1s var(--ease-spring) 1.85s both; }
  .intro .lb-fork-wrap { transform-origin: 97.2px 55.9px; animation: lb-fork 1.1s var(--ease-spring) 1.85s both; }
  @keyframes lb-spoon { from { opacity: 0; transform: rotate(-80deg) scale(0.5); } to { opacity: 1; transform: none; } }
  @keyframes lb-fork { from { opacity: 0; transform: rotate(80deg) scale(0.5); } to { opacity: 1; transform: none; } }
  .intro .lb-dot { transform-box: fill-box; transform-origin: center; animation: lb-pop 0.6s var(--ease-spring) 2.25s both; }
  @keyframes lb-pop { from { transform: scale(0); } to { transform: none; } }

  @media (prefers-reduced-motion: reduce) { .intro { display: none !important; } html.is-intro, html.is-intro body { overflow: visible; } }
}