/* Shared motion + polish layer, loaded by every page.
   Page-specific styles stay inline in each page; this file only adds
   behaviour that should feel the same everywhere. */

/* ── Sticky, frosted nav ── */
/* The nav backdrop is 100vw wide; clip stops it adding a sideways scroll
   where scrollbars take up room (clip, unlike hidden, keeps sticky working) */
html, body { overflow-x: clip; }
nav {
  position: sticky !important;
  top: 0;
  z-index: 100;
}
nav::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.86);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  z-index: -1;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
}
nav.is-scrolled::before {
  background: rgba(255,255,255,0.92);
  border-bottom-color: rgba(45,55,72,0.08);
  box-shadow: 0 6px 24px rgba(45,55,72,0.06);
}
/* The logo is a JPEG on white; multiply drops the white box on the frosted bar */
nav img { mix-blend-mode: multiply; }

/* ── Nav link underline ── */
.nav-link { position: relative; }
@media (min-width: 901px) {
  .nav-link::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -6px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s ease;
  }
  .nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }
}

/* ── Primary buttons: soft sheen sweep on hover ── */
.nav-cta, .btn-white, .btn-blue, .btn-plan { position: relative; overflow: hidden; isolation: isolate; }
.nav-cta::after, .btn-white::after, .btn-blue::after, .btn-plan::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  z-index: -1;
  transition: left 0.6s ease;
  pointer-events: none;
}
.nav-cta:hover::after, .btn-white:hover::after, .btn-blue:hover::after, .btn-plan:hover::after { left: 120%; }

/* ── Dark page headers: slow drifting colour glow ── */
.page-header { position: relative; overflow: hidden; isolation: isolate; }
.page-header::before, .page-header::after {
  content: '';
  position: absolute;
  width: 460px; height: 460px;
  border-radius: 50%;
  filter: blur(90px);
  z-index: -1;
  opacity: 0.55;
  pointer-events: none;
}
.page-header::before { background: #4A90E2; top: -260px; left: -120px; animation: gt-drift-a 16s ease-in-out infinite alternate; }
.page-header::after  { background: #4FD1C5; bottom: -300px; right: -140px; opacity: 0.4; animation: gt-drift-b 19s ease-in-out infinite alternate; }
@keyframes gt-drift-a { to { transform: translate(260px, 80px) scale(1.15); } }
@keyframes gt-drift-b { to { transform: translate(-280px, -60px) scale(1.2); } }

/* ── Scroll reveal ──
   Only hides content once motion.js has confirmed it is running, so the
   page is fully readable without JavaScript. */
.gt-motion [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(.2,.7,.2,1), transform 0.8s cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.gt-motion [data-reveal="fade"] { transform: none; }
.gt-motion [data-reveal="zoom"] { transform: translateY(20px) scale(0.96); }
.gt-motion [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .gt-motion [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .page-header::before, .page-header::after { animation: none; }
  nav::before { transition: none; }
}