/* Brand opening (CRM-served public sites). Served as a static file; see server/utils/brandOpening.ts.
   Mirrors website-app/views/components/_brand-open-head.ejs (the EJS renderer's copy). */
  /* Hallmark · component: brand opening · genre: tenant-neutral · theme: tenant tokens (by request: hallmark) · states: n/a (non-interactive) · contrast: tenant-driven · v2.0.0 */
  /* critique: a generic reveal can read templated; it earns its place by using the tenant's own logo and theme tokens, and flying that logo into the real header. */
  .brand-open {
    --bo-canvas: var(--theme-canvas-dark, #0a0a0f);
    --bo-surface: var(--theme-surface, #ffffff);
    --bo-accent: var(--theme-accent, #d4a574);
    --bo-ink: var(--theme-primary, #8b7355);
    --bo-muted: var(--theme-text-muted, #6b6b6b);
    --bo-shine: #ffffff;
    --bo-shade: #000000;
    --bo-font: var(--theme-font-heading, serif);
    /* Light veil (dark logos): the surface, a touch lifted in the middle and shaded at the edges. */
    --bo-veil: radial-gradient(ellipse at 50% 46%, color-mix(in srgb, var(--bo-surface) 88%, var(--bo-shine)) 0%, var(--bo-surface) 46%, color-mix(in srgb, var(--bo-surface) 92%, var(--bo-shade)) 100%);
    --bo-tag: var(--bo-muted);
    --bo-flare: var(--bo-accent);
  }
  /* Dark veil (light logos): the tenant's dark canvas, lit from the middle, like the original's navy. */
  .brand-open[data-veil="dark"] {
    --bo-veil: radial-gradient(ellipse at 50% 46%, color-mix(in srgb, var(--bo-canvas) 82%, var(--bo-shine)) 0%, var(--bo-canvas) 46%, color-mix(in srgb, var(--bo-canvas) 45%, var(--bo-shade)) 100%);
    --bo-tag: color-mix(in srgb, var(--bo-accent) 80%, var(--bo-shine));
  }
  .brand-open { display: none; }
  html[data-intro="on"] .brand-open { display: block; position: fixed; inset: 0; z-index: 2147483000; }
  .brand-open .bo-veil { position: absolute; inset: 0; background: var(--bo-veil); }
  .brand-open .bo-halo {
    position: absolute; left: 50%; top: 50%; width: min(90vw, 900px); aspect-ratio: 1; opacity: 0;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, color-mix(in srgb, var(--bo-accent) 38%, transparent), transparent 70%);
  }
  .brand-open .bo-stage {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: clamp(12px, 2.4vh, 22px); padding: 0 6vw; text-align: center;
  }
  /* The logo box clips what rises inside it, so the mark comes up from behind its own base line. */
  .brand-open .bo-logo { position: relative; overflow: hidden; opacity: 0; will-change: transform, opacity; }
  .brand-open .bo-logo img, .brand-open .bo-logo canvas {
    display: block; width: auto; height: auto; max-width: min(70vw, 460px); max-height: 26vh; object-fit: contain;
  }
  .brand-open .bo-name {
    font-family: var(--bo-font); font-size: clamp(30px, 7vw, 64px); line-height: 1.1;
    color: var(--bo-ink); white-space: nowrap;
  }
  /* For a logo, the sweep is a brightened copy of the logo seen through a moving gradient mask, so the
     light can only fall on the logo's own pixels (a plain box would light up transparent corners). */
  .brand-open .bo-sweep-art {
    position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain;
    pointer-events: none; opacity: .85; filter: brightness(2.1) saturate(.45);
    -webkit-mask-image: linear-gradient(105deg, transparent 35%, #000 50%, transparent 65%);
    mask-image: linear-gradient(105deg, transparent 35%, #000 50%, transparent 65%);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
    -webkit-mask-position: 0% 0; mask-position: 0% 0;
  }
  .brand-open .bo-sweep {
    position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
    background: linear-gradient(105deg, transparent 35%, color-mix(in srgb, var(--bo-shine) 75%, transparent) 50%, transparent 65%);
    mix-blend-mode: soft-light;
  }
  /* The horizon the mark rises from: drawn out from the centre first. */
  .brand-open .bo-horizon {
    width: min(64vw, 520px); height: 2px; opacity: .9; transform: scaleX(0); transform-origin: 50% 50%;
    background: linear-gradient(90deg, transparent, var(--bo-accent) 18%, var(--bo-accent) 82%, transparent);
  }
  /* The flash that lands as the mark completes. */
  .brand-open .bo-flare {
    position: absolute; left: 50%; top: 50%; width: min(60vw, 520px); aspect-ratio: 2; opacity: 0;
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, color-mix(in srgb, var(--bo-flare) 70%, transparent), transparent 70%);
  }
  .brand-open .bo-tagrow { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 2vw, 18px); width: min(86vw, 640px); }
  .brand-open .bo-tag { margin: 0; opacity: 0; font-size: clamp(13px, 2.4vw, 17px); color: var(--bo-tag); }
  .brand-open .bo-rule {
    flex: 1 1 0; min-width: 0; max-width: 120px; height: 1px; opacity: 0;
    background: var(--bo-accent);
  }
  /* The hero's own opening, for every hero. It waits for the player to set data-hero="go" as the veil
     lifts, so it only ever plays after the brand opening (reduced-motion visitors and repeat visits never
     get the attribute). Nothing clips or boxes the hero: it is a quiet entrance, in three parts.
       - Hero (all variants share one structure): the content container's children rise in turn (the container is the section child that holds the headline: the z-10 family and the full-bleed z-[N] one both match), the
         photo panel (bold / cinematic) settles in, and the emblem seal blooms in.
       - Every other hero component (BrandHero, ChevronHero, ...): their inner markup is not assumed, so
         the whole block fades up.
     Constraints: base.ejs forces opacity/transform with !important on the hero's data-hero-* elements,
     which would block an animation on them, so the wrappers around them are animated instead. The
     keyframes only have a "from" step with fill-mode backwards, so once they end nothing stays applied,
     and removing data-hero afterwards means a later client-side navigation back to the home page cannot
     replay it. Selectors reach the hero by its Puck type, so no component markup is touched. */
  :root { --bo-ease: cubic-bezier(.16, 1, .3, 1); }
  html[data-hero="go"] .puck-page-content > :nth-child(-n+3)[data-puck-type="Hero"] section > :has(h1) > * { animation: bo-rise 1s var(--bo-ease) .3s backwards; }
  html[data-hero="go"] .puck-page-content > :nth-child(-n+3)[data-puck-type="Hero"] section > :has(h1) > :nth-child(2) { animation-delay: .5s; }
  html[data-hero="go"] .puck-page-content > :nth-child(-n+3)[data-puck-type="Hero"] section > :has(h1) > :nth-child(n+3) { animation-delay: .7s; }
  html[data-hero="go"] .puck-page-content > :nth-child(-n+3)[data-puck-type="Hero"] section > [data-hero-bg] { animation: bo-media-in 1.5s var(--bo-ease) .1s backwards; }
  html[data-hero="go"] .puck-page-content > :nth-child(-n+3)[data-puck-type="Hero"] section > :has(h1) > div:last-child:has(.emblem-float) { animation: bo-emblem-in 1.3s var(--bo-ease) .1s backwards; }
  html[data-hero="go"] .puck-page-content > :nth-child(-n+3)[data-puck-type*="Hero"]:not([data-puck-type="Hero"]) { animation: bo-block-in 1.1s var(--bo-ease) .25s backwards; }
  @keyframes bo-rise { from { opacity: 0; transform: translateY(2rem); } }
  @keyframes bo-media-in { from { opacity: 0; transform: scale(1.04); } }
  @keyframes bo-emblem-in { from { opacity: 0; transform: scale(.84); } }
  @keyframes bo-block-in { from { opacity: 0; transform: translateY(1.25rem); } }