/* Intro: the real roundel (traced paths) drawn in outline, then filled. About 5 s. Shown only when html.intro-on. */

.intro { display: none; }
html.intro-on .intro {
  position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; align-content: center; gap: 1.6rem;
  background: radial-gradient(70% 70% at 50% 45%, oklch(31% 0.052 158), var(--leaf-night) 78%);
  color: var(--cream);
  animation: introOut 1s var(--ease-in-out) 4.25s forwards;
}
html.intro-skip .intro { animation: introOut 0.55s var(--ease-in-out) forwards; }
html.intro-skip .intro * { animation-duration: 0.01s !important; animation-delay: 0s !important; }

.intro__logo { width: min(76vw, 460px); height: auto; overflow: visible; animation: logoOut 0.9s var(--ease-in-out) 4.2s forwards; }

/* Every traced shape: outline drawn first (pathLength = 1), then filled. */
.il {
  --s: 0s; --st: 0s; --dur: 0.8s; --fill: 0.45s;
  fill: var(--cream); fill-opacity: 0;
  stroke: var(--cream); stroke-width: 0.9; stroke-linejoin: round; stroke-linecap: butt;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation:
    draw var(--dur) var(--ease-in-out) calc(var(--s) + var(--j) * var(--st)) forwards,
    fillIn 0.6s var(--ease-out) calc(var(--s) + var(--j) * var(--st) + var(--fill)) forwards;
}
.il--ring { --s: 0.15s; --st: 0.35s; --dur: 1.6s; --fill: 1.2s; stroke-width: 0.7; }
.il--berry { --s: 0.9s; --st: 0.07s; --dur: 0.75s; --fill: 0.55s; }
.il--name { --s: 1.25s; --st: 0.12s; --dur: 0.75s; --fill: 0.5s; stroke-width: 0.8; }
.il--sub { --s: 2.75s; --st: 0.035s; --dur: 0.5s; --fill: 0.3s; stroke-width: 0.5; }

.intro__place { margin: 0; font: italic 400 1.15rem/1 var(--f-display); letter-spacing: 0.06em; color: var(--brass); opacity: 0; transform: translateY(8px); animation: introRise 0.9s var(--ease-out) 3.4s forwards; }
.intro__skip { position: absolute; right: 1.2rem; bottom: 1.2rem; background: none; border: 0; color: var(--cream-soft); font: 500 0.78rem/1 var(--f-body); letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; min-height: 44px; padding: 0 0.8rem; opacity: 0; animation: introShow 0.6s 1s forwards; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fillIn { to { fill-opacity: 1; } }
@keyframes introShow { to { opacity: 0.85; } }
@keyframes introRise { to { opacity: 1; transform: none; } }
@keyframes logoOut { to { transform: scale(0.84); opacity: 0; } }
@keyframes introOut { 0% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 100% 0); visibility: hidden; } }

@media (prefers-reduced-motion: reduce) { html.intro-on .intro { display: none; } }