/* Festival Theme Engine — visual layer only. Every rule here is additive on
   top of public/index.html's existing styles: defaults below equal the
   current brand look, so with no festival active (or engine disabled) this
   file changes nothing.

   Architecture: public/assets/js/festivalScenes.js builds an inline SVG
   "scene" per festival (bonfire/ribbons/chakra/tree/fireworks + a shared
   AI-knowledge-trail motif) into #festivalHeroScene. The class names below
   (.fs-flame, .fs-spark, .fs-light, .fs-node, .fs-link, .fs-book, .fs-ribbon,
   .fs-chakra, .fs-snow, .fs-firework, .fs-corner-pattern) are the reusable
   animation primitives every scene is assembled from — one engine, many
   festival-specific SVG illustrations, no emoji. */

:root{
  --festival-primary:#1935A8;
  --festival-secondary:#F5C451;
  --festival-accent:#2B55E6;
  --festival-background:#FFFFFF;
  --festival-text:#0F172A;
  --festival-glow:rgba(25,53,168,.18);
  --festival-glow-strong:rgba(25,53,168,.4);
  --festival-banner-h:0px;
  --festival-transition:background-color .6s ease,border-color .6s ease,box-shadow .6s ease,color .6s ease;
}

/* Additive nav/hero spacing hooks — var defaults to 0px above, so these are
   no-ops until festivalTheme.js sets a real banner height. */
nav{ top:var(--festival-banner-h,0px); transition:top .35s ease; }
.mobile-menu{ top:calc(72px + var(--festival-banner-h,0px)); }
.hero{ padding-top:calc(130px + var(--festival-banner-h,0px)); transition:padding-top .35s ease; position:relative; overflow:hidden; }

/* ============================================================
   1. ANNOUNCEMENT BAR — compact, sits above nav
   ============================================================ */
#festivalBanner{
  position:fixed; top:0; left:0; right:0; z-index:201;
  display:none;
  align-items:center; justify-content:center; gap:10px;
  padding:11px 44px 11px 16px;
  font-size:13px; font-weight:600; text-align:center;
  color:#fff;
  background:linear-gradient(120deg,var(--festival-primary) 0%,var(--festival-accent) 55%,var(--festival-primary) 100%);
  background-size:200% 100%;
  animation:fsBannerSheen 10s ease-in-out infinite;
  box-shadow:0 2px 16px var(--festival-glow-strong);
}
@keyframes fsBannerSheen{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
#festivalBanner.active{ display:flex; }
#festivalBanner .fb-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; border-radius:50%;
  background:var(--festival-secondary); flex-shrink:0;
}
#festivalBanner .fb-greeting{ font-size:14px; font-weight:800; }
#festivalBanner .fb-tagline{ opacity:.85; font-weight:600; }
#festivalBanner .fb-dismiss{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:26px; height:26px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.18); color:inherit;
  font-size:15px; line-height:1; display:flex; align-items:center; justify-content:center;
}
#festivalBanner .fb-dismiss:hover{ background:rgba(255,255,255,.32); }
@media(max-width:600px){
  #festivalBanner{ padding:8px 40px 8px 12px; font-size:12px; }
  #festivalBanner .fb-tagline{ display:none; }
}

/* ============================================================
   2. HERO SCENE — layered SVG illustration behind hero content
   ============================================================ */
#festivalHeroScene{
  position:absolute; inset:0; z-index:-1;
  pointer-events:none; overflow:hidden;
  opacity:0; transform:scale(1.04);
  transition:opacity 1s ease, transform 1.1s cubic-bezier(.16,1,.3,1);
}
#festivalHeroScene.fs-in{ opacity:1; transform:scale(1); }
#festivalHeroScene svg{ position:absolute; }

/* The base page's own emoji "floaty icons" (#bg-decor) are pre-existing site
   decor, not part of the festival system — but they visually compete with
   the SVG scene, so they step aside while a festival illustration owns the
   hero's decorative layer. Restored automatically once the theme clears. */
body[data-festival-theme]:not([data-festival-theme="default"]) .floaty-icon{
  opacity:0; transition:opacity .5s ease;
}
#festivalHeroScene .fs-stage{
  right:-2%; bottom:-2%; width:min(52vw,620px); height:min(52vw,620px);
}
@media(max-width:1100px){ #festivalHeroScene .fs-stage{ width:min(60vw,480px); height:min(60vw,480px); right:-3%; } }
@media(max-width:900px){ #festivalHeroScene .fs-stage{ opacity:.85; width:min(78vw,420px); height:min(78vw,420px); right:50%; transform:translateX(50%); bottom:-2%; } }
@media(max-width:600px){ #festivalHeroScene .fs-stage{ width:92vw; height:92vw; bottom:4%; opacity:.7; } }

/* Corner motifs (phulkari / chakra-spoke / snowflake / gear-lace etc.) */
.fs-corner{ position:absolute; width:150px; height:150px; opacity:0; transform:scale(.8); transition:opacity 1s ease .3s, transform 1s cubic-bezier(.16,1,.3,1) .3s; }
#festivalHeroScene.fs-in .fs-corner{ opacity:.55; transform:scale(1); }
.fs-corner.fs-corner-tl{ top:calc(96px + var(--festival-banner-h,0px)); left:12px; }
.fs-corner.fs-corner-br{ bottom:24px; right:12px; transform-origin:bottom right; }
@media(max-width:900px){ .fs-corner{ width:96px; height:96px; } }
@media(max-width:600px){ .fs-corner{ display:none; } }

/* ---- shared scene primitives ---- */
/* transform-box:fill-box is required on every one of these — SVG's default
   transform-box is "view-box", so a percentage transform-origin like "center"
   resolves against the whole 600x600 root viewBox, not the element's own
   shape. Without this, any real rotation (chakra/gear) swings the shape
   through a huge arc around a pivot hundreds of px away from itself. */
.fs-flame{ transform-box:fill-box; transform-origin:50% 100%; animation:fsFlameFlicker 2.6s ease-in-out infinite; }
.fs-flame.fs-d1{ animation-duration:2.2s; animation-delay:-.4s; }
.fs-flame.fs-d2{ animation-duration:3s; animation-delay:-1.1s; }
.fs-flame.fs-d3{ animation-duration:1.9s; animation-delay:-.7s; }
@keyframes fsFlameFlicker{
  0%,100%{ transform:scaleY(1) scaleX(1) skewX(0deg); }
  25%{ transform:scaleY(1.06) scaleX(.97) skewX(-2deg); }
  50%{ transform:scaleY(.94) scaleX(1.03) skewX(1.5deg); }
  75%{ transform:scaleY(1.03) scaleX(.99) skewX(-1deg); }
}

.fs-ground-glow{ animation:fsGlowPulse 3.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes fsGlowPulse{ 0%,100%{ opacity:.55; transform:scale(1); } 50%{ opacity:.85; transform:scale(1.08); } }

.fs-spark{ animation:fsSparkRise linear infinite; opacity:0; }
@keyframes fsSparkRise{
  0%{ transform:translateY(0) translateX(0); opacity:0; }
  12%{ opacity:1; }
  100%{ transform:translateY(var(--fs-rise,-140px)) translateX(var(--fs-drift,8px)); opacity:0; }
}

.fs-light{ animation:fsLightGlow 2.4s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes fsLightGlow{ 0%,100%{ opacity:.45; filter:drop-shadow(0 0 1px currentColor); } 50%{ opacity:1; filter:drop-shadow(0 0 6px currentColor); } }

.fs-book{ animation:fsBookFloat 6.5s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes fsBookFloat{
  0%,100%{ transform:translateY(0) rotate(-2deg); }
  50%{ transform:translateY(-14px) rotate(2deg); }
}

.fs-node{ animation:fsNodePulse 2.8s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes fsNodePulse{ 0%,100%{ opacity:.55; transform:scale(1); } 50%{ opacity:1; transform:scale(1.35); } }
.fs-link{ stroke-dasharray:4 5; animation:fsLinkFlow 1.6s linear infinite; }
@keyframes fsLinkFlow{ to{ stroke-dashoffset:-18; } }
.fs-trail{ stroke-dasharray:3 6; animation:fsLinkFlow 1.1s linear infinite; }

.fs-ribbon{ animation:fsRibbonWave 7s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes fsRibbonWave{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-10px) rotate(1.4deg); }
}

.fs-chakra{ animation:fsSpin 40s linear infinite; transform-box:fill-box; transform-origin:center; }
.fs-chakra-slow{ animation:fsSpin 70s linear infinite; transform-box:fill-box; transform-origin:center; }
@keyframes fsSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

.fs-snow{ animation:fsSnowFall linear infinite; }
@keyframes fsSnowFall{
  0%{ transform:translateY(-8%) translateX(0); }
  100%{ transform:translateY(108%) translateX(var(--fs-drift,14px)); }
}

.fs-firework{ animation:fsFireworkBurst 2.6s ease-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes fsFireworkBurst{
  0%{ opacity:0; transform:scale(.3); }
  25%{ opacity:1; transform:scale(1); }
  70%{ opacity:.5; transform:scale(1.15); }
  100%{ opacity:0; transform:scale(1.25); }
}

.fs-tree-light{ animation:fsTreeSequence 3s ease-in-out infinite; }
@keyframes fsTreeSequence{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }

.fs-gear{ animation:fsSpin 18s linear infinite; transform-box:fill-box; transform-origin:center; }
.fs-gear-rev{ animation:fsSpinRev 22s linear infinite; transform-box:fill-box; transform-origin:center; }
@keyframes fsSpinRev{ from{ transform:rotate(360deg); } to{ transform:rotate(0deg); } }

.fs-count-digit{ animation:fsCountFade 4s ease-in-out infinite; }
@keyframes fsCountFade{ 0%,100%{ opacity:.7; } 50%{ opacity:1; } }

.fs-line-draw{ stroke-dasharray:240; stroke-dashoffset:240; animation:fsDraw 2.4s ease-out forwards; }
@keyframes fsDraw{ to{ stroke-dashoffset:0; } }

/* Republic/Independence Day flypast — a diagonal loop across the scene.
   transform-box:fill-box so the bank (rotate) pivots on the jet's own body,
   not the 600x600 root viewBox (see the transform-box note above .fs-flame).
   The static `transform` fallback is what a reduced-motion visitor sees
   (animation:none there just freezes it mid-flight, not off-canvas). */
.fs-jet{
  transform-box:fill-box; transform-origin:center;
  transform:translate(320px,180px) rotate(-11deg);
  animation:fsJetFly 10s ease-in-out infinite;
  opacity:0;
}
@keyframes fsJetFly{
  0%{ transform:translate(-90px,430px) rotate(-7deg); opacity:0; }
  10%{ opacity:1; }
  50%{ transform:translate(320px,180px) rotate(-13deg); opacity:1; }
  90%{ opacity:1; }
  100%{ transform:translate(690px,10px) rotate(-7deg); opacity:0; }
}
@media(max-width:900px){ .fs-jet:nth-of-type(n+2){ display:none; } }

/* Confetti — first page load only (Republic/Independence Day), not emoji */
.festival-confetti{
  position:fixed; top:-5%; z-index:250; pointer-events:none;
  width:8px; height:14px; border-radius:2px;
  animation:festivalConfettiFall linear forwards;
}
@keyframes festivalConfettiFall{
  from{ transform:translateY(0) rotate(0deg); opacity:1; }
  to{ transform:translateY(105vh) rotate(540deg); opacity:.2; }
}
@media (prefers-reduced-motion: reduce){ .festival-confetti{ display:none; } }

/* ============================================================
   3. HERO GREETING CARD — glassmorphism, integrated into hero
   ============================================================ */
#festivalHeroGreeting{
  display:none;
}
#festivalHeroGreeting.active{
  position:relative; z-index:1; margin:0 auto 22px; max-width:460px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  padding:16px 26px; border-radius:18px; text-align:center;
  background:linear-gradient(135deg, color-mix(in srgb, var(--festival-primary) 92%, black) 0%, color-mix(in srgb, var(--festival-accent) 88%, black) 100%);
  border:1px solid color-mix(in srgb, var(--festival-secondary) 45%, transparent);
  box-shadow:0 16px 40px var(--festival-glow-strong), inset 0 1px 0 rgba(255,255,255,.15);
  opacity:0; transform:translateY(14px);
  animation:fsCardIn .8s cubic-bezier(.16,1,.3,1) .25s forwards;
}
@keyframes fsCardIn{ to{ opacity:1; transform:translateY(0); } }
#festivalHeroGreeting .fhg-label{
  display:inline-flex; align-items:center; gap:6px;
  font-size:10.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--festival-secondary);
}
#festivalHeroGreeting .fhg-label::before,
#festivalHeroGreeting .fhg-label::after{ content:""; width:16px; height:1px; background:currentColor; opacity:.6; }
#festivalHeroGreeting .fhg-greeting{ font-size:21px; font-weight:800; color:#fff; line-height:1.3; }
#festivalHeroGreeting .fhg-tagline{ font-size:13px; font-weight:600; color:rgba(255,255,255,.82); }
@media(max-width:600px){
  #festivalHeroGreeting.active{ padding:13px 18px; margin-bottom:16px; }
  #festivalHeroGreeting .fhg-greeting{ font-size:17px; }
  #festivalHeroGreeting .fhg-tagline{ font-size:12px; }
}

/* ============================================================
   4. PAGE-WIDE RESTRAINED ACCENTS
   ============================================================ */
body[data-festival-theme]:not([data-festival-theme="default"]) .hero-eyebrow{
  background:color-mix(in srgb, var(--festival-primary) 10%, var(--blue-soft));
  border-color:color-mix(in srgb, var(--festival-primary) 30%, var(--blue-soft2));
  transition:var(--festival-transition);
}
body[data-festival-theme]:not([data-festival-theme="default"]) .hero-eyebrow-dot{ background:var(--festival-accent); }

body[data-festival-theme]:not([data-festival-theme="default"]) .btn-grape{
  box-shadow:0 8px 26px var(--festival-glow-strong);
  transition:var(--festival-transition),transform .15s,box-shadow .3s;
  position:relative;
}
body[data-festival-theme]:not([data-festival-theme="default"]) .btn-grape:hover{ box-shadow:0 12px 34px var(--festival-glow-strong); }
body[data-festival-theme]:not([data-festival-theme="default"]) .nav-cta{
  background:linear-gradient(135deg,var(--festival-primary),var(--festival-accent));
  box-shadow:0 6px 18px var(--festival-glow);
}

/* Feature chips (hero-pills) — subtle animated gradient border */
body[data-festival-theme]:not([data-festival-theme="default"]) .pill{
  position:relative; border-color:transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(120deg,var(--festival-primary),var(--festival-secondary),var(--festival-accent)) border-box;
  border:1px solid transparent;
  background-size:100% 100%, 220% 100%;
  animation:fsChipBorder 6s ease-in-out infinite;
}
@keyframes fsChipBorder{ 0%,100%{ background-position:0 0,0% 50%; } 50%{ background-position:0 0,100% 50%; } }

/* Feature cards — festival-tinted border glow on hover, restrained by default */
body[data-festival-theme]:not([data-festival-theme="default"]) .feat-card{
  transition:var(--festival-transition), transform .25s ease, box-shadow .25s ease;
  border-color:color-mix(in srgb, var(--festival-primary) 14%, var(--border));
}
body[data-festival-theme]:not([data-festival-theme="default"]) .feat-card:hover{
  box-shadow:0 18px 40px var(--festival-glow), 0 0 0 1px color-mix(in srgb, var(--festival-primary) 30%, transparent);
}

/* Section top-edge accent — one soft gradient hairline, not a full recolour */
body[data-festival-theme]:not([data-festival-theme="default"]) .feat-section,
body[data-festival-theme]:not([data-festival-theme="default"]) #pricing{
  position:relative;
}
body[data-festival-theme]:not([data-festival-theme="default"]) .feat-section::before,
body[data-festival-theme]:not([data-festival-theme="default"]) #pricing::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--festival-primary),var(--festival-secondary),var(--festival-primary),transparent);
  opacity:.55;
}

/* Footer top accent */
body[data-festival-theme]:not([data-festival-theme="default"]) footer{
  position:relative;
  transition:var(--festival-transition);
}
body[data-festival-theme]:not([data-festival-theme="default"]) footer::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--festival-primary),var(--festival-secondary),var(--festival-accent));
  opacity:.6;
}

/* "Festival Special" pill used inside the hero greeting card / eyebrow row */
.fs-special-tag{
  display:inline-flex; align-items:center; gap:5px;
  font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; margin-bottom:2px;
  color:var(--festival-primary);
  background:color-mix(in srgb, var(--festival-secondary) 30%, #fff);
  border:1px solid color-mix(in srgb, var(--festival-primary) 25%, transparent);
}

/* ============================================================
   5. PAUSE / REDUCED MOTION / RESPONSIVE THINNING
   ============================================================ */
body.festival-paused #festivalHeroScene *{ animation-play-state:paused !important; }
body.festival-paused #festivalBanner{ animation-play-state:paused; }

@media (prefers-reduced-motion: reduce){
  #festivalHeroScene, #festivalHeroScene *,
  #festivalBanner, #festivalHeroGreeting,
  .pill{ animation:none !important; transition:none !important; }
  #festivalHeroScene{ opacity:1; transform:none; }
  #festivalHeroGreeting{ opacity:1; transform:none; }
}

@media(max-width:900px){
  #festivalHeroScene .fs-spark:nth-of-type(n+6),
  #festivalHeroScene .fs-light:nth-of-type(n+7){ display:none; }
}
@media(max-width:600px){
  #festivalHeroScene .fs-spark:nth-of-type(n+4),
  #festivalHeroScene .fs-light:nth-of-type(n+5),
  #festivalHeroScene .fs-node:nth-of-type(n+4){ display:none; }
}

/* ============================================================
   6. WELCOME REVEAL (first visit per session)
   ============================================================ */
#festivalWelcome{
  position:fixed; inset:0; z-index:400;
  display:none;
  align-items:center; justify-content:center;
  padding:24px;
  background:radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--festival-accent) 55%, var(--festival-primary)), var(--festival-primary) 75%);
  opacity:0; transition:opacity .4s ease;
  overflow:hidden;
}
#festivalWelcome.active{ display:flex; }
#festivalWelcome.show{ opacity:1; }
#festivalWelcome .fw-scene{ position:absolute; inset:0; opacity:.5; pointer-events:none; }
.fw-card{
  position:relative; z-index:1;
  max-width:480px; width:100%; text-align:center;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(20px);
  border-radius:22px; padding:38px 30px;
  color:#fff;
  transform:translateY(10px) scale(.97); opacity:0;
  transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .5s ease;
}
#festivalWelcome.show .fw-card{ transform:translateY(0) scale(1); opacity:1; }
.fw-card .fw-special{ color:var(--festival-secondary); }
.fw-card .fw-greeting{ font-size:24px; font-weight:800; margin:10px 0 8px; }
.fw-card .fw-tagline{ font-size:14px; opacity:.9; margin-bottom:22px; }
.fw-card .fw-skip{
  border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.1);
  color:#fff; padding:9px 22px; border-radius:999px;
  font-size:13px; font-weight:700; cursor:pointer;
}
.fw-card .fw-skip:hover{ background:rgba(255,255,255,.2); }
@media (prefers-reduced-motion: reduce){
  #festivalWelcome, .fw-card, #festivalWelcome .fw-scene{ transition:none; animation:none !important; }
}