/* ============================================================
   Motion — kept calm.
   Display headings are split into words. Each word starts dim
   grey and lights up to its original color as the user scrolls
   past a "reading line" near the upper-middle of the viewport.
   Like reading subtitles. Bidirectional. No layout shift.
   Kept: hover lifts, magnetic CTAs, page transition handoff.
   ============================================================ */

/* Native smooth scroll. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Branded scrollbar — accent thumb on a grey track. */
:root { color-scheme: dark; }
html { scrollbar-color: #FF4925 #1F1F1F; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #1F1F1F; }
::-webkit-scrollbar-thumb {
  background: #FF4925;
  border: 2px solid #1F1F1F;
  border-radius: 999px;
  transition: background 200ms cubic-bezier(.22,1,.36,1);
}
::-webkit-scrollbar-thumb:hover  { background: #FF6645; }
::-webkit-scrollbar-thumb:active { background: #E63A19; }
::-webkit-scrollbar-corner { background: #1F1F1F; }

/* ----- Scroll-linked text reveal --------------------------------
   Display headings get their text split into word spans. Default
   color is dim grey. As the user scrolls and a word's center
   crosses the reading line (~55% from top), it transitions to its
   "lit" color (the original color of the heading). Bidirectional:
   scrolling back up dims the words again. No layout shift, only
   color. GPU-friendly. */
.kb-text-reveal {
  /* Save the heading's intended color so we can return to it. */
}
.kb-text-reveal .kb-word {
  display: inline-block;
  color: #3F3A35;
  transition: color 360ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: color;
}
.kb-text-reveal .kb-word.is-lit {
  color: inherit;
}
@media (prefers-reduced-motion: reduce) {
  .kb-text-reveal .kb-word { color: inherit !important; transition: none !important; }
}

/* Card hover lift (kept) ----------------------------------------- */
.tcl-lift {
  transition:
    transform 480ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 480ms cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.tcl-lift:hover {
  transform: translateY(-6px) scale(1.012);
  filter: brightness(1.04);
}

/* Magnetic CTA (kept) ------------------------------------------- */
.tcl-magnetic {
  transition: transform 380ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}
.tcl-magnetic:hover {
  transition: transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Image hover zoom on work cards (kept) ------------------------- */
.tcl-zoom-wrap { overflow: hidden; }
.tcl-zoom { transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1); will-change: transform; }
.tcl-zoom-wrap:hover .tcl-zoom { transform: scale(1.06); }

/* Page transition overlay (kept) ------------------------------- */
/* The Loader handles ENTRY. This overlay handles only the
   outgoing transition when navigating away to another page. */
#tcl-page-overlay {
  position: fixed;
  inset: 0;
  background: #0A0A0A;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(0, 100%, 0);
  transition:
    transform 820ms cubic-bezier(0.76, 0, 0.24, 1),
    opacity 320ms cubic-bezier(0.4, 0, 1, 1);
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  contain: strict;
}
#tcl-page-overlay.is-out {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

/* Header pill credit hover (kept) ------------------------------- */
.ft-credit-mini:hover { color: #FF4925 !important; }

/* MENU button — glowing dot accent (kept) ----------------------- */
.kb-menu-dot {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FF4925;
  box-shadow:
    0 0 0 0.5px rgba(255, 73, 37, 0.45),
    0 0 6px rgba(255, 73, 37, 0.55),
    0 0 14px rgba(255, 73, 37, 0.28);
  transition:
    transform 280ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 280ms cubic-bezier(.22, 1, .36, 1),
    background-color 280ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform, box-shadow;
  flex: none;
}
.kb-menu-text {
  display: inline-block;
  transition: transform 280ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.kb-menu-btn:hover {
  background: rgba(245, 241, 234, 0.05) !important;
  border-color: rgba(245, 241, 234, 0.30) !important;
}
.kb-menu-btn:hover .kb-menu-dot {
  transform: scale(1.12);
  background: #FF6645;
  box-shadow:
    0 0 0 0.5px rgba(255, 73, 37, 0.65),
    0 0 10px rgba(255, 73, 37, 0.75),
    0 0 22px rgba(255, 73, 37, 0.42);
}
.kb-menu-btn:hover .kb-menu-text {
  transform: translateX(1px);
}
.kb-menu-btn:focus-visible {
  outline: 2px solid #FF4925;
  outline-offset: 3px;
}
.kb-menu-btn:focus-visible .kb-menu-dot {
  transform: scale(1.12);
}
.kb-menu-btn.is-open .kb-menu-dot {
  background: transparent;
  width: 10px;
  height: 10px;
  box-shadow:
    inset 0 0 0 1.5px #FF4925,
    0 0 8px rgba(255, 73, 37, 0.55),
    0 0 18px rgba(255, 73, 37, 0.30);
}

/* Static menu dot (used inside the open slide menu) ------------- */
.kb-menu-dot--static {
  animation: kbMenuDotBreathe 3.2s cubic-bezier(.45,.05,.55,.95) infinite;
}
@keyframes kbMenuDotBreathe {
  0%, 100% {
    box-shadow:
      0 0 0 0.5px rgba(255, 73, 37, 0.45),
      0 0 6px rgba(255, 73, 37, 0.55),
      0 0 14px rgba(255, 73, 37, 0.28);
  }
  50% {
    box-shadow:
      0 0 0 0.5px rgba(255, 73, 37, 0.65),
      0 0 10px rgba(255, 73, 37, 0.78),
      0 0 22px rgba(255, 73, 37, 0.42);
  }
}
@media (prefers-reduced-motion: reduce) {
  .kb-menu-dot--static { animation: none !important; }
  .kb-menu-dot, .kb-menu-text { transition: none !important; }
  .kb-menu-btn:hover .kb-menu-dot { transform: none !important; }
  .kb-menu-btn:hover .kb-menu-text { transform: none !important; }
}

/* SlideMenu link hover underline (kept) ------------------------ */
.tcl-menu-link:hover { color: #FF4925 !important; }
.tcl-menu-link:hover .tcl-menu-underline {
  transform: scaleX(1) !important;
  transition-delay: 0ms !important;
}

/* SlideMenu close-button — X rotates 90° on hover/focus, returns
   gracefully on leave. Click presses it slightly. */
.kb-menu-close .kb-menu-close-x {
  transition: transform 360ms cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.kb-menu-close:hover .kb-menu-close-x,
.kb-menu-close:focus-visible .kb-menu-close-x {
  transform: rotate(90deg);
}
.kb-menu-close:active .kb-menu-close-x {
  transform: rotate(90deg) scale(0.92);
  transition-duration: 120ms;
}
.kb-menu-close:focus-visible {
  outline: 2px solid #FF4925;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .kb-menu-close .kb-menu-close-x { transition: none !important; transform: none !important; }
}

/* Reduced motion ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tcl-lift, .tcl-magnetic, .tcl-zoom, #tcl-page-overlay {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}