/* Dhwani extras (from the Next.js demo Kumar picked on 2026-11-01):
   gold hero wave, glow + tilt cards, magnetic buttons, package knob, playlist polish. */

/* 1. Gold sound-wave in the hero */
.dmp-wave{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.elementor-element-663e064 > .elementor-container{position:relative;z-index:2}

/* 2. Glow + tilt on service / why cards and package cards */
.dmp-tilt{position:relative;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s;will-change:transform}
.dmp-tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(260px circle at var(--gx,50%) var(--gy,0%),rgba(249,195,73,.22),transparent 60%)}
.dmp-tilt:hover::after{opacity:1}
.dmp-tilt:hover{border-color:rgba(249,195,73,.35)!important;box-shadow:0 18px 40px -18px rgba(249,195,73,.35)}

/* 3. Magnetic buttons */
.dmp-mag{transition:transform .25s cubic-bezier(.2,.8,.2,1)!important}

/* 4. Package knob */
.dpk.dmp-knob .dpk-grid{display:grid!important;grid-template-columns:minmax(300px,1fr) 1.15fr!important;gap:18px!important;align-items:stretch;overflow:visible!important;scroll-snap-type:none!important}
.dpk.dmp-knob .dpk-card{display:none!important}
.dpk.dmp-knob .dpk-card.dmp-on{display:flex!important;animation:dmpRise .45s cubic-bezier(.2,.8,.2,1) both;width:auto!important;min-width:0!important;max-width:none!important}
@keyframes dmpRise{from{opacity:0;transform:translateY(16px)}}
.dmp-dial{border-radius:24px;padding:20px 18px 16px;display:grid;justify-items:center;align-content:center;gap:14px;
  background:linear-gradient(160deg,#221d15,#100e0b);border:1px solid rgba(255,240,210,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 40px -20px rgba(0,0,0,.8)}
.dmp-dial .lbl{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:#f9c349;font-weight:600}
.dmp-ring{position:relative;width:236px;height:236px;display:grid;place-items:center}
.dmp-tick{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px;border:0;background:none;cursor:pointer;color:#9d9488;font:700 .95rem/1 inherit;padding:0;
  transform:rotate(var(--a)) translateY(-112px) rotate(calc(-1*var(--a)))}
.dmp-tick span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;transition:color .3s,text-shadow .3s}
.dmp-tick.on{color:#f9c349}.dmp-tick.on span{text-shadow:0 0 12px rgba(249,195,73,.9)}
.dmp-k{width:160px;height:160px;border-radius:50%;cursor:grab;touch-action:none;position:relative;transform:rotate(var(--r));transition:transform .45s cubic-bezier(.3,1.5,.5,1);
  background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.05) 0 2deg,transparent 2deg 6deg),radial-gradient(circle at 50% 30%,#4a4134,#1b1712 70%);
  box-shadow:0 18px 30px rgba(0,0,0,.7),0 0 0 10px #0d0b08,0 0 0 11px rgba(249,195,73,.2),inset 0 2px 1px rgba(255,255,255,.18),inset 0 -6px 12px rgba(0,0,0,.6)}
.dmp-k:active{cursor:grabbing}.dmp-k:focus-visible{outline:2px solid #f9c349;outline-offset:14px}
.dmp-k i{position:absolute;left:50%;top:13px;width:5px;height:28px;margin-left:-2.5px;border-radius:3px;background:#f9c349;box-shadow:0 0 10px rgba(249,195,73,.9)}
.dmp-vu{display:flex;gap:5px}.dmp-vu b{width:13px;height:8px;border-radius:2px;background:rgba(255,255,255,.08);transition:background .3s,box-shadow .3s}
.dmp-vu b.on{background:#f9c349;box-shadow:0 0 8px rgba(249,195,73,.7)}.dmp-vu b.on:nth-child(n+10){background:#e0754f;box-shadow:0 0 8px rgba(224,117,79,.7)}
.dmp-dial .nm{font-weight:700;color:#fff;font-size:1.05rem;text-align:center;min-height:1.4em}
.dmp-dial .hint{font-size:.8rem;color:#9d9488;margin-top:-10px}
@media (max-width:900px){
  .dpk.dmp-knob .dpk-grid{grid-template-columns:1fr!important;gap:12px!important}
  .dmp-dial{grid-template-columns:auto 1fr;justify-items:start;align-items:center;padding:14px 16px;gap:4px 16px}
  .dmp-dial .lbl{grid-column:2;align-self:end}.dmp-dial .nm{grid-column:2;text-align:left;font-size:.98rem}
  .dmp-dial .hint{grid-column:2;margin:0;align-self:start}
  .dmp-ring{grid-row:1/span 4;width:150px;height:150px}.dmp-tick{transform:rotate(var(--a)) translateY(-70px) rotate(calc(-1*var(--a)));width:30px;height:30px;margin:-15px;font-size:.8rem}
  .dmp-k{width:98px;height:98px;box-shadow:0 10px 20px rgba(0,0,0,.7),0 0 0 6px #0d0b08,0 0 0 7px rgba(249,195,73,.2),inset 0 2px 1px rgba(255,255,255,.18),inset 0 -6px 12px rgba(0,0,0,.6)}
  .dmp-k i{top:8px;height:18px;width:4px;margin-left:-2px}
  .dmp-vu{grid-column:2}.dmp-vu b{width:9px;height:6px}
}

/* 5. Playlist: always visible, clear "now playing" */
.dfw .dmp-plh{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:12px 2px 6px;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:#f9c349;font-weight:600}
.dfw .dmp-plh small{letter-spacing:0;text-transform:none;color:#9d9488;font-weight:500;font-size:.8rem}
.dfw .vl .vr{position:relative;transition:background .2s}
.dfw .vl .vr.on{background:rgba(249,195,73,.12)!important;box-shadow:inset 3px 0 0 #f9c349}
.dfw .vl .vr.on::after{content:"";position:absolute;right:58px;top:50%;width:14px;height:12px;margin-top:-6px;
  background:linear-gradient(#f9c349,#f9c349) 0 100%/3px 60% no-repeat,linear-gradient(#f9c349,#f9c349) 5px 100%/3px 100% no-repeat,linear-gradient(#f9c349,#f9c349) 10px 100%/3px 40% no-repeat;animation:dmpEq 1s ease-in-out infinite alternate}
@keyframes dmpEq{to{background-size:3px 30%,3px 50%,3px 100%}}
.dfw .dmp-skip{display:inline-flex;gap:6px}
.dfw .dmp-skip button{all:unset;box-sizing:border-box;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,240,210,.16);background:rgba(255,245,225,.06);color:#fff;cursor:pointer;display:grid;place-items:center;transition:color .2s,border-color .2s}
.dfw .dmp-skip button svg{width:14px;height:14px;display:block}
.dfw .dmp-skip button:hover{border-color:rgba(249,195,73,.5);color:#f9c349}

@media (prefers-reduced-motion:reduce){.dmp-tilt,.dmp-mag,.dmp-k{transition:none!important}.dfw .vl .vr.on::after{animation:none}}
/* make room for the playlist header */
.dfw .dmp-plh{margin:10px 2px 4px;min-height:32px}
.dfw .dmp-skip{margin-right:44px}
@media (min-width:901px){.dfw .media{height:520px!important}.dfw .media .pane.on{height:520px!important}}
@media (max-width:900px){.dfw .media,.dfw .media .pane.on{height:auto!important}.dfw .media .pane.on .vlw{flex:none;height:200px}}
/* single services row under the packages */
@media (min-width:901px){.dpk .dpk-solo{margin-top:18px}.dpk .dpk-solo h3{margin-bottom:8px}.dpk .dpk-solo-row a{padding:9px 18px}.dpk .dpk-solo~.note{margin-top:14px}}