/*!
 * motion.css — GSAP motion layer for andreas-jung.com
 *
 * Every rule in this file is gated behind `html.motion-ready`, a class that
 * assets/js/site-motion.js adds only after it verified that gsap is present and
 * that the visitor has not asked for reduced motion. Without that class (no JS,
 * broken JS, reduced motion) the page renders exactly like the pre-motion design.
 *
 * Load after assets/css/redesign.css.
 */

/* GSAP/ScrollToPlugin own programmatic scrolling — never keep the CSS
   behaviour too, or every scrollTop write starts its own smooth scroll. */
html.motion-ready {
  scroll-behavior: auto;
}

/* ------------------------------------------------------------------ *
 * Injected chrome (progress rail, back-to-top)                        *
 * ------------------------------------------------------------------ */
.scroll-rail {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1200;
  pointer-events: none;
  background: rgba(15, 23, 42, 0.35);
}

.scroll-rail-bar {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(
    90deg,
    var(--accent, #38bdf8),
    var(--accent-strong, #a855f7)
  );
}

.to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 1100;
  width: 46px;
  height: 46px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #f8fafc;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  box-shadow: 0 18px 40px -18px rgba(5, 5, 49, 0.9);
  backdrop-filter: blur(10px);
  cursor: pointer;
}

.to-top:hover,
.to-top:focus-visible {
  color: #ffffff;
  border-color: rgba(56, 189, 248, 0.65);
}

/* ------------------------------------------------------------------ *
 * Reveal hooks                                                        *
 * ------------------------------------------------------------------ */

/* Word units produced by splitWords(); the zero-width space inserted after
   hyphens keeps the natural break opportunity. */
.motion-word {
  display: inline-block;
}

/* Accent bar under every section header: GSAP tweens --title-bar 0 -> 1. */
html.motion-ready .section-title::before {
  transform: scaleX(var(--title-bar, 1));
  transform-origin: left center;
}

/* Corner bloom of a section drifts horizontally while the section scrolls. */
html.motion-ready .section::before {
  transform: translate3d(calc(var(--bloom-x, 0) * 1px), 0, 0);
}

/* One-off shine sweep across a section icon while its reveal plays. The band is
   parked outside the icon (--shine -300) unless GSAP runs the sweep. */
html.motion-ready .section-title .icon-holder::before {
  content: "";
  position: absolute;
  top: -70%;
  bottom: -70%;
  left: 0;
  width: 32%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.95) 40%,
    rgba(255, 255, 255, 0.95) 60%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translate3d(calc(var(--shine, -300) * 1%), 0, 0) rotate(20deg);
}

/* ------------------------------------------------------------------ *
 * Pointer spotlight + tilt                                            *
 * ------------------------------------------------------------------ */
html.motion-ready .section .item,
html.motion-ready .info-card {
  position: relative;
}

html.motion-ready .section .item::before,
html.motion-ready .info-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: var(--spot, 0);
  transition: opacity 0.3s ease;
  background: radial-gradient(
    240px circle at var(--mx, 50%) var(--my, 50%),
    rgba(56, 189, 248, 0.16),
    rgba(56, 189, 248, 0) 70%
  );
}

/* GSAP now owns transform on these elements (reveal + magnetic hover lift).
   A CSS transition on the same property would re-transition every frame the
   tween writes, and a CSS hover transform would be masked by GSAP's inline
   transform once a reveal has finished. */
html.motion-ready .section .item {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

html.motion-ready .section .item:hover {
  transform: none;
}

html.motion-ready .topbar-slides,
html.motion-ready .hero-cta-btn {
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

html.motion-ready .topbar-slides:hover,
html.motion-ready .hero-cta-btn:hover {
  transform: none;
}

/* Hover-tilted cards must not be able to grow the document. */
html.motion-ready .hero-panel {
  overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * Reduced motion                                                      *
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .scroll-rail,
  .to-top {
    display: none !important;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}