/* Kandeel «Gift Time» LED — 8 m × 4 m = 2:1 stage, letterboxed into any window. Units: cqh/cqw of #st. */
/* MFZ 2026-11-11: Arabic now uses self-hosted Alyamama (300..900); Latin stays on KCairo/Cairo via unicode-range fallthrough. */
@font-face { font-family: "Alyamama"; src: url(/static/fonts/alyamama-arabic-wght-normal.woff2) format("woff2"); font-weight: 300 900; unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+0660-0669; font-display: block; }
@font-face { font-family: "KCairo"; src: url(/static/fonts/cairo-latin-wght-normal.woff2) format("woff2"); font-weight: 200 1000; font-display: block; }
:root { --esp: #2B1F0A; --esp2: #3a2a16; --bronze: #A99884; --gold: #92ADBB; --gold2: #BFD3DB; --cream: #FCF8F0; --muted: rgba(252,248,240,.62); --ok: #7fd6a0; --low: #ff8a6b; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #000; overflow: hidden; }
body { font-family: "Alyamama", "KCairo", system-ui, sans-serif; color: var(--cream); }
#vp { position: fixed; inset: 0; display: grid; place-items: center; }
#st { position: relative; width: min(100vw, 333.333vh); height: min(30vw, 100vh); /* FORK 2026-11-14: 10x3 m LED (was 8x4 m / 2:1) */ container-type: size; overflow: hidden;
  background: radial-gradient(70% 90% at 30% 55%, #3a2a1c 0%, transparent 60%), linear-gradient(180deg, var(--esp2), var(--esp) 70%); }
.bg { position: absolute; inset: 0; pointer-events: none; }
.bg .arch { position: absolute; bottom: -2cqh; border: .35cqh solid rgba(176,122,69,.18); border-bottom: 0; border-radius: 50% 50% 0 0 / 34% 34% 0 0; }
.bg .a1 { left: 2cqw; width: 30cqw; height: 120cqh; } .bg .a2 { left: 6cqw; width: 22cqw; height: 104cqh; opacity: .6; } .bg .a3 { right: -6cqw; width: 40cqw; height: 135cqh; opacity: .45; }
.bg .glow { position: absolute; left: 3cqw; bottom: -20cqh; width: 32cqw; height: 60cqh; background: radial-gradient(closest-side, rgba(224,176,119,.30), transparent); filter: blur(2cqh); }
#fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 30; }

/* MFZ_PA 2026-11-12 (declutter): header is now ONE clean row only — date / round pill / logo —
   instead of the old two-row stack (this row + a near-duplicate .foot row right under it with the
   same weight). Round pill shrunk + boxed so it reads as a small tag, not a second headline competing
   with the "وقت الهدايا" hero text below. */
.top { position: absolute; top: 4cqh; right: 4cqw; left: 40cqw; display: flex; align-items: center; justify-content: space-between; gap: 3cqw; z-index: 2; }
.top .logo { height: 7.4cqh; width: auto; }
.kick { display: flex; align-items: center; gap: .9cqw; color: var(--gold); font-weight: 700; font-size: 2.6cqh; letter-spacing: .02em; white-space: nowrap;
  border: .16cqh solid rgba(176,122,69,.5); border-radius: 99px; padding: .5cqh 1.6cqw; background: rgba(42,30,21,.4); }
.kick .rule { display: none; }

/* MFZ_PA 2026-11-11: mirrors .dhead's event line — top-left, opposite the logo in .top (top-right). */
.evline { position: absolute; top: 4cqh; left: 3.5cqw; font-size: 2.2cqh; color: var(--muted); z-index: 2; }

/* left: QR inside the arch */
.qrside { position: absolute; left: 3.5cqw; top: 6cqh; bottom: 9cqh; width: 31cqw; display: flex; flex-direction: column; align-items: center; z-index: 3; }
.archq { position: relative; height: 62cqh; aspect-ratio: 100 / 140; }
.archq .ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.archq .ring path { fill: rgba(21,16,12,.55); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.archq .ring .bgp { stroke: var(--bronze); stroke-width: .9cqh; }
.archq .ring .fg { fill: none; stroke: var(--gold2); stroke-width: .9cqh; stroke-linecap: round; filter: drop-shadow(0 0 1.2cqh rgba(246,217,168,.8)); opacity: 0; transition: opacity .4s, stroke-dashoffset .12s linear; }
#st.open .archq .ring .fg { opacity: 1; }
.archq .ring .fg.low { stroke: var(--low); filter: drop-shadow(0 0 1.2cqh rgba(255,138,107,.9)); }
.archq .tile { position: absolute; left: 12%; right: 12%; bottom: 7%; aspect-ratio: 1; background: #fff; border-radius: 1.6cqh; padding: 2.2cqh; box-shadow: 0 0 6cqh rgba(224,176,119,.35); }
.archq .tile img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.qcap { margin-top: 2.2cqh; font-size: 4.6cqh; font-weight: 600; color: var(--cream); white-space: nowrap; }
.qcap b { color: var(--gold); font-weight: 800; }
.stats { margin-top: 1.2cqh; display: flex; gap: 4cqw; align-items: flex-end; }
.stats > div { text-align: center; }
.stats .big { font-size: 9.5cqh; font-weight: 800; line-height: 1; color: var(--gold2); font-variant-numeric: tabular-nums; }
.stats .big.low { color: var(--low); }
.stats .sm { font-size: 2.8cqh; color: var(--muted); margin-top: .6cqh; }
#st.idle .stats, #st.leaderboard .stats { visibility: hidden; }

/* right: main content */
.mainside { position: absolute; right: 4cqw; left: 39cqw; top: 17cqh; bottom: 10cqh; z-index: 3; }
.v { position: absolute; inset: 0; display: none; flex-direction: column; }
.v.on { display: flex; animation: vin .5s ease both; }
@keyframes vin { from { opacity: 0; transform: translateY(2cqh); } to { opacity: 1; transform: none; } }
[data-v="idle"] { justify-content: center; align-items: center; text-align: center; gap: 2cqh; }
/* MFZ_PA 2026-11-12: the idle-only center-stage Kandeel logo was removed (same logo already sits in
   the persistent .top header, right above it — having it twice on screen at near-identical size read
   as cluttered/duplicate branding, not a clean hierarchy). Key icon now leads the idle content. */
[data-v="idle"] .key { height: 20cqh; width: auto; opacity: 0; filter: drop-shadow(0 0 3cqh rgba(224,176,119,.5)); animation: idleLogoIn 1.6s .2s ease forwards; }
@keyframes idleLogoIn { 0% { opacity: 0; transform: translateY(-1.5cqh) scale(.94); filter: drop-shadow(0 0 0 rgba(224,176,119,0)); } 55% { opacity: 1; filter: drop-shadow(0 0 3cqh rgba(224,176,119,.65)); } 100% { opacity: 1; transform: none; filter: drop-shadow(0 0 1.4cqh rgba(224,176,119,.35)); } }
.h1 { font-size: 17cqh; font-weight: 800; line-height: 1.4; padding: .06em 0; background: linear-gradient(180deg, var(--gold2), var(--gold) 55%, var(--bronze)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.h2 { font-size: 4.6cqh; font-weight: 600; max-width: 52cqw; line-height: 1.45; }
.h3 { font-size: 3.4cqh; color: var(--gold); letter-spacing: .14em; text-transform: uppercase; }

[data-v="q"] { gap: 2.2cqh; }
.qk { font-size: 3.6cqh; color: var(--gold); font-weight: 700; display: flex; gap: 1cqw; }
.qk .dot { color: var(--bronze); }
.qbox { flex: 0 0 22cqh; display: flex; align-items: center; }
.qt { font-size: 7.5cqh; font-weight: 800; line-height: 1.3; width: 100%; text-wrap: balance; }
.opts { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 2cqh 1.6cqw; }
.o { position: relative; overflow: hidden; display: flex; align-items: center; gap: 1.4cqw; padding: 0 1.8cqw; border-radius: 2cqh; border: .3cqh solid rgba(176,122,69,.55); background: rgba(42,30,21,.75); transition: opacity .5s, border-color .5s, background .5s; }
.o .b { position: absolute; inset-block: 0; right: 0; background: rgba(224,176,119,.16); transition: width .8s ease; }
.o .l { position: relative; flex: 0 0 auto; width: 8cqh; height: 8cqh; border-radius: 50%; display: grid; place-items: center; font-size: 4.4cqh; font-weight: 800; color: var(--esp); background: linear-gradient(180deg, var(--gold2), var(--gold)); }
.o .x { position: relative; flex: 1; min-width: 0; white-space: nowrap; font-size: 5.4cqh; font-weight: 700; line-height: 1.2; }
.o .n { position: relative; font-size: 4cqh; font-weight: 700; color: var(--gold2); font-variant-numeric: tabular-nums; }
.opts.rev .o:not(.ok) { opacity: .38; }
.opts.rev .o.ok { border-color: var(--ok); background: rgba(127,214,160,.18); box-shadow: 0 0 4cqh rgba(127,214,160,.35); }
.opts.rev .o.ok .l { background: var(--ok); }
.bar { height: 1cqh; border-radius: 1cqh; background: rgba(176,122,69,.25); overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(270deg, var(--gold2), var(--bronze)); transform-origin: right; transition: transform .12s linear; }
.bar.low i { background: var(--low); }
#st:not(.open) .bar { visibility: hidden; }

[data-v="lb"] { align-items: stretch; gap: 1.4cqh; }
.lbh { font-size: 6.5cqh; line-height: 1.3; font-weight: 800; color: var(--gold2); }
.lbs { font-size: 3cqh; color: var(--muted); }
.lb { display: flex; flex-direction: column; gap: 1.2cqh; margin-top: .6cqh; }
.lb .r { display: flex; align-items: center; gap: 2cqw; padding: .5cqh 2cqw; border-radius: 1.6cqh; background: rgba(42,30,21,.8); border: .25cqh solid rgba(176,122,69,.45); font-size: 4cqh; line-height: 1.7; font-weight: 700; }
.lb .r.first { border-color: var(--gold2); box-shadow: 0 0 4cqh rgba(246,217,168,.3); font-size: 4.8cqh; }
.lb .p { width: 7cqh; text-align: center; } .lb .nm { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lb .c { color: var(--gold); }

/* winner: covers the main side + dims; QR stays visible */
.win { position: absolute; right: 0; top: 0; bottom: 0; left: 36cqw; z-index: 20; display: none; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.6cqh;
  background: radial-gradient(60% 70% at 50% 50%, rgba(58,42,28,.97), rgba(21,16,12,.98)); }
#st.winner .win { display: flex; animation: vin .6s ease both; }
#st.winner .mainside, #st.winner .top, #st.winner .foot { visibility: hidden; }
.win .rays { position: absolute; inset: -30%; background: repeating-conic-gradient(from 0deg, rgba(246,217,168,.10) 0 6deg, transparent 6deg 18deg); animation: spin 40s linear infinite; mask: radial-gradient(closest-side, #000 20%, transparent 75%); -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 75%); }
@keyframes spin { to { transform: rotate(360deg); } }
.win > div:not(.rays) { position: relative; }
.wl { font-size: 6cqh; font-weight: 800; color: var(--gold); }
.wn { font-size: 20cqh; font-weight: 900; line-height: 1.35; padding: .05em 0; white-space: nowrap; max-width: 58cqw; background: linear-gradient(180deg, #fff6e3, var(--gold2) 40%, var(--gold) 75%, var(--bronze)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 3cqh rgba(224,176,119,.45)); }
.wa { font-size: 5cqh; font-weight: 700; }
.wt { font-size: 3.4cqh; color: var(--muted); }
.wg { margin-top: 1.6cqh; font-size: 4.4cqh; font-weight: 700; color: var(--esp); background: linear-gradient(180deg, var(--gold2), var(--gold)); padding: 1cqh 3cqw; border-radius: 99px; }

/* gift reveal — product shot + Kandeel voucher card (MFZ_PA 2026-11-12, 10 appliance gifts) */
.wGiftRow { display: none; align-items: center; justify-content: center; gap: 2.6cqw; margin-top: .6cqh; }
#st.winner .wGiftRow.on { display: flex; }
.wGiftImg { max-height: 22cqh; max-width: 18cqw; object-fit: contain; filter: drop-shadow(0 .6cqh 2cqh rgba(0,0,0,.5)); border-radius: 1.2cqh; }
.wGiftImg[hidden] { display: none; }
.voucher { display: flex; flex-direction: column; align-items: center; gap: .8cqh; min-width: 22cqw; max-width: 28cqw; padding: 2cqh 2.4cqw; border-radius: 1.6cqh;
  background: linear-gradient(180deg, rgba(42,30,21,.92), rgba(21,16,12,.96)); border: .22cqh solid var(--bronze); box-shadow: 0 0 4cqh rgba(224,176,119,.3); }
.voucher-logo { height: 3.6cqh; object-fit: contain; }
.voucher-rule { width: 60%; height: .22cqh; background: linear-gradient(90deg, transparent, var(--gold2), var(--gold), transparent); }
.voucher-giftname { font-size: 4.2cqh; font-weight: 800; line-height: 1.4; color: var(--gold2); }
.voucher-note { font-size: 1.9cqh; color: var(--muted); letter-spacing: .02em; }

/* MFZ_PA 2026-11-11: lifted off the bottom band (was bottom:2.6cqh, hidden behind stage/podium on the
   8x4m LED) — now sits just under the header, right-column, clear of mainside (top:17cqh) and qrside
   (left:3.5cqw..~34.5cqw, no horizontal overlap with this right4cqw/left40cqw column).
   MFZ_PA 2026-11-12 (declutter): was a second full-width row (right:4cqw..left:40cqw, same span as
   .top, same font weight as the kicker/logo above it) — read as a duplicate header stacked under the
   first. Shrunk to one small muted caption tucked under the logo's own corner only, so the header
   reads as ONE clean row + a quiet footnote instead of two competing rows. */
.foot { position: absolute; top: 12.4cqh; right: 4cqw; left: auto; display: flex; gap: 1cqw; align-items: center; font-size: 1.7cqh; color: var(--muted); z-index: 2; }
.foot .hot { white-space: nowrap; } .foot .hot b { color: var(--gold); font-weight: 800; }
.foot .credit { display: flex; align-items: center; gap: .6cqw; white-space: nowrap; } .foot .credit img { height: 2.2cqh; }
#st.kill .qrside .tile { visibility: hidden; }

/* MFZ_PA 2026-11-14: Strike Media credit mirrored onto the OTHER two full-stage /show states that
   were missing it — #deck (the 41-scene show deck that replaces the PowerPoint, on screen most of
   the runtime) and #speakercard (full-screen speaker intro). #st already had one via .foot .credit
   above; this reuses the same small/low-opacity treatment and asset, just repositioned to the empty
   gap band between the header and the content (top:7.6cqh, same row as #spkBadge which sits on the
   LEFT at 4cqw — this sits on the RIGHT at 4cqw, so the two mirror each other and never collide).
   Deliberately NOT bottom-anchored: the 2026-11-11/12 lesson on this same 8x4m LED stage is that the
   bottom band is hidden behind stage/podium/heads live, so .foot and #spkBadge are top-anchored too. */
/* MFZ_PA 2026-11-14 (MFZ: +50% show header logo): was top:7.6cqh, same row as #spkBadge — now that
   .dlogo/.spk-logo are 6.6cqh starting at top:2.6cqh (bottom edge 9.2cqh, deck.css/led.css), 7.6cqh
   collided with the logo's own "GROUP" subtext on every non-cover scene. Pushed to 9.8cqh (0.6cqh
   clear of the new logo bottom) — #spkBadge (left:4cqw, opposite corner, independent element) stays
   at 7.6cqh since it never shared space with the logo (right:4cqw) to begin with. */
.showcredit { position: absolute; top: 9.8cqh; right: 4cqw; z-index: 6; display: flex; align-items: center; gap: .6cqw; white-space: nowrap; font-size: 1.6cqh; color: var(--muted); opacity: .85; direction: ltr; }
.showcredit img { height: 2cqh; opacity: .9; }

/* ── GSAP live motion layer (public/js/motion.js) — additive, MFZ 2026-11-11 ── */
/* kinetic-text word spans: background/background-clip/color are NOT inherited by default, so any
   gradient-clipped gold text (.h1 .wn .d-title etc. use background-clip:text + color:transparent)
   would otherwise render fully invisible once split into child spans — force inheritance. */
.kw { will-change: transform, opacity; background: inherit; -webkit-background-clip: inherit; background-clip: inherit; color: inherit; }

/* barcode-motif wipe — fullscreen bar cluster used as a masked transition between states */
#kwipe { position: fixed; inset: 0; z-index: 90; display: none; pointer-events: none; }
#kwipe i { display: block; height: 100%; }

/* pre-rendered Remotion stinger layer (opening / round / gift / outro) */
#kstinger { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 80; pointer-events: none; display: none; opacity: 0; background: var(--esp); }

/* idle ambient loop video — sits behind the idle content, in front of the plain gradient bg */
#kidlebg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; pointer-events: none; display: none; opacity: 0; mix-blend-mode: screen; }

/* gold-burst particles spawned for the winner moment */
.kburst { position: absolute; left: 0; top: 0; width: 1.6cqh; height: 1.6cqh; border-radius: 50%; pointer-events: none; filter: drop-shadow(0 0 1cqh rgba(224,176,119,.7)); }

/* lite mode: admin "motion → lite" toggle for a weak venue PC — cut ambience, keep the essential reveals */
html.kmotion-lite #fx { display: none; }
html.kmotion-lite .bg .glow { transition: none; }

/* ── speaker intro card v3 — corporate / premium (2026-11-12) ──
   Independent overlay (not part of the deck/quiz state machine): triggerable at any time from
   /admin's "Speakers" panel, one button per speaker + hide. Sits above the deck (25) and winner
   moment (20) so the operator can intro a guest mid-scene; blackout (90) still overrides it.
   MFZ_PA 2026-11-12 — v2 (sepia/gold duotone, glow halo, gold ring crossing the text, giant
   outline name behind the figure, barcode side-bars, hard waist cut) was rejected: "NOT CORPORATE,
   very cheap". v3 strips ALL of that back to two restrained zones: a clean neutral-B&W cutout that
   bleeds off the bottom edge (never a floating hard cut), and a strict text grid — small spaced-caps
   label, large off-white Arabic name, medium EN name, one thin gold hairline, muted grey titles.
   Max 2 colors (off-white / muted grey) + one gold accent. One elegant entrance only, no loops. */
#speakercard { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center;
  background: radial-gradient(60% 75% at 50% 45%, #3a2a1c 0%, var(--esp) 70%); }
#speakercard.on { display: flex; animation: vin .5s ease both; }
/* MFZ_PA 2026-11-11: own container-type:size box, same stage sizing as #st/.dwrap — see HTML comment. */
#speakercard .spk-stage { position: relative; width: min(100vw, 333.333vh); height: min(30vw, 100vh); /* FORK 2026-11-14: 10x3 m LED (was 8x4 m / 2:1) */ container-type: size; }
/* MFZ_PA 2026-11-12 (v3): figure ~45cqw wide, bottom pinned to the stage's bottom edge (bleeds off
   it) instead of floating mid-stage. object-fit:cover + object-position:top (box is wider, relative
   to the 4:5 source, than the source itself) crops the excess off the BOTTOM — this is what removes
   the old floating hard waist-cut: the cut line now falls past the visible edge, not inside the frame. */
#speakercard .spk-photo { position: absolute; left: 5cqw; top: 9cqh; bottom: 0; width: 45cqw; z-index: 2; overflow: hidden; }
#speakercard .spk-photo-glow { position: absolute; left: 50%; top: 18%; width: 150%; height: 55%; z-index: 0;
  transform: translate(-50%, -25%); background: radial-gradient(closest-side, rgba(224,176,119,.14), transparent 72%);
  filter: blur(2cqh); pointer-events: none; }
/* neutral B&W across every speaker (source photos are mixed studio B&W / color snapshots) — no tint,
   no glow; a faint contrast lift only, so skin/suit detail doesn't go flat on the LED's white balance. */
#speakercard .spk-photo img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: top center;
  display: block; filter: grayscale(1) contrast(1.08) brightness(1.03); }
#speakercard .spk-text { position: absolute; right: 6cqw; top: 50%; max-width: 38cqw; z-index: 5;
  transform: translateY(-50%); text-align: right; }
#speakercard .spk-label { display: flex; flex-direction: column; align-items: flex-end; gap: .5cqh; margin-bottom: 3.2cqh; }
#speakercard .spk-label-ar { font-size: 2.5cqh; font-weight: 600; letter-spacing: .05em; color: var(--gold); }
#speakercard .spk-label-en { font-size: 1.6cqh; font-weight: 700; letter-spacing: .34em; text-transform: uppercase; color: var(--muted); }
#speakercard .spk-nameAr { font-size: 9.5cqh; font-weight: 700; line-height: 1.45; padding: .06em 0; color: var(--cream); }
#speakercard .spk-nameEn { font-size: 3.3cqh; font-weight: 400; color: var(--muted); margin-top: .6cqh; letter-spacing: .03em; text-align: right; }
#speakercard .spk-hr { display: block; width: 5cqw; height: .16cqh; margin: 2.6cqh 0 2.6cqh auto; background: var(--gold); transform-origin: right center; }
#speakercard .spk-titleAr { font-size: 3.6cqh; color: var(--muted); font-weight: 500; line-height: 1.55; }
#speakercard .spk-titleEn { font-size: 2.3cqh; color: var(--muted); opacity: .85; margin-top: .5cqh; letter-spacing: .02em; text-align: right; }
/* MFZ_PA 2026-11-11: footer→header — was a single bottom-center logo (bottom:4cqh, hidden behind
   stage/podium on the 8x4m LED); now mirrors .dhead/.top (logo top-right, event line top-left). */
#speakercard .spk-head { position: absolute; top: 2.6cqh; right: 4cqw; left: 4cqw; display: flex; justify-content: space-between; align-items: center;
  font-size: 2.2cqh; color: var(--muted); z-index: 6; }
/* MFZ_PA 2026-11-14 (MFZ: +50% on the show header logo) — mirrors .dlogo's same bump (deck.css);
   was 4.4cqh, ×1.5. Logo sits top-right, .spk-photo is left:5cqw/top:9cqh — opposite side, no overlap. */
#speakercard .spk-logo { height: 6.6cqh; width: auto; opacity: .85; }

/* ── speaker intro card v3 entrance — ONE elegant pass only, transform/opacity only, no loops ── */
#speakercard.on .spk-photo { animation: spkPhotoIn 1.1s ease both; }
#speakercard.on .spk-photo img { animation: spkPush 1.8s ease-out both; transform-origin: center top; }
#speakercard.on .spk-label { animation: spkLineIn .6s .18s ease both; }
#speakercard.on .spk-nameAr { animation: spkLineIn .6s .33s ease both; }
#speakercard.on .spk-nameEn { animation: spkLineIn .6s .48s ease both; }
#speakercard.on .spk-hr { animation: spkHrIn .5s .6s ease both; }
#speakercard.on .spk-titleAr { animation: spkLineIn .6s .72s ease both; }
#speakercard.on .spk-titleEn { animation: spkLineIn .6s .87s ease both; }
@keyframes spkPhotoIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes spkPush { from { transform: scale(1); } to { transform: scale(1.02); } }
@keyframes spkLineIn { from { opacity: 0; transform: translateY(1.4cqh); } to { opacity: 1; transform: translateY(0); } }
@keyframes spkHrIn { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } }