/* ============================================================
   TIMBERLINE MOTION SYSTEM — Leclerc-inspired choreography
   Loaded on every page. Progressive enhancement only:
   without JS, every element stays fully visible.
============================================================ */

/* ---------- Preloader (first visit per session only) ---------- */
.tf-preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: #060D1A;
  display: flex; align-items: center; justify-content: center;
  transition: clip-path 0.9s cubic-bezier(0.76, 0, 0.24, 1);
  clip-path: inset(0 0 0 0);
}
.tf-preloader.done { clip-path: inset(0 0 100% 0); pointer-events: none; }
.tf-preloader-logo {
  width: 64px; height: 105px; opacity: 0;
  animation: tfLogoIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
  filter: drop-shadow(0 0 24px rgba(126, 217, 87, 0.45));
}
@keyframes tfLogoIn {
  from { opacity: 0; transform: translateY(24px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tf-preloader-count {
  position: absolute; right: 5vw; bottom: 4vh;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(80px, 16vw, 200px);
  line-height: 1; color: rgba(247, 243, 237, 0.92);
  letter-spacing: 0.01em;
}
.tf-preloader-count em { font-style: normal; color: #7ed957; }
.tf-preloader-bar {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, #7ed957, #92f55e);
  box-shadow: 0 0 18px rgba(126, 217, 87, 0.7);
}
.tf-preloader-tag {
  position: absolute; left: 5vw; bottom: 5vh;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 0.34em;
  text-transform: uppercase; color: rgba(247, 243, 237, 0.45);
}

/* ---------- Page transition wipe ---------- */
.tf-wipe {
  position: fixed; inset: 0; z-index: 9998;
  background: #060D1A; pointer-events: none;
  transform: translateY(101%);
  border-top: 3px solid #7ed957;
}
.tf-wipe.in  { transition: transform 0.38s cubic-bezier(0.76, 0, 0.24, 1); transform: translateY(0); pointer-events: all; }
.tf-wipe.out { transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1) 0.05s; transform: translateY(-101%); }

/* ---------- Scroll progress hairline ---------- */
.tf-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  z-index: 9990; pointer-events: none;
  background: linear-gradient(90deg, #7ed957, #92f55e);
  transform-origin: 0 50%; transform: scaleX(0);
  box-shadow: 0 0 10px rgba(126, 217, 87, 0.5);
}

/* ---------- Lenis: native smooth-scroll must be off or it stalls ---------- */
html.tf-lenis { scroll-behavior: auto !important; }
html.tf-lenis body { scroll-behavior: auto !important; }

/* ---------- Custom cursor (fine pointers only) ---------- */
@media (hover: hover) and (pointer: fine) {
  .tf-cursor {
    position: fixed; top: 0; left: 0; z-index: 9997;
    width: 10px; height: 10px; border-radius: 50%;
    background: #7ed957; pointer-events: none;
    transform: translate(-50%, -50%);
    transition: width 0.25s, height 0.25s, opacity 0.25s, background 0.25s;
    opacity: 0; will-change: transform;
  }
  .tf-cursor.on { opacity: 0.9; }
  .tf-cursor.grow { width: 46px; height: 46px; background: rgba(126,217,87,0.22); border: 1px solid rgba(126,217,87,0.7); }
}

/* ---------- Split-line mask reveals ---------- */
.tf-line { display: block; overflow: hidden; }
.tf-line-inner { display: block; will-change: transform; }
html.tf-js .tf-line-inner { transform: translateY(110%); }
html.tf-js .tf-lines-done .tf-line-inner { transform: none; }

/* ---------- Marquee ---------- */
.tf-marquee {
  overflow: hidden; white-space: nowrap;
  padding: 26px 0;
  border-top: 1px solid rgba(247, 243, 237, 0.08);
  border-bottom: 1px solid rgba(247, 243, 237, 0.08);
  background: rgba(247, 243, 237, 0.02);
  user-select: none;
}
.tf-marquee-track {
  display: inline-flex; align-items: center; gap: 48px;
  padding-right: 48px;
  animation: tfMarquee 26s linear infinite;
  will-change: transform;
}
.tf-marquee:hover .tf-marquee-track { animation-play-state: paused; }
@keyframes tfMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.tf-marquee-item {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 4vw, 52px);
  letter-spacing: 0.04em; color: rgba(247, 243, 237, 0.85);
}
.tf-marquee-item.ghost {
  color: transparent;
  -webkit-text-stroke: 1px rgba(126, 217, 87, 0.65);
}
.tf-marquee-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #7ed957; flex: 0 0 auto;
  box-shadow: 0 0 14px rgba(126, 217, 87, 0.8);
}

/* ---------- Generic hidden-until-revealed states (JS only) ---------- */
html.tf-js [data-tf="fade-up"],
html.tf-js .tf-batch > * { opacity: 0; }

/* ---------- Reduced motion: kill everything ---------- */
@media (prefers-reduced-motion: reduce) {
  .tf-preloader, .tf-wipe, .tf-cursor, .tf-progress { display: none !important; }
  html.tf-js .tf-line-inner { transform: none !important; }
  html.tf-js [data-tf="fade-up"], html.tf-js .tf-batch > * { opacity: 1 !important; }
  .tf-marquee-track { animation: none !important; }
}