/* ============================================================
   wow.css — Vizag City Flowers "WOW" layer
   FNP-style energy: animated hero, floating petals, scroll
   reveals, shimmer, glow & delight. Purely additive — layers
   on top of style.css without changing existing markup.
   ============================================================ */

:root{
  --wow-pink:#d4145a;
  --wow-rose:#ff4d6d;
  --wow-orange:#f97316;
  --wow-purple:#7c3aed;
  --wow-gold:#f59e0b;
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce){
  .hero-bg,.hero-slide::after,.wow-petal,.sec-label::after,
  .btn-primary::after,.hero-pill::after,.topbar-ticker{
    animation:none !important;
  }
}

/* ---------- Scroll progress bar ---------- */
#wowProgress{
  position:fixed; top:0; left:0; height:3px; width:0;
  z-index:100000; pointer-events:none; border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,var(--wow-pink),var(--wow-orange),var(--wow-gold));
  box-shadow:0 0 12px rgba(212,20,90,.55);
  transition:width .08s linear;
}

/* ---------- Falling petals ---------- */
#wowPetals{ position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:60; }
.wow-petal{
  position:absolute; top:-6vh; opacity:0; will-change:transform,opacity;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.08));
  animation:wowFall linear forwards;
}
@keyframes wowFall{
  0%{ transform:translate3d(0,-6vh,0) rotate(0deg); opacity:0; }
  8%{ opacity:.95; }
  100%{ transform:translate3d(var(--wow-drift,40px),108vh,0) rotate(540deg); opacity:0; }
}

/* ---------- HERO upgrades ---------- */
.hero-bg{ animation:wowKenBurns 20s ease-in-out infinite alternate; }
@keyframes wowKenBurns{ from{ transform:scale(1); } to{ transform:scale(1.14); } }

/* aurora glow that drifts over the hero */
.hero-slide{ position:relative; overflow:hidden; }
.hero-slide::after{
  content:""; position:absolute; inset:-20%; z-index:1; pointer-events:none;
  background:
    radial-gradient(38% 38% at 18% 22%, rgba(255,77,109,.45), transparent 60%),
    radial-gradient(34% 34% at 82% 28%, rgba(124,58,237,.40), transparent 62%),
    radial-gradient(40% 40% at 68% 88%, rgba(245,158,11,.34), transparent 60%);
  mix-blend-mode:screen; filter:blur(10px);
  animation:wowAurora 14s ease-in-out infinite alternate;
}
@keyframes wowAurora{
  0%  { transform:translate3d(-4%,-3%,0) scale(1);   opacity:.55; }
  50% { transform:translate3d(4%,2%,0)  scale(1.12); opacity:.9; }
  100%{ transform:translate3d(-2%,4%,0) scale(1.05); opacity:.6; }
}
/* keep text above the glow */
.hero-content{ position:relative; z-index:3; }
.hero-title{ animation:wowRise .9s cubic-bezier(.2,.7,.2,1) both; text-shadow:0 6px 30px rgba(0,0,0,.28); }
.hero-desc{ animation:wowRise 1s .08s cubic-bezier(.2,.7,.2,1) both; }
.hero-btns{ animation:wowRise 1s .16s cubic-bezier(.2,.7,.2,1) both; }
@keyframes wowRise{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }

/* shimmering badge pill */
.hero-pill{ position:relative; overflow:hidden; }
.hero-pill::after{
  content:""; position:absolute; top:0; left:-130%; width:60%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.7),transparent);
  transform:skewX(-18deg); animation:wowSheen 3.4s ease-in-out infinite;
}
@keyframes wowSheen{ 0%{ left:-130%; } 55%,100%{ left:130%; } }

/* ---------- Section labels get a glow dot + shimmer ---------- */
.sec-label{ position:relative; overflow:hidden; }
.sec-label::after{
  content:""; position:absolute; top:0; left:-120%; width:55%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);
  transform:skewX(-18deg); animation:wowSheen 4.2s ease-in-out infinite;
}

/* ---------- Scroll reveal ---------- */
.wow-reveal{ opacity:0; transform:translateY(34px); }
.wow-reveal.wow-in{
  opacity:1; transform:none;
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
/* stagger children of grids/rails */
.wow-stagger > *{ opacity:0; transform:translateY(28px); }
.wow-stagger.wow-in > *{
  opacity:1; transform:none;
  transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
}
.wow-stagger.wow-in > *:nth-child(2){ transition-delay:.05s; }
.wow-stagger.wow-in > *:nth-child(3){ transition-delay:.10s; }
.wow-stagger.wow-in > *:nth-child(4){ transition-delay:.15s; }
.wow-stagger.wow-in > *:nth-child(5){ transition-delay:.20s; }
.wow-stagger.wow-in > *:nth-child(n+6){ transition-delay:.25s; }

/* ---------- Glowing, "alive" primary buttons ---------- */
.btn-primary, .btn-white{ position:relative; overflow:hidden; }
.btn-primary::after, .btn-white::after{
  content:""; position:absolute; top:0; left:-150%; width:60%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg); transition:none;
}
.btn-primary:hover::after, .btn-white:hover::after{ animation:wowSheen 1s ease; }
.btn-primary{ box-shadow:0 8px 22px rgba(212,20,90,.30); }
.btn-primary:hover{ box-shadow:0 12px 30px rgba(212,20,90,.45); transform:translateY(-2px); }

/* ---------- Promo tiles / banners: shine sweep + pop ---------- */
.promo-tile, .split-banner, .promo-wide{ position:relative; overflow:hidden; }
.promo-tile::before, .split-banner::before, .promo-wide::before{
  content:""; position:absolute; top:0; left:-160%; width:55%; height:100%; z-index:2;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-20deg); pointer-events:none; transition:none;
}
.promo-tile:hover::before, .split-banner:hover::before, .promo-wide:hover::before{ animation:wowSheen .9s ease; }
.promo-tile:hover, .split-banner:hover{ transform:translateY(-5px); }
.promo-tile-emoji, .split-banner-emoji{ animation:wowFloat 4s ease-in-out infinite; }
@keyframes wowFloat{ 0%,100%{ transform:translateY(0) rotate(-3deg); } 50%{ transform:translateY(-10px) rotate(3deg); } }

/* ---------- Category circles & occasion cards: lively hover ---------- */
.cat-circle:hover .cat-circle-img{ transform:translateY(-6px) scale(1.06); box-shadow:0 14px 28px rgba(212,20,90,.22); }
.cat-circle-img{ transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.cat-circle:hover .cat-circle-name{ color:var(--wow-pink); }

.occ-card-ico{ transition:transform .35s cubic-bezier(.2,.7,.2,1); }
.occ-card:hover .occ-card-ico{ transform:rotate(-8deg) scale(1.08); }

/* ---------- USP strip: pulsing icons ---------- */
.usp-ico{ animation:wowPulse 2.6s ease-in-out infinite; }
.usp-item:nth-child(2) .usp-ico{ animation-delay:.3s; }
.usp-item:nth-child(3) .usp-ico{ animation-delay:.6s; }
.usp-item:nth-child(4) .usp-ico{ animation-delay:.9s; }
@keyframes wowPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.12); } }

/* ---------- Product card: image zoom + glow ring on hover ---------- */
.product-card{ transition:transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.product-card:hover{ box-shadow:0 18px 40px rgba(212,20,90,.16); }
.product-card .pc-img img,
.product-card .product-img img,
.product-card img{ transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.product-card:hover .pc-img img,
.product-card:hover .product-img img{ transform:scale(1.07); }

/* ---------- Topbar offers: smooth marquee ---------- */
.topbar-ticker.wow-marquee{ overflow:hidden; }                 /* clip — never overflow the bar */
.topbar-ticker.wow-marquee .wow-track{
  display:flex; flex:0 0 auto; width:max-content;
  animation:wowMarquee 28s linear infinite;
}
.topbar-ticker.wow-marquee:hover .wow-track{ animation-play-state:paused; }
.topbar-ticker.wow-marquee .wow-seq{ display:flex; gap:42px; white-space:nowrap; padding-right:42px; }
@keyframes wowMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- Confetti ---------- */
#wowConfetti{ position:fixed; inset:0; pointer-events:none; z-index:100001; overflow:hidden; }
.wow-confetto{ position:absolute; width:9px; height:14px; border-radius:2px; will-change:transform,opacity; }

/* ---------- Back-to-top: brand glow ---------- */
.back-top{ background:linear-gradient(135deg,var(--wow-pink),var(--wow-purple)) !important; box-shadow:0 6px 20px rgba(124,58,237,.45) !important; }

/* ---------- Section titles: tiny animated underline accent ---------- */
.sec-title-wrap .sec-title{ position:relative; display:inline-block; }
.sec-title-wrap .sec-title::after{
  content:""; position:absolute; left:50%; bottom:-10px; height:4px; width:0; border-radius:4px;
  background:linear-gradient(90deg,var(--wow-pink),var(--wow-orange));
  transform:translateX(-50%); transition:width .6s cubic-bezier(.2,.7,.2,1);
}
.wow-in .sec-title-wrap .sec-title::after,
.sec-head.wow-in .sec-title::after{ width:54px; }

/* image-based petals (admin-uploaded) */
img.wow-petal{ display:block; height:auto; user-select:none; }

/* ============================================================
   Festival theming
   ============================================================ */
body[data-festival] #wowProgress{
  background:linear-gradient(90deg,var(--festival-accent,#d4145a),#f59e0b,var(--festival-accent,#d4145a));
}
body[data-festival] .back-top{
  background:linear-gradient(135deg,var(--festival-accent,#d4145a),#1f2937) !important;
}

.fest-ribbon{
  display:block; text-decoration:none; color:#fff; overflow:hidden;
  background-image:linear-gradient(90deg, var(--fa,#d4145a), rgba(0,0,0,.28));
  border-bottom:2px solid rgba(255,255,255,.18);
}
.fest-ribbon-inner{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 16px; font-size:13.5px; text-align:center; white-space:nowrap;
  animation:festGlow 2.8s ease-in-out infinite;
}
.fest-ribbon strong{ font-weight:800; }
.fest-ribbon i{ margin:0 2px; transition:transform .3s; }
.fest-ribbon:hover i{ transform:translateX(4px); }
@keyframes festGlow{ 0%,100%{ filter:brightness(1); } 50%{ filter:brightness(1.14); } }
@media (max-width:600px){ .fest-ribbon-inner{ font-size:12px; white-space:normal; line-height:1.4; } }

/* ============================================================
   Gift Finder
   ============================================================ */
.gf-launch{
  position:fixed; left:20px; bottom:80px; z-index:990;
  display:flex; align-items:center; gap:8px; border:none; cursor:pointer;
  background:linear-gradient(135deg,var(--festival-accent,#d4145a),#9d174d);
  color:#fff; padding:12px 18px; border-radius:50px; font-weight:700; font-size:14px;
  box-shadow:0 8px 24px rgba(212,20,90,.42); animation:gfBob 3s ease-in-out infinite;
}
.gf-launch i{ font-size:16px; }
.gf-launch:hover{ filter:brightness(1.06); }
@keyframes gfBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
@media (max-width:767px){
  .gf-launch{ left:14px; bottom:86px; width:52px; height:52px; padding:0; justify-content:center; border-radius:50%; }
  .gf-launch span{ display:none; }
}

.gf-overlay{
  position:fixed; inset:0; z-index:100002; padding:18px;
  background:rgba(17,24,39,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.gf-overlay.open{ opacity:1; pointer-events:auto; }
.gf-modal{
  position:relative; width:100%; max-width:520px; max-height:92vh; overflow:auto;
  background:#fff; border-radius:22px; padding:26px; box-shadow:0 30px 80px rgba(0,0,0,.4);
  transform:translateY(20px) scale(.97); transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.gf-overlay.open .gf-modal{ transform:none; }
.gf-close{ position:absolute; top:14px; right:14px; width:34px; height:34px; border:none; border-radius:50%;
  background:#f3f4f6; color:#6b7280; cursor:pointer; font-size:15px; }
.gf-close:hover{ background:#fee2e2; color:#dc2626; }
.gf-head{ display:flex; gap:14px; align-items:center; margin-bottom:18px; padding-right:30px; }
.gf-head-ico{ width:50px; height:50px; flex:0 0 auto; border-radius:14px; color:#fff; display:flex; align-items:center; justify-content:center; font-size:22px;
  background:linear-gradient(135deg,var(--festival-accent,#d4145a),#9d174d); }
.gf-title{ font-family:var(--font-head,'Playfair Display',serif); font-size:22px; margin:0; color:#111827; }
.gf-sub{ margin:2px 0 0; font-size:13px; color:#6b7280; }
.gf-progress{ display:flex; gap:6px; margin-bottom:18px; }
.gf-dot{ height:5px; flex:1; border-radius:5px; background:#e5e7eb; transition:background .3s; }
.gf-dot.active{ background:var(--festival-accent,#d4145a); }
.gf-step{ display:none; }
.gf-step.active{ display:block; animation:gfFade .3s ease; }
@keyframes gfFade{ from{ opacity:0; transform:translateX(12px); } to{ opacity:1; transform:none; } }
.gf-q{ font-size:16px; font-weight:700; color:#111827; margin-bottom:14px; }
.gf-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.gf-grid-2{ grid-template-columns:repeat(2,1fr); }
.gf-chip{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 8px;
  border:1.5px solid #e5e7eb; border-radius:14px; background:#fff; cursor:pointer; font-size:13px; font-weight:600; color:#374151; transition:transform .18s, border-color .18s, background .18s, box-shadow .18s; }
.gf-chip i{ font-size:22px; color:var(--festival-accent,#d4145a); transition:transform .18s; }
.gf-chip:hover{ border-color:var(--festival-accent,#d4145a); background:#fff5f8; transform:translateY(-3px); }
.gf-chip:hover i{ transform:scale(1.15); }
.gf-chip.sel{ border-color:transparent; color:#fff; box-shadow:0 8px 20px rgba(212,20,90,.3);
  background:linear-gradient(135deg,var(--festival-accent,#d4145a),#9d174d); }
.gf-chip.sel i{ color:#fff; }
.gf-chip-wide{ flex-direction:row; justify-content:center; }
.gf-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:22px; }
.gf-back{ background:none; border:none; color:#6b7280; font-weight:600; cursor:pointer; font-size:14px; }
.gf-back:hover{ color:#111827; }
.gf-go{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:#fff; padding:12px 24px; border-radius:50px; font-weight:700; font-size:14px;
  background:linear-gradient(135deg,var(--festival-accent,#d4145a),#9d174d); box-shadow:0 8px 22px rgba(212,20,90,.35); }
.gf-go:hover{ filter:brightness(1.06); transform:translateY(-1px); }
@media (max-width:480px){ .gf-grid{ grid-template-columns:repeat(2,1fr); } }