@import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
/* =====================================================================
   DIWALI THEME — Expert De Tours
   - Fully separate from custom.css. Every class is prefixed "dwl-".
   - All decorations are created by js/diwali.js (no HTML markup edits).
   - To REMOVE the theme: delete the 2 lines marked "DIWALI" in
     include/header.php.
   ===================================================================== */

/* ---------- 2. Diya (shared) ---------- */
.dwl-diya{display:inline-block; width:64px;}
.dwl-diya svg{width:100%; height:auto; display:block; overflow:visible;}
.dwl-flame{
  transform-box:fill-box;
  transform-origin:50% 100%;
  animation:dwl-flicker 1.1s ease-in-out infinite alternate;
}
.dwl-glow{animation:dwl-glow 1.6s ease-in-out infinite alternate;}
@keyframes dwl-flicker{
  0%  {transform:scale(1,1) skewX(0deg);}
  30% {transform:scale(.94,1.06) skewX(2deg);}
  60% {transform:scale(1.04,.95) skewX(-2deg);}
  100%{transform:scale(.97,1.08) skewX(1deg);}
}
@keyframes dwl-glow{from{opacity:.55;} to{opacity:.95;}}

/* ---------- 3. Line of small diyas at the top of the sticky header ---------- */
/* --dwl-size / --dwl-gap are also read by diwali.js to decide how many diyas fit */
.dwl-diya-strip{
  --dwl-size:26px;
  --dwl-gap:14px;
  pointer-events:none;
  display:flex;
  flex-wrap:nowrap;          /* always a single line */
  justify-content:center;
  align-items:flex-end;
  gap:var(--dwl-gap);
  padding:6px 12px 5px;
  margin:0;                  /* sits directly on top of the header */
  overflow:hidden;
  /* festive band: deep maroon with gold borders + faint gold dot pattern */
  background:
    radial-gradient(circle, rgba(255,202,40,.18) 1px, transparent 1.5px) 0 0 / 14px 14px,
    linear-gradient(90deg, #2b0618 0%, #6d0f2e 22%, #8e1a2b 50%, #6d0f2e 78%, #2b0618 100%);
  border-top:2px solid #ffca28;
  border-bottom:2px solid #ffca28;
  box-shadow:0 2px 12px rgba(255,150,40,.25), inset 0 -6px 12px rgba(0,0,0,.35);
}
.dwl-diya-strip .dwl-diya{width:var(--dwl-size); flex:0 0 auto;}
.dwl-diya-strip .dwl-diya:nth-child(2n) .dwl-flame{animation-delay:-.4s;}
.dwl-diya-strip .dwl-diya:nth-child(3n) .dwl-flame{animation-delay:-.8s;}
@media(max-width:991.98px){
  .dwl-diya-strip{--dwl-size:28px; --dwl-gap:12px;}
}
@media(max-width:567px){
  .dwl-diya-strip{--dwl-size:30px; --dwl-gap:10px; padding:5px 8px 4px;}
}
@media(max-width:359px){
  .dwl-diya-strip{--dwl-size:27px; --dwl-gap:8px; padding:4px 6px 3px;}
}

/* ---------- Cursor-following diya (mouse devices only) ---------- */
.dwl-cursor{
  position:fixed;
  left:0; top:0;
  width:34px;
  pointer-events:none;     /* never blocks clicks */
  z-index:99999;           /* above header, below the intro */
  opacity:0;
  transition:opacity .3s ease;
  will-change:transform;
  filter:drop-shadow(0 0 8px rgba(255,160,40,.6));
}
.dwl-cursor.dwl-on{opacity:1;}
.dwl-cursor{transition:opacity .3s ease, filter .3s ease;}
.dwl-cursor.dwl-hot{filter:drop-shadow(0 0 16px rgba(255,190,60,.95)) drop-shadow(0 0 30px rgba(255,35,168,.45));}
.dwl-cursor-inner{transform-origin:50% 10%;}            /* swings like a hanging lamp */
.dwl-cursor .dwl-diya{width:100%;}
.dwl-cursor .dwl-diya.dwl-idle{animation:dwl-bob 1.8s ease-in-out infinite;}
.dwl-lean{transform-box:fill-box; transform-origin:50% 100%; transition:transform .15s ease-out;}
@keyframes dwl-bob{0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);}}

.dwl-spark{
  position:fixed;
  left:0; top:0;
  width:var(--s,4px); height:var(--s,4px);
  margin:calc(var(--s,4px) / -2) 0 0 calc(var(--s,4px) / -2);
  border-radius:50%;
  pointer-events:none;
  z-index:99998;
  background:var(--c,#ffd54f);
  box-shadow:0 0 6px 1px var(--c,#ffd54f);
  animation:dwl-spark .9s ease-out forwards;
}
@keyframes dwl-spark{
  from{opacity:1; transform:translate(var(--x),var(--y)) scale(1);}
  to  {opacity:0; transform:translate(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy,28px))) scale(.2);}
}

/* ---------- 4. Welcome intro (once per visit) ---------- */
.dwl-intro{
  position:fixed;
  inset:0;
  z-index:100000;
  background:radial-gradient(circle at 50% 55%,#2a1200 0%,#0a0400 45%,#000 80%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
  cursor:pointer;
  transition:opacity .7s ease, visibility .7s ease;
}
.dwl-intro.dwl-hide{opacity:0; visibility:hidden;}
.dwl-intro .dwl-fw{position:absolute; inset:0; width:100%; height:100%; z-index:0;}
.dwl-intro-content{position:relative; z-index:1; width:100%; max-width:900px;}

/* All sizes scale with the screen (clamp = min, fluid, max) so it fits every device */
.dwl-intro h2{
  margin:0 0 clamp(10px,2.5vh,20px);
  padding:0 .2em;                         /* room for the script swashes */
  font-family:'Great Vibes', cursive;      /* elegant festive calligraphy */
  font-size:clamp(46px, 11vw, 92px);       /* script fonts look smaller, so this reads as medium */
  font-weight:400;
  letter-spacing:1px;
  line-height:1.25;
  white-space:nowrap;
  color:transparent;
  background:linear-gradient(110deg,#fdd613 0%,#fe9c43 18%,#fff6c8 30%,#fe6571 45%,#ff23a8 60%,#fe9c43 80%,#fdd613 100%);
  background-size:200% auto;
  -webkit-background-clip:text;
  background-clip:text;
  filter:drop-shadow(0 0 18px rgba(255,110,60,.45));
  animation:dwl-pop .9s cubic-bezier(.2,1.4,.4,1) .1s both, dwl-shine 2.5s linear 1s infinite;
}
.dwl-intro-diyas{display:flex; justify-content:center; align-items:flex-end; gap:clamp(8px,2.2vw,18px);}
.dwl-intro-diyas .dwl-diya{width:clamp(36px,9vw,56px); animation:dwl-rise .6s ease-out both;}
.dwl-intro-diyas .dwl-diya:nth-child(3){width:clamp(50px,12.5vw,78px);}   /* centre diya bigger */
.dwl-intro-diyas .dwl-diya:nth-child(2),
.dwl-intro-diyas .dwl-diya:nth-child(4){width:clamp(42px,10.5vw,64px);}
.dwl-intro-diyas .dwl-diya:nth-child(2n) .dwl-flame{animation-delay:-.4s;}
.dwl-intro h6{
  margin:clamp(16px,3vh,24px) 0 0;
  font-size:clamp(11px,3.2vw,15px);
  color:#ffe9c2; letter-spacing:clamp(1px,.6vw,3px); text-transform:uppercase;
  animation:dwl-rise .8s .8s ease-out both;
}
.dwl-intro .dwl-skip{
  margin-top:clamp(18px,4vh,28px); font-size:11px; color:#c9a77a; letter-spacing:2px; text-transform:uppercase;
  animation:dwl-rise .8s 1.1s ease-out both, dwl-pulse 1.4s 2s ease-in-out infinite;
}
@keyframes dwl-rise{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;}}
@keyframes dwl-pop{
  0%  {opacity:0; transform:scale(.4); filter:blur(8px);}
  70% {opacity:1; transform:scale(1.08); filter:blur(0) drop-shadow(0 0 18px rgba(255,110,60,.45));}
  100%{opacity:1; transform:scale(1);   filter:drop-shadow(0 0 18px rgba(255,110,60,.45));}
}
@keyframes dwl-shine{to{background-position:-200% center;}}
@keyframes dwl-pulse{0%,100%{opacity:1;} 50%{opacity:.35;}}
/* phones held sideways / short screens */
@media(max-height:480px){
  .dwl-intro h2{font-size:clamp(40px,11vh,64px); margin-bottom:6px;}
  .dwl-intro-diyas .dwl-diya{width:34px;}
  .dwl-intro-diyas .dwl-diya:nth-child(3){width:46px;}
  .dwl-intro-diyas .dwl-diya:nth-child(2),
  .dwl-intro-diyas .dwl-diya:nth-child(4){width:40px;}
  .dwl-intro h6{margin-top:10px;}
  .dwl-intro .dwl-skip{margin-top:12px;}
}

/* ---------- Accessibility: no motion if the visitor prefers reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .dwl-flame,.dwl-glow,.dwl-intro h2,.dwl-intro h6,
  .dwl-intro .dwl-skip,.dwl-intro-diyas .dwl-diya{animation:none !important;}
}