/* ================= The Lighting Ritual (homepage) ================= */
/* Shown as a focused overlay on page load: the real page (header, hero
   banner) sits behind it, dimmed and blurred through backdrop-filter, so
   attention is pulled onto the ritual itself rather than competing with
   the rest of the page. Closing it (CTA, backdrop click, or Esc) fades
   the blur away and the page "comes back into focus" underneath. */
.ritual-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 16px;
  background:rgba(10,7,5,.55);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  overflow-y:auto;
  opacity:1;
  transition:opacity .55s ease;
}
.ritual-overlay.ritual-entering,
.ritual-overlay.ritual-closing{
  opacity:0;
}
.ritual-overlay.ritual-closing{
  pointer-events:none;
}

.ritual{
  position:relative;
  width:100%;
  max-width:900px;
  max-height:88vh;
  overflow-y:auto;
  overflow-x:hidden;
  margin:auto;
  border-radius:20px;
  box-shadow:0 40px 100px rgba(0,0,0,.55);
  background:radial-gradient(ellipse at 50% 15%, #241a10 0%, #140f0b 45%, #0e0a08 100%);
  padding:60px 20px 54px;
  opacity:1;
  transform:scale(1) translateY(0);
  transition:transform .55s cubic-bezier(.22,.9,.32,1), opacity .5s ease;
}
.ritual-overlay.ritual-entering .ritual,
.ritual-overlay.ritual-closing .ritual{
  opacity:0;
  transform:scale(.94) translateY(18px);
}

html.ritual-lock,
html.ritual-lock body{
  overflow:hidden;
}
.ritual-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.rp{position:absolute;bottom:-10px;border-radius:50%;background:radial-gradient(circle,#ffdf9e,#d8a13c 55%,rgba(216,161,60,0) 75%);animation:rpFloat linear infinite;opacity:0;}
@keyframes rpFloat{0%{transform:translateY(0) translateX(0);opacity:0;}10%{opacity:.9;}88%{opacity:.35;}100%{transform:translateY(-620px) translateX(var(--drift,20px));opacity:0;}}

.ritual-head{position:relative;z-index:4;text-align:center;margin-bottom:8px;}
.ritual-eyebrow{color:#d8a13c;letter-spacing:4px;font-size:11px;text-transform:uppercase;font-weight:600;margin-bottom:14px;font-family:'Poppins',sans-serif;}
.ritual-title{font-family:'Playfair Display',serif;font-size:34px;color:#f5ece0;margin-bottom:14px;}
.ritual-sub{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:19px;color:#c9b898;max-width:560px;margin:0 auto 6px;line-height:1.5;}

.counter-row{position:relative;z-index:4;text-align:center;margin:24px 0 46px;}
.counter-num{font-family:'Playfair Display',serif;font-size:22px;color:#d8a13c;display:inline-block;min-width:70px;transition:transform .25s ease;}
.counter-lbl{color:#8f8267;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;margin-left:8px;font-family:'Poppins',sans-serif;}

.altar{position:relative;z-index:4;max-width:760px;margin:0 auto;display:flex;justify-content:center;gap:44px;flex-wrap:wrap;}
.diya-slot{display:flex;flex-direction:column;align-items:center;cursor:pointer;user-select:none;}
.diya-slot .flame-zone{position:relative;height:76px;width:60px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:2px;}

.flame{
  position:relative;width:15px;height:34px;
  background:radial-gradient(ellipse at 50% 70%, #fff6d8 0%, #ffd571 35%, #f0a23c 62%, #d8601c 85%, rgba(216,96,28,0) 100%);
  border-radius:50% 50% 50% 50% / 65% 65% 35% 35%;
  transform-origin:50% 100%;
  opacity:0;
  transition:opacity .4s ease;
  filter:blur(.2px);
}
.flame.lit{opacity:1;animation:flicker 2.1s ease-in-out infinite;}
@keyframes flicker{
  0%,100%{transform:scaleY(1) scaleX(1) rotate(0deg);}
  20%{transform:scaleY(1.08) scaleX(.95) rotate(-2deg);}
  40%{transform:scaleY(.92) scaleX(1.05) rotate(2deg);}
  60%{transform:scaleY(1.05) scaleX(.97) rotate(-1deg);}
  80%{transform:scaleY(.96) scaleX(1.02) rotate(1deg);}
}
.flame-glow{
  position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  width:0;height:0;border-radius:50%;
  background:radial-gradient(circle, rgba(255,196,90,.65) 0%, rgba(255,150,40,.25) 40%, rgba(255,150,40,0) 72%);
  transition:width .5s ease, height .5s ease;
  pointer-events:none;
}
.diya-slot.on .flame-glow{width:130px;height:130px;}

.wick{width:2px;height:10px;background:#3a2c1e;margin:0 auto;}

.diya-body svg{display:block;width:90px;height:auto;}
.diya-label{margin-top:14px;font-size:12px;color:#a99884;letter-spacing:.5px;text-align:center;min-height:16px;font-family:'Poppins',sans-serif;}
.diya-slot.on .diya-label{color:#e8cd94;}

.ritual-msg{
  position:relative;z-index:4;text-align:center;margin-top:48px;
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:20px;color:#e8cd94;
  min-height:30px;opacity:0;transition:opacity .6s ease;
}
.ritual-msg.show{opacity:1;}

.intention-row{position:relative;z-index:4;text-align:center;margin-top:28px;display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}
.intention-row input{
  background:rgba(255,255,255,.04);border:1px solid #3a2c1e;color:#f0e6d2;
  padding:12px 18px;border-radius:24px;font-size:13px;font-family:'Poppins',sans-serif;
  width:280px;text-align:center;
}
.intention-row input::placeholder{color:#8f8267;}
.intention-row input:focus{outline:none;border-color:#d8a13c;}

.ritual-cta{position:relative;z-index:4;text-align:center;margin-top:50px;}
.ritual-cta a{
  display:inline-block;background:#8d6700;color:#fff;padding:15px 38px;font-size:12px;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;border-radius:3px;text-decoration:none;
}
.ritual-cta a:hover{background:#6f5100;color:#fff;text-decoration:none;}
.ritual-cta p{color:#8f8267;font-size:12px;margin-top:14px;font-family:'Poppins',sans-serif;}

@media only screen and (max-width: 767px) {
  .ritual-overlay{padding:16px 10px;}
  .ritual{padding:44px 16px 40px;max-height:92vh;border-radius:14px;}
  .ritual-title{font-size:26px;}
  .ritual-sub{font-size:16px;}
  .altar{gap:22px;}
  .diya-body svg{width:66px;}
  .intention-row input{width:220px;}
}