@font-face { font-family: "Big Shoulders Display"; src: url("../fonts/fireworks/bigshoulders-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Sora"; src: url("../fonts/fireworks/sora-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Sora"; src: url("../fonts/fireworks/sora-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Yellowtail"; src: url("../fonts/fireworks/yellowtail-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

/* FIREWORKS — New Year's Eve, weddings with a sparkler send-off, debuts, graduations, company anniversaries.
   Signature idea: you light the fuse. A rocket climbs and bursts over the names, and fireworks keep going
   over a city skyline on the cover: tap the sky to launch your own. Type: Big Shoulders Display · Sora · Yellowtail */
:root { --bg: #0b0d1c; --paper: #141834; --ink: #f4f1ff; --muted: #b3b2d1; --line: rgba(244, 241, 255, .14);
  --accent: #f7c85c; --accent-ink: #1a1405; --fw-1: #f7c85c; --fw-2: #ff6f91; --fw-3: #7fd8ff; --fw-4: #ffffff; --skyline: #05060f; --sky-2: #1b2150;
  --display: "Big Shoulders Display", Impact, sans-serif; --text: "Sora", system-ui, sans-serif; --script: "Yellowtail", cursive; --radius: 14px; }
body { background: var(--bg); color: var(--ink); }

/* intro */
.fw-intro { --intro-ms: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center;
  background: radial-gradient(120% 70% at 50% 0%, var(--sky-2), var(--bg) 70%); overflow: hidden; }
.fw-stars { position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 32% 8%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 58% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 76% 12%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 88% 30%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 22% 40%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 66% 44%, #fff 50%, transparent 51%); opacity: .7; }
.fw-in-k { position: relative; margin: 0; font: 1.6rem var(--script); color: var(--accent); }
.fw-in-names { position: relative; margin: 0; font: 800 clamp(2.6rem, 14vw, 4.4rem)/.95 var(--display); text-transform: uppercase; letter-spacing: .01em; color: #fff; }
.fw-for { position: relative; margin: 0; color: var(--muted); }
.fw-pad { position: relative; width: 120px; height: 150px; margin: 14px 0 2px; }
.fw-rocket { position: absolute; left: 50%; bottom: 34px; width: 22px; height: 70px; margin-left: -11px; border-radius: 4px; background: repeating-linear-gradient(180deg, var(--fw-2) 0 12px, #fff 12px 18px); box-shadow: 0 0 0 2px rgba(0,0,0,.25) inset; }
.fw-rocket::after { content: ""; position: absolute; left: 50%; bottom: -34px; width: 2px; height: 34px; margin-left: -1px; background: #b7a27c; }
.fw-tip { position: absolute; left: -4px; top: -20px; border-left: 15px solid transparent; border-right: 15px solid transparent; border-bottom: 22px solid var(--accent); }
.fw-fuse { position: absolute; left: 50%; bottom: 0; width: 56px; height: 34px; border-left: 2px dashed #c9b48a; border-bottom: 2px dashed #c9b48a; border-radius: 0 0 0 30px; }
.fw-spark { position: absolute; right: -6px; bottom: -6px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 4px var(--accent); opacity: 0; }
.fw-light { position: relative; min-height: 52px; padding: 12px 26px; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font: 600 1rem var(--text); letter-spacing: .04em; cursor: pointer; box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent); animation: fw-ping 2s infinite; }
@keyframes fw-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 100% { box-shadow: 0 0 0 18px transparent; } }
.fw-intro .intro-hint { position: relative; color: var(--muted); font-size: .8rem; margin: 0; }
.is-opening .fw-spark { animation: fw-burn .6s linear forwards; }
@keyframes fw-burn { 0% { opacity: 1; right: -6px; bottom: -6px; } 60% { right: 50px; bottom: -6px; } 100% { opacity: 1; right: 52px; bottom: 30px; } }
.is-opening .fw-rocket { animation: fw-launch .8s cubic-bezier(.5,0,.9,.5) .55s forwards; }
@keyframes fw-launch { to { transform: translateY(-75vh) scale(.6); opacity: 0; } }
.is-opening .fw-light { opacity: 0; transition: opacity .3s; }

/* hero */
.t-fireworks .fw-hero { position: relative; overflow: hidden; padding: 60px 20px 120px; background: radial-gradient(120% 70% at 50% 0%, var(--sky-2), var(--bg) 70%); }
.fw-hero .cm-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fw-hero.has-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,6,15,.55), rgba(5,6,15,.75)); z-index: 0; }
.fw-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.fw-skyline { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: 1; background: var(--skyline);
  -webkit-mask: linear-gradient(#000, #000) bottom / 100% 22px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 90' preserveAspectRatio='none'%3E%3Cpath d='M0 90V60h18V40h14v20h10V25h16v35h8V50h12v-8h10v48h6V30h20v60h8V45h14V20h6V8h4v12h6v70h8V55h16v35h10V35h18v55h8V48h12v42h6V28h14v62h10V52h18v38h12V40h16v50h8V62h14v28z'/%3E%3C/svg%3E") bottom / 100% 90px no-repeat;
  mask: linear-gradient(#000, #000) bottom / 100% 22px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 90' preserveAspectRatio='none'%3E%3Cpath d='M0 90V60h18V40h14v20h10V25h16v35h8V50h12v-8h10v48h6V30h20v60h8V45h14V20h6V8h4v12h6v70h8V55h16v35h10V35h18v55h8V48h12v42h6V28h14v62h10V52h18v38h12V40h16v50h8V62h14v28z'/%3E%3C/svg%3E") bottom / 100% 90px no-repeat; }
.fw-copy { position: relative; z-index: 2; max-width: 560px; pointer-events: none; }
.fw-copy a, .fw-copy b { pointer-events: auto; }
.t-fireworks .hero-guest { font: 1.5rem var(--script); color: var(--accent); }
.t-fireworks .hero-k { font: 1.7rem var(--script); color: var(--accent); margin-bottom: 4px; }
.t-fireworks .hero-t { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(3.2rem, 17vw, 6.4rem); line-height: .92;
  background: linear-gradient(180deg, #fff 30%, color-mix(in srgb, var(--accent) 80%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; }
.fw-big { font: 800 clamp(4rem, 26vw, 9rem)/.9 var(--display); color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--accent) 70%, transparent); margin: 4px 0 0; }
.t-fireworks .hero-line { margin: 16px auto; max-width: 24em; color: var(--ink); }
.t-fireworks .hero-date { display: inline-block; margin: 0; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; font-weight: 600; letter-spacing: .08em; font-size: .86rem; background: rgba(0,0,0,.25); }
.t-fireworks .hero-place { color: var(--muted); margin: 8px 0 0; }
.t-fireworks .hero-cta { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.fw-tap { margin: 16px 0 0; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* sections */
.t-fireworks .sh-k { font: 1.5rem var(--script); letter-spacing: 0; text-transform: none; color: var(--accent); }
.t-fireworks .sh-t { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(2.4rem, 11vw, 3.6rem); }
.t-fireworks .cd-u { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
.t-fireworks .cd-u b { font-family: var(--display); font-weight: 800; font-size: clamp(2.4rem, 12vw, 3.6rem); color: var(--accent); }
.t-fireworks .tl, .t-fireworks .vn-c, .t-fireworks .rs, .t-fireworks .rs-done, .t-fireworks .faq, .t-fireworks .pp-g, .t-fireworks .story-body { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); }
.t-fireworks .tl { padding: 8px 18px; }
.t-fireworks .tl-time { color: var(--accent); font-weight: 600; }
.t-fireworks .vn-c { padding: 22px 18px; }
.t-fireworks .f-in, .t-fireworks .ch span { background: rgba(255,255,255,.04); border-color: var(--line); }
.t-fireworks .rs-btn { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.t-fireworks .btn-line { color: var(--ink); }
.t-fireworks .btn-line:hover { background: var(--ink); color: var(--bg); }
.t-fireworks .cl-line { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(2rem, 10vw, 3rem); line-height: 1; }
.t-fireworks .cl-sign { font: 1.8rem var(--script); color: var(--accent); }
.t-fireworks .ph-slot { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: rgba(255,255,255,.04); color: var(--ink); }

/* ---------- sparkler slideshow gallery ---------- */
.fw-show { max-width: 520px; margin: 0 auto; color: var(--accent); }
.fw-stage { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 0 50px -12px color-mix(in srgb, var(--fw-2) 50%, transparent); }
.fw-show .sl { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1s ease, transform 4s ease-out; transform: scale(1.06); }
.fw-show .sl.is-on { opacity: 1; transform: scale(1); z-index: 1; }
.fw-simg { position: absolute; inset: 0; background: linear-gradient(160deg, var(--sky-2), var(--paper)); }
.fw-show .sl figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 40px 14px 16px; font: 1.5rem var(--script); color: #fff; text-align: center; background: linear-gradient(transparent, rgba(5,6,15,.8)); }
.fw-sprk { position: absolute; z-index: 3; top: 14%; right: 16%; width: 6px; height: 6px; border-radius: 50%; pointer-events: none; opacity: 0;
  box-shadow: 0 -38px 0 var(--fw-1), 27px -27px 0 var(--fw-2), 38px 0 0 var(--fw-3), 27px 27px 0 var(--fw-1), 0 38px 0 var(--fw-2), -27px 27px 0 var(--fw-3), -38px 0 0 var(--fw-1), -27px -27px 0 var(--fw-2); }
.fw-show.is-burst .fw-sprk { animation: fw-pop 1.1s ease-out; }
@keyframes fw-pop { 0% { opacity: 1; transform: scale(.2); } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(1.5); } }
.fw-show .sl-dots { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .fw-show .sl { transition: opacity .3s; transform: none; } .fw-sprk { display: none; } }