/* 🎆 Bonfire Night — landing. Built from portal skins: bonfire-night/tokens.css + _map/landing.css + bonfire-night/landing.css. Visuals only. */
/* =============================================================================
   SKIN: bonfire-night — 🎆 Bonfire Night
   Midnight sky with gold and red firework bursts, gold Bungee headings, sparkler-gold buttons.
   Seasonal design, PORTAL ONLY. Generated by generators/gen_seasonal.py — edit there.
   ============================================================================= */
@import url("https://fonts.googleapis.com/css2?family=Bungee&family=Rubik:wght@500;700;800&display=swap");

:root[data-skin] {
  --sk-scheme: dark;
  --sk-bg: #070b1e;
  --sk-bg-chrome: #04061a;
  --sk-chrome-text: #f6f2e8;
  --sk-chrome-text-2: rgba(246,242,232,0.72);
  --sk-chrome-border: rgba(255,255,255,0.12);
  --sk-surface: #10163a;
  --sk-surface-2: #18204a;
  --sk-surface-3: #10163a;
  --sk-overlay: rgba(0,0,0,.72);
  --sk-text: #f6f2e8;
  --sk-text-2: #d6d9f0;
  --sk-text-3: #9aa3cf;
  --sk-text-4: #9aa3cf;
  --sk-link: #ffc23d;
  --sk-border: #262f66;
  --sk-border-strong: #262f66;
  --sk-hairline: rgba(246,242,232,0.08);
  --sk-accent: #ffc23d;
  --sk-accent-hover: #ffc23d;
  --sk-accent-soft: rgba(255,194,61,0.16);
  --sk-accent-ink: #1a1200;
  --sk-grad-a: #ff4d4d;
  --sk-grad-b: #ffc23d;
  --sk-gradient: linear-gradient(90deg,#ff4d4d,#ffc23d);
  --sk-grad-ink: #1a0b00;
  --sk-gold: #ffc23d;
  --sk-teal: #ffc23d;
  --sk-navy: #04061a;
  --sk-success: #2fbf71;
  --sk-warning: #ffc23d;
  --sk-danger: #ff4d5e;
  --sk-progress-track: #18204a;
  --sk-progress-fill: #ffc23d;
  --sk-font-head: "Rubik", system-ui, sans-serif;
  --sk-font-body: "Rubik", system-ui, sans-serif;
  --sk-head-style: normal;
  --sk-head-weight: 800;
  --sk-head-transform: none;
  --sk-head-tracking: .2px;
  --sk-radius-sm: 7px;
  --sk-radius-btn: 14px;
  --sk-radius-card: 14px;
  --sk-radius-pill: 999px;
  --sk-shadow: 0 12px 30px rgba(0,0,0,.5);
  --sk-shadow-lg: 0 20px 46px rgba(0,0,0,.65);
  --sk-logo-filter: drop-shadow(0 0 10px rgba(255,194,61,.45));
}

/* =============================================================================
   SKIN MAP — HOMEPAGE (public/landing/index.html, the iframe inside "/").
   Shared by ALL skins; reads ONLY --sk-* tokens. The homepage defines its own
   short token set on :root — this file points each one at the skin, plus the
   few literal colours the homepage uses. Section numbers match SKIN-MAP.md (L1–L10).
   ============================================================================= */

/* L1. token bridge */
:root[data-skin] {
  color-scheme: var(--sk-scheme);
  --bg-page: var(--sk-bg);
  --bg-surface: var(--sk-surface);
  --bg-surface-alt: var(--sk-surface-2);
  --accent-primary: var(--sk-accent);
  --accent-primary-hover: var(--sk-accent-hover);
  --accent-gradient-start: var(--sk-grad-a);
  --accent-gradient-end: var(--sk-grad-b);
  --gradient: var(--sk-gradient);
  --accent-gold: var(--sk-gold);
  --accent-teal: var(--sk-teal);
  --accent-navy: var(--sk-navy);
  --text-primary: var(--sk-text);
  --text-secondary: var(--sk-text-3);
  --border-subtle: var(--sk-border);
  --progress-track: var(--sk-progress-track);
  --progress-fill: var(--sk-progress-fill);
  --r-sm: var(--sk-radius-sm);
  --r-btn: var(--sk-radius-btn);
  --r-card: var(--sk-radius-card);
  --r-pill: var(--sk-radius-pill);
  --f-head: var(--sk-font-head);
  --f-body: var(--sk-font-body);
}

/* L2. canvas + chrome */
:root[data-skin] body { background: var(--sk-bg); color: var(--sk-text-3); }
:root[data-skin] .nav { background: color-mix(in srgb, var(--sk-bg-chrome) 96%, transparent); }
:root[data-skin] .footer { background: var(--sk-bg-chrome); }
:root[data-skin] h1, :root[data-skin] h2, :root[data-skin] h3, :root[data-skin] h4, :root[data-skin] .btn { color: var(--sk-text); }
/* header + footer sit on --sk-bg-chrome, so they use the chrome ink */
:root[data-skin] .nav { border-bottom-color: var(--sk-chrome-border); }
:root[data-skin] .nav .logo b, :root[data-skin] .nav .nav-link, :root[data-skin] .nav .btn-outline,
:root[data-skin] .nav .btn-pill, :root[data-skin] .nav-burger { color: var(--sk-chrome-text); border-color: var(--sk-chrome-border); }
:root[data-skin] .nav .logo small { color: var(--sk-chrome-text-2); }
:root[data-skin] .footer { color: var(--sk-chrome-text-2); border-top-color: var(--sk-chrome-border); }
:root[data-skin] .footer .f-head, :root[data-skin] .footer .f-cats a,
:root[data-skin] .footer .trust-box, :root[data-skin] .footer .age, :root[data-skin] .footer .sec-link { color: var(--sk-chrome-text); }
:root[data-skin] .footer .trust-box, :root[data-skin] .footer .f-cats a, :root[data-skin] .footer .f-cats { border-color: var(--sk-chrome-border); } /* social icons keep their brand colours */
:root[data-skin] .footer .age { border-color: var(--sk-chrome-text); }
:root[data-skin] .footer .f-about { background: color-mix(in srgb, var(--sk-chrome-text) 6%, var(--sk-bg-chrome)); }
:root[data-skin] .footer .f-about h3 { color: var(--sk-chrome-text); }
@media (max-width: 980px) { :root[data-skin] .nav-links { background: var(--sk-bg-chrome); } }
:root[data-skin] .btn-red, :root[data-skin] .btn-violet { color: var(--sk-accent-ink); }
:root[data-skin] .btn-violet { background: var(--sk-grad-a); color: var(--sk-grad-ink); }
/* everything sitting ON the gradient uses --sk-grad-ink (dark on metallic skins) */
:root[data-skin] .marquee-item { color: var(--sk-grad-ink); }
:root[data-skin] .stat-dots i { background: color-mix(in srgb, var(--sk-grad-ink) 30%, transparent); }
:root[data-skin] .stat-dots i.on { background: var(--sk-grad-ink); }
:root[data-skin] .stat-slide .stars { color: inherit; }

/* L3. headings follow the skin's heading style */
:root[data-skin] .hero-headline, :root[data-skin] .sec-title, :root[data-skin] .promo-copy h2,
:root[data-skin] .stat-mid strong, :root[data-skin] .w-name, :root[data-skin] .f-head,
:root[data-skin] .f-about h3, :root[data-skin] .tab, :root[data-skin] .nav-link, :root[data-skin] .sec-label, :root[data-skin] .f-cats a {
  font-style: var(--sk-head-style);
  text-transform: var(--sk-head-transform);
}

/* L4. placeholders + wells */
:root[data-skin] .hero-media, :root[data-skin] .card-media, :root[data-skin] .stats > div,
:root[data-skin] .w-strip div { background-color: var(--sk-surface-3); }
:root[data-skin] .hero-card { background: var(--sk-bg); }
:root[data-skin] .hero-info { border-right-color: var(--sk-hairline); }
:root[data-skin] .dd-menu { background: var(--sk-surface); }

/* L5. cards */
:root[data-skin] .card { box-shadow: var(--sk-shadow); }
:root[data-skin] .card:hover { box-shadow: var(--sk-shadow-lg); }
:root[data-skin] .price-pill { background: var(--sk-text); color: var(--sk-bg); }
:root[data-skin] .tab[aria-selected="true"] { background: var(--sk-text); color: var(--sk-bg); }

/* L6. promo banner */
:root[data-skin] .promo {
  background: radial-gradient(120% 140% at 100% 50%, color-mix(in srgb, var(--sk-gold) 14%, transparent), transparent 55%), var(--sk-surface-3);
}
:root[data-skin] .promo-copy .btn { border-color: var(--sk-text); }

/* L7. winners */
:root[data-skin] .w-quote { color: var(--sk-text-2); }
:root[data-skin] .w-pill {
  background: color-mix(in srgb, var(--sk-teal) 14%, transparent);
  color: color-mix(in srgb, var(--sk-teal) 55%, var(--sk-text));
  border-color: color-mix(in srgb, var(--sk-teal) 45%, transparent);
}

/* L8. footer bits */
:root[data-skin] .f-contact svg { stroke: var(--sk-gold); }

/* L10. text sitting on the PAGE background follows the skin ink (the homepage
   hard-codes #fff for these). Text on photos / accent fills / the gradient stays white. */
:root[data-skin] .hero-info h3, :root[data-skin] .price-now, :root[data-skin] .card-title,
:root[data-skin] .sold-label, :root[data-skin] .w-name, :root[data-skin] .sec-label,
:root[data-skin] .tab:hover, :root[data-skin] #moreBtn, :root[data-skin] .promo-copy .btn { color: var(--sk-text); }
:root[data-skin] .hero-headline { color: #fff; }            /* always on a photo */
:root[data-skin] .stat-mid, :root[data-skin] .stat-mid strong { color: var(--sk-grad-ink); } /* on the gradient */
:root[data-skin] .footer .f-links a:hover, :root[data-skin] .footer .f-contact a:hover { color: var(--sk-chrome-text); }

/* L9. links */
:root[data-skin] .sec-link, :root[data-skin] .w-more { color: var(--sk-text); border-bottom-color: var(--sk-accent); }

/* bonfire-night — homepage */
:root[data-skin] body { background: radial-gradient(ellipse at 50% -10%, #1d2a6b 0%, transparent 55%), linear-gradient(180deg,#0b1030 0%,#070b1e 55%,#05071a 100%) !important; background-attachment: fixed !important; background-color: #070b1e !important; }
:root[data-skin] .hero-headline, :root[data-skin] .sec-title {
  font-family: "Bungee", "Rubik", sans-serif !important; font-weight: 400 !important; font-style: normal !important;
  letter-spacing: .5px !important; text-transform: none !important; color: #ffc23d !important;
  text-shadow: 0 0 18px rgba(255,194,61,.45);
}
:root[data-skin] .btn-red, :root[data-skin] .btn-violet { background: linear-gradient(180deg,#ffc23d,#ffc23d) !important; color: #1a1200 !important; border: 0 !important; box-shadow: 0 6px 18px rgba(255,194,61,.45) !important; font-weight: 800 !important; }
:root[data-skin] .bar i { background: repeating-linear-gradient(135deg,#ffc23d 0 10px,#ff4d4d 10px 20px) !important; }
:root[data-skin] .card, :root[data-skin] .hero-card {  }
:root[data-skin] .marquee-item { color: #1a0b00 !important; font-weight: 800 !important; }
:root[data-skin] .tab[aria-selected="true"], :root[data-skin] .price-pill { background: #ffc23d !important; color: #1a1200 !important; }
:root[data-skin] .hero-media { border-bottom: 3px solid #ffc23d; }
:root[data-skin] .wrap, :root[data-skin] .section, :root[data-skin] .footer, :root[data-skin] .nav { position: relative; z-index: 2; }

:root[data-skin] body::before, :root[data-skin] body::after {
  content: ""; position: fixed; width: 220px; height: 220px; z-index: 1; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 90% 50%, #ffc23d 0 2px, transparent 3px),radial-gradient(circle at 78% 78%, #ffc23d 0 2px, transparent 3px),radial-gradient(circle at 50% 90%, #ffc23d 0 2px, transparent 3px),radial-gradient(circle at 22% 78%, #ffc23d 0 2px, transparent 3px),radial-gradient(circle at 10% 50%, #ffc23d 0 2px, transparent 3px),radial-gradient(circle at 22% 22%, #ffc23d 0 2px, transparent 3px),radial-gradient(circle at 50% 10%, #ffc23d 0 2px, transparent 3px),radial-gradient(circle at 78% 22%, #ffc23d 0 2px, transparent 3px), radial-gradient(circle, #ffc23d55 0 6%, transparent 30%);
  animation: sk-burst 5.5s ease-out infinite; top: 8%; left: 12%;
}
:root[data-skin] body::after {
  background: radial-gradient(circle at 90% 50%, #ff4d4d 0 2px, transparent 3px),radial-gradient(circle at 78% 78%, #ff4d4d 0 2px, transparent 3px),radial-gradient(circle at 50% 90%, #ff4d4d 0 2px, transparent 3px),radial-gradient(circle at 22% 78%, #ff4d4d 0 2px, transparent 3px),radial-gradient(circle at 10% 50%, #ff4d4d 0 2px, transparent 3px),radial-gradient(circle at 22% 22%, #ff4d4d 0 2px, transparent 3px),radial-gradient(circle at 50% 10%, #ff4d4d 0 2px, transparent 3px),radial-gradient(circle at 78% 22%, #ff4d4d 0 2px, transparent 3px), radial-gradient(circle, #ff4d4d55 0 6%, transparent 30%); left: auto; right: 10%; top: calc(8% + 60px); width: 180px; height: 180px;
  animation-delay: 2.4s; animation-duration: 6.2s;
}
:root[data-skin] .footer::before, :root[data-skin] footer::before {
  content: ""; position: absolute; left: 45%; top: -150px; width: 160px; height: 160px; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 90% 50%, #ffffff 0 2px, transparent 3px),radial-gradient(circle at 78% 78%, #ffffff 0 2px, transparent 3px),radial-gradient(circle at 50% 90%, #ffffff 0 2px, transparent 3px),radial-gradient(circle at 22% 78%, #ffffff 0 2px, transparent 3px),radial-gradient(circle at 10% 50%, #ffffff 0 2px, transparent 3px),radial-gradient(circle at 22% 22%, #ffffff 0 2px, transparent 3px),radial-gradient(circle at 50% 10%, #ffffff 0 2px, transparent 3px),radial-gradient(circle at 78% 22%, #ffffff 0 2px, transparent 3px), radial-gradient(circle, #ffffff55 0 6%, transparent 30%); animation: sk-burst 7s ease-out 1.2s infinite;
}
:root[data-skin] .footer, :root[data-skin] footer { position: relative; }
@keyframes sk-burst { 0% { opacity: 0; transform: scale(.1); } 12% { opacity: 1; } 45% { opacity: .85; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.15) translateY(14px); } }
@media (max-width: 640px) { :root[data-skin] body::before { width: 150px; height: 150px; } :root[data-skin] body::after { width: 120px; height: 120px; } }
@media (prefers-reduced-motion: reduce) {
  :root[data-skin] body::before, :root[data-skin] body::after, :root[data-skin] .footer::before, :root[data-skin] footer::before, :root[data-skin] body > *:first-child::before { animation: none !important; }
  :root[data-skin] body::before, :root[data-skin] .footer::before, :root[data-skin] footer::before { display: none; }
}

/* ---- EXTRA FIREWORKS (added 1 Nov 2026): seven more bursts on a fixed full-screen layer
   ABOVE the content (pointer-events: none; z-index 3 — dialogs/popups sit far higher).
   Real elements (<div class="fw-sky"><i>×7</div> in app/layout.js and public/landing/index.html),
   not body pseudo-elements, so they also show inside the app shell, which blanks
   body::before/::after. Only while the skin attribute is on. ---- */
:root[data-skin] .fw-sky { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; contain: strict; }
:root[data-skin] .fw-sky i { position: absolute; display: block; opacity: 0; transform: scale(.1); will-change: transform, opacity; animation: fw-burst 6s ease-out infinite; }
:root[data-skin] .fw-sky i:nth-child(1) { left: 6%; top: 7%; width: 300px; height: 300px; animation-duration: 5.2s; animation-delay: 0.0s; background: radial-gradient(circle at 90% 50%, #ffc23d 0 2.5px, transparent 3.5px), radial-gradient(circle at 78% 78%, #ffc23d 0 2.5px, transparent 3.5px), radial-gradient(circle at 50% 90%, #ffc23d 0 2.5px, transparent 3.5px), radial-gradient(circle at 22% 78%, #ffc23d 0 2.5px, transparent 3.5px), radial-gradient(circle at 10% 50%, #ffc23d 0 2.5px, transparent 3.5px), radial-gradient(circle at 22% 22%, #ffc23d 0 2.5px, transparent 3.5px), radial-gradient(circle at 50% 10%, #ffc23d 0 2.5px, transparent 3.5px), radial-gradient(circle at 78% 22%, #ffc23d 0 2.5px, transparent 3.5px), radial-gradient(circle at 71% 59%, #ffc23d 0 1.8px, transparent 2.6px), radial-gradient(circle at 59% 71%, #ffc23d 0 1.8px, transparent 2.6px), radial-gradient(circle at 41% 71%, #ffc23d 0 1.8px, transparent 2.6px), radial-gradient(circle at 29% 59%, #ffc23d 0 1.8px, transparent 2.6px), radial-gradient(circle at 29% 41%, #ffc23d 0 1.8px, transparent 2.6px), radial-gradient(circle at 41% 29%, #ffc23d 0 1.8px, transparent 2.6px), radial-gradient(circle at 59% 29%, #ffc23d 0 1.8px, transparent 2.6px), radial-gradient(circle at 71% 41%, #ffc23d 0 1.8px, transparent 2.6px), radial-gradient(circle, rgba(255,194,61,.45) 0 7%, transparent 32%); }
:root[data-skin] .fw-sky i:nth-child(2) { left: 68%; top: 4%; width: 250px; height: 250px; animation-duration: 6.1s; animation-delay: 1.3s; background: radial-gradient(circle at 90% 50%, #ff4d4d 0 2.5px, transparent 3.5px), radial-gradient(circle at 78% 78%, #ff4d4d 0 2.5px, transparent 3.5px), radial-gradient(circle at 50% 90%, #ff4d4d 0 2.5px, transparent 3.5px), radial-gradient(circle at 22% 78%, #ff4d4d 0 2.5px, transparent 3.5px), radial-gradient(circle at 10% 50%, #ff4d4d 0 2.5px, transparent 3.5px), radial-gradient(circle at 22% 22%, #ff4d4d 0 2.5px, transparent 3.5px), radial-gradient(circle at 50% 10%, #ff4d4d 0 2.5px, transparent 3.5px), radial-gradient(circle at 78% 22%, #ff4d4d 0 2.5px, transparent 3.5px), radial-gradient(circle at 71% 59%, #ff4d4d 0 1.8px, transparent 2.6px), radial-gradient(circle at 59% 71%, #ff4d4d 0 1.8px, transparent 2.6px), radial-gradient(circle at 41% 71%, #ff4d4d 0 1.8px, transparent 2.6px), radial-gradient(circle at 29% 59%, #ff4d4d 0 1.8px, transparent 2.6px), radial-gradient(circle at 29% 41%, #ff4d4d 0 1.8px, transparent 2.6px), radial-gradient(circle at 41% 29%, #ff4d4d 0 1.8px, transparent 2.6px), radial-gradient(circle at 59% 29%, #ff4d4d 0 1.8px, transparent 2.6px), radial-gradient(circle at 71% 41%, #ff4d4d 0 1.8px, transparent 2.6px), radial-gradient(circle, rgba(255,77,77,.42) 0 7%, transparent 32%); }
:root[data-skin] .fw-sky i:nth-child(3) { left: 38%; top: 16%; width: 210px; height: 210px; animation-duration: 5.6s; animation-delay: 2.6s; background: radial-gradient(circle at 90% 50%, #ffffff 0 2.5px, transparent 3.5px), radial-gradient(circle at 78% 78%, #ffffff 0 2.5px, transparent 3.5px), radial-gradient(circle at 50% 90%, #ffffff 0 2.5px, transparent 3.5px), radial-gradient(circle at 22% 78%, #ffffff 0 2.5px, transparent 3.5px), radial-gradient(circle at 10% 50%, #ffffff 0 2.5px, transparent 3.5px), radial-gradient(circle at 22% 22%, #ffffff 0 2.5px, transparent 3.5px), radial-gradient(circle at 50% 10%, #ffffff 0 2.5px, transparent 3.5px), radial-gradient(circle at 78% 22%, #ffffff 0 2.5px, transparent 3.5px), radial-gradient(circle at 71% 59%, #ffffff 0 1.8px, transparent 2.6px), radial-gradient(circle at 59% 71%, #ffffff 0 1.8px, transparent 2.6px), radial-gradient(circle at 41% 71%, #ffffff 0 1.8px, transparent 2.6px), radial-gradient(circle at 29% 59%, #ffffff 0 1.8px, transparent 2.6px), radial-gradient(circle at 29% 41%, #ffffff 0 1.8px, transparent 2.6px), radial-gradient(circle at 41% 29%, #ffffff 0 1.8px, transparent 2.6px), radial-gradient(circle at 59% 29%, #ffffff 0 1.8px, transparent 2.6px), radial-gradient(circle at 71% 41%, #ffffff 0 1.8px, transparent 2.6px), radial-gradient(circle, rgba(255,255,255,.38) 0 7%, transparent 32%); }
:root[data-skin] .fw-sky i:nth-child(4) { left: 9%; top: 44%; width: 240px; height: 240px; animation-duration: 6.8s; animation-delay: 3.4s; background: radial-gradient(circle at 90% 50%, #8ec5ff 0 2.5px, transparent 3.5px), radial-gradient(circle at 78% 78%, #8ec5ff 0 2.5px, transparent 3.5px), radial-gradient(circle at 50% 90%, #8ec5ff 0 2.5px, transparent 3.5px), radial-gradient(circle at 22% 78%, #8ec5ff 0 2.5px, transparent 3.5px), radial-gradient(circle at 10% 50%, #8ec5ff 0 2.5px, transparent 3.5px), radial-gradient(circle at 22% 22%, #8ec5ff 0 2.5px, transparent 3.5px), radial-gradient(circle at 50% 10%, #8ec5ff 0 2.5px, transparent 3.5px), radial-gradient(circle at 78% 22%, #8ec5ff 0 2.5px, transparent 3.5px), radial-gradient(circle at 71% 59%, #8ec5ff 0 1.8px, transparent 2.6px), radial-gradient(circle at 59% 71%, #8ec5ff 0 1.8px, transparent 2.6px), radial-gradient(circle at 41% 71%, #8ec5ff 0 1.8px, transparent 2.6px), radial-gradient(circle at 29% 59%, #8ec5ff 0 1.8px, transparent 2.6px), radial-gradient(circle at 29% 41%, #8ec5ff 0 1.8px, transparent 2.6px), radial-gradient(circle at 41% 29%, #8ec5ff 0 1.8px, transparent 2.6px), radial-gradient(circle at 59% 29%, #8ec5ff 0 1.8px, transparent 2.6px), radial-gradient(circle at 71% 41%, #8ec5ff 0 1.8px, transparent 2.6px), radial-gradient(circle, rgba(142,197,255,.42) 0 7%, transparent 32%); }
:root[data-skin] .fw-sky i:nth-child(5) { left: 76%; top: 38%; width: 270px; height: 270px; animation-duration: 5.9s; animation-delay: 4.6s; background: radial-gradient(circle at 90% 50%, #ffc23d 0 2.5px, transparent 3.5px), radial-gradient(circle at 78% 78%, #ffc23d 0 2.5px, transparent 3.5px), radial-gradient(circle at 50% 90%, #ffc23d 0 2.5px, transparent 3.5px), radial-gradient(circle at 22% 78%, #ffc23d 0 2.5px, transparent 3.5px), radial-gradient(circle at 10% 50%, #ffc23d 0 2.5px, transparent 3.5px), radial-gradient(circle at 22% 22%, #ffc23d 0 2.5px, transparent 3.5px), radial-gradient(circle at 50% 10%, #ffc23d 0 2.5px, transparent 3.5px), radial-gradient(circle at 78% 22%, #ffc23d 0 2.5px, transparent 3.5px), radial-gradient(circle at 71% 59%, #ffc23d 0 1.8px, transparent 2.6px), radial-gradient(circle at 59% 71%, #ffc23d 0 1.8px, transparent 2.6px), radial-gradient(circle at 41% 71%, #ffc23d 0 1.8px, transparent 2.6px), radial-gradient(circle at 29% 59%, #ffc23d 0 1.8px, transparent 2.6px), radial-gradient(circle at 29% 41%, #ffc23d 0 1.8px, transparent 2.6px), radial-gradient(circle at 41% 29%, #ffc23d 0 1.8px, transparent 2.6px), radial-gradient(circle at 59% 29%, #ffc23d 0 1.8px, transparent 2.6px), radial-gradient(circle at 71% 41%, #ffc23d 0 1.8px, transparent 2.6px), radial-gradient(circle, rgba(255,194,61,.45) 0 7%, transparent 32%); }
:root[data-skin] .fw-sky i:nth-child(6) { left: 20%; top: 66%; width: 230px; height: 230px; animation-duration: 6.4s; animation-delay: 0.9s; background: radial-gradient(circle at 90% 50%, #ff4d4d 0 2.5px, transparent 3.5px), radial-gradient(circle at 78% 78%, #ff4d4d 0 2.5px, transparent 3.5px), radial-gradient(circle at 50% 90%, #ff4d4d 0 2.5px, transparent 3.5px), radial-gradient(circle at 22% 78%, #ff4d4d 0 2.5px, transparent 3.5px), radial-gradient(circle at 10% 50%, #ff4d4d 0 2.5px, transparent 3.5px), radial-gradient(circle at 22% 22%, #ff4d4d 0 2.5px, transparent 3.5px), radial-gradient(circle at 50% 10%, #ff4d4d 0 2.5px, transparent 3.5px), radial-gradient(circle at 78% 22%, #ff4d4d 0 2.5px, transparent 3.5px), radial-gradient(circle at 71% 59%, #ff4d4d 0 1.8px, transparent 2.6px), radial-gradient(circle at 59% 71%, #ff4d4d 0 1.8px, transparent 2.6px), radial-gradient(circle at 41% 71%, #ff4d4d 0 1.8px, transparent 2.6px), radial-gradient(circle at 29% 59%, #ff4d4d 0 1.8px, transparent 2.6px), radial-gradient(circle at 29% 41%, #ff4d4d 0 1.8px, transparent 2.6px), radial-gradient(circle at 41% 29%, #ff4d4d 0 1.8px, transparent 2.6px), radial-gradient(circle at 59% 29%, #ff4d4d 0 1.8px, transparent 2.6px), radial-gradient(circle at 71% 41%, #ff4d4d 0 1.8px, transparent 2.6px), radial-gradient(circle, rgba(255,77,77,.42) 0 7%, transparent 32%); }
:root[data-skin] .fw-sky i:nth-child(7) { left: 64%; top: 60%; width: 250px; height: 250px; animation-duration: 7.1s; animation-delay: 5.7s; background: radial-gradient(circle at 90% 50%, #ffffff 0 2.5px, transparent 3.5px), radial-gradient(circle at 78% 78%, #ffffff 0 2.5px, transparent 3.5px), radial-gradient(circle at 50% 90%, #ffffff 0 2.5px, transparent 3.5px), radial-gradient(circle at 22% 78%, #ffffff 0 2.5px, transparent 3.5px), radial-gradient(circle at 10% 50%, #ffffff 0 2.5px, transparent 3.5px), radial-gradient(circle at 22% 22%, #ffffff 0 2.5px, transparent 3.5px), radial-gradient(circle at 50% 10%, #ffffff 0 2.5px, transparent 3.5px), radial-gradient(circle at 78% 22%, #ffffff 0 2.5px, transparent 3.5px), radial-gradient(circle at 71% 59%, #ffffff 0 1.8px, transparent 2.6px), radial-gradient(circle at 59% 71%, #ffffff 0 1.8px, transparent 2.6px), radial-gradient(circle at 41% 71%, #ffffff 0 1.8px, transparent 2.6px), radial-gradient(circle at 29% 59%, #ffffff 0 1.8px, transparent 2.6px), radial-gradient(circle at 29% 41%, #ffffff 0 1.8px, transparent 2.6px), radial-gradient(circle at 41% 29%, #ffffff 0 1.8px, transparent 2.6px), radial-gradient(circle at 59% 29%, #ffffff 0 1.8px, transparent 2.6px), radial-gradient(circle at 71% 41%, #ffffff 0 1.8px, transparent 2.6px), radial-gradient(circle, rgba(255,255,255,.38) 0 7%, transparent 32%); }
@keyframes fw-burst { 0% { opacity: 0; transform: scale(.1); } 10% { opacity: 1; } 42% { opacity: .9; transform: scale(1); } 72%, 100% { opacity: 0; transform: scale(1.18) translateY(18px); } }
@media (max-width: 640px) { :root[data-skin] .fw-sky i { width: 150px !important; height: 150px !important; } :root[data-skin] .fw-sky i:nth-child(5), :root[data-skin] .fw-sky i:nth-child(7) { display: none; } }
@media (prefers-reduced-motion: reduce) { :root[data-skin] .fw-sky { display: none; } }