/* JCBC art layer, loaded on every page after /assets/site.css.
   Warm background, soft colour glows, lotus mandalas, the jaali lattice, gold photo frames, temple-arch frames,
   card glows, the scalloped closing banner, the flickering diya and the pinned header.
   Plain hand-written CSS: edit this file directly, no build step. The shapes live in common.ART_DEFS. */

:root {
  --h-page: #fffdfa;            /* Porcelain: near white, a trace of warmth so the glows read clearly */
  --h-gold: #eaa420;
  --h-gold-deep: #8a5a00;
  --h-green-deep: #0d4a2a;
  --h-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .27 0 0 0 0 .12 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  /* the jaali as a background image: dark lines at low strength, so on green it reads as a quiet texture */
  --h-jaali: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M22 2 42 22 22 42 2 22Z M22 12 32 22 22 32 12 22Z' fill='none' stroke='%231F1C18' stroke-opacity='.15'/%3E%3C/svg%3E");
}
body.bg-page { background-color: var(--h-page); }
.art-defs { position: absolute; width: 0; height: 0; overflow: hidden; color: #1f1c18; } /* the jaali pattern draws in this colour */

/* ---------------------------------------------------------------- header: pinned while scrolling, thin gold line */
body > header.relative { position: sticky; top: 0; z-index: 40; border-bottom-color: rgba(234,164,32,.55); }
#mobile-menu { max-height: calc(100vh - 80px); overflow-y: auto; }
main [id] { scroll-margin-top: 110px; }

/* ---------------------------------------------------------------- shared pieces */
.h-art, .h-hero { position: relative; isolation: isolate; overflow: hidden; }
.h-glow { position: absolute; z-index: -2; border-radius: 50%; filter: blur(70px); pointer-events: none; animation: h-drift 18s ease-in-out infinite alternate; }
.h-glow:nth-of-type(2n) { animation-duration: 23s; animation-direction: alternate-reverse; }
.h-glow--gold { background: #f4b942; opacity: .38; }
.h-glow--green { background: #5fbf8a; opacity: .3; }
.h-glow--blue { background: #8a96ea; opacity: .3; }
@keyframes h-drift { from { translate: 0 0; } to { translate: 40px 26px; } }

.h-mandala { position: absolute; z-index: -1; width: 460px; height: 460px; color: var(--h-gold-deep); opacity: .13; pointer-events: none; }
.h-mandala--tr { right: -150px; top: -150px; }
.h-mandala--tl { left: -170px; top: -170px; }
.h-mandala--br { right: -170px; bottom: -170px; }
.h-mandala--bl { left: -190px; bottom: -200px; }
.on-dark .h-mandala, .bg-green-deep > .h-mandala { color: var(--h-gold); opacity: .2; }
.h-jaali { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .13; pointer-events: none; }
@media (max-width: 1023px) { .h-mandala { width: 320px; height: 320px; } }

/* green panels and the footer carry the jaali as a quiet texture */
main .bg-green-deep:not(.h-visit):not(.h-panel), footer.bg-green-deep { background-image: var(--h-jaali); }
/* a green card that shows the jaali clearly, like the homepage puja panel (Temple page Mahapuja card) */
.h-panel { position: relative; isolation: isolate; background: radial-gradient(520px 360px at 100% 0%, #17653b 0%, rgba(23,101,59,0) 70%), var(--h-green-deep); }
.h-panel > :not(.h-jaali):not(.h-mandala) { position: relative; z-index: 1; }
.h-panel > .h-mandala { width: 300px; height: 300px; right: -110px; top: -110px; z-index: 0; }

/* diya: the flame flickers softly */
.h-diya { width: 22px; height: 22px; color: var(--h-gold-deep); flex: none; }
.h-diya--lg { width: 42px; height: 42px; color: var(--h-gold); }
.flame { transform-box: fill-box; transform-origin: 50% 100%; animation: h-flicker 2.6s ease-in-out infinite; }
@keyframes h-flicker {
  0%, 100% { transform: scale(1, 1); opacity: 1; }
  20% { transform: scale(.94, 1.06) rotate(-2deg); }
  45% { transform: scale(1.04, .95) rotate(2deg); opacity: .9; }
  70% { transform: scale(.97, 1.04); }
}

/* ---------------------------------------------------------------- page hero: warm sunrise, fading into the page */
.h-hero { background: radial-gradient(900px 520px at 10% 0%, #fdeccb 0%, rgba(253,236,203,0) 70%), var(--h-page) var(--h-grain); }
.h-hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,253,250,0), var(--h-page));
}

/* ---------------------------------------------------------------- gold photo frame */
.h-frame { margin: 0; }
.h-frame-gold {
  padding: 5px; border-radius: 6px;
  background: linear-gradient(135deg, #f8dc8c 0%, #eaa420 35%, #b98a2e 65%, #f3c862 100%);
  box-shadow: 0 0 0 6px rgba(255,253,250,.92), 0 0 0 7px rgba(234,164,32,.45), 0 30px 50px -30px rgba(90,60,0,.55);
}
.h-frame-gold > img { display: block; width: 100%; border-radius: 2px; }
.h-frame figcaption {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 20px;
  font: 700 12px/16px 'Cinzel', serif; letter-spacing: .16em; text-transform: uppercase; color: var(--h-gold-deep); text-align: center;
}
@media (max-width: 1023px) {
  .h-frame-gold { box-shadow: 0 0 0 4px rgba(255,253,250,.92), 0 0 0 5px rgba(234,164,32,.45), 0 20px 36px -24px rgba(90,60,0,.5); }
}

/* ---------------------------------------------------------------- temple-arch photo frame: pointed top, gold outline */
.h-arch { position: relative; width: 100%; aspect-ratio: 4 / 5; background: linear-gradient(160deg, #f6cf72, var(--h-gold) 45%, #b98a2e); clip-path: url(#arch); }
.h-arch-in { position: absolute; inset: 4px; clip-path: url(#arch); overflow: hidden; background: #f6f3ee; }
.h-arch-in img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------- colour glow behind a card */
.h-card { position: relative; isolation: isolate; transition: transform .25s ease; }
.h-card:hover { transform: translateY(-5px); }
.h-bubble {
  position: absolute; z-index: -1; left: 50%; top: -40px; width: 250px; height: 250px; translate: -50% 0;
  border-radius: 50%; background: var(--c); opacity: .42; filter: blur(30px); pointer-events: none;
}
.h-card-in { border-radius: 10px; background: rgba(255,253,250,.82); border: 1px solid #e2dccf; transition: box-shadow .25s ease; }
.h-card:hover .h-card-in { box-shadow: 0 22px 34px -24px rgba(31,28,24,.4); }
/* a whole grid of cards: each card gets a soft glow along its top in the next logo colour (green, blue, gold, kesar).
   It is a shadow, so it still shows on cards that clip their own corners. */
.h-glows > * { --c: #128144; box-shadow: 0 -16px 46px -14px color-mix(in srgb, var(--c) 60%, transparent), 0 1px 2px rgba(31,28,24,.05); }
.h-glows > :nth-child(4n+2) { --c: #1729a4; }
.h-glows > :nth-child(4n+3) { --c: #eaa420; }
.h-glows > :nth-child(4n+4) { --c: #b03a24; }
.h-glows.h-glows--gb > :nth-child(2) { --c: #eaa420; }   /* green, gold, blue (membership plans, youth pillars) */
.h-glows.h-glows--gb > :nth-child(3) { --c: #1729a4; }
.h-glows.h-glows--kesar > * { --c: #b03a24; }             /* CarePath */
.h-glows.h-glows--funds > :nth-child(1) { --c: #eaa420; } /* general fund, expansion, Pathshala, CarePath */
.h-glows.h-glows--funds > :nth-child(2) { --c: #128144; }
.h-glows.h-glows--funds > :nth-child(3) { --c: #eaa420; }
.h-glows.h-glows--funds > :nth-child(4) { --c: #b03a24; }

/* art behind a custom hero, clipped to the hero */
.h-layer { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.h-layer .h-mandala, .h-layer .h-glow { z-index: auto; }
.h-glow--kesar { background: #e0735c; opacity: .3; }

/* ---------------------------------------------------------------- gold-ringed medallion for icons and dates */
.h-medal { box-shadow: 0 0 0 5px #fff, 0 0 0 6px rgba(234,164,32,.45); }

/* ---------------------------------------------------------------- light closing card */
.h-band > :not(.h-mandala) { position: relative; z-index: 1; }
.h-band > .h-mandala { width: 300px; height: 300px; right: -110px; bottom: -120px; opacity: .12; }

/* ---------------------------------------------------------------- green closing banner: scalloped top edge */
.h-closing { padding: 24px 0 72px; }
.h-close {
  position: relative; isolation: isolate; overflow: hidden; color: #fff; border-radius: 0 0 14px 14px;
  background: radial-gradient(700px 360px at 50% 35%, #17653b, rgba(23,101,59,0) 70%), var(--h-green-deep);
  /* a row of 28px lobes along the top, then the solid banner */
  -webkit-mask: radial-gradient(circle 14px at 14px 14px, #000 13.5px, transparent 14px) 0 0 / 28px 28px round no-repeat,
                linear-gradient(#000, #000) 0 14px / 100% calc(100% - 14px) no-repeat;
          mask: radial-gradient(circle 14px at 14px 14px, #000 13.5px, transparent 14px) 0 0 / 28px 28px round no-repeat,
                linear-gradient(#000, #000) 0 14px / 100% calc(100% - 14px) no-repeat;
}
.h-close--kesar { background: radial-gradient(700px 360px at 50% 35%, #c4472f, rgba(196,71,47,0) 70%), #b03a24; }
.h-close::before { /* a gold dot under each lobe */
  content: ''; position: absolute; left: 0; right: 0; top: 22px; height: 12px; z-index: 0; pointer-events: none;
  background: radial-gradient(circle 2.4px at 14px 6px, var(--h-gold) 2.2px, transparent 2.6px) 0 0 / 28px 12px round no-repeat;
}
.h-close::after { content: ''; position: absolute; left: 24px; right: 24px; top: 42px; height: 1px; background: rgba(234,164,32,.5); pointer-events: none; }
.h-close--kesar::before { background-image: radial-gradient(circle 2.4px at 14px 6px, #ffd88a 2.2px, transparent 2.6px); }
.h-close--kesar::after { background: rgba(255,216,138,.55); }
.h-close--kesar .h-diya--lg { color: #ffd88a; }
.h-close > :not(.h-jaali) { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .h-glow, .flame { animation: none; }
  .h-card, .h-card-in, .arr { transition: none; }
  .h-card:hover { transform: none; }
}

/* ---------------------------------------------------------------- art tile in place of a photo still to come (common.ph) */
.ph-art {
  display: flex; align-items: center; justify-content: center; gap: 7%; position: relative; overflow: hidden; container-type: inline-size;
  background: var(--h-jaali), radial-gradient(circle at 50% 45%, #fdf3e2 0%, #f6e3bd 62%, #efd29a 100%);
}
.ph-art--kesar { background: var(--h-jaali), radial-gradient(circle at 50% 45%, #fdf0ea 0%, #f6d9cd 62%, #eebfae 100%); }
.ph-medal {
  display: flex; align-items: center; justify-content: center; width: min(38%, 104px); aspect-ratio: 1; border-radius: 50%;
  background: #fff; color: var(--h-gold-deep); box-shadow: 0 0 0 5px rgba(255,255,255,.7), 0 0 0 6px rgba(234,164,32,.5);
}
.ph-art--kesar .ph-medal { color: #b03a24; box-shadow: 0 0 0 5px rgba(255,255,255,.7), 0 0 0 6px rgba(176,58,36,.35); }
.ph-medal--side { display: none; width: min(24%, 84px); opacity: .9; }
@container (min-width: 300px) { .ph-medal--side { display: flex; } .ph-medal { width: min(30%, 112px); } .ph-medal--side { width: min(22%, 84px); } }