/* ═══════════════════════════════════════════════════════════════
   FIRST SPARK STUDIOS — CINEMATIC LAYER v4
   • Embers: background layer, subtle, single rose tone
   • Section blocks: premium entrance animations
   • Tight spacing, no voids
   • Premium finish throughout
   ═══════════════════════════════════════════════════════════════ */

/* ─── CANVAS: hero section background ─── */
#particles {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  width: 100% !important;
  height: 100% !important;
}
/* Hero must be position:relative (already is) so canvas positions within it */
.hero { position: relative; overflow: hidden; }
/* Hero content sits above the canvas */
.hero-left, .hero-right { position: relative; z-index: 1; }

/* Nav sits above everything — that's all we need */
.nav { z-index: 9999 !important; }
/* Sections are position:relative for pseudo-elements but NO z-index
   so they don't create stacking contexts that block the canvas */

/* ─── SPACING: comfortable, dense, no voids ─── */
.services-strip { padding-top: 72px !important; padding-bottom: 72px !important; }
.stats          { padding-top: 64px !important; padding-bottom: 64px !important; }
.process        { padding-top: 72px !important; padding-bottom: 72px !important; }
.testimonials   { padding-top: 72px !important; padding-bottom: 72px !important; }
.cta-band       { padding-top: 80px !important; padding-bottom: 80px !important; }
.logos          { padding-top: 44px !important; padding-bottom: 44px !important; }
.section        { padding-top: 72px !important; padding-bottom: 72px !important; }
.packages       { padding-top: 72px !important; padding-bottom: 72px !important; }
.addons         { padding-top: 64px !important; padding-bottom: 64px !important; }
.faq            { padding-top: 64px !important; padding-bottom: 64px !important; }
.page-hero      { padding-top: calc(var(--nav-h) + 60px) !important; padding-bottom: 60px !important; }
footer          { padding-top: 60px !important; padding-bottom: 32px !important; }

.hero-left      { padding: 24px 5% 40px 6% !important; }
.hero-headline  { margin-bottom: 22px !important; }
.hero-sub       { margin-bottom: 32px !important; font-size: 15px !important; }
.hero-btns      { margin-bottom: 40px !important; }
.sec-hdr        { margin-bottom: 40px !important; }
.sec-hdr-split  { margin-bottom: 40px !important; }
.svc            { padding: 36px 32px !important; }
.services-grid  { gap: 1px !important; margin-top: 40px !important; }
.stat           { padding: 40px 28px !important; }
.process-grid   { gap: 28px !important; margin-top: 48px !important; }
.testi          { padding: 32px 28px !important; }
.testi-grid     { gap: 16px !important; margin-top: 40px !important; }
.pkg-card       { padding: 36px 28px !important; }
.pkg-grid       { gap: 16px !important; }
.footer-grid    { gap: 36px !important; padding-bottom: 40px !important; }
.values-grid    { margin-top: 32px !important; gap: 16px !important; }
.team-grid      { margin-top: 32px !important; gap: 16px !important; }
.svc-detail-grid{ margin-top: 40px !important; }
.addon-grid     { margin-top: 32px !important; }
.faq-grid       { margin-top: 32px !important; }

/* ─── SCROLL PROGRESS BAR ─── */
#scroll-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 9997;
  background: linear-gradient(90deg, var(--rose), var(--champagne));
  transform-origin: left; transform: scaleX(0);
  transition: transform .04s linear;
}

/* ─── FILM GRAIN ─── */
#grain {
  position: fixed; inset: 0; z-index: 9998;
  pointer-events: none; opacity: .018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
  animation: grain .35s steps(3) infinite;
}
@keyframes grain {
  0%,100% { background-position: 0 0; }
  33%  { background-position: 14% 22%; }
  66%  { background-position: -9% 11%; }
}

/* ─── SECTION BLOCK ENTRANCE ANIMATIONS ─── */

/* Base reveal — every .reveal element */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1),
              transform .9s cubic-bezier(.16,1,.3,1) !important;
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.stagger-1 { transition-delay: .08s !important; }
.stagger-2 { transition-delay: .18s !important; }
.stagger-3 { transition-delay: .28s !important; }
.stagger-4 { transition-delay: .38s !important; }
.stagger-5 { transition-delay: .48s !important; }

/* Section-level fade — the whole section wrapper gets a gentle lift */
.services-strip,
.stats,
.process,
.testimonials,
.cta-band,
.logos,
.packages,
.addons,
.faq,
.section {
  animation: section-rise .8s cubic-bezier(.16,1,.3,1) both;
  animation-play-state: paused;
}
.services-strip.section-visible,
.stats.section-visible,
.process.section-visible,
.testimonials.section-visible,
.cta-band.section-visible,
.logos.section-visible,
.packages.section-visible,
.addons.section-visible,
.faq.section-visible,
.section.section-visible {
  animation-play-state: running;
}
@keyframes section-rise {
  from { opacity: .4; transform: translateY(16px); }
  to   { opacity: 1;  transform: translateY(0); }
}

/* Card stagger inside grids */
.svc:nth-child(1)         { transition-delay: .00s !important; }
.svc:nth-child(2)         { transition-delay: .07s !important; }
.svc:nth-child(3)         { transition-delay: .14s !important; }
.svc:nth-child(4)         { transition-delay: .21s !important; }
.svc:nth-child(5)         { transition-delay: .28s !important; }
.svc:nth-child(6)         { transition-delay: .35s !important; }

.testi:nth-child(1)       { transition-delay: .00s !important; }
.testi:nth-child(2)       { transition-delay: .09s !important; }
.testi:nth-child(3)       { transition-delay: .18s !important; }

.stat:nth-child(1)        { transition-delay: .00s !important; }
.stat:nth-child(2)        { transition-delay: .06s !important; }
.stat:nth-child(3)        { transition-delay: .12s !important; }
.stat:nth-child(4)        { transition-delay: .18s !important; }

.process-step:nth-child(1){ transition-delay: .00s !important; }
.process-step:nth-child(2){ transition-delay: .08s !important; }
.process-step:nth-child(3){ transition-delay: .16s !important; }
.process-step:nth-child(4){ transition-delay: .24s !important; }

/* ─── ROSE PETAL EXPLOSION ─── */
.click-burst {
  position: fixed; pointer-events: none; z-index: 99999;
  transform: translate(-50%, -50%);
}
.burst-petal {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  transform-origin: center bottom;
  animation: petal-fly var(--dur, .7s) cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes petal-fly {
  0%   { transform: translate(-50%,-100%) rotate(var(--rot,0deg)) scale(.2); opacity: 1; }
  30%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx,0px)), calc(-100% + var(--ty,0px)))
                    rotate(calc(var(--rot,0deg) + var(--spin,120deg))) scale(0); opacity: 0; }
}

/* ─── INTRO CURTAIN ─── */
#intro-curtain {
  position: fixed; inset: 0; z-index: 99999;
  background: var(--charcoal);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: 12px;
  animation: curtain-out .55s 1s cubic-bezier(.76,0,.24,1) forwards;
  pointer-events: none;
}
@keyframes curtain-out { to { transform: translateY(-100%); } }
.curtain-logo {
  font-family: 'Playfair Display', serif;
  font-size: 26px; font-weight: 900; color: var(--ivory);
  letter-spacing: .04em; opacity: 0;
  animation: fade-in-up .45s .15s cubic-bezier(.22,1,.36,1) forwards;
}
.curtain-logo span { color: var(--rose); }
.curtain-line {
  width: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--rose), transparent);
  animation: line-expand .4s .35s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes fade-in-up { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@keyframes line-expand { from { width:0; } to { width:160px; } }

/* ─── HERO ─── */
.hero { position: relative; }
/* Strong contrast on hero text */
.hero-headline { color: #1A1A1A !important; }
.hero-sub { color: #4A4A44 !important; font-size: 15.5px !important; }
.hero-eyebrow { color: var(--rose) !important; opacity: 1 !important; }
.hero-right::before {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(42,42,42,.22) 100%);
  pointer-events: none;
}
.hero-img-main {
  filter: brightness(.87) saturate(1.1) contrast(1.03) !important;
  transition: transform 8s ease-out;
}
.hero-img-main.kb { transform: scale(1.07); }

/* ─── HEADLINE SHIMMER ─── */
/* Shimmer only on non-hero headlines — hero em uses plain rose color */
.t-h1 em, .t-h2 em, .cta-band-title em, .contact-headline em {
  background: linear-gradient(120deg, var(--rose) 0%, var(--champagne) 55%, var(--rose) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 5s linear infinite;
  font-style: italic;
}
/* Hero em: bold rose, no transparency tricks */
.hero-headline em {
  color: var(--rose) !important;
  -webkit-text-fill-color: var(--rose) !important;
  font-style: italic;
}
@keyframes shimmer { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }

/* ─── TICKER ─── */
.ticker { position: relative; overflow: hidden; }
.ticker::before, .ticker::after {
  content: ''; position: absolute; top: 0; bottom: 0; z-index: 2; width: 80px; pointer-events: none;
}
.ticker::before { left: 0; background: linear-gradient(to right, var(--charcoal), transparent); }
.ticker::after  { right: 0; background: linear-gradient(to left, var(--charcoal), transparent); }

/* ─── SERVICE CARDS — premium hover ─── */
.svc {
  overflow: hidden; position: relative;
  transition: transform .5s cubic-bezier(.16,1,.3,1),
              box-shadow .5s cubic-bezier(.16,1,.3,1),
              background .3s !important;
}
.svc::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(196,133,138,.04) 0%, transparent 60%);
  opacity: 0; transition: opacity .4s;
}
.svc:hover { transform: translateY(-5px) !important; box-shadow: 0 20px 48px rgba(196,133,138,.1), 0 4px 12px rgba(42,42,42,.06) !important; }
.svc:hover::before { opacity: 1; }
.svc-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--blush); border: 1px solid var(--rose-lt);
  font-size: 18px; margin-bottom: 16px;
  transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .4s;
}
.svc:hover .svc-icon { transform: scale(1.08) rotate(5deg); box-shadow: 0 4px 16px rgba(196,133,138,.2); }

/* ─── STATS ─── */
.stat { overflow: hidden; position: relative; transition: background .3s !important; }
.stat::after {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 0; height: 1px; background: var(--rose-lt);
  transition: width .4s cubic-bezier(.16,1,.3,1);
}
.stat:hover::after { width: 60%; }
.stat:hover .stat-num { text-shadow: 0 0 32px rgba(196,133,138,.18); }

/* ─── TESTIMONIALS ─── */
.testi {
  position: relative; overflow: hidden;
  transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s, border-color .3s !important;
}
.testi::before {
  content: '\201C'; position: absolute; right: 20px; bottom: 4px;
  font-family: 'Playfair Display', serif; font-size: 80px; font-weight: 900;
  color: rgba(196,133,138,.06); line-height: 1; pointer-events: none;
}
.testi:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(196,133,138,.08) !important; }

/* ─── NAV — glassy premium ─── */
.nav {
  backdrop-filter: blur(28px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.6) !important;
  border-bottom: 1px solid transparent;
  transition: border-color .3s, box-shadow .3s !important;
}
.nav.scrolled {
  background: rgba(249,246,241,.96) !important;
  border-bottom-color: var(--border) !important;
  box-shadow: 0 1px 24px rgba(42,42,42,.05) !important;
}

/* ─── BUTTONS — premium sheen ─── */
.btn {
  position: relative; overflow: hidden;
  transition: all .35s cubic-bezier(.16,1,.3,1) !important;
  letter-spacing: 0.06em !important;
}
.btn::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.12) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform .5s cubic-bezier(.16,1,.3,1); pointer-events: none;
}
.btn:hover::after { transform: translateX(100%); }
.btn-rose { box-shadow: 0 4px 16px rgba(196,133,138,.26) !important; }
.btn-rose:hover { box-shadow: 0 8px 28px rgba(196,133,138,.4) !important; transform: translateY(-2px) !important; }
.btn-outline:hover { transform: translateY(-2px) !important; }

/* ─── HERO BADGES ─── */
.hero-badge {
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 44px rgba(42,42,42,.14), 0 2px 8px rgba(196,133,138,.08) !important;
  border: 1px solid rgba(196,133,138,.12) !important;
}
.hero-badge2 { box-shadow: 0 8px 32px rgba(196,133,138,.38) !important; }

/* ─── CTA BAND ─── */
.cta-band { position: relative; overflow: hidden; }
.cta-band::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(196,133,138,.06), transparent 55%);
  pointer-events: none;
}
.cta-band > * { position: relative; z-index: 1; }

/* ─── FOOTER ─── */
footer { position: relative; overflow: hidden; }
footer::before {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 400px; height: 180px;
  background: radial-gradient(ellipse at center, rgba(196,133,138,.025), transparent 70%);
  pointer-events: none;
}

/* ─── LOGO ROW ─── */
.logos-row span { transition: color .35s, opacity .35s, transform .35s; cursor: default; }
.logos-row span:hover { color: var(--rose) !important; opacity: 1 !important; transform: scale(1.04); }

/* ─── PROCESS CONNECTOR ─── */
.process-connector { background: linear-gradient(90deg, var(--rose-lt), transparent) !important; }

/* ─── AMBIENT ORBS ─── */
.ambient-orb {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(100px); will-change: transform;
  animation: orb-drift 18s ease-in-out infinite;
}
@keyframes orb-drift {
  0%,100% { transform: translate(0,0) scale(1); }
  40%  { transform: translate(20px,-14px) scale(1.03); }
  70%  { transform: translate(-12px,9px) scale(.97); }
}

/* ─── WORD REVEAL on hero headline ─── */
.word-reveal .word { display: inline-block; overflow: hidden; }
.word-reveal .word-inner {
  display: inline-block; transform: translateY(110%);
  transition: transform .75s cubic-bezier(.16,1,.3,1);
}
.word-reveal.in .word-inner { transform: translateY(0); }
.word-reveal .word:nth-child(1) .word-inner { transition-delay: .00s; }
.word-reveal .word:nth-child(2) .word-inner { transition-delay: .06s; }
.word-reveal .word:nth-child(3) .word-inner { transition-delay: .12s; }
.word-reveal .word:nth-child(4) .word-inner { transition-delay: .18s; }
.word-reveal .word:nth-child(5) .word-inner { transition-delay: .24s; }
.word-reveal .word:nth-child(6) .word-inner { transition-delay: .30s; }
.word-reveal .word:nth-child(7) .word-inner { transition-delay: .36s; }