/* YVB&Co — Effects and Motion CSS */

/* --- 1. Scroll Progress Bar (Native CSS) --- */
@supports (animation-timeline: scroll()) {
  .scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--signal);
    transform-origin: 0% 50%;
    transform: scaleX(0);
    animation: scroll-progress-anim linear;
    animation-timeline: scroll();
    z-index: 9999;
    pointer-events: none;
  }
  
  @keyframes scroll-progress-anim {
    to { transform: scaleX(1); }
  }
}

/* Fallback for scroll progress in JS if needed */
.scroll-progress-js {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--signal);
  z-index: 9999;
  pointer-events: none;
}

/* --- 2. View Transitions --- */
::view-transition-old(root) {
  animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both fade-out;
}
::view-transition-new(root) {
  animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both fade-in;
}

@keyframes fade-out {
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes fade-in {
  from { opacity: 0; transform: translateY(8px); }
}

/* --- 3. Marquee Updates --- */
.statement-band:hover .ticker {
  animation-play-state: paused;
}
/* Force GPU acceleration for ticker if not already present */
.ticker {
  will-change: transform;
}
@keyframes ticker {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* --- 4. Nav Underline --- */
.header-nav a, .footer-nav a {
  position: relative;
  text-decoration: none;
}
.header-nav a::after, .footer-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.header-nav a:hover::after, .footer-nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}
/* Override .button since it is an 'a' tag but we don't want the line */
.header-nav a.button::after, .footer-nav a.button::after {
  display: none;
}

/* --- 5. Grain / Noise Overlay --- */
.page-noise {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 99999;
  opacity: 0.04;
  mix-blend-mode: overlay;
  /* SVG Data URI for noise */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

html.light .page-noise {
  opacity: 0.05;
  mix-blend-mode: multiply;
}

/* --- 6. Preloader --- */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--ink);
  z-index: 100000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--paper);
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
#preloader.done {
  opacity: 0;
  visibility: hidden;
}
.preloader-brand {
  font-family: 'Manrope', sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.05em;
  opacity: 0;
  animation: preloader-fade 0.4s forwards;
}
.preloader-brand span { color: var(--signal); }
.preloader-line {
  margin-top: 16px;
  width: 60px;
  height: 1px;
  background: var(--rule);
  position: relative;
  overflow: hidden;
}
.preloader-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  animation: preloader-progress 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes preloader-fade {
  to { opacity: 1; }
}
@keyframes preloader-progress {
  to { transform: scaleX(1); }
}

/* --- 7. GSAP Hidden States --- */
/* Hide items initially so they can be revealed by ScrollTrigger */
.gsap-reveal {
  opacity: 0;
  visibility: hidden;
}

/* Word splitting states for Hero */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.split-word span {
  display: inline-block;
  transform: translateY(100%);
}

/* --- 8. 3D Card Glow --- */
.project, .product, .unicorn-card, .solution-card {
  position: relative;
  /* Perspective added via JS to parent or card itself */
  transform-style: preserve-3d;
}
.card-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    circle 300px at var(--mouse-x, -100%) var(--mouse-y, -100%),
    color-mix(in srgb, var(--signal) 15%, transparent),
    transparent 80%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
}
.project:hover .card-glow,
.product:hover .card-glow,
.unicorn-card:hover .card-glow,
.solution-card:hover .card-glow {
  opacity: 1;
}

/* --- 9. Reduced Motion Overrides --- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
  .gsap-reveal {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
  .split-word span {
    transform: none !important;
  }
  .scroll-progress {
    display: none !important;
  }
  ::view-transition-old(root), ::view-transition-new(root) {
    animation: none !important;
  }
  #preloader {
    display: none !important;
  }
}