/* ============================================================
   VERCHO — shared interactive layer
   Custom cursor, scroll progress, magnetic buttons, count-up.
   Loaded on the homepage and the blog listing page.
   Desktop/precise-pointer only — never loads on touch devices,
   so nothing here should ever be relied on for core functionality.
   ============================================================ */

/* Scroll progress bar */
#vProgress{position:fixed;top:0;left:0;height:2px;width:0%;background:linear-gradient(90deg,var(--g1,#a8480c),var(--g3,#f5943f));z-index:9998;transition:width .1s linear;pointer-events:none}

/* Custom cursor (desktop with a fine pointer only) — a small technical
   crosshair, deliberately not a dot/ring, matching the site's blueprint
   aesthetic. The old "ring" element now doubles as a small tag label
   that only appears over view/drag targets. */
@media (hover:hover) and (pointer:fine){
  html.has-vcursor, html.has-vcursor a, html.has-vcursor button, html.has-vcursor .di, html.has-vcursor input, html.has-vcursor textarea{cursor:none}

  #vCursorDot{position:fixed;top:0;left:0;width:18px;height:18px;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:opacity .25s,transform .2s cubic-bezier(.16,1,.3,1)}
  #vCursorDot::before,#vCursorDot::after{content:'';position:absolute;background:var(--g2,#e2691a);transition:background .3s}
  #vCursorDot::before{top:50%;left:2px;right:2px;height:1px;transform:translateY(-50%)}
  #vCursorDot::after{left:50%;top:2px;bottom:2px;width:1px;transform:translateX(-50%)}
  #vCursorDot.hidden,#vCursorRing.hidden{opacity:0}
  #vCursorDot.state-view,#vCursorDot.state-drag{transform:translate(-50%,-50%) scale(.6)}
  #vCursorDot.state-view::before,#vCursorDot.state-view::after,#vCursorDot.state-drag::before,#vCursorDot.state-drag::after{background:#f0ebe0}

  #vCursorRing{position:fixed;top:0;left:0;pointer-events:none;z-index:9998;transform:translate(16px,16px);opacity:0;transition:opacity .25s;background:var(--void,#07070a);border:1px solid rgba(226,105,26,.5);padding:.32rem .65rem}
  #vCursorRing::after{font-family:'JetBrains Mono',monospace;font-size:.52rem;letter-spacing:.16em;text-transform:uppercase;color:var(--g2,#e2691a);white-space:nowrap}
  #vCursorRing.state-view{opacity:1}
  #vCursorRing.state-view::after{content:'View'}
  #vCursorRing.state-drag{opacity:1}
  #vCursorRing.state-drag::after{content:'Drag'}
}

/* Magnetic buttons — the JS only translates them; this just guarantees a smooth settle */
[data-magnetic]{transition:transform .35s cubic-bezier(.16,1,.3,1)}

/* Staggered child reveal — parent gets .on (from the existing IntersectionObserver), children fade up in sequence */
[data-stagger]>*{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
[data-stagger].on>*{opacity:1;transform:none}
[data-stagger].on>*:nth-child(1){transition-delay:.05s}
[data-stagger].on>*:nth-child(2){transition-delay:.15s}
[data-stagger].on>*:nth-child(3){transition-delay:.25s}
[data-stagger].on>*:nth-child(4){transition-delay:.35s}
[data-stagger].on>*:nth-child(5){transition-delay:.45s}
[data-stagger].on>*:nth-child(6){transition-delay:.55s}

/* Split-text word-by-word reveal (headlines flagged with data-split) */
[data-split] .sw{display:inline-block;opacity:0;transform:translateY(60%);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);will-change:transform,opacity}
[data-split].sw-on .sw{opacity:1;transform:none}

/* Live scroll-section indicator (desktop only, ≥1080px, injected by JS) */
.vsecnav{position:fixed;right:2.2rem;top:50%;transform:translateY(-50%);z-index:500;display:flex;flex-direction:column;gap:1.05rem;pointer-events:none}
.vsecnav-item{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:.6rem;text-decoration:none;pointer-events:auto;opacity:.45;transition:opacity .35s}
.vsecnav-item .vsecnav-n{font-family:'JetBrains Mono',monospace;font-size:.58rem;letter-spacing:.06em;color:var(--muted,#6e6760)}
.vsecnav-item .vsecnav-l{font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream,#f0ebe0);max-width:0;overflow:hidden;white-space:nowrap;opacity:0;transition:max-width .35s cubic-bezier(.16,1,.3,1),opacity .3s}
.vsecnav-item .vsecnav-dot{width:5px;height:5px;border-radius:50%;background:var(--muted,#6e6760);transition:all .35s cubic-bezier(.16,1,.3,1);flex-shrink:0}
.vsecnav-item:hover{opacity:1}
.vsecnav-item:hover .vsecnav-l{max-width:160px;opacity:1}
.vsecnav-item.active{opacity:1}
.vsecnav-item.active .vsecnav-n{color:var(--g2,#e2691a)}
.vsecnav-item.active .vsecnav-dot{background:var(--g2,#e2691a);box-shadow:0 0 0 3px var(--gL,rgba(168,72,12,.15));transform:scale(1.4)}
@media(max-width:1079px){.vsecnav{display:none}}

/* Technical corner-bracket frame — a self-contained absolutely-positioned overlay
   (never touches the parent's own `background`, so it can't be clobbered by it).
   Drop <span class="crn"></span> as the first child of any position:relative/absolute box. */
.crn{position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:
    linear-gradient(rgba(226,105,26,.35),rgba(226,105,26,.35)),
    linear-gradient(rgba(226,105,26,.35),rgba(226,105,26,.35)),
    linear-gradient(rgba(226,105,26,.35),rgba(226,105,26,.35)),
    linear-gradient(rgba(226,105,26,.35),rgba(226,105,26,.35)),
    linear-gradient(90deg,rgba(226,105,26,.35),rgba(226,105,26,.35)),
    linear-gradient(90deg,rgba(226,105,26,.35),rgba(226,105,26,.35)),
    linear-gradient(90deg,rgba(226,105,26,.35),rgba(226,105,26,.35)),
    linear-gradient(90deg,rgba(226,105,26,.35),rgba(226,105,26,.35));
  background-repeat:no-repeat;
  background-size:1px 14px,1px 14px,1px 14px,1px 14px,14px 1px,14px 1px,14px 1px,14px 1px;
  background-position:
    top 10px left 10px, top 10px right 10px, bottom 10px left 10px, bottom 10px right 10px,
    top 10px left 10px, top 10px right 10px, bottom 10px left 10px, bottom 10px right 10px;
  opacity:.7;transition:opacity .35s;
}
:hover>.crn{opacity:1}

/* Sheen sweep on image frames — a light diagonal highlight that travels across on hover */
.aframe{position:relative;overflow:hidden}
.aframe::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(115deg,transparent,rgba(255,255,255,.16),transparent);transform:skewX(-18deg);transition:left .85s cubic-bezier(.16,1,.3,1);pointer-events:none;z-index:2}
.aframe:hover::after{left:120%}

/* ── Ambient network layer ([data-network]) ──
   isolation creates a stacking context so the canvas (z-index:-1) paints
   above the section's own background but beneath all of its content. */
[data-network]{position:relative;isolation:isolate}
.vnet{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
[data-network] .vnet{opacity:1}

/* ── Card spotlight ([data-tilt]) ── */
[data-tilt]{isolation:isolate}
[data-tilt]:not([data-tilt="spot"]){will-change:transform}
.vspot{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .45s;
  background:radial-gradient(380px circle at var(--sx,50%) var(--sy,50%),rgba(226,105,26,.11),transparent 55%)}
[data-tilt]:hover>.vspot{opacity:1}

/* ── Image frame reveal ([data-reveal]) ── */
[data-reveal].vpre{clip-path:inset(14% 10% 14% 10%);transition:clip-path 1.5s cubic-bezier(.16,1,.3,1)}
[data-reveal].vpre>img{transform:scale(1.14);transition:transform 1.8s cubic-bezier(.16,1,.3,1),filter .6s}
[data-reveal].vin{clip-path:inset(0 0 0 0)}
[data-reveal].vin>img{transform:scale(1)}

/* ── Back-to-top with progress frame ── */
.vtop{position:fixed;right:1.6rem;bottom:1.6rem;z-index:600;width:46px;height:46px;border:none;background:rgba(7,7,10,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .4s,visibility .4s,transform .45s cubic-bezier(.16,1,.3,1)}
.vtop.show{opacity:1;visibility:visible;transform:none}
.vtop-frame{position:absolute;inset:0;width:100%;height:100%}
.vtop-frame rect{fill:none;stroke-width:1;stroke:var(--g2,#e2691a);stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .15s linear}
.vtop::before{content:'';position:absolute;inset:1px;border:1px solid rgba(240,235,224,.08);pointer-events:none}
.vtop-arr{width:16px;height:16px;fill:none;stroke:#f0ebe0;stroke-width:1.6;stroke-linecap:square;transition:transform .4s cubic-bezier(.16,1,.3,1),stroke .3s}
.vtop:hover .vtop-arr{transform:translateY(-3px);stroke:var(--g3,#f5943f)}
@media(max-width:700px){.vtop{right:1rem;bottom:1rem;width:40px;height:40px}}

/* ── Click ripple ([data-ripple]) ── */
[data-ripple]{position:relative;overflow:hidden}
.vripple{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:rgba(255,255,255,.45);pointer-events:none;z-index:2;animation:vRipple .7s cubic-bezier(.16,1,.3,1) forwards}
@keyframes vRipple{to{transform:scale(40);opacity:0}}

@media (prefers-reduced-motion: reduce){
  .vnet{display:none}
  [data-reveal].vpre{clip-path:none}
  [data-tilt]{transform:none!important}
}