/* ============================================================
   TETSUKEN — Motion Layer (v1)
   Lenis smooth scroll / GSAP ScrollTrigger parallax & mask
   reveals / custom cursor + magnetic buttons / page transitions
   Loads after main_style.css — extends the existing design
   token system (--dark, --accent, --ease, --ease-out, etc.)
   ============================================================ */

/* ----------------------------------------------------------
   Lenis smooth inertia scroll
---------------------------------------------------------- */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-stopped { overflow: hidden; }

/* ----------------------------------------------------------
   Custom cursor (fine-pointer / non-touch devices only)
---------------------------------------------------------- */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10000;
  border-radius: 50%;
  will-change: transform;
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  html.has-motion,
  html.has-motion body { cursor: none; }
  html.has-motion a,
  html.has-motion button,
  html.has-motion .work-link,
  html.has-motion .timeline-item,
  html.has-motion .menu-toggle,
  html.has-motion .menu-close { cursor: none; }

  html.has-motion .cursor-dot,
  html.has-motion .cursor-ring { display: block; }

  .cursor-dot {
    width: 6px;
    height: 6px;
    background: var(--accent);
    transform: translate(-50%, -50%);
    transition: opacity 0.25s var(--ease), background 0.3s var(--ease);
  }

  .cursor-ring {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(155, 123, 85, 0.55);
    transform: translate(-50%, -50%);
    transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out),
                border-color 0.3s var(--ease), background 0.3s var(--ease),
                opacity 0.25s var(--ease);
  }
  .cursor-ring.is-hover {
    width: 68px;
    height: 68px;
    background: rgba(155, 123, 85, 0.08);
    border-color: var(--accent);
  }
  .cursor-ring.is-dark {
    border-color: rgba(255, 255, 255, 0.55);
  }
  .cursor-ring.is-dark.is-hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: #fff;
  }
  html.cursor-hidden .cursor-dot,
  html.cursor-hidden .cursor-ring {
    opacity: 0;
  }
}

/* ----------------------------------------------------------
   Magnetic buttons
---------------------------------------------------------- */
.magnetic {
  display: inline-block;
  will-change: transform;
}

/* ----------------------------------------------------------
   Page transition overlay
---------------------------------------------------------- */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 20000;
  pointer-events: none;
}
.page-transition-panel {
  position: absolute;
  inset: 0;
  background: var(--dark);
  transform: scaleY(1);
  transform-origin: bottom;
}

/* ----------------------------------------------------------
   Parallax image wrappers (created dynamically by motion.js)
---------------------------------------------------------- */
.parallax-wrap {
  display: block;
  width: 100%;
  height: 100%;
  will-change: transform;
}

/* ----------------------------------------------------------
   Scroll-linked underline draw for section labels
   (reuses the existing .reveal / .is-visible system)
---------------------------------------------------------- */
.section-en::before {
  width: 0;
  transition: width 0.9s var(--ease-out) 0.25s;
}
.section-header.is-visible .section-en::before,
.reveal.is-visible > .section-en::before {
  width: 24px;
}
.rep-title-label::before {
  width: 0;
  transition: width 0.9s var(--ease-out) 0.25s;
}
.reveal.is-visible .rep-title-label::before {
  width: 20px;
}

/* ----------------------------------------------------------
   Respect reduced-motion preference
---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cursor-dot,
  .cursor-ring { display: none !important; }
  .page-transition { display: none !important; }
  html.has-motion,
  html.has-motion body,
  html.has-motion a,
  html.has-motion button { cursor: auto !important; }
}

/* Touch devices: never hide native cursor / never show custom one */
@media (hover: none), (pointer: coarse) {
  .cursor-dot,
  .cursor-ring { display: none !important; }
}