/* ==========================================================================
   Bihar Vikas Darpan — motion layer (fx)
   Everything here is decorative. It switches off for prefers-reduced-motion.
   ========================================================================== */

/* ---------- page fade-in + cross-page transitions ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: fxFadeOut .22s ease both; }
::view-transition-new(root) { animation: fxFadeIn .32s ease both; }
@keyframes fxFadeOut { to { opacity: 0; } }
@keyframes fxFadeIn { from { opacity: 0; } }
main { animation: fxMainIn .5s ease both; }
@keyframes fxMainIn { from { opacity: 0; transform: translateY(8px); } }

/* ---------- scroll progress bar ---------- */
.fx-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 120; transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, #FF9933, #FFC56B 50%, #1E40AF); pointer-events: none; }
body:has(#readProgress) .fx-progress { display: none; }

/* ---------- first-visit intro ---------- */
.fx-intro { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; align-content: center; gap: 1rem;
  background: radial-gradient(circle at 50% 45%, #FFF6EA, #FBE3C4 70%); color: #1B1A3A;
  animation: fxIntroOut .6s 1.25s ease forwards; }
:root[data-theme="dark"] .fx-intro { background: radial-gradient(circle at 50% 45%, #2A2238, #11101F 70%); color: #F4EFE6; }
.fx-intro p { margin: 0; text-align: center; font: 800 1.6rem/1.1 var(--font-display); opacity: 0; animation: fxUp .6s .35s var(--ease) forwards; }
.fx-intro em { color: #C2410C; }
.fx-intro small { display: block; font-size: .95rem; font-weight: 400; margin-top: .3rem; opacity: .7; }
.fx-intro-rays rect { fill: #FF9933; }
.fx-intro-rays { transform-origin: 60px 60px; animation: fxSpin 1.6s var(--ease) both; }
.fx-intro-sun { fill: #C2410C; transform-origin: 60px 60px; animation: fxPop .7s var(--ease) both; }
.fx-intro-core { fill: #FFF6EA; transform-origin: 60px 60px; animation: fxPop .7s .15s var(--ease) both; }
.fx-intro.skip { display: none; }
@keyframes fxIntroOut { to { opacity: 0; visibility: hidden; transform: scale(1.04); } }
@keyframes fxSpin { from { transform: rotate(-120deg) scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fxPop { from { transform: scale(0); } 70% { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes fxUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- hero: toran, sparks, spotlight, aurora ---------- */
.hero { isolation: isolate; }
.fx-toran { position: absolute; top: 0; left: 0; width: 100%; height: 86px; z-index: 1; pointer-events: none; }
.fx-toran .tr-string { stroke: #8A5A1E; stroke-width: 2; }
.fx-toran .tr-thread { stroke: #8A5A1E; stroke-width: 1.4; }
.fx-toran .tr-pet1 { fill: #FF8A00; }
.fx-toran .tr-pet2 { fill: #FFB300; }
.fx-toran .tr-core { fill: #C2410C; }
.fx-toran .tr-leaf { fill: #2E7D32; }
.fx-toran .tr-vein { stroke: #A5D6A7; stroke-width: 1; fill: none; }
.tr-hang { transform-box: fill-box; transform-origin: 50% 0; animation: fxSway 3.6s ease-in-out var(--d) infinite alternate; }
@keyframes fxSway { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.hero .container { position: relative; z-index: 2; padding-top: 1.5rem; }
.fx-sparks { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.fx-spot { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 40%), rgba(255, 153, 51, .16), transparent 70%); }
.hero:hover .fx-spot { opacity: 1; }
.hero::after { content: ""; position: absolute; z-index: -1; width: 560px; height: 560px; right: -120px; top: -160px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255,153,51,.22), rgba(30,64,175,.12), rgba(255,197,107,.22), rgba(255,153,51,.22));
  filter: blur(60px); animation: fxAurora 18s linear infinite; }
@keyframes fxAurora { to { transform: rotate(360deg); } }

/* headline words rise one by one */
.fx-words .fx-w { display: inline-block; opacity: 0; transform: translateY(.6em) rotate(2deg); animation: fxWord .7s var(--ease) forwards;
  animation-delay: calc(var(--i) * 70ms + var(--d0, 0ms)); }
@keyframes fxWord { to { opacity: 1; transform: none; } }
.hero h1 .ink::after { transform: scaleX(0); transform-origin: 0 50%; animation: fxDraw .9s 1s var(--ease) forwards; }
@keyframes fxDraw { to { transform: scaleX(1); } }

/* rotating word */
.fx-rotator { font: 600 clamp(1rem, 1.6vw, 1.2rem) var(--font-body); color: var(--ink-2); margin: -.4rem 0 1rem; display: flex; flex-wrap: wrap; gap: .35em; align-items: baseline; }
.fx-rot-word { display: inline-block; min-width: 8ch; color: #fff; background: linear-gradient(90deg, #FF9933, #E67300); padding: .05em .5em; border-radius: 8px;
  box-shadow: 0 6px 16px -8px #E67300; white-space: nowrap; }
.fx-rot-word.out { animation: fxRotOut .28s ease forwards; }
.fx-rot-word.in { animation: fxRotIn .38s var(--ease) both; }
@keyframes fxRotOut { to { opacity: 0; transform: translateY(-60%) rotateX(70deg); } }
@keyframes fxRotIn { from { opacity: 0; transform: translateY(60%) rotateX(-70deg); } }

/* ---------- scroll reveals (added by fx.js) ---------- */
.fx { opacity: 0; transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--fx-delay, 0ms); will-change: transform, opacity; }
.fx-up { transform: translateY(34px); }
.fx-left { transform: translateX(-46px); }
.fx-right { transform: translateX(46px); }
.fx-zoom { transform: scale(.9); }
.fx-flip { transform: perspective(800px) rotateX(18deg) translateY(30px); transform-origin: 50% 100%; }
.fx.fx-on { opacity: 1; transform: none; }
/* staggered children use the existing .reveal class; give them a delay */
.reveal { transition-delay: var(--fx-delay, 0ms); }

/* section heading underline draws itself */
.section-head h2 { position: relative; display: inline-block; }
.section-head h2::after { content: ""; position: absolute; left: 0; bottom: -.28em; height: 4px; width: 72px; border-radius: 4px;
  background: linear-gradient(90deg, #FF9933, #1E40AF); transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s .25s var(--ease); }
.section-head .fx-on h2::after, .section-head.fx-on h2::after { transform: scaleX(1); }
.section-dark .section-head h2::after { background: linear-gradient(90deg, #FFC56B, #93B4FF); }

/* ---------- 3D tilt + sheen on cards ---------- */
.fx-tilt { transform-style: preserve-3d; transition: transform .25s ease, box-shadow .3s; }
.fx-glare { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .3s; z-index: 3;
  background: radial-gradient(500px circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.35), transparent 45%); mix-blend-mode: soft-light; }
.fx-tilt:hover .fx-glare { opacity: 1; }
.card, .cat-tile { position: relative; }

/* shimmering sweep on primary buttons */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); animation: fxSheen 4.5s ease-in-out infinite; }
@keyframes fxSheen { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.btn:active { transform: scale(.96); }

/* ---------- animated icons ---------- */
.highlight i { display: inline-block; }
.highlight .fa-bolt { animation: fxFlicker 2.8s infinite; }
.highlight .fa-road { animation: fxBob 2.4s ease-in-out infinite; }
.highlight .fa-solar-panel { animation: fxGlow 3s ease-in-out infinite; }
.highlight .fa-train { animation: fxTrainIcon 2.6s ease-in-out infinite; }
@keyframes fxFlicker { 0%, 18%, 22%, 62%, 66%, 100% { opacity: 1; transform: scale(1); } 20%, 64% { opacity: .35; transform: scale(.9); } 40% { transform: scale(1.18); } }
@keyframes fxBob { 50% { transform: translateY(-4px); } }
@keyframes fxGlow { 50% { filter: drop-shadow(0 0 8px #FFC56B); transform: scale(1.1); } }
@keyframes fxTrainIcon { 0%, 100% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
.highlight { transition: transform .35s var(--ease), background .3s; }
.highlight:hover { transform: translateY(-4px); background: rgba(255,255,255,.04); }
.cat-tile:hover .cat-icon { animation: fxWiggle .6s ease; }
@keyframes fxWiggle { 25% { transform: rotate(-10deg) scale(1.1); } 50% { transform: rotate(8deg) scale(1.12); } 75% { transform: rotate(-4deg); } }
.read-more i, .link-arrow i { transition: transform .25s var(--ease); }

/* slider: progress line on the active dot */
.slider-dots button { position: relative; overflow: hidden; }
.slider-dots button.active::after { content: ""; position: absolute; inset: 0; background: #FF9933; transform-origin: 0 50%; animation: fxDot 5.5s linear forwards; }
@keyframes fxDot { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.slide.active .slide-art i { animation: fxKen 8s ease-out both; }
@keyframes fxKen { from { transform: rotate(-8deg) scale(.85); } to { transform: rotate(-2deg) scale(1.08); } }

/* map districts fade in once, west to east (no size change) */
.bihar-map .dist.fx-dist { animation: fxDistIn .6s ease both; animation-delay: var(--dd, 0ms); }
@keyframes fxDistIn { from { opacity: 0; } to { opacity: 1; } }

/* typed placeholder caret */
input.fx-typing::placeholder { color: var(--muted); }

/* floating category chips in card art */
.card-art i { animation: fxFloat 5s ease-in-out infinite; }
.card:nth-child(3n+2) .card-art i { animation-delay: -1.6s; }
.card:nth-child(3n) .card-art i { animation-delay: -3.2s; }
@keyframes fxFloat { 50% { translate: 0 -6px; } }

/* to-top button turns into a little rocket of progress */
.to-top { background: conic-gradient(#FF9933 calc(var(--p, 0) * 360deg), #E9D7C2 0); padding: 3px; }
.to-top i { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--accent); }
.to-top:hover i { animation: fxBob 1s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .fx-intro { display: none !important; }
  .fx, .fx-words .fx-w { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .tr-hang, .hero::after, .btn-primary::after, .highlight i, .card-art i, .slide-art i, .bihar-map .dist.fx-dist, .fx-rot-word { animation: none !important; }
  .fx-sparks, .fx-spot { display: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  main { animation: none; }
}
@media (max-width: 640px) {
  .fx-toran { height: 60px; }
  .hero::after { width: 320px; height: 320px; right: -140px; }
}

/* ======================================================================
   Cultural scenes in the skyline (Chhath, diyas, Jhijhiya, kites, flags, boatman)
   ====================================================================== */
.skyline .kite-string { stroke: var(--sk-ink); stroke-width: .8; opacity: .4; }
.skyline .kite { transform-box: fill-box; transform-origin: 50% 22%; animation: fxKite 3.4s ease-in-out var(--kd, 0s) infinite alternate; }
@keyframes fxKite { from { transform: rotate(-9deg) translate(-3px, 2px); } to { transform: rotate(9deg) translate(3px, -3px); } }
.skyline .kite-tail { animation: fxTail 1.2s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 0; }
@keyframes fxTail { from { transform: skewX(-12deg); } to { transform: skewX(12deg); } }

.skyline .flag-line { stroke: var(--sk-ink); stroke-width: 1; opacity: .6; }
.skyline .flag { transform-box: fill-box; transform-origin: 0 0; animation: fxFlag 1.1s ease-in-out var(--fd, 0s) infinite alternate; stroke: rgba(0,0,0,.15); stroke-width: .5; }
@keyframes fxFlag { from { transform: skewY(-10deg) scaleX(.85); } to { transform: skewY(10deg) scaleX(1.05); } }

.skyline .dancer { transform-box: fill-box; transform-origin: 50% 100%; animation: fxDance 1.6s ease-in-out var(--dd, 0s) infinite alternate; }
@keyframes fxDance { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.skyline .arm-up { animation: fxArm .8s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 0 100%; }
@keyframes fxArm { to { transform: rotate(-25deg); } }

.skyline .flame { transform-box: fill-box; transform-origin: 50% 100%; animation: fxFlame .5s ease-in-out infinite alternate; }
@keyframes fxFlame { 0% { transform: scale(1, 1); opacity: 1; } 50% { transform: scale(.85, 1.15) skewX(4deg); } 100% { transform: scale(1.1, .9) skewX(-4deg); opacity: .85; } }
.skyline .diya-glow { fill: rgba(255, 193, 7, .35); animation: fxDiyaGlow 1.6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
@keyframes fxDiyaGlow { from { opacity: .5; transform: scale(.85); } to { opacity: 1; transform: scale(1.15); } }
.skyline .diya { animation: fxDrift 14s ease-in-out var(--dy, 0s) infinite alternate; }
@keyframes fxDrift { 0% { transform: translate(-26px, 0); } 50% { transform: translate(0, -1.5px); } 100% { transform: translate(26px, 0); } }
:root[data-theme="dark"] .skyline .diya-glow { fill: rgba(255, 193, 7, .55); }

.skyline .arghya { animation: fxArghya 3.2s ease-in-out var(--ad, 0s) infinite; }
@keyframes fxArghya { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.skyline .sk-water-front { fill: var(--sk-river-top); opacity: .92; }
.skyline .ripple-ring { fill: none; stroke: rgba(255,255,255,.8); stroke-width: 1.2; transform-box: fill-box; transform-origin: center;
  animation: fxRing 2.7s ease-out var(--rd, 0s) infinite; }
@keyframes fxRing { from { transform: scale(.4); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }

.skyline .sk-hull { fill: #6B3E1E; }
.skyline .sk-man { fill: var(--sk-ink); }
.skyline .sk-oar { stroke: #8A5A1E; fill: none; }
.skyline .sk-oar-blade { fill: #8A5A1E; }
.skyline .oar { transform-box: fill-box; transform-origin: 100% 0; animation: fxRow 1.8s ease-in-out infinite; }
@keyframes fxRow { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(18deg); } }

/* footer skyline is shorter: keep the sky clear */
.sk-footer .sk-kites, .sk-footer .sk-flags { display: none; }

@media (prefers-reduced-motion: reduce) {
  .skyline .kite, .skyline .kite-tail, .skyline .flag, .skyline .dancer, .skyline .arm-up, .skyline .flame,
  .skyline .diya-glow, .skyline .diya, .skyline .arghya, .skyline .ripple-ring, .skyline .oar { animation: none !important; }
}