/* ============================================================
   ABSO · vG — effects layer (showcase interactions)
   All gated behind (hover:hover) + prefers-reduced-motion.
   ============================================================ */

/* ---------- SCROLL PROGRESS RAIL ---------- */
.scrollbar{position:fixed;top:0;left:0;height:3px;width:100%;z-index:90;transform-origin:left;transform:scaleX(0);
  background:linear-gradient(90deg,var(--solar),var(--solar-soft));pointer-events:none}

/* ---------- CUSTOM CURSOR ---------- */
@media(hover:hover) and (pointer:fine){
  body.cursor-on,body.cursor-on *{cursor:none!important}
  .cursor{position:fixed;top:0;left:0;width:8px;height:8px;border-radius:1.5px;background:var(--solar);
    z-index:10000;pointer-events:none;transform:translate(-50%,-50%);mix-blend-mode:normal;
    transition:width .3s var(--e-expo),height .3s var(--e-expo),background .3s,opacity .3s}
  .cursor-ring{position:fixed;top:0;left:0;width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(255,255,255,.6);
    mix-blend-mode:difference;z-index:9999;pointer-events:none;transform:translate(-50%,-50%);
    transition:width .35s var(--e-expo),height .35s var(--e-expo),border-color .35s,opacity .3s}
  .cursor-label{position:fixed;top:0;left:0;z-index:10001;pointer-events:none;transform:translate(-50%,-50%) scale(.6);
    background:var(--solar);color:var(--cream);font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
    padding:6px 10px;border-radius:40px;opacity:0;transition:opacity .25s,transform .25s var(--e-expo);white-space:nowrap}
  .cursor.is-hot{width:0;height:0}
  .cursor-ring.is-hot{width:64px;height:64px;border-color:var(--solar)}
  .cursor-label.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .cursor.is-hidden,.cursor-ring.is-hidden{opacity:0}
}

/* ---------- 3D TILT ---------- */
[data-tilt]{transform-style:preserve-3d;will-change:transform;transition:transform .4s var(--e-expo)}
[data-tilt].tilting{transition:transform .08s linear}
[data-tilt-layer]{transform:translateZ(40px)}

/* ---------- SCROLL-VELOCITY SKEW ---------- */
[data-skew]{will-change:transform}

/* ---------- PARTICLE DISSOLVE CANVAS (peel) ---------- */
.peel-canvas{position:absolute;inset:0;z-index:1;pointer-events:none}

/* ---------- FIVE-MINUTE DEMO ---------- */
.demo{background:
   radial-gradient(90% 70% at 50% 0%,var(--energy-light) 0%,transparent 60%),var(--cream-warm)}
.demo-inner{max-width:760px;margin:0 auto;text-align:center;padding:clamp(72px,12vh,150px) var(--pad)}
.demo h2{margin-bottom:14px}
.demo .lead{margin:0 auto 38px}
.demo-stage{position:relative;height:320px;display:grid;place-items:center;margin:0 auto}
.demo-zone{position:relative;width:200px;height:200px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle,rgba(223,109,9,.10),transparent 70%);transition:transform .5s var(--e-expo)}
.demo-zone::before{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px dashed var(--ink-22);
  animation:spin 26s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.demo-strip{position:relative;width:84px;height:130px;border-radius:9px;cursor:pointer;z-index:2;
  background:linear-gradient(160deg,var(--energy-a),var(--energy-b) 55%,var(--energy-c));
  box-shadow:0 18px 40px -12px rgba(223,109,9,.5),inset 0 0 0 1px rgba(255,255,255,.25);
  transition:transform .5s var(--e-expo),opacity .6s var(--e-expo)}
.demo-strip::after{content:"";position:absolute;inset:0;border-radius:9px;background:radial-gradient(120% 70% at 30% 15%,rgba(255,255,255,.45),transparent 55%);mix-blend-mode:soft-light}
.demo-strip .hint{position:absolute;left:50%;top:108%;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-44)}
.demo.run .demo-strip{transform:scale(.2) translateY(-10px);opacity:0;pointer-events:none}
.demo.run .demo-zone{transform:scale(1.08)}
.demo-canvas{position:absolute;inset:0;z-index:1;pointer-events:none}
.demo-timer{font-family:var(--serif);font-size:clamp(60px,9vw,120px);line-height:1;color:var(--ink);position:absolute;
  opacity:0;transition:opacity .4s;letter-spacing:-.02em}
.demo.run .demo-timer,.demo.done .demo-timer{opacity:1}
.demo-felt{margin-top:28px;min-height:54px;display:flex;flex-direction:column;align-items:center;gap:14px}
.demo-felt .msg{font-family:var(--serif);font-size:26px;opacity:0;transform:translateY(10px);transition:.5s var(--e-expo)}
.demo.done .demo-felt .msg{opacity:1;transform:none}
.demo-felt .btn{opacity:0;transition:opacity .5s .2s}
.demo.done .demo-felt .btn{opacity:1}

/* ---------- VIEW TRANSITIONS (cross-document) ---------- */
@view-transition{navigation:auto}
@media(prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vt-out .35s var(--e-standard) both}
  ::view-transition-new(root){animation:vt-in .45s var(--e-expo) both}
  @keyframes vt-out{to{opacity:0;transform:scale(.99)}}
  @keyframes vt-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .nav-mark img{view-transition-name:abso-mark}
}

/* ---------- REDUCED MOTION ---------- */
@media(prefers-reduced-motion:reduce){
  .scrollbar,.cursor,.cursor-ring,.cursor-label{display:none!important}
  .demo-zone::before{animation:none}
  [data-tilt]{transform:none!important}
}