/* ============================================================
   chc.bike — premium motion layer
   Custom cursor · page-transition curtain · scroll progress ·
   masked line reveals. Pairs with site/premium.js. All effects
   are opt-in and degrade on touch / reduced-motion.
   ============================================================ */

/* ---- Lenis smooth scroll (recommended 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
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  html.chc-cursor, html.chc-cursor * { cursor: none !important; }
  .cursor-dot, .cursor-ring {
    position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
    border-radius: 50%; mix-blend-mode: normal;
    will-change: transform; opacity: 0; transition: opacity .3s var(--ease-out);
  }
  html.chc-cursor.cursor-ready .cursor-dot,
  html.chc-cursor.cursor-ready .cursor-ring { opacity: 1; }
  .cursor-dot { width: 7px; height: 7px; background: var(--accent);
    transform: translate(-50%, -50%); }
  .cursor-ring { width: 38px; height: 38px; border: 1.5px solid var(--accent);
    transform: translate(-50%, -50%) scale(1);
    transition: width .28s var(--ease-out), height .28s var(--ease-out),
      background .28s var(--ease-out), border-color .28s var(--ease-out), opacity .3s; }
  /* over interactive elements */
  html.chc-cursor.cursor-hover .cursor-ring {
    width: 64px; height: 64px; background: color-mix(in srgb, var(--accent) 14%, transparent);
    border-color: transparent; }
  html.chc-cursor.cursor-hover .cursor-dot { opacity: 0; }
  /* over media / drag targets */
  html.chc-cursor.cursor-view .cursor-ring {
    width: 88px; height: 88px; background: color-mix(in srgb, var(--accent) 90%, transparent);
    border-color: transparent; }
  html.chc-cursor.cursor-view .cursor-dot { opacity: 0; }
  .cursor-label {
    position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
    transform: translate(-50%, -50%); font-family: var(--font-condensed);
    font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: 11px;
    color: #fff; opacity: 0; transition: opacity .25s var(--ease-out); white-space: nowrap; }
  html.chc-cursor.cursor-view .cursor-label { opacity: 1; }
  html.chc-cursor.cursor-down .cursor-ring { transform: translate(-50%, -50%) scale(.82); }
}

/* ============================================================
   PAGE TRANSITION CURTAIN
   ============================================================ */
.page-curtain {
  position: fixed; inset: 0; z-index: 10000; pointer-events: none;
  display: grid; place-items: center;
  background: var(--feature-bg); background-image: var(--feature-grad);
  transform: translateY(100%); will-change: transform;
}
.page-curtain .pc-mark { color: #fff; width: 78px; height: 78px; opacity: 0; transform: scale(.9); }
.page-curtain .pc-mark svg { width: 100%; height: 100%; display: block; }
.curtain-in  { animation: curtainIn .62s var(--ease-in-out) forwards; pointer-events: all; }
.curtain-out { transform: translateY(0); animation: curtainOut .72s var(--ease-in-out) forwards; }
.curtain-in .pc-mark  { animation: pcMark .5s var(--ease-out) .06s forwards; }
.curtain-out .pc-mark { animation: pcMarkOut .4s var(--ease-out) forwards; }
@keyframes curtainIn  { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes curtainOut { from { transform: translateY(0); } to { transform: translateY(-100%); } }
@keyframes pcMark     { from { opacity: 0; transform: scale(.9) rotate(-18deg); } to { opacity: .95; transform: scale(1) rotate(0); } }
@keyframes pcMarkOut  { from { opacity: .95; } to { opacity: 0; } }

/* ============================================================
   SCROLL PROGRESS
   ============================================================ */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%; z-index: calc(var(--z-sticky) + 5);
  transform: scaleX(0); transform-origin: 0 50%; background: var(--accent);
  will-change: transform; }

/* ============================================================
   MASKED LINE REVEAL (headings) — Emil-Kowalski-style rise
   Visible by default; html.chc-anim arms the masked start state.
   ============================================================ */
.line-mask { display: block; overflow: hidden; padding-bottom: .04em; }
.line-mask > .line-inner { display: block; will-change: transform; }
html.chc-anim .line-mask > .line-inner {
  transform: translateY(112%); transition: transform .9s var(--ease-out); }
html.chc-anim .line-mask.in > .line-inner { transform: translateY(0); }
html.chc-anim .line-mask[data-delay="1"] > .line-inner { transition-delay: .07s; }
html.chc-anim .line-mask[data-delay="2"] > .line-inner { transition-delay: .14s; }
html.chc-anim .line-mask[data-delay="3"] > .line-inner { transition-delay: .21s; }

/* refined fade-rise: add a touch of blur clearing for premium feel */
html.chc-anim .reveal { filter: blur(6px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out); }
html.chc-anim .reveal.in { filter: blur(0); }
@media (prefers-reduced-motion: reduce){
  .line-mask > .line-inner { transform: none !important; }
  html.chc-anim .reveal { filter: none !important; }
}
/* frozen-transition environments (some capture sandboxes) — never hide content */
html.chc-frozen .line-mask > .line-inner { transform: none !important; transition: none !important; }
html.chc-frozen.chc-anim .reveal { filter: none !important; }