/* ═══ PUJA MOTION KIT ═══ Calm, devotional motion. Reads design-system.css tokens. */

/* 1. Scroll reveal — gentle fade-up. JS adds .in when in view.
   Trimmed 1.1s → .8s + tighter stagger (July 2026): the old timing left
   whole content sections washed-out for ~2s after load, which read as
   "page is broken" rather than calm. Still unhurried — just not sluggish. */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.4s}.reveal.d6{transition-delay:.48s}
.reveal.d7{transition-delay:.56s}.reveal.d8{transition-delay:.64s}

/* 2. Ambient float — ONE element per screen only. Slow, low amplitude. */
@keyframes pujaFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.puja-float{animation:pujaFloat 8s ease-in-out infinite}

/* 3. Diya flicker — for a single lamp glyph (footer / section divider). */
@keyframes diyaFlicker{0%,100%{opacity:.9;filter:drop-shadow(0 0 6px rgba(255,160,0,.5))}
  45%{opacity:1;filter:drop-shadow(0 0 12px rgba(255,180,20,.75))}
  70%{opacity:.85;filter:drop-shadow(0 0 8px rgba(255,150,0,.55))}}
.diya-flicker{animation:diyaFlicker 5.5s ease-in-out infinite}

/* 4. Water shimmer — a slow horizontal light sweep under a hero/section. */
@keyframes waterShimmer{0%,100%{opacity:.55;transform:translateX(-30%)}50%{opacity:.9;transform:translateX(30%)}}
.water-shimmer{animation:waterShimmer 9s ease-in-out infinite}

/* 5. Sacred breath — replaces engPulse. One slow warm swell, no scale jump. */
@keyframes pujaBreath{0%,100%{filter:drop-shadow(0 3px 20px rgba(255,140,0,.4))}
  50%{filter:drop-shadow(0 5px 30px rgba(255,170,40,.6))}}
.puja-breath{animation:pujaBreath 8s ease-in-out infinite}

/* 6. Floating-label input — one field = label + input (saves vertical space). */
.field{position:relative;margin:0 0 var(--sp-4)}
.field input,.field select,.field textarea{width:100%;padding:1.15rem .9rem .5rem;
  border:1.5px solid var(--c-border,rgba(160,88,40,.35));border-radius:var(--r-md);
  background:var(--c-warm);font:inherit;color:var(--c-ivory-900);
  transition:border-color var(--t-base),box-shadow var(--t-base)}
.field label{position:absolute;left:.9rem;top:.9rem;color:#9a6a3a;pointer-events:none;
  transition:all var(--t-fast) var(--ease-out);font-size:var(--text-base)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--c-saffron);
  box-shadow:0 0 0 3px rgba(232,92,0,.12),0 2px 12px rgba(232,92,0,.08)}
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label,
.field select:valid+label{top:.35rem;font-size:var(--text-2xs);color:var(--c-saffron);letter-spacing:.04em}
/* NOTE: input must have placeholder=" " (a single space) for :not(:placeholder-shown) to work. */
.field .note{font-size:.72rem;color:#7a5030;margin-top:.22rem;line-height:1.45}
.field .prefill-note{font-size:.72rem;color:var(--c-saffron);margin-top:.22rem;font-weight:600}

/* 7. Bottom-sheet / popup — tile opens detail here, saves page space. */
.sheet-backdrop{position:fixed;inset:0;background:rgba(26,5,0,.55);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity var(--t-base);z-index:var(--z-modal)}
.sheet-backdrop.open{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:50%;bottom:0;transform:translate(-50%,100%);
  width:min(560px,100%);max-height:88vh;overflow:auto;background:var(--c-warm);
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;box-shadow:var(--sh-2xl);
  transition:transform var(--t-slow) var(--ease-spring);z-index:calc(var(--z-modal) + 1);
  padding:var(--sp-6) var(--sp-5) var(--sp-8)}
.sheet.open{transform:translate(-50%,0)}
.sheet-handle{width:44px;height:4px;border-radius:2px;background:rgba(160,88,40,.3);margin:0 auto var(--sp-4)}
/* Sheet close button — shared here (July 2026) because portal.html never
   loaded the one-off copy that lived in volunteer.css, leaving its ✕
   buttons browser-default. Warm chip, quarter-turn on hover. */
.sheet-close{position:absolute;top:.9rem;right:1rem;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  background:rgba(160,88,40,.08);border:1px solid rgba(160,88,40,.2);border-radius:50%;
  font-size:.9rem;color:#8a5a30;cursor:pointer;line-height:1;z-index:2;padding:0;
  transition:background .25s ease,border-color .25s ease,color .25s ease,transform .35s var(--ease-out)}
.sheet-close:hover{background:rgba(232,92,0,.12);border-color:rgba(232,92,0,.4);color:var(--c-saffron);transform:rotate(90deg)}
.sheet-close:active{transform:rotate(90deg) scale(.9)}
.sheet-close:focus-visible{outline:2px solid rgba(232,92,0,.55);outline-offset:2px}
@media(min-width:640px){.sheet{bottom:auto;top:50%;transform:translate(-50%,-46%) scale(.98);
  border-radius:var(--r-2xl)}.sheet.open{transform:translate(-50%,-50%) scale(1)}}

/* Respect reduced motion — design-system.css already zeroes durations globally. */