/* DentaCloudPH scroll scene. One tall section holds a sticky stage; scroll position inside it drives the animation.
   Uses the site's own tokens (site.css) with fallbacks, so it also works on its own. */
.dcph{position:relative;height:700vh;background:var(--bg,#f5f0ea);--dcph-top:var(--header-h,0px)}
@supports (height:100svh){.dcph{height:700svh}}
.dcph-stage{position:sticky;top:var(--dcph-top);height:var(--dcph-h,calc(100svh - 72px));overflow:hidden;isolation:isolate;
  background:
    radial-gradient(34% 40% at 50% 46%,rgba(96,154,226,.55) 0%,rgba(140,185,240,.34) 45%,rgba(203,226,250,0) 100%),
    radial-gradient(420px 420px at 100% 18%,rgba(80,230,255,.16),transparent 70%),
    radial-gradient(380px 380px at 0% 38%,rgba(212,175,55,.12),transparent 70%),
    radial-gradient(60% 60% at 50% 50%,#e3effc 0%,var(--bg,#f5f0ea) 100%)}
/* the old hero's faint grid, masked so it fades toward the edges */
.dcph-stage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(15,42,82,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(15,42,82,.09) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 85% 70% at 50% 50%,#000 25%,transparent 80%);mask-image:radial-gradient(ellipse 85% 70% at 50% 50%,#000 25%,transparent 80%)}
.dcph-gl{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;opacity:0;transition:opacity .6s ease}
.dcph.is-ready .dcph-gl{opacity:1}
.dcph.no-gl .dcph-gl{display:none}
#dcph-labels{position:absolute;inset:0;z-index:2;pointer-events:none}
.dcph-fallback{display:none;z-index:1;position:absolute;left:50%;top:50%;width:min(60vw,320px);height:auto;transform:translate(-50%,-50%)}
.dcph.no-gl .dcph-fallback{display:block}
html:not(.js) .dcph{height:auto}
html:not(.js) .dcph-stage{position:relative;height:auto;min-height:60vh}
html:not(.js) .dcph-fallback{display:block}

/* names pinned to the 3D objects; sized in em so they scale with the scene (--dcph-ls set by JS) */
.dcph{--dcph-ls:1}
.dcph-lab{position:absolute;left:0;top:0;width:max-content;max-width:13em;font-size:calc(1rem*var(--dcph-ls));text-align:center;pointer-events:none;opacity:0;will-change:transform,opacity;
  font-family:inherit;color:var(--text,#0f172a);background:rgba(255,255,255,.92);border:1px solid var(--border-soft,rgba(15,23,42,.12));border-radius:.75em;padding:.45em .75em .5em;
  box-shadow:0 6px 20px rgba(15,23,42,.14)}
.dcph-lab.is-l{text-align:right}.dcph-lab.is-r{text-align:left}
.dcph-lab i{display:block;font-style:normal;font-size:.62em;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--primary-600,#0063b1);margin-bottom:.15em}
.dcph-lab b{display:block;font-size:1em;font-weight:650;letter-spacing:-.01em;line-height:1.2}
.dcph-lab span{display:block;font-size:.8em;color:var(--muted,#4e5a6b);line-height:1.3;margin-top:.1em}
.dcph-compact .dcph-lab span{display:none}

/* the scroll cue: tells people the page is meant to be scrolled */
.dcph-cue{position:absolute;left:50%;bottom:clamp(14px,3.5vh,30px);z-index:5;display:inline-flex;align-items:center;gap:.6rem;
  padding:.8rem 1.2rem .8rem 1.4rem;border:0;border-radius:var(--r-pill,999px);background:var(--primary-600,#0063b1);color:#fff;
  font-family:inherit;font-size:.95rem;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;box-shadow:0 14px 34px -12px rgba(0,78,140,.55);
  opacity:0;transform:translate(-50%,12px);pointer-events:none;transition:opacity .35s ease,transform .35s ease,background-color .2s ease}
.dcph-cue.is-on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.dcph-cue:hover{background:var(--primary-700,#004e8c)}
.dcph-cue:focus-visible{outline:3px solid var(--gold,#d4af37);outline-offset:3px}
.dcph-cue::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;animation:dcphPulse 2.2s ease-out infinite}
.dcph-cue svg{width:20px;height:20px;flex:none;animation:dcphBounce 1.6s ease-in-out infinite}
@keyframes dcphPulse{0%{box-shadow:0 0 0 0 rgba(0,120,212,.5)}70%,100%{box-shadow:0 0 0 18px rgba(0,120,212,0)}}
@keyframes dcphBounce{0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px)}}

@media (max-width:420px){
  .dcph-cue{padding:.7rem 1rem .7rem 1.15rem;font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){
  .dcph-cue::after,.dcph-cue svg{animation:none}
  .dcph-cue{transition:none}
}