/* Feiringer: fullskjerm i Dialed. Hvitt rom, glød i feiringens farge (--fr-c),
   presise gradeskiver, fjærer med squash-and-stretch. Bare transform og
   opacity animeres, så alt holder 60 fps. */

.feiring {
  --fr-c: var(--accent);
  --fr-ink: color-mix(in oklab, var(--fr-c) 58%, var(--ink));
  --hero: min(236px, 52vw, 30vh);
  position: absolute; inset: 0; z-index: 88;
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  visibility: hidden; pointer-events: none;
  color: var(--ink);
  -webkit-user-select: none; user-select: none;
  touch-action: manipulation;
}
.feiring.is-open { visibility: visible; pointer-events: auto; }
.feiring:focus { outline: none; }
.feiring[data-type="streak"] { --fr-c: var(--flame); }
.feiring[data-type="level"] { --fr-c: var(--accent); }
.feiring[data-type="achievement"], .feiring[data-type="kronekonge"] { --fr-c: var(--gold); --fr-ink: var(--gold-ink); }
.feiring[data-type="egg"] { --fr-c: oklch(78% .11 340); }
.feiring[data-type="rekord"] { --fr-c: var(--accent); }
/* partiklene skal synes over overlegget */
.app.has-feiring .fx-canvas { z-index: 89; }

.fr-bg { position: absolute; inset: 0; background: var(--bg); opacity: 0; transition: opacity .3s var(--ease-out); }
.feiring.is-open .fr-bg { opacity: .97; }
.fr-glow {
  position: absolute; left: 50%; top: 40%; width: min(130vmin, 1100px); aspect-ratio: 1;
  translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--fr-c) 30%, transparent), color-mix(in oklab, var(--fr-c) 9%, transparent) 55%, transparent 100%);
  opacity: 0; transform: scale(.55); transition: opacity .45s, transform 1s var(--ease-out);
}
.feiring.is-open .fr-glow { opacity: 1; transform: scale(1); animation: frBreathe 3.4s ease-in-out .9s infinite; }
@keyframes frBreathe { 50% { scale: 1.06; } }

.fr-main { position: relative; display: grid; place-items: center; min-height: 0; padding: calc(14px + env(safe-area-inset-top)) 16px 0; }
.fr-stage { position: relative; width: min(560px, 100%); display: grid; place-items: center; }
.fr-scene {
  grid-area: 1 / 1; width: 100%;
  display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2.2vh, 20px); text-align: center;
  animation: frSceneIn .32s var(--ease-out) both;
}
.fr-scene.is-out { animation: frSceneOut .22s var(--ease-snap) both; pointer-events: none; }
@keyframes frSceneIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@keyframes frSceneOut { to { opacity: 0; transform: translateY(-12px) scale(.96); } }

/* ---------- foten ---------- */
.fr-foot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 16px calc(22px + env(safe-area-inset-bottom)); }
.fr-next { min-width: 220px; opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .5s var(--ease-pop), scale var(--dur-press) var(--ease-press), background-color .2s; }
.feiring.is-open .fr-next { opacity: 1; transform: none; transition-delay: .45s, .45s, 0s, 0s; }
.feiring .fr-next:focus-visible { outline: 2px solid var(--fr-c); outline-offset: 4px; border-radius: 999px; }
.fr-next::after { content: ''; position: absolute; inset: -5px; border-radius: inherit; box-shadow: 0 0 0 2px var(--fr-c); opacity: 0; pointer-events: none; }
.feiring.is-done .fr-next::after { animation: frRing 1.8s var(--ease-out) .2s infinite; }
@keyframes frRing { 0% { opacity: .7; transform: scale(.99); } 100% { opacity: 0; transform: scale(1.07, 1.22); } }
.fr-hint { font: 500 12px/1 var(--font-num); letter-spacing: .02em; text-transform: lowercase; color: var(--ink-3); min-height: 12px; }
.fr-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- tekst ---------- */
.fr-text { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 100%; }
.fr-text > * { opacity: 0; transform: translateY(12px); }
.fr-scene.txt .fr-text > * { animation: frRise .5s var(--ease-pop) both; }
.fr-scene.txt .fr-text > :nth-child(2) { animation-delay: .06s; }
.fr-scene.txt .fr-text > :nth-child(3) { animation-delay: .12s; }
.fr-scene.txt .fr-text > :nth-child(4) { animation-delay: .18s; }
@keyframes frRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.fr-kicker { font: 500 13px/1 var(--font-num); letter-spacing: .04em; text-transform: lowercase; color: var(--fr-ink); }
.fr-title { font: var(--display-weight) clamp(34px, 6.4vw, 58px)/1 var(--font-display); letter-spacing: var(--display-track); text-transform: lowercase; text-wrap: balance; max-width: 100%; overflow-wrap: anywhere; }
.fr-sub { font: 500 16px/1.4 var(--font-ui); color: var(--ink-2); max-width: 36ch; text-wrap: balance; }
.fr-count { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fr-unit { font: var(--display-weight) clamp(22px, 3.4vw, 30px)/1 var(--font-display); letter-spacing: -.03em; text-transform: lowercase; color: var(--ink-2); }
.fr-big { display: inline-flex; font: 650 clamp(72px, 13vh, 128px)/.92 var(--font-display); letter-spacing: -.055em; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.fr-big .roll-d.roll-in, .fr-badge-num .roll-d.roll-in { animation: frDigit .5s var(--ease-pop) both; }
.fr-big .roll-d.roll-down, .fr-badge-num .roll-d.roll-down { animation: frDigitDown .5s var(--ease-pop) both; }
@keyframes frDigit { from { opacity: 0; transform: translateY(55%) scale(.8); } }
@keyframes frDigitDown { from { opacity: 0; transform: translateY(-55%) scale(.8); } }
.fr-big.slam, .fr-badge-num.pop { animation: frSlam .55s var(--ease-pop); }
@keyframes frSlam { 0% { transform: scale(1.45); } 45% { transform: scale(.93); } 100% { transform: scale(1); } }
.fr-numwrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* piller: belønning, frys, opplåsing */
.fr-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 40px; max-width: 100%; }
.fr-pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 12px; border-radius: 999px;
  background: var(--surface); box-shadow: var(--shadow-1); color: var(--ink); font: 600 15px/1.2 var(--font-ui);
  opacity: 0; transform: scale(.4);
}
.fr-pill.in { animation: frPop .5s var(--ease-pop) both; }
@keyframes frPop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.fr-pill .ico { width: 18px; height: 18px; }
.fr-pill.is-gnist .ico { color: var(--accent); }
.fr-pill.is-gnist b { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.fr-pill.is-frys { background: oklch(95% .03 230); color: oklch(42% .1 240); box-shadow: none; }
.fr-pill.is-laas { padding: 10px 18px 10px 12px; text-align: left; border-radius: 18px; max-width: min(420px, 100%); }
.fr-pill.is-laas .ico { color: var(--gold-ink); }
.fr-pill.is-laas small { display: block; font: 500 11.5px/1 var(--font-num); color: var(--ink-3); text-transform: lowercase; margin-bottom: 3px; }

/* ---------- helten ---------- */
.fr-hero { position: relative; width: var(--hero); height: var(--hero); display: grid; place-items: center; flex: none; }
.fr-hero.is-small { --hero: min(190px, 44vw, 25vh); }
.fr-hero > * { grid-area: 1 / 1; }
.fr-dial {
  position: absolute; inset: -5%; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(color-mix(in oklab, var(--fr-c) 55%, var(--line-2)) 0 1.3deg, transparent 1.3deg 6deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 9px), #000 calc(100% - 9px));
  opacity: 0; transform: rotate(-70deg) scale(.84);
}
.fr-scene.go .fr-dial { animation: frDialIn .9s var(--ease-out) forwards, frSpin 48s linear infinite; }
@keyframes frDialIn { to { opacity: .9; transform: none; } }
@keyframes frSpin { to { rotate: 360deg; } }
.fr-halo {
  position: absolute; inset: 8%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--fr-c) 42%, transparent), transparent);
  opacity: 0; transform: scale(.5);
}
.fr-scene.go .fr-halo { animation: frHaloIn .7s var(--ease-out) .1s forwards, frHalo 1.5s ease-in-out .8s infinite alternate; }
@keyframes frHaloIn { to { opacity: 1; transform: none; } }
@keyframes frHalo { to { scale: 1.08; } }

/* streak: flammen blåses opp og blafrer */
.fr-flame { position: relative; width: 70%; height: 90%; transform-origin: 50% 96%; opacity: 0; transform: scale(.2, .1); }
.fr-scene.go .fr-flame { animation: frFlameIn .8s var(--ease-out) forwards; }
@keyframes frFlameIn {
  0% { opacity: 0; transform: scale(.2, .1); }
  28% { opacity: 1; transform: scale(.8, 1.3); }
  50% { transform: scale(1.16, .84); }
  68% { transform: scale(.94, 1.07); }
  84% { transform: scale(1.03, .97); }
  100% { opacity: 1; transform: scale(1, 1); }
}
.fr-flame > span { position: absolute; inset: 0; transform-origin: 50% 96%; }
.fr-flame svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fr-flame .fl-1 { animation: frFlick 1.7s ease-in-out infinite alternate; }
.fr-flame .fl-2 { animation: frFlick2 1.15s ease-in-out infinite alternate; }
.fr-flame .fl-3 { animation: frFlick .82s ease-in-out infinite alternate-reverse; }
@keyframes frFlick { 0% { transform: none; } 35% { transform: scale(.97, 1.04) skewX(-2deg); } 70% { transform: scale(1.02, .97) skewX(1.5deg); } 100% { transform: scale(.99, 1.03) skewX(-1deg); } }
@keyframes frFlick2 { 0% { transform: scale(1.02, .97); } 40% { transform: scale(.96, 1.06) skewX(2.5deg); } 100% { transform: scale(1.01, .99) skewX(-2deg); } }
.feiring.is-blue .fr-flame { filter: hue-rotate(185deg) saturate(1.2); }

/* ukas dager */
.fr-week { display: flex; gap: clamp(6px, 1.6vw, 12px); justify-content: center; }
.fr-day { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fr-day small { font: 500 11px/1 var(--font-num); color: var(--ink-3); text-transform: lowercase; }
.fr-dot {
  position: relative; width: clamp(28px, 7.2vw, 36px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--line-2); color: oklch(99% 0 0);
}
.fr-dot .ico { width: 58%; height: 58%; stroke-width: 2.6; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .4s var(--ease-pop); }
.fr-day.is-on.in .fr-dot, .fr-day.lit .fr-dot { background: linear-gradient(180deg, var(--flame), var(--flame-2)); box-shadow: none; }
.fr-day.is-frys.in .fr-dot { background: oklch(93% .045 230); box-shadow: none; color: oklch(50% .12 240); }
.fr-day.is-on.in .fr-dot, .fr-day.is-frys.in .fr-dot { animation: frDot .42s var(--ease-pop) both; }
.fr-day.lit .fr-dot { animation: frDotBig .62s var(--ease-pop) both; }
.fr-day.in .ico, .fr-day.lit .ico { opacity: 1; transform: none; }
.fr-day.is-idag small { color: var(--ink); font-weight: 700; }
.fr-day.is-idag:not(.lit) .fr-dot { box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--flame) 60%, var(--line-2)); }
@keyframes frDot { 0% { transform: scale(.5); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
@keyframes frDotBig { 0% { transform: scale(.4); } 45% { transform: scale(1.38); } 70% { transform: scale(.92); } 100% { transform: scale(1); } }

/* nivå: merket smeller inn med stråler bak */
.fr-rays {
  position: absolute; inset: -32%; border-radius: 50%; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, color-mix(in oklab, var(--fr-c) 22%, transparent) 0 9deg, transparent 9deg 22.5deg);
  -webkit-mask: radial-gradient(closest-side, #000 22%, transparent 94%);
  mask: radial-gradient(closest-side, #000 22%, transparent 94%);
  opacity: 0; transform: scale(.55);
}
.fr-scene.go .fr-rays { animation: frRaysIn .8s var(--ease-out) .12s forwards, frSpin 26s linear infinite; }
@keyframes frRaysIn { to { opacity: 1; transform: none; } }
.fr-badge-wrap { position: relative; width: 70%; aspect-ratio: 1; opacity: 0; transform: scale(2.2); }
.fr-scene.go .fr-badge-wrap { animation: frSlamIn .62s var(--ease-out) forwards; }
@keyframes frSlamIn { 0% { opacity: 0; transform: scale(2.3); } 28% { opacity: 1; transform: scale(.86); } 50% { transform: scale(1.07); } 72% { transform: scale(.97); } 100% { opacity: 1; transform: scale(1); } }
.fr-badge {
  position: absolute; inset: 0; border-radius: 50%; background: var(--app-bg); color: var(--app-ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; box-shadow: var(--shadow-3);
}
.fr-badge-lbl { font: 500 13px/1 var(--font-num); letter-spacing: .06em; color: var(--app-ink-2); }
.fr-badge-num { display: inline-flex; font: 650 calc(var(--hero) * .3)/.9 var(--font-display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.fr-badge-ring {
  position: absolute; inset: -9px; border-radius: 50%; background: var(--xp-ring); pointer-events: none;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
}
.fr-xp { width: min(340px, 100%); display: flex; flex-direction: column; gap: 8px; opacity: 0; transform: translateY(10px); }
.fr-scene.xp .fr-xp { animation: frRise .45s var(--ease-pop) both; }
.fr-bar { height: 10px; }
.fr-bar > i { background: linear-gradient(90deg, oklch(70% .2 25), oklch(80% .16 80), oklch(78% .17 150), oklch(72% .14 220), oklch(64% .22 300)); }
.fr-xp-txt { font: 500 12.5px/1 var(--font-num); color: var(--ink-3); }

/* prestasjon: medaljen snurrer inn (2D, scaleX) og lander */
.fr-medal { position: relative; width: 64%; aspect-ratio: 1; opacity: 0; transform: translateY(-46px) scale(.6); isolation: isolate; }
.fr-scene.go .fr-medal { animation: frDrop .55s var(--ease-pop) forwards; }
@keyframes frDrop { to { opacity: 1; transform: none; } }
.fr-ribbon { position: absolute; left: 50%; top: 60%; width: 74%; translate: -50% 0; z-index: -1; overflow: visible; }
.fr-ribbon .r1 { fill: var(--accent); }
.fr-ribbon .r2 { fill: color-mix(in oklab, var(--accent) 72%, oklch(20% .05 20)); }
.fr-coin-flip { position: absolute; inset: 0; will-change: transform; }
.fr-coin {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 34% 28%, oklch(97% .06 95), var(--gold) 48%, oklch(66% .14 75) 100%);
  box-shadow: inset 0 0 0 5px oklch(89% .12 88), inset 0 0 0 9px oklch(70% .14 78 / .55), 0 18px 36px -14px oklch(55% .12 70 / .55);
}
.fr-coin-face { position: absolute; inset: 0; display: grid; place-items: center; color: oklch(38% .09 70); }
.fr-coin-face .ico { width: 44%; height: 44%; stroke-width: 1.7; }
.fr-coin-face.is-back { opacity: 0; }
.fr-coin.show-back .is-front { opacity: 0; }
.fr-coin.show-back .is-back { opacity: 1; }
.fr-shine { position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%; background: linear-gradient(90deg, transparent, oklch(100% 0 0 / .6), transparent); transform: translateX(-170%) skewX(-18deg); pointer-events: none; }
.fr-scene.landed .fr-shine { animation: frShine 1.1s var(--ease-out) .05s; }
@keyframes frShine { to { transform: translateX(400%) skewX(-18deg); } }
.fr-scene.landed .fr-halo { animation-duration: .7s, 1.1s; }

/* egget: vugger, sprekker og slipper ut gnister */
.fr-egg-drop { position: relative; width: 62%; height: 80%; opacity: 0; transform: translateY(-130px); }
.fr-scene.go .fr-egg-drop { animation: frEggDrop .4s cubic-bezier(.55, 0, .9, .45) forwards; }
@keyframes frEggDrop { to { opacity: 1; transform: none; } }
.fr-egg-sq, .fr-egg { position: absolute; inset: 0; transform-origin: 50% 97%; }
.fr-egg-half { position: absolute; inset: 0; transform-origin: 50% 60%; }
.fr-egg-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fr-scene.cracked .fr-egg-half.is-top { animation: frEggTop .75s cubic-bezier(.2, .75, .3, 1) forwards; }
@keyframes frEggTop { 0% { transform: none; } 30% { transform: translate(6px, -34px) rotate(14deg); opacity: 1; } 100% { transform: translate(28px, -116px) rotate(50deg); opacity: 0; } }
.fr-scene.cracked .fr-egg-half.is-bot { animation: frEggBot .5s var(--ease-pop) forwards; }
@keyframes frEggBot { 0% { transform: none; } 35% { transform: translateY(5px) scale(1.05, .93); } 100% { transform: translateY(2px); } }
.fr-prize { position: absolute; left: 30%; top: 30%; width: 40%; aspect-ratio: 1; display: grid; place-items: center; color: oklch(74% .15 85); opacity: 0; transform: translateY(40px) scale(.2); pointer-events: none; }
.fr-prize .ico { width: 100%; height: 100%; }
.fr-scene.cracked .fr-prize { animation: frPrize .8s var(--ease-pop) .05s forwards; }
@keyframes frPrize { to { opacity: 1; transform: translateY(-38px) scale(1); } }
.fr-eggs { display: flex; gap: 8px; justify-content: center; opacity: 0; transform: translateY(10px); }
.fr-scene.dots .fr-eggs { animation: frRise .4s var(--ease-pop) both; }
.fr-egg-dot { width: 16px; height: 21px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--bg-3); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.fr-egg-dot.has { background: linear-gradient(160deg, oklch(99% .01 330), oklch(84% .09 350) 45%, oklch(72% .13 305)); box-shadow: none; }
.fr-scene.dots .fr-egg-dot.is-new { animation: frEggNew .6s var(--ease-pop) .25s both; }
@keyframes frEggNew { 0% { transform: scale(1); } 40% { transform: scale(1.7); } 100% { transform: scale(1); } }

/* rekord: pokalen spretter opp, forrige rekord strykes */
.fr-trophy { width: 62%; opacity: 0; transform: translateY(30px) scale(.3); }
.fr-scene.go .fr-trophy { animation: frPopUp .6s var(--ease-pop) forwards; }
@keyframes frPopUp { to { opacity: 1; transform: none; } }
.fr-trophy svg, .fr-crown-sq svg { width: 100%; height: auto; display: block; overflow: visible; }
.fr-prev { font: 500 14px/1 var(--font-num); color: var(--ink-3); }
.fr-prev s { position: relative; text-decoration: none; }
.fr-prev s::after { content: ''; position: absolute; left: -3px; right: -3px; top: 52%; height: 2px; border-radius: 2px; background: var(--bad); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease-out); }
.fr-scene.struck .fr-prev s::after { transform: scaleX(1); }

/* kronekonge: kronen faller ned og spretter */
.fr-crown-fall { width: 66%; opacity: 0; transform: translateY(-260px); }
.fr-scene.go .fr-crown-fall { animation: frCrownFall .95s linear forwards; }
@keyframes frCrownFall {
  0% { opacity: 1; transform: translateY(-260px); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  38% { transform: translateY(0); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
  56% { transform: translateY(-46px); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  72% { transform: translateY(0); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
  84% { transform: translateY(-12px); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  100% { opacity: 1; transform: translateY(0); }
}
.fr-crown-sq { transform-origin: 50% 100%; }
.fr-scene.go .fr-crown-sq { animation: frCrownSq .95s linear forwards; }
@keyframes frCrownSq {
  0%, 34% { transform: scale(.94, 1.08); }
  40% { transform: scale(1.24, .76); }
  50% { transform: scale(.95, 1.06); }
  66% { transform: scale(1); }
  74% { transform: scale(1.1, .9); }
  82%, 100% { transform: scale(1); }
}
.fr-shadow { position: absolute; left: 50%; bottom: 14%; width: 56%; height: 9%; translate: -50% 0; border-radius: 50%; background: radial-gradient(closest-side, oklch(19% .01 262 / .22), transparent); opacity: 0; transform: scale(.3); pointer-events: none; }
.fr-scene.go .fr-shadow { animation: frShadow .95s linear forwards; }
@keyframes frShadow { 0% { opacity: .2; transform: scale(.3); } 38% { opacity: 1; transform: scale(1.1); } 56% { opacity: .6; transform: scale(.8); } 72% { opacity: 1; transform: scale(1.02); } 100% { opacity: 1; transform: scale(1); } }

/* hopp over: alt til sluttilstand med en gang (løkkene går videre) */
.fr-scene.is-final *:not(.loop) { animation-duration: 0s !important; animation-delay: 0s !important; transition-duration: 0s !important; transition-delay: 0s !important; }

/* lave skjermer */
@media (max-height: 640px) {
  .feiring { --hero: min(180px, 44vw, 27vh); }
  .fr-scene { gap: 8px; }
  .fr-big { font-size: clamp(56px, 12vh, 90px); }
  .fr-title { font-size: clamp(28px, 5vw, 44px); }
  .fr-foot { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .fr-foot .btn-lg { height: 48px; font-size: 15.5px; }
  .fr-week small { display: none; }
}

/* mobil: mål høyden mot flaten som faktisk synes (nettleserens verktøylinjer
   trukket fra), ikke mot skjermen med linjene skjult */
@supports (height: 1svh) {
  .feiring { --hero: min(236px, 52vw, 30svh); }
  .fr-scene { gap: clamp(10px, 2.2svh, 20px); }
  .fr-big { font-size: clamp(72px, 13svh, 128px); }
  .fr-hero.is-small { --hero: min(190px, 44vw, 25svh); }
  @media (max-height: 640px) {
    .feiring { --hero: min(180px, 44vw, 27svh); }
    .fr-scene { gap: 8px; }
    .fr-big { font-size: clamp(56px, 12svh, 90px); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .feiring .fr-scene * { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .feiring .fr-scene { animation: frFade .25s ease both !important; }
  .feiring .fr-glow { animation: none; transition: opacity .3s; transform: none; }
  .feiring .fr-next { transition: opacity .2s; transform: none; }
  .feiring.is-done .fr-next::after { animation: none; }
}
@keyframes frFade { from { opacity: 0; } }