/* =========================================================
   DRINK OUT OF THE BOX — enhancement layer
   Adds: progressive-enhancement reveal states, custom cursor,
   magnetic buttons. Never touches dotb.css rules directly.
   ========================================================= */

/* ---------- progressive enhancement base ----------
   Only hide content once JS has proven it's alive (html.gsap-boot,
   set synchronously in <head>). If JS fails, nothing stays hidden. */
html.gsap-boot [data-rv],
html.gsap-boot [data-rv-stagger] > *,
html.gsap-boot [data-rv-group] > *,
html.gsap-boot [data-split-chars],
html.gsap-boot [data-split-words]{
  opacity:0;
}
html.gsap-boot [data-mask]{
  clip-path:inset(0 0 100% 0);
}
/* safety net: if enhance.js errors before running, un-hide after paint */
html.gsap-boot.gsap-fallback [data-rv],
html.gsap-boot.gsap-fallback [data-rv-stagger] > *,
html.gsap-boot.gsap-fallback [data-rv-group] > *,
html.gsap-boot.gsap-fallback [data-split-chars],
html.gsap-boot.gsap-fallback [data-split-words]{
  opacity:1;
}
html.gsap-boot.gsap-fallback [data-mask]{
  clip-path:inset(0 0 0% 0);
}

@media (prefers-reduced-motion:reduce){
  html.gsap-boot [data-rv],
  html.gsap-boot [data-rv-stagger] > *,
  html.gsap-boot [data-rv-group] > *,
  html.gsap-boot [data-split-chars],
  html.gsap-boot [data-split-words]{opacity:1}
  html.gsap-boot [data-mask]{clip-path:inset(0 0 0% 0)}
}

.split-line{overflow:hidden;display:block}
.split-word{display:inline-block}

/* ---------- custom cursor ---------- */
#dotbCursor{position:fixed;top:0;left:0;z-index:9999;pointer-events:none;mix-blend-mode:difference;will-change:transform}
#dotbCursor span{position:absolute;left:0;top:0;width:20px;height:20px;margin:-10px 0 0 -10px;
  border-radius:50%;background:var(--dotb-cyan,#54d7df);transform:scale(.5);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s;opacity:.9}
#dotbCursor.is-hover span{transform:scale(2.1)}
#dotbCursor.is-down span{transform:scale(.75)}
@media (pointer:coarse){#dotbCursor{display:none}body{cursor:auto!important}}
@media (hover:hover) and (pointer:fine){
  body{cursor:none}
}

/* ---------- scroll progress hint on nav (subtle, optional) ---------- */
#dotbProgress{position:fixed;top:0;left:0;height:2px;background:var(--dotb-cyan,#54d7df);z-index:9998;width:0%;
  box-shadow:0 0 12px var(--dotb-cyan,#54d7df)}
@media (prefers-reduced-motion:reduce){#dotbProgress{display:none}}