/* Site themes: decor layers for web/site_themes.py. Transform/opacity animations only;
   everything stops under prefers-reduced-motion or when a parent has .is-paused. */
.st-decor{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;contain:strict}
.is-paused .st-decor *{animation-play-state:paused!important}
.st-garland{position:absolute;left:0;top:0;width:100%;height:90px}
.st-decor.is-compact .st-garland{height:40px}
.st-decor.is-compact .st-lights i{--gs:.444;width:5px;height:5px}

/* Dashain: marigold string + kites */
.st-flowers{position:absolute;left:0;right:0;top:0;height:90px}
.st-flowers i{position:absolute;--gs:1;left:calc(var(--x) - 8px);top:calc(var(--y) * 1px * var(--gs) - 8px);width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#b45309 0 22%,#f59e0b 24% 55%,#fbbf24 57%);
  box-shadow:0 1px 0 rgba(0,0,0,.08);transform-origin:50% -10px;animation:st-sway 4.8s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.3s)}
.st-flowers i:nth-child(odd){background:radial-gradient(circle,#9a3412 0 22%,#ea580c 24% 55%,#fb923c 57%)}
.st-decor.is-compact .st-flowers i{--gs:.444;width:9px;height:9px;left:calc(var(--x) - 4.5px);top:calc(var(--y) * 1px * var(--gs) - 4.5px)}
.st-kite{position:absolute;width:70px;height:154px;opacity:.9;animation:st-kite 9s ease-in-out infinite alternate}
.st-kite-1{right:7%;top:14%;transform:rotate(12deg)}
.st-kite-2{right:22%;top:28%;width:48px;height:106px;animation-duration:11s;animation-delay:-3s}
.st-kite-3{left:5%;top:36%;width:40px;height:88px;animation-duration:13s;animation-delay:-6s}
.st-decor.is-compact .st-kite{width:28px;height:62px}.st-decor.is-compact .st-kite-3{display:none}
@keyframes st-sway{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@keyframes st-kite{0%{transform:translate(0,0) rotate(8deg)}50%{transform:translate(-14px,10px) rotate(-6deg)}100%{transform:translate(10px,-8px) rotate(12deg)}}

/* Tihar: string lights + diyo */
.st-lights{position:absolute;left:0;right:0;top:0;height:70px}
.st-lights i{position:absolute;--gs:1;left:calc(var(--x) - 4px);top:calc(var(--y) * 1px * var(--gs) - 2px);width:8px;height:8px;border-radius:50%;
  background:#ffcf5c;box-shadow:0 0 10px 3px rgba(255,190,60,.55);animation:st-twinkle 2.6s ease-in-out infinite;animation-delay:calc(var(--i) * -.37s)}
.st-lights i:nth-child(3n){background:#ff8a65;box-shadow:0 0 10px 3px rgba(255,120,80,.5)}
.st-lights i:nth-child(5n){background:#c4b5fd;box-shadow:0 0 10px 3px rgba(167,139,250,.5)}
@keyframes st-twinkle{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}
.st-diyos{position:absolute;left:0;right:0;bottom:18px;display:flex;justify-content:space-around}
.st-diyos span{position:relative;width:46px;height:20px;border-radius:0 0 26px 26px;background:linear-gradient(#c2410c,#7c2d12)}
.st-diyos i{position:absolute;left:50%;bottom:16px;width:12px;height:22px;margin-left:-6px;border-radius:50% 50% 45% 45%/65% 65% 35% 35%;
  background:radial-gradient(ellipse at 50% 70%,#fff7cc 0 25%,#ffc93c 45%,#ff7a18 80%);transform-origin:50% 100%;animation:st-flame 1.4s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.27s)}
@keyframes st-flame{from{transform:scale(1,1) rotate(-3deg)}to{transform:scale(.9,1.12) rotate(3deg)}}
.st-decor.is-compact .st-diyos{bottom:6px}.st-decor.is-compact .st-diyos span{width:22px;height:10px}.st-decor.is-compact .st-diyos i{width:6px;height:11px;bottom:8px;margin-left:-3px}

/* Holi: drifting gulal */
.st-cloud{position:absolute;width:42vmax;height:42vmax;border-radius:50%;opacity:.38;filter:blur(2px);animation:st-drift 18s ease-in-out infinite alternate}
.st-cloud-1{left:-12%;top:-18%;background:radial-gradient(circle,#ff4fa1 0,transparent 62%)}
.st-cloud-2{right:-14%;top:-6%;background:radial-gradient(circle,#ffd23f 0,transparent 62%);animation-delay:-6s}
.st-cloud-3{left:30%;bottom:-30%;background:radial-gradient(circle,#28c7a6 0,transparent 62%);animation-delay:-11s}
.st-cloud-4{right:20%;bottom:-24%;background:radial-gradient(circle,#7c5cff 0,transparent 62%);animation-delay:-3s}
@keyframes st-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(4%,6%) scale(1.12)}}

/* Lali gurans petals */
.st-petals i{position:absolute;top:-30px;left:calc(var(--i) * 7.1% + 2%);width:14px;height:18px;border-radius:70% 10% 70% 10%;
  background:linear-gradient(135deg,#e11d48,#be123c);opacity:.8;animation:st-fall 11s linear infinite;animation-delay:calc(var(--i) * -.83s)}
.st-petals i:nth-child(3n){width:10px;height:13px;background:linear-gradient(135deg,#fb7185,#e11d48);animation-duration:14s}
@keyframes st-fall{from{transform:translate3d(0,-40px,0) rotate(0)}to{transform:translate3d(60px,105vh,0) rotate(540deg)}}

/* Monsoon rain */
.st-rain i{position:absolute;top:-80px;left:calc(var(--i) * 3.85% + 1%);width:1.5px;height:56px;border-radius:2px;
  background:linear-gradient(transparent,rgba(21,101,192,.45));animation:st-rain 1.3s linear infinite;animation-delay:calc(var(--i) * -.29s)}
.st-rain i:nth-child(even){animation-duration:1.7s;height:40px}
@keyframes st-rain{from{transform:translate3d(0,0,0)}to{transform:translate3d(-30px,110vh,0)}}
.st-terraces,.st-ridge{position:absolute;left:0;bottom:0;width:100%;height:120px}

/* Winter snow */
.st-snow i{position:absolute;top:-10px;left:calc(var(--i) * 4.17% + 1%);width:6px;height:6px;border-radius:50%;background:#fff;
  box-shadow:0 0 4px rgba(30,79,168,.25);opacity:.9;animation:st-snow 12s linear infinite;animation-delay:calc(var(--i) * -.5s)}
.st-snow i:nth-child(3n){width:4px;height:4px;animation-duration:16s}
@keyframes st-snow{0%{transform:translate3d(0,-10px,0)}50%{transform:translate3d(18px,52vh,0)}100%{transform:translate3d(-8px,105vh,0)}}

@media (prefers-reduced-motion:reduce){.st-decor *{animation:none!important}}


/* ---- The app, dressed for the season --------------------------------------------------------
   The colours come from site_themes.APP (inline <style> in base.html); these rules only add the
   motif beside the logo and the season card on the home feed. */
.st-app-strip{height:3px;background:var(--md-primary)}
.st-motif{display:inline-flex;flex:none;align-self:center;width:18px;height:18px;margin:-4px 0 0 6px;color:var(--md-primary);transform-origin:50% 90%;animation:st-motif-sway 6s ease-in-out infinite}
.st-motif svg{width:100%;height:100%}
.st-motif-snow,.st-motif-gurans{animation-name:st-motif-turn;animation-duration:14s;animation-timing-function:linear;transform-origin:50% 50%}
@keyframes st-motif-sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes st-motif-turn{to{transform:rotate(360deg)}}

.st-season{position:relative;overflow:hidden;margin:0 0 16px;border-radius:24px;background:var(--md-primary-container);color:var(--md-on-primary-container);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--md-primary) 14%,transparent);animation:st-season-in .5s cubic-bezier(.2,.8,.2,1) both}
.st-season[hidden]{display:none}
.st-season>.st-decor{opacity:.9}
.st-season .st-kite,.st-season .st-diyos{display:none}
.st-season-in{position:relative;z-index:1;display:flex;align-items:center;gap:16px;padding:22px 16px 18px 22px;min-height:96px}
.st-season .st-motif{width:40px;height:40px;margin:0;flex:none;padding:10px;border-radius:14px;background:var(--md-surface,#fff);box-sizing:content-box}
.st-season-copy{flex:1;min-width:0}
.st-season-title{margin:0;font-weight:700;font-size:1.05rem;line-height:1.3;display:flex;flex-wrap:wrap;column-gap:10px}
.st-season-en{font-weight:500;opacity:.75}
.st-season-text{margin:4px 0 0;font-size:.9rem;line-height:1.5;opacity:.85}
.st-season-cta{flex:none;white-space:nowrap}
.st-season-close{flex:none;align-self:flex-start;margin:-8px -4px 0 0;color:inherit}
.st-season.is-leaving{animation:st-season-out .32s cubic-bezier(.4,0,1,1) both}
@keyframes st-season-in{from{opacity:0;transform:translateY(8px)}}
@keyframes st-season-out{to{opacity:0;transform:translateY(-6px) scale(.98)}}
@media (max-width:640px){
  .st-season-in{flex-wrap:wrap;padding:20px 12px 16px 18px;gap:12px 14px}
  .st-season .st-motif{width:30px;height:30px;padding:8px}
  .st-season-copy{flex-basis:calc(100% - 110px)}
  .st-season-cta{order:3;margin-left:58px}
}
@media (prefers-reduced-motion:reduce){.st-motif,.st-season,.st-season.is-leaving{animation:none}}