/* ══════════════════════════════════════════════════════════
   NobleClicks — DC-CINEMATIC : homepage-only premium layer
   Custom cursor · split-text · hero video · pinned/horizontal
   scroll helpers. Pairs with dc-cinematic.js (GSAP + Lenis).
   Loaded ONLY on the front page. Honors reduced-motion + touch.
══════════════════════════════════════════════════════════ */

/* ── Lenis smooth-scroll base ── */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ══════════════════════════════════════════════════════════
   CUSTOM CURSOR (desktop + fine-pointer only)
══════════════════════════════════════════════════════════ */
@media (hover:hover) and (pointer:fine){
  .dc-cine body,.dc-cine a,.dc-cine button,.dc-cine .fx-tilt,.dc-cine [data-cursor]{cursor:none}
  .dc-cursor{position:fixed;top:0;left:0;z-index:100000;pointer-events:none;
    transform:translate(-50%,-50%);will-change:transform}
  .dc-cursor-dot{width:7px;height:7px;border-radius:50%;background:var(--fx-pink,#ff497c);
    transition:width .25s,height .25s,background .25s}
  .dc-cursor-ring{position:fixed;top:0;left:0;z-index:99999;pointer-events:none;width:38px;height:38px;
    border:1.5px solid rgba(255,73,124,.6);border-radius:50%;transform:translate(-50%,-50%);
    transition:width .3s cubic-bezier(.22,1,.36,1),height .3s cubic-bezier(.22,1,.36,1),
      border-color .3s,background .3s;will-change:transform;
    display:flex;align-items:center;justify-content:center;
    font:600 10px/1 'Poppins',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#fff}
  .dc-cursor-ring.is-hover{width:64px;height:64px;border-color:transparent;background:rgba(255,73,124,.18)}
  .dc-cursor-ring.is-view{width:84px;height:84px;border-color:transparent;background:var(--fx-pink,#ff497c)}
  .dc-cursor-ring .lbl{opacity:0;transition:opacity .2s}
  .dc-cursor-ring.is-view .lbl{opacity:1}
  .dc-cursor-ring.is-down{transform:translate(-50%,-50%) scale(.8)}
}
@media (hover:none),(pointer:coarse){.dc-cursor,.dc-cursor-ring{display:none !important}}

/* ══════════════════════════════════════════════════════════
   SPLIT-TEXT (mask reveal)
══════════════════════════════════════════════════════════ */
.dc-split{display:inline}
/* Heading-level splits must stay block so they never collapse inline next to a
   preceding inline sibling (e.g. the .dc-eyebrow span) and overlap it on mobile.
   Inline <span> splits inside a heading keep display:inline so their words flow. */
h1.dc-split,h2.dc-split,h3.dc-split,h4.dc-split,h5.dc-split,h6.dc-split{display:block}
.dc-split .ln{display:inline-block;overflow:hidden;vertical-align:top;
  padding-bottom:.12em;margin-bottom:-.12em}     /* per-word mask, descenders safe */
.dc-split .wd,.dc-split .ch{display:inline-block}
/* Gradient-text headings (.fx-gtext) lose their fill once split moves the text
   into per-word .wd/.ch children (the gradient sits on the parent, but the
   children inherit only the transparent fill → invisible). Re-apply the brand
   gradient on the split children so the clipped gradient text shows everywhere.
   Hero overrides this with its own .ch gradient at higher specificity. */
.fx-gtext .wd,.fx-gtext .ch{
  background-image:var(--fx-g-pink,linear-gradient(135deg,#ff7aa0,#ff497c 55%,#e63467));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}

/* Split words are ALWAYS visible. The old scroll-mask reveal hid every word by
   default (translateY(110%) inside an overflow:hidden line) and only revealed it
   if the GSAP/IntersectionObserver JS ran perfectly. Any hiccup (CDN slow/blocked,
   throttled tab, a JS error after .dc-cine was added) left headings invisible,
   clipped, mis-colored and jammed on real devices. Reliability beats the reveal:
   words render in place, correctly colored, with no JS dependency. !important
   overrides any inline transform GSAP may still set. */
.dc-cine .dc-split .wd,
.dc-cine .dc-split .ch{transform:none !important}

/* ══════════════════════════════════════════════════════════
   HERO VIDEO
══════════════════════════════════════════════════════════ */
.dc-herovid{position:absolute;inset:0;overflow:hidden;z-index:0;background:#1f2732}
.dc-herovid video,.dc-herovid img.dc-herovid-poster{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dc-herovid video{opacity:0;transition:opacity .8s ease}
.dc-herovid video.is-playing{opacity:1}
.dc-herovid-ov{position:absolute;inset:0;z-index:1;
  background:linear-gradient(115deg,rgba(31,39,50,.86),rgba(31,39,50,.55) 55%,rgba(230,52,103,.35)),
             radial-gradient(60% 80% at 80% 20%,rgba(255,73,124,.25),transparent 60%)}
/* WebGL/gradient fallback if no video element present */
.dc-herovid.fallback{background:
  linear-gradient(120deg,#ff497c,#e63467 30%,#1f2732 70%);background-size:200% 200%;
  animation:dcHeroGrad 14s ease infinite}
@keyframes dcHeroGrad{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}

/* ══════════════════════════════════════════════════════════
   PARALLAX / PINNED / HORIZONTAL helpers
══════════════════════════════════════════════════════════ */
[data-parallax]{will-change:transform}
/* Horizontal scroll section */
[data-hsection]{overflow:hidden}
[data-htrack]{display:flex;flex-wrap:nowrap;align-items:stretch;width:max-content;will-change:transform}
[data-htrack]>*{flex:0 0 auto}
/* Pinned reveal items (start hidden when JS active) */
.dc-cine [data-pin-item]{opacity:0;transform:translateY(40px)}

/* progress dot for horizontal section */
.dc-hbar{position:absolute;left:0;bottom:0;height:4px;width:0;z-index:5;
  background:var(--fx-g-aurora,linear-gradient(90deg,#ff497c,#00bea3))}

/* ══════════════════════════════════════════════════════════
   REDUCED MOTION / NO-JS SAFETY — never hide content
══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .dc-cine .dc-split .wd,.dc-cine .dc-split .ch{transform:none !important}
  .dc-cine [data-pin-item]{opacity:1 !important;transform:none !important}
  .dc-herovid video{display:none}
}
/* If JS fails, .dc-cine is never added → these pre-hidden states above
   are scoped under .dc-cine, so content stays fully visible by default. */