/* ==========================================================================
   Hero (header-hero piece). Root: #hero.hr
   A short bordó band: the cream script logo, centred, with one quiet link
   under it, and the scalloped hem. A brand moment, not a full screen: the
   menu starts right below it on the first screen.
   The header bar above is bordó too while this panel is on screen, so the
   top edge here must stay flat --c-burgundy-700 (no seam under the bar).
   ========================================================================== */
#hero.hr {
  --hr-bg: var(--c-burgundy-700);
  --hr-ink: var(--c-cream-ink);
  --hr-ink-muted: rgba(251, 237, 230, .74);
  --hr-scallop: 12px;            /* radius of each scallop on the hem */
  position: relative;
  isolation: isolate;
  color: var(--hr-ink);
  background:
    radial-gradient(56% 44% at 50% 54%, rgba(155, 58, 69, .5), transparent 72%),
    linear-gradient(180deg, transparent 55%, rgba(46, 12, 16, .22)),
    var(--hr-bg);
  margin-bottom: var(--hr-scallop);
}
/* Paper grain, very faint: keeps the flat bordó from looking digital. */
#hero.hr::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .14; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Scalloped hem: bordó half-moons hanging into the cream page, like a pâtisserie awning.
   Same colour as the bottom of the panel (base + the bottom shade). */
#hero.hr::after {
  --hr-hem: color-mix(in srgb, var(--hr-bg) 78%, #2E0C10);
  content: ""; position: absolute; left: 0; right: 0; top: 100%;
  height: var(--hr-scallop);
  background: radial-gradient(circle at 50% 0, var(--hr-hem) calc(var(--hr-scallop) - .5px), transparent var(--hr-scallop)) 50% 0 / calc(var(--hr-scallop) * 2) 100% repeat-x;
  pointer-events: none;
}

#hero .hr-inner {
  display: flex; flex-direction: column; align-items: center;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-8) max(var(--gutter), var(--safe-left)) var(--space-8) max(var(--gutter), var(--safe-right));
  text-align: center;
}

/* Logo lockup: the one thing on the band, so it is drawn larger. */
#hero .hr-title {
  display: flex; flex-direction: column; align-items: center;
  color: var(--hr-ink);
}
#hero .hr-logo { display: block; width: min(72vw, 288px); height: auto; aspect-ratio: 575 / 124.3; overflow: visible; }
#hero .hr-cakes {
  display: block;
  margin-top: 8px;
  padding-left: .44em; /* optically recentre the tracked caps */
  font: var(--fw-regular) .8125rem/1 var(--font-sans);
  letter-spacing: .44em;
  text-transform: uppercase;
  color: var(--hr-ink);
}


/* Tablet and desktop: the same centred lockup, larger, in a taller band. */
@media (min-width: 768px) {
  #hero.hr { --hr-scallop: 14px; }
  #hero .hr-inner { padding-block: clamp(var(--space-9), 9vh, var(--space-12)) clamp(var(--space-8), 7vh, var(--space-11)); }
  #hero .hr-logo { width: clamp(340px, 34vw, 480px); }
  #hero .hr-cakes { margin-top: 12px; font-size: clamp(.875rem, .55rem + .6vw, 1rem); }
}

/* ==========================================================================
   Animation #1: brand entrance (~1.5s, plays once).
   The script writes itself: a round pen traces the logo's centrelines in
   writing order (C-h, a-b, e-l, a) inside an SVG mask over the real wordmark,
   at an even hand speed with tiny pen lifts. CAKES settles its tracking as the
   last letter lands. Only opacity/transform on real boxes
   (no pseudo-element frames), so nothing rasterises as a stray rectangle.
   JS only adds .is-entering when motion is welcome,
   and the final state is the natural state.
   ========================================================================== */
#hero .hr-pen path { stroke-dasharray: 1 1.02; stroke-dashoffset: 0; }
#hero.is-entering .hr-pen path {
  stroke-dashoffset: 1;
  animation: hr-pen var(--hr-pen-d) cubic-bezier(.3, .1, .55, .95) var(--hr-pen-t) forwards;
}
#hero.is-entering .hr-cakes { animation: hr-cakes .6s var(--ease-out) .9s both; }

/* Held on the first frame until the logo asset and fonts are in (see hero.js). */
#hero.is-waiting *, #hero.is-waiting .hr-pen path { animation-play-state: paused !important; }

@keyframes hr-pen { to { stroke-dashoffset: 0; } }
@keyframes hr-cakes { from { opacity: 0; letter-spacing: .7em; } }
@keyframes hr-up { from { opacity: 0; transform: translateY(12px); } }

/* Belt and braces: JS never starts the entrance under reduced motion. */
@media (prefers-reduced-motion: reduce) {
  #hero.is-entering * { animation: none !important; }
  #hero.is-entering .hr-pen path { stroke-dashoffset: 0; }
}
html[data-reduced-motion] #hero.is-entering * { animation: none !important; }
html[data-reduced-motion] #hero.is-entering .hr-pen path { stroke-dashoffset: 0; }