/* Festival greeting ribbon and animated greeting: on every page of the website, design previews and minimal sites. */
/* ---- festival greeting ribbon (themed per festival; artwork in templates/_fest_art.html) ---- */
.fest-ribbon { --f1: #7a1f00; --f2: #c2410c; --f3: #b45309; --fink: #fff8ec;
  display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px 46px 8px 16px; position: relative; overflow: hidden;
  background: linear-gradient(90deg, var(--f1), var(--f2) 50%, var(--f3)); color: var(--fink); font-size: .95rem; text-align: center; }
.fest-ribbon[hidden] { display: none; }
.fest-msg { position: relative; z-index: 1; text-wrap: balance; }
.fest-msg strong { font-weight: 800; letter-spacing: .01em; }
.fest-side { flex: 0 0 auto; display: flex; }
.fest-side-r { transform: scaleX(-1); }
.fest-art { width: 96px; height: 32px; display: block; }
.fest-x { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 2; background: rgba(0, 0, 0, .15); border: 0; color: var(--fink);
  width: 28px; height: 28px; border-radius: 50%; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.fest-x:hover { background: rgba(0, 0, 0, .28); }
.fest-x:focus-visible { outline: 2px solid var(--fink); outline-offset: 2px; }
@media (max-width: 720px) { .fest-side { display: none; } .fest-ribbon { padding-left: 12px; font-size: .88rem; } }

/* artwork colours */
.fa-clay { fill: #8a3b12; } .fa-rim { stroke: #f4c16a; stroke-width: 1.4; fill: none; }
.fa-flame { fill: #ffb703; } .fa-flame-core { fill: #fff3b0; }
.fa-petal ellipse { fill: #ffd166; opacity: .95; } .fa-core { fill: #e63946; }
.fa-pink { fill: #ff4fa3; } .fa-yellow { fill: #ffd60a; } .fa-green { fill: #2dc653; } .fa-blue { fill: #3a86ff; } .fa-orange { fill: #ff7a00; }
.fa-moon { fill: #f7e7a1; } .fa-star { fill: #fff3c4; }
.fa-tree { fill: #1f7a3a; } .fa-trunk { fill: #7b4a26; } .fa-gold { fill: #ffcf40; } .fa-snow { fill: #ffffff; opacity: .9; }
.fa-saffron { fill: #ff9933; } .fa-white { fill: #ffffff; } .fest-tricolour .fa-green { fill: #138808; } .fa-chakra { fill: none; stroke: #000080; stroke-width: 1; }
.fa-spoke { stroke: #000080; stroke-width: .6; }
.fa-sun { fill: #ffd23f; } .fa-ray { stroke: #ffd23f; stroke-width: 1.6; stroke-linecap: round; } .fa-string { stroke: #fff; stroke-width: .8; fill: none; opacity: .8; }
.fa-marigold circle { fill: #ff9f1c; } .fa-marigold .fa-core { fill: #e85d04; }
.fest-diwali .fa-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: fest-flicker 1.6s ease-in-out infinite alternate; }
@keyframes fest-flicker { from { transform: scale(1, 1); } to { transform: scale(.92, 1.08); } }
@media (prefers-reduced-motion: reduce) { .fest-diwali .fa-flame { animation: none; } }

/* themes: background and text colours */
.fest-diwali { --f1: #3b0a0a; --f2: #7a1414; --f3: #4a1505; --fink: #ffe7a8; }
.fest-durga { --f1: #8b0000; --f2: #c1121f; --f3: #8b0000; --fink: #fff2cc; }
.fest-holi { --f1: #ff4fa3; --f2: #ffb703; --f3: #2dc653; --fink: #1d1235; }
.fest-holi .fest-msg { background: rgba(255, 255, 255, .85); padding: 2px 12px; border-radius: 999px; }
.fest-eid { --f1: #064e3b; --f2: #0f766e; --f3: #064e3b; --fink: #f7e7a1; }
.fest-christmas { --f1: #14532d; --f2: #b91c1c; --f3: #14532d; --fink: #ffffff; }
.fest-newyear { --f1: #0b1d51; --f2: #3a0ca3; --f3: #0b1d51; --fink: #ffe066; }
.fest-tricolour { --f1: #ff9933; --f2: #ffffff; --f3: #138808; --fink: #000080; }
.fest-tricolour .fest-msg { background: rgba(255, 255, 255, .9); padding: 2px 12px; border-radius: 999px; }
.fest-tricolour .fest-x { color: #000080; background: rgba(255, 255, 255, .7); }
.fest-harvest { --f1: #b45309; --f2: #f59e0b; --f3: #4d7c0f; --fink: #fffbea; }
.fest-marigold { --f1: #9a3412; --f2: #ea580c; --f3: #b45309; --fink: #fff8ec; }

/* ---- festival greeting animation (shown once per festival; static for reduced motion) ---- */
.fest-splash { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(circle at 50% 40%, rgba(20, 10, 30, .55), rgba(5, 3, 10, .82)); animation: fest-fade .35s ease-out; }
.fest-splash[hidden] { display: none; }
.fest-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fest-card { position: relative; z-index: 1; max-width: 520px; width: 100%; text-align: center; padding: 30px 26px 26px; border-radius: 22px; color: var(--fink, #fff8ec);
  background: linear-gradient(145deg, var(--f1, #7a1f00), var(--f2, #c2410c) 55%, var(--f3, #b45309));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .12) inset; animation: fest-pop .7s cubic-bezier(.2, .9, .25, 1.25) both; }
.fest-card-art .fest-art { width: 220px; height: 74px; margin: 0 auto 6px; }
.fest-big { margin: 4px 0 6px; font-size: clamp(26px, 5vw, 40px); font-weight: 800; line-height: 1.15; letter-spacing: -.01em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35); animation: fest-glow 2.4s ease-in-out .7s infinite alternate; }
.fest-sub { margin: 0 0 18px; opacity: .9; font-size: 1.02rem; }
.fest-go { border: 0; border-radius: 999px; padding: 11px 22px; font: inherit; font-weight: 700; cursor: pointer; color: #1d1235; background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.fest-go:hover { transform: translateY(-1px); }
.fest-go:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.fest-splash.fest-holi .fest-card { color: #1d1235; }
.fest-splash.fest-tricolour .fest-card { color: #000080; }
.fest-splash.fest-holi .fest-big, .fest-splash.fest-tricolour .fest-big { text-shadow: 0 2px 12px rgba(255, 255, 255, .6); animation: none; }
.fest-splash.fest-out { animation: fest-fade-out .45s ease-in forwards; }
@keyframes fest-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fest-fade-out { to { opacity: 0; } }
@keyframes fest-pop { 0% { opacity: 0; transform: scale(.6) translateY(30px); } 100% { opacity: 1; transform: none; } }
@keyframes fest-glow { from { text-shadow: 0 2px 18px rgba(0, 0, 0, .35); } to { text-shadow: 0 0 24px rgba(255, 220, 140, .9), 0 2px 18px rgba(0, 0, 0, .35); } }
@media (prefers-reduced-motion: reduce) { .fest-splash, .fest-card, .fest-big, .fest-splash.fest-out { animation: none; } }

/* livelier wish: drifting festive colours, a light sweep across the text, a gently bobbing emoji */
.fest-ribbon { background-size: 220% 100%; animation: fest-drift 9s ease-in-out infinite alternate; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.fest-ribbon::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); background-size: 250% 100%; animation: fest-sweep 4.5s ease-in-out infinite; }
.fest-msg strong { display: inline-block; background: linear-gradient(90deg, var(--fink), #fff 50%, var(--fink)); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; animation: fest-text 3s linear infinite; }
.fest-emoji { display: inline-block; animation: fest-bob 1.8s ease-in-out infinite; -webkit-text-fill-color: initial; }
@keyframes fest-drift { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes fest-sweep { 0% { background-position: 150% 0; } 60%, 100% { background-position: -100% 0; } }
@keyframes fest-text { from { background-position: 200% 0; } to { background-position: 0% 0; } }
@keyframes fest-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-6deg); } }
.fest-holi .fest-msg strong, .fest-tricolour .fest-msg strong { background: none; -webkit-text-fill-color: currentColor; animation: none; }
@media (prefers-reduced-motion: reduce) { .fest-ribbon, .fest-ribbon::after, .fest-msg strong, .fest-emoji { animation: none; } }

/* ---- Durga Puja: three scenes take turns (face with halo, dhak being played, kash phool), each with its own movement ---- */
.fest-durga .fest-art { width: 120px; height: 40px; }
.fest-durga .fest-card-art .fest-art { width: 260px; height: 88px; }
.fa-scene { opacity: 0; animation: fest-scene 12s ease-in-out infinite; }
.fa-s1 { animation-delay: 0s; } .fa-s2 { animation-delay: 4s; } .fa-s3 { animation-delay: 8s; }
.fest-side-r .fa-s1 { animation-delay: 4s; } .fest-side-r .fa-s2 { animation-delay: 8s; } .fest-side-r .fa-s3 { animation-delay: 0s; }
@keyframes fest-scene { 0% { opacity: 0; } 5%, 30% { opacity: 1; } 35%, 100% { opacity: 0; } }
.fa-halo { fill: #ffd166; opacity: .35; transform-box: fill-box; transform-origin: center; animation: fest-halo 2.4s ease-in-out infinite; }
@keyframes fest-halo { 50% { opacity: .7; transform: scale(1.08); } }
.fa-crown { fill: #f4b400; stroke: #8a5a00; stroke-width: .5; } .fa-gem { fill: #e63946; }
.fa-face { fill: #f2b36f; } .fa-hairline { fill: none; stroke: #1b1b1b; stroke-width: 2; }
.fa-eye { fill: #fff; stroke: #1b1b1b; stroke-width: .9; } .fa-pupil { fill: #1b1b1b; }
.fa-third { fill: #fff; stroke: #c1121f; stroke-width: .7; } .fa-bindi { fill: #c1121f; }
.fa-line { fill: none; stroke: #9b5a2a; stroke-width: .7; } .fa-lip { fill: none; stroke: #b5121b; stroke-width: 1.4; stroke-linecap: round; }
.fa-dhak { fill: #8b4513; stroke: #5a2d0c; stroke-width: .8; } .fa-dhak-top { fill: #f3e2c3; stroke: #5a2d0c; stroke-width: .6; }
.fa-lace { stroke: #f3e2c3; stroke-width: .9; fill: none; }
.fa-feather { fill: none; stroke: #ffffff; stroke-width: 2.4; stroke-linecap: round; }
.fa-plume { transform-box: fill-box; transform-origin: 50% 100%; animation: fest-sway 1.6s ease-in-out infinite; }
.fa-stick-line { stroke: #f5deb3; stroke-width: 2; stroke-linecap: round; }
.fa-stick { transform-box: fill-box; }
.fa-stick-l { transform-origin: 0% 0%; animation: fest-beat .5s ease-in-out infinite alternate; }
.fa-stick-r { transform-origin: 100% 0%; animation: fest-beat-r .5s ease-in-out .25s infinite alternate; }
@keyframes fest-beat { from { transform: rotate(-14deg); } to { transform: rotate(6deg); } }
@keyframes fest-beat-r { from { transform: rotate(14deg); } to { transform: rotate(-6deg); } }
.fa-wave { fill: none; stroke: #ffd166; stroke-width: 1.3; stroke-linecap: round; animation: fest-wave .5s ease-out infinite; }
@keyframes fest-wave { 0% { opacity: .9; } 100% { opacity: .1; } }
.fa-stem { fill: none; stroke: #c9b37a; stroke-width: 1.1; } .fa-plume-w { fill: #ffffff; opacity: .95; }
.fa-kash { transform-box: fill-box; transform-origin: 50% 100%; animation: fest-sway 2.6s ease-in-out infinite; }
.fa-k1 { animation-delay: .3s; } .fa-k2 { animation-delay: .6s; } .fa-k3 { animation-delay: .9s; } .fa-k4 { animation-delay: 1.2s; } .fa-k5 { animation-delay: 1.5s; } .fa-k6 { animation-delay: 1.8s; }
@keyframes fest-sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@media (prefers-reduced-motion: reduce) {
  .fa-scene { animation: none; opacity: 0; } .fa-s1 { opacity: 1; }
  .fa-halo, .fa-plume, .fa-stick-l, .fa-stick-r, .fa-wave, .fa-kash { animation: none; }
}

/* ---- day name in the ribbon and card ---- */
.fest-day { display: inline-block; margin-left: 6px; padding: 1px 9px; border-radius: 999px; background: rgba(255, 255, 255, .18); font-size: .82rem; font-weight: 700; letter-spacing: .02em; }
.fest-daytag { margin: 0 0 2px; font-size: .82rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; opacity: .9; }

/* ---- Durga Puja: a different palette each day (Saptami, Ashtami, Navami, Dashami) ---- */
.fest-durga.fest-v0 { --f1: #8b0000; --f2: #d00000; --f3: #f4a300; --fink: #fff4d6; }      /* red and marigold */
.fest-durga.fest-v1 { --f1: #b00020; --f2: #fdf6e3; --f3: #b00020; --fink: #7a0012; }      /* laal paar white saree */
.fest-durga.fest-v1 .fest-msg strong { background: none; -webkit-text-fill-color: currentColor; }
.fest-durga.fest-v2 { --f1: #4a0e4e; --f2: #9d174d; --f3: #f59e0b; --fink: #fff1c1; }      /* plum, rose and gold */
.fest-durga.fest-v3, .fest-durga.fest-v4 { --f1: #9b1c1c; --f2: #e11d48; --f3: #9b1c1c; --fink: #fff; }  /* sindoor red for Bijoya */

/* ---- Navratri: five palettes that cycle over the nine days; garba skirt, dandiya, diyas ---- */
.fest-navratri { --f1: #ff006e; --f2: #fb5607; --f3: #ffbe0b; --fink: #ffffff; }
.fest-navratri.fest-v1 { --f1: #3a0ca3; --f2: #7209b7; --f3: #f72585; --fink: #fff3fb; }
.fest-navratri.fest-v2 { --f1: #006d77; --f2: #2a9d8f; --f3: #e9c46a; --fink: #fffdf0; }
.fest-navratri.fest-v3 { --f1: #d00000; --f2: #ffba08; --f3: #3f8f29; --fink: #fffaf0; }
.fest-navratri.fest-v4 { --f1: #023e8a; --f2: #0096c7; --f3: #f72585; --fink: #ffffff; }
.fa-skirt { stroke: rgba(255, 255, 255, .5); stroke-width: .4; }
.fa-sk0 { fill: #ff006e; } .fa-sk1 { fill: #ffbe0b; } .fa-sk2 { fill: #3a86ff; } .fa-sk3 { fill: #8338ec; } .fa-sk4 { fill: #06d6a0; } .fa-sk5 { fill: #fb5607; }
.fa-twirl { transform-box: fill-box; transform-origin: center; animation: fest-spin 3s linear infinite; }
@keyframes fest-spin { to { transform: rotate(360deg); } }
.fa-stick-a { fill: #ff006e; } .fa-stick-b { fill: #ffbe0b; } .fa-band { fill: #fff; }
.fa-dandiya { transform-box: fill-box; transform-origin: 50% 100%; }
.fa-dl { animation: fest-dandiya-l .6s ease-in-out infinite alternate; }
.fa-dr { animation: fest-dandiya-r .6s ease-in-out infinite alternate; }
@keyframes fest-dandiya-l { from { transform: rotate(-8deg); } to { transform: rotate(28deg) translateX(8px); } }
@keyframes fest-dandiya-r { from { transform: rotate(8deg); } to { transform: rotate(-28deg) translateX(-8px); } }
.fa-spark-dot { fill: #fff; animation: fest-wave .6s ease-out infinite; }

/* ---- Dussehra: bow and flying arrow, fireworks, effigy flames ---- */
.fest-dussehra { --f1: #7c2d12; --f2: #ea580c; --f3: #facc15; --fink: #fffbeb; }
.fa-bow { fill: none; stroke: #fde68a; stroke-width: 2.4; stroke-linecap: round; } .fa-string2 { stroke: #fff; stroke-width: .7; }
.fa-shaft { stroke: #fff7ed; stroke-width: 1.6; } .fa-fletch { fill: none; stroke: #fca5a5; stroke-width: 1.4; }
.fa-arrow { animation: fest-arrow 1.8s ease-in infinite; }
@keyframes fest-arrow { 0% { transform: translateX(0); opacity: 1; } 70% { transform: translateX(34px); opacity: 1; } 100% { transform: translateX(44px); opacity: 0; } }
.fa-ray2 { stroke-width: 1.6; stroke-linecap: round; stroke: currentColor; }
.fa-ray2.fa-gold { color: #fde047; } .fa-ray2.fa-pink { color: #f9a8d4; } .fa-ray2.fa-blue { color: #93c5fd; }
.fa-burst { transform-box: fill-box; transform-origin: center; animation: fest-burst 1.6s ease-out infinite; }
.fa-b1 { animation-delay: .5s; } .fa-b2 { animation-delay: 1s; }
@keyframes fest-burst { 0% { transform: scale(.2); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1.15); opacity: 0; } }
.fa-effigy { fill: #7c2d12; stroke: #fbbf24; stroke-width: .6; }
.fest-dussehra .fa-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: fest-flicker .8s ease-in-out infinite alternate; }
.fa-fl1 { animation-delay: .2s !important; } .fa-fl2 { animation-delay: .4s !important; } .fa-fl3 { animation-delay: .6s !important; }
.fest-navratri .fest-art, .fest-dussehra .fest-art { width: 120px; height: 40px; }
.fest-navratri .fest-card-art .fest-art, .fest-dussehra .fest-card-art .fest-art { width: 260px; height: 88px; }
@media (prefers-reduced-motion: reduce) { .fa-twirl, .fa-dl, .fa-dr, .fa-spark-dot, .fa-arrow, .fa-burst, .fest-dussehra .fa-flame { animation: none; } }

/* Festival welcome gift: button in the ribbon, offer + button in the first-visit greeting */
.fest-gift { flex: none; margin-left: 10px; padding: 6px 14px; border: 0; border-radius: 999px; background: #fff; color: #7a1d00; font: inherit;
  font-size: .85rem; font-weight: 800; cursor: pointer; box-shadow: 0 4px 14px rgb(0 0 0 / 18%); white-space: nowrap; }
.fest-gift:hover, .fest-gift:focus-visible { transform: translateY(-1px); outline: 2px solid #fff; outline-offset: 2px; }
.fest-offer { margin: 14px auto 4px; max-width: 420px; font-weight: 600; }
.fest-later { display: block; margin: 10px auto 0; padding: 4px 8px; border: 0; background: none; color: inherit; opacity: .8; font: inherit; font-size: .9rem;
  text-decoration: underline; cursor: pointer; }
@media (max-width: 640px) { .fest-gift { margin: 6px 0 0; } }
@media (max-width: 640px) { .fest-ribbon { flex-wrap: wrap; justify-content: center; } }