/* First-visit opener (see js/intro.js): the Positiv mark draws its outline, floods with lime from the bottom and settles, while a thin bar
   with a percentage counts 0 -> 100%. The cover is painted by CSS from the very first frame (html.intro-on) so the page never flashes. */
html.intro-on { overflow: hidden; }
html.intro-on body::before { content: ""; position: fixed; inset: 0; z-index: 99998; background: #0d0d0c; }

.intro { --intro-lime: #eef677; position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; background: #0d0d0c;
  transition: opacity .6s cubic-bezier(.65, 0, .35, 1), visibility 0s linear .6s; }
.intro.is-out { opacity: 0; visibility: hidden; pointer-events: none; }
.intro__stack { display: flex; flex-direction: column; align-items: center; gap: 44px; }
.intro__logo-svg { width: min(30vw, 200px); height: auto; overflow: visible; }

/* loading bar with the percentage on its right */
.intro__loader { display: flex; align-items: center; gap: 12px; opacity: 0; animation: intro-show .4s ease .1s forwards; }
.intro__track { width: min(28vw, 140px); height: 3px; border-radius: 3px; background: rgb(238 246 119 / .15); overflow: hidden; }
.intro__bar { height: 100%; width: 100%; border-radius: 3px; background: var(--intro-lime); transform-origin: 0 50%; transform: scaleX(0); }
.intro__pct { min-width: 4ch; color: var(--intro-lime); font: 500 11px/1 system-ui, sans-serif; letter-spacing: .08em; font-variant-numeric: tabular-nums; }

/* 1. the outline draws itself */
.intro__outline { fill: none; stroke: var(--intro-lime); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: intro-draw 1.9s cubic-bezier(.65, 0, .35, 1) .2s forwards, intro-fade-out .5s ease 2.4s forwards; }
/* 2. the colour floods in from the bottom */
.intro__fill { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); animation: intro-flood .9s cubic-bezier(.65, 0, .35, 1) 1.8s forwards; }
/* 3. a gentle settle once it's filled */
.intro__mark { transform-box: view-box; transform-origin: 458px 508px; animation: intro-settle .9s cubic-bezier(.45, 0, .55, 1) 2.6s both; }

.intro__skip { position: absolute; right: 32px; bottom: 28px; padding: 8px 4px; border: 0; background: none; color: #8d8d86; font: inherit; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: color .3s ease; }
.intro__skip:hover { color: var(--intro-lime); }

@keyframes intro-show { to { opacity: 1; } }
@keyframes intro-draw { to { stroke-dashoffset: 0; } }
@keyframes intro-fade-out { to { opacity: 0; } }
@keyframes intro-flood { to { transform: scaleY(1); } }
@keyframes intro-settle { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.04); } }

/* reduced motion: no opener at all (the head script doesn't turn it on; this is the safety net) */
@media (prefers-reduced-motion: reduce) { html.intro-on { overflow: auto; } html.intro-on body::before, .intro { display: none; } }