/* Elixir Prana — keyframes + decorative animation-only selectors */

/* ═══════════════════════════════════════════════════════════════
   ELIXIR PRANA v5 — "White Light, Golden Hour"
   Pure-white gallery canvas. Photography does the dreaming.
   Gold is the voice, green is only a whisper.
   Signature: the SUNPATH — a golden sun travels the top of the
   page as you scroll, from sunrise to starlight.
   ═══════════════════════════════════════════════════════════════ */
@property --spin{syntax:'<angle>';initial-value:0deg;inherits:false}


.shimmer{
  background:linear-gradient(100deg,#1E5C3A 12%,#A9D9BB 34%,#3C8F63 50%,#A9D9BB 66%,#1E5C3A 88%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 5.5s ease-in-out infinite;filter:drop-shadow(0 2px 14px rgba(0,0,0,.35));
}


@keyframes shimmer{0%,100%{background-position:80% 0}50%{background-position:0% 0}}


.btn.leafy{background:linear-gradient(135deg,#24352B,var(--pine));color:#fff;box-shadow:0 14px 30px -12px rgba(18,33,26,.5)}


.btn.sun::after,.btn.leafy::after{
  content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);transition:left .7s ease;
}


.btn.sun:hover::after,.btn.leafy:hover::after{left:130%}


@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.1) translate(-1.4%,-1.8%)}}


.mist{position:absolute;left:-20%;width:140%;height:32%;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 100%,rgba(255,255,255,.55),transparent 70%);
  filter:blur(30px);opacity:.5}


.mist.m1{bottom:-6%;animation:mistDrift 26s ease-in-out infinite alternate}


.mist.m2{bottom:9%;opacity:.28;animation:mistDrift 34s ease-in-out infinite alternate-reverse}


@keyframes mistDrift{from{transform:translateX(-4%)}to{transform:translateX(5%)}}


.leaves{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}


.leaves svg{position:absolute;top:-8%;width:22px;height:22px;fill:rgba(255,240,205,.9);
  filter:drop-shadow(0 4px 8px rgba(10,31,22,.35));animation:leafFall linear infinite}


@keyframes leafFall{
  0%{transform:translateY(-10vh) translateX(0) rotate(0deg);opacity:0}
  8%{opacity:.95}88%{opacity:.95}
  100%{transform:translateY(112vh) translateX(9vw) rotate(340deg);opacity:0}
}


.hero h1 .shimmer{text-shadow:none;filter:drop-shadow(0 4px 22px rgba(0,0,0,.4))}


.hero-scroll .wheel{width:26px;height:42px;border:1.5px solid rgba(255,255,255,.75);border-radius:20px;position:relative}


.hero-scroll .wheel::after{content:'';position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;
  border-radius:4px;background:var(--gold);animation:wheel 1.8s ease-in-out infinite}


@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}



/* ═════════ TICKER ═════════ */
.ticker{background:linear-gradient(90deg,var(--pine),#1E2E24 50%,var(--pine));color:#E6F2EA;overflow:hidden;padding:15px 0;position:relative;z-index:3}


.ticker-track{display:flex;gap:64px;width:max-content;animation:tick 30s linear infinite}


.ticker:hover .ticker-track{animation-play-state:paused}


@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}


.aqi-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--leaf);box-shadow:0 0 0 4px rgba(46,125,82,.18);flex:none;
  animation:aqiPulse 2.4s ease-in-out infinite}


@keyframes aqiPulse{0%,100%{opacity:.6;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}


/* 3D tilt frame */
.tilt-scene{perspective:1200px}


.tilt{position:relative;border-radius:30px;transform-style:preserve-3d;
  transition:transform .5s cubic-bezier(.22,1,.36,1);will-change:transform;box-shadow:var(--shadow-3d)}


.tilt img{border-radius:30px;width:100%;display:block}


.tilt .float-tag{position:absolute;transform:translateZ(80px);
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-radius:18px;
  padding:14px 22px;box-shadow:0 18px 38px -14px rgba(20,40,28,.35);border:1px solid #fff}


.tilt .float-tag .t1{font-family:var(--serif);font-weight:600;font-size:19px;color:var(--pine);line-height:1.2}


.tilt .float-tag .t2{font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}


.js-tilt-deep{transition:transform .6s cubic-bezier(.22,1,.36,1);will-change:transform}


.js-tilt-deep .drone-frame{position:relative;overflow:hidden;border-radius:30px;transform-style:preserve-3d}


.js-tilt-deep .drone-frame img{border-radius:30px;transform:scale(1.08);
  animation:droneHover 16s ease-in-out infinite alternate;will-change:transform}


@keyframes droneHover{
  0%{transform:scale(1.08) translate3d(0,0,0)}
  50%{transform:scale(1.12) translate3d(-1.6%,-1.2%,0)}
  100%{transform:scale(1.09) translate3d(1.4%,-0.6%,0)}
}


/* deeper pop-out for the floating tags on this card */
.js-tilt-deep .float-tag{transform:translateZ(120px)}


/* soft ground shadow that reacts under the lifted card */
.js-tilt-deep::after{content:'';position:absolute;left:8%;right:8%;bottom:-26px;height:40px;z-index:-1;
  background:radial-gradient(60% 100% at 50% 0%,rgba(20,40,28,.32),transparent 72%);
  filter:blur(14px);opacity:.7;transition:opacity .5s,transform .5s}


.js-tilt-deep:hover::after{opacity:1;transform:translateY(6px) scaleX(1.05)}


@keyframes blob{from{transform:translate(0,0) scale(1)}to{transform:translate(4%,6%) scale(1.08)}}


.dm-art .tilt{box-shadow:0 30px 60px -22px rgba(20,40,28,.35)}


.dm-art .tilt img{border-radius:24px;aspect-ratio:4/3.4;object-fit:cover}


.dm.night .dm-art .tilt{box-shadow:0 34px 70px -22px rgba(0,0,0,.6)}


@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:.7}}


.fo-art .tilt img{aspect-ratio:4/5;object-fit:cover}


.fo-seal{
  width:66px;height:66px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:conic-gradient(from 0deg,var(--gold),#BFE6CC,var(--gold-deep),var(--gold));
  animation:sealSpin 14s linear infinite;
}


.fo-seal>div{width:56px;height:56px;border-radius:50%;background:#fff;display:grid;place-items:center;
  font-family:var(--serif);font-weight:600;font-size:11px;letter-spacing:.14em;color:var(--gold-deep);text-align:center;line-height:1.3}


@keyframes sealSpin{to{transform:rotate(360deg)}}


@keyframes spin{to{--spin:360deg}}


@keyframes amL{from{transform:translateX(0)}to{transform:translateX(-50%)}}


@keyframes amR{from{transform:translateX(-50%)}to{transform:translateX(0)}}


.mp-zoom-trigger:hover .tilt img{transform:scale(1.02)}


.mp-art .tilt img{transition:transform .4s ease}


.mp-art .tilt{background:#fff;padding:16px;border-radius:26px;border:1px solid var(--line)}


.mp-art .tilt img{border-radius:16px}


.loc-mapframe .tilt{border-radius:26px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-3d)}


.loc-mapframe .tilt img{width:100%;display:block;border-radius:26px}



/* ═════════ SUHANA MAUSAM — rain / fog / lightning ═════════ */
.rain-canvas{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.7}


.hero-fog{position:absolute;left:-25%;width:150%;height:60%;z-index:0;pointer-events:none;
  background:radial-gradient(60% 100% at 50% 100%,rgba(210,225,225,.28),transparent 72%);
  filter:blur(28px);will-change:transform}


.hero-fog.f1{bottom:-4%;opacity:.55;animation:fogDrift 22s ease-in-out infinite alternate}


.hero-fog.f2{bottom:14%;height:48%;opacity:.32;animation:fogDrift 30s ease-in-out infinite alternate-reverse}


@keyframes fogDrift{from{transform:translate3d(-4%,0,0)}to{transform:translate3d(6%,0,0)}}


.leaves{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}


.leaves svg{position:absolute;top:-8%;width:22px;height:22px;fill:rgba(230,245,235,.85);
  filter:drop-shadow(0 4px 8px rgba(10,31,22,.3));animation:leafFall linear infinite}


@keyframes leafFall{
  0%{transform:translateY(-10vh) translateX(0) rotate(0deg);opacity:0}
  8%{opacity:.9}88%{opacity:.9}
  100%{transform:translateY(112vh) translateX(9vw) rotate(340deg);opacity:0}
}


.hero-ground-mist{position:absolute;left:0;right:0;bottom:0;height:26%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(225,235,235,.22));
  filter:blur(6px);animation:groundMist 8s ease-in-out infinite alternate}


@keyframes groundMist{from{opacity:.5;transform:translateY(6px)}to{opacity:.85;transform:translateY(0)}}


.hero-flash{position:absolute;inset:0;z-index:2;pointer-events:none;background:#EAF2F6;opacity:0;mix-blend-mode:screen}


.hero-flash.strike{animation:flash 1.1s ease-out}


@keyframes flash{0%{opacity:0}4%{opacity:.55}9%{opacity:.12}14%{opacity:.6}22%{opacity:.05}100%{opacity:0}}