/* the phone opening's first paint (under 768 px): the marigold with its tucked petals and the hairline ring, drawn the way
   loader.js draws them at the start, so the page never opens on a dark screen. The ring fills as the picture downloads
   (--hlp, set by the small script in HeroLoader.astro); the canvas takes over in one frame and this goes (.fp) */
@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
  :root { --hls: min(62vw, 46svh, 460px); }
  .hero-wrap { --hls: min(62vw, 46svh, 460px); }
  /* the picture is on the page, and so painted, from the start: it lies under an opaque ground-coloured cover until the
     picture is shown, then the cover fades off (what was the picture's own fade). Nobody sees the picture early, and the
     browser counts it as the page's largest paint when it arrives, not the small marigold. */
  .hero-wrap .hero-under { opacity: 1; transition: none; }
  .hero-wrap .hero-first {
    display: block; position: absolute; inset: 0; background: var(--ground, #140a10);
    transition: opacity .35s cubic-bezier(.45, 0, .55, 1), visibility 0s;
  }
  .hero-wrap .hero-under.shown ~ .hero-field .hero-first, .hero-wrap.done .hero-first { opacity: 0; visibility: hidden; transition: opacity .35s cubic-bezier(.45, 0, .55, 1), visibility 0s .35s; }
  .hero-wrap.pl.quick .hero-first { transition: none; }
  /* a frame painted before the hero's markup is parsed (the header comes first) is the dark ground with the marigold's disc
     already on it, where the marigold will be; it goes when the picture shows or the page opens at an anchor */
  @media (scripting: enabled) {
    html:not(:has(.hero-under.shown, .hero-wrap.done, .hero-wrap.nofp)) {
      background: radial-gradient(circle at 50% 47svh, #dd7418 0 calc(var(--hls) * .48), transparent calc(var(--hls) * .48 + 1px)) no-repeat, var(--ground);
    }
    html:not(:has(.hero-under.shown, .hero-wrap.done, .hero-wrap.nofp)) body::before { display: none; }
  }
  .hero-wrap:not(.nofp) .hl-first { display: block; position: absolute; left: 50%; top: 47svh; width: var(--hls); height: var(--hls); translate: -50% -50%; transition: opacity .35s ease; }
  .hero-wrap.fp:not(.ld) .hl-first { opacity: 0; }
  .hl-first::after { content: ''; position: absolute; inset: -10%; background: radial-gradient(closest-side, #dd7418 0 80%, transparent 81%) center / 100% 100% no-repeat; }
  /* the flower itself is a big file that paints top-down while it downloads: it stays invisible over the disc until the
     whole picture is decoded (.fl, set by the script in HeroLoader.astro), then fades in; never a half flower */
  .hl-first b { position: absolute; inset: -10%; z-index: 1; background: url(/hero/loader/flower-1024.webp) center / contain no-repeat; opacity: 0; transition: opacity .35s ease; }
  .hero-wrap.fl .hl-first b { opacity: 1; }
  .hl-first i { position: absolute; inset: -12%; border-radius: 50%; border: 1px solid rgba(242, 193, 78, 0.16); }
  .hl-first::before {
    content: ''; position: absolute; inset: -12%; border-radius: 50%;
    background: conic-gradient(from -90deg, rgba(242, 193, 78, 0.92) calc(var(--hlp, 0) * 1turn), transparent 0);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - 1px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - 1px));
  }
  /* a length the server did not give: a short arc turns round the ring instead */
  .hero-wrap.hlspin .hl-first::before { --hlp: 0.3; animation: hl-turn 2.4s linear infinite; }
  @keyframes hl-turn { to { transform: rotate(1turn); } }
}
.hl-first { display: none; }