/* The cover: the printed menu's teal page, alive. Plates sit in .pl wrappers placed by CSS variables (mobile first, wide from 900px). */
@layer components {
  .hero {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: 100svh; display: grid; place-items: center;
    padding: 5.5rem var(--space-gutter) 7rem;
    background: var(--color-brand); color: var(--color-on-brand);
  }
  .hero-field { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
  .glow { position: absolute; width: 90vmax; height: 90vmax; border-radius: 50%; }
  .glow-a { left: -34vmax; top: -44vmax; background: radial-gradient(closest-side, color-mix(in oklab, var(--color-on-brand) 15%, transparent), transparent 72%); }
  .glow-b { right: -44vmax; bottom: -52vmax; background: radial-gradient(closest-side, color-mix(in oklab, var(--color-abyss) 55%, transparent), transparent 72%); }
  .bubbles i {
    position: absolute; bottom: -2rem; left: 0; width: var(--s); height: var(--s); border-radius: 50%;
    border: 1.25px solid color-mix(in oklab, var(--color-on-brand) 55%, transparent);
    background: radial-gradient(circle at 32% 30%, color-mix(in oklab, var(--color-on-brand) 35%, transparent), transparent 55%);
    opacity: 0; animation: rise var(--t) linear var(--o) infinite;
  }
  .hero-plates { position: absolute; inset: 0; z-index: 1; pointer-events: none; --plate-bg: var(--color-brand); --plate-stroke: var(--color-on-brand); }
  .hero-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(120% 100% at 50% 44%, transparent 52%, color-mix(in oklab, var(--color-abyss) 48%, transparent) 100%); }

  /* the spiral binding down the left edge, like the laminated menu */
  .hero-spiral {
    position: absolute; z-index: 4; left: 0; top: 0; bottom: 0; width: 1.5rem;
    background-color: var(--color-paper);
    background-image:
      radial-gradient(circle at 74% 50%, var(--color-deep) 0 3.3px, transparent 3.7px),
      radial-gradient(ellipse 0.62rem 4.6px at 40% 50%, transparent 0 86%, color-mix(in oklab, var(--color-line-strong) 75%, var(--color-ink)) 89% 100%);
    background-size: 100% 1.4rem, 100% 1.4rem;
    box-shadow: 3px 0 12px color-mix(in oklab, var(--color-abyss) 35%, transparent);
  }

  .hero-tools { position: absolute; z-index: 7; top: max(0.75rem, env(safe-area-inset-top)); right: 0.75rem; display: flex; gap: 0.5rem; }
  .tool {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-width: var(--touch-target); height: var(--touch-target); padding: 0 0.85rem;
    border-radius: 999px; color: var(--color-on-brand);
    background: color-mix(in oklab, var(--color-abyss) 78%, transparent);
    border: 1.5px solid color-mix(in oklab, var(--color-on-brand) 55%, transparent);
    font: 700 0.875rem/1 var(--font-text); letter-spacing: 0.08em;
    transition: background-color var(--duration-ui) var(--ease-out), transform var(--duration-press) var(--ease-out);
  }
  .tool:active { transform: scale(0.96); }
  .tool .ico { width: 1.3rem; height: 1.3rem; }
  .tool[aria-pressed="true"] { background: var(--color-paper); color: var(--color-brand-strong); }
  @media (hover: hover) and (pointer: fine) { .tool:hover { background: color-mix(in oklab, var(--color-abyss) 58%, transparent); } .tool[aria-pressed="true"]:hover { background: var(--color-tint); } }

  /* ---- cover card ---- */
  .cover {
    position: relative; z-index: 5; container: cover / inline-size;
    width: min(86vw, 36rem, calc(100% - 0.75rem)); margin-left: 0.75rem;
    padding: clamp(1.6rem, 7vw, 3.1rem) clamp(1.1rem, 5vw, 2.7rem) clamp(1.5rem, 6vw, 2.7rem);
    background: var(--color-paper); color: var(--color-ink); text-align: center;
    border-radius: clamp(1.25rem, 4vw, 2rem); box-shadow: var(--shadow-lg);
  }
  .cover::before { content: ''; position: absolute; inset: 0.55rem; border: 1px solid var(--color-line-strong); border-radius: calc(clamp(1.25rem, 4vw, 2rem) - 0.55rem); pointer-events: none; }
  .cover-menu { font: 500 clamp(1rem, 4.4cqi, 1.35rem)/1 var(--font-text); letter-spacing: 0.08em; color: var(--color-ink); }
  .cover-title { margin-top: 0.35rem; font: 400 11.4cqi/1.02 var(--font-display); letter-spacing: 0.012em; color: var(--color-brand); white-space: nowrap; }
  .ch { display: inline-block; }
  .cover-script { margin-top: 0.1em; font: 400 clamp(2.4rem, 16cqi, 5rem)/1.12 var(--font-script); color: var(--color-ink); padding-inline: 0.2em; }
  .cover-tag { margin-top: 0.55rem; font: 500 italic 0.9375rem/1.3 var(--font-text); color: var(--color-ink-soft); letter-spacing: 0.02em; }
  .cover-tag::before { content: ''; display: block; width: 2.5rem; height: 1px; margin: 0 auto 0.75rem; background: var(--color-line-strong); }

  .cta {
    position: absolute; z-index: 7; left: 50%; bottom: max(1.6rem, env(safe-area-inset-bottom)); translate: -50% 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; width: max-content; max-width: calc(100% - 2rem); min-height: 3.4rem; padding: 0.4rem 1.4rem 0.4rem 1.8rem;
    border-radius: 999px; background: var(--color-paper); color: var(--color-brand-strong); text-decoration: none; text-wrap: balance;
    font: 600 1.0625rem/1 var(--font-text); box-shadow: var(--shadow-md);
    transition: transform var(--duration-press) var(--ease-out), box-shadow var(--duration-ui) var(--ease-out);
  }
  .cta:active { transform: scale(0.97); }
  .cta-ico .ico { width: 1.4rem; height: 1.4rem; stroke-width: 2; animation: cta-bob 2.4s var(--ease-in-out) infinite; }
  @media (hover: hover) and (pointer: fine) { .cta:hover { box-shadow: var(--shadow-lg); } }

  /* ---- plates (used by the cover, the section panels and the footer) ---- */
  .pl { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); rotate: calc(var(--r) * 1deg); pointer-events: none; }
  .pl-in { width: 100%; animation: bob var(--bob) ease-in-out var(--bo) infinite alternate; }
  .pl-flip .pl-in svg { scale: -1 1; }
  .pl:not(.in-view) .pl-in { animation-play-state: paused; }   /* the limbs are posed by js/beat.js, only for plates on screen */
  .plate { display: block; width: 100%; height: auto; overflow: visible; --sw: 1.5; }
  .plate .ink { fill: none; stroke: var(--plate-stroke, var(--color-on-brand)); stroke-width: var(--sw); stroke-linecap: round; stroke-linejoin: round; }
  .plate .ink.solid { fill: var(--plate-bg, var(--color-brand)); }
  .plate .ink.soft { stroke-opacity: 0.78; stroke-width: calc(var(--sw) * 0.76); }
  .plate .fine { fill: none; stroke: var(--plate-stroke, var(--color-on-brand)); stroke-width: calc(var(--sw) * 0.7); stroke-linecap: round; stroke-opacity: 0.85; }
  .plate .fine.dots { stroke-width: calc(var(--sw) * 1.15); stroke-opacity: 0.8; }
  .plate .fine.pupil { stroke-width: calc(var(--sw) * 2.2); stroke-opacity: 1; }

  .hero-plates .pl[data-k^='x-'] { display: none; }
  @media (min-width: 900px) {
    .hero-plates .pl[data-k^='x-'] { display: block; }
    .hero { padding-block: 5rem 6.5rem; }
    .cover { margin-left: 0; width: min(42vw, 44rem); }
    .hero-plates .pl { left: calc(var(--dx) * 1%); top: calc(var(--dy) * 1%); width: calc(var(--dw) * 1%); rotate: calc(var(--dr) * 1deg); }
  }
  /* a phone turned sideways: the cover card and the button must both fit in the short screen */
  @media (max-height: 560px) and (orientation: landscape) {
    .hero { padding-block: 3.75rem 4.75rem; }
    .cover { width: min(52vw, 30rem, calc(100% - 0.75rem)); padding-block: 1rem; }
    .cta { min-height: 3rem; bottom: max(0.9rem, env(safe-area-inset-bottom)); }
  }
}