/* Shared motion and polish for the public site (home, services, pricing, legal).
   Each page keeps its own layout CSS and colour tokens; this file only layers
   interaction on top, so a page still looks right if it fails to load. */

body { overflow-x: clip; }
::selection { background: #7dd3fc; color: #0a0a0a; }

/* Scroll progress bar */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none;
  transform-origin: 0 50%; transform: scaleX(var(--progress, 0));
  background: linear-gradient(90deg, #0284c7, #38bdf8, #7dd3fc);
}

/* Sticky, frosted header. The ::before paints edge to edge while the header
   itself stays centred at its max-width (so dropdowns are never clipped). */
body > header { position: sticky; top: 0; z-index: 40; }
body > header::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1;
  background: rgba(255, 255, 255, .84); -webkit-backdrop-filter: saturate(1.5) blur(14px); backdrop-filter: saturate(1.5) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .25s ease, box-shadow .25s ease;
}
body > header.is-scrolled::before { border-bottom-color: var(--border); box-shadow: 0 8px 28px -14px rgba(10, 10, 10, .18); }

/* Nav links: sky underline that grows in */
.nav-links a.link {
  background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 100% / 0 2px;
  padding-bottom: 3px; transition: background-size .25s ease, color .2s ease;
}
.nav-links a.link:hover, .nav-links a.link[aria-current="page"] { background-size: 100% 2px; color: var(--text); }

/* Buttons: lift, glow, and a light sweep across primary buttons */
.btn { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-ghost:hover { border-color: var(--accent); }
.btn-primary { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary:hover { box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--accent) 80%, transparent); }
.btn-primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .45) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .6s ease;
}
.btn-primary:hover::after { transform: translateX(120%); }

/* Hero / page head: soft sky glow and a fading dot grid behind the headline */
.hero, .page-head { position: relative; isolation: isolate; }
.hero::before, .page-head::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: -40px; width: min(820px, 100vw); height: 460px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(56, 189, 248, .30), rgba(56, 189, 248, 0));
  animation: site-glow 14s ease-in-out infinite alternate;
}
.hero::after, .page-head::after {
  content: ""; position: absolute; z-index: -2; pointer-events: none;
  left: 50%; top: -90px; width: 100vw; height: calc(100% + 90px); transform: translateX(-50%);
  background-image: radial-gradient(rgba(10, 10, 10, .09) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000 20%, transparent 75%);
}
@keyframes site-glow {
  0%   { transform: translateX(-58%) translateY(0) scale(1); }
  50%  { transform: translateX(-45%) translateY(20px) scale(1.08); }
  100% { transform: translateX(-52%) translateY(-10px) scale(.96); }
}

/* Headline accent words: moving sky gradient */
.hero .accent {
  background-image: linear-gradient(90deg, var(--accent), var(--accent-2), #7dd3fc, var(--accent));
  background-size: 250% auto; animation: site-shimmer 7s linear infinite;
}
@keyframes site-shimmer { to { background-position: 250% center; } }

/* Black bands: a sky spotlight that follows the pointer */
.band-dark { position: relative; isolation: isolate; }
.band-dark::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background: radial-gradient(640px circle at var(--mx, 50%) var(--my, 0%), rgba(56, 189, 248, .16), transparent 62%);
  transition: background-position .2s;
}

/* Cards: lift and a sky edge on hover. The transition list is shared with the
   scroll reveal below so the two never overwrite each other. */
.flow-step, .mode, .feature-card, .other, .value-card, .plan, .addon, .step, .stat,
.service-card, .contact-card, .faq-item, .teaser, .rule-box, .install-box, .privacy-box, .notify-box, .chat,
.reveal {
  transition: opacity .7s ease, translate .7s cubic-bezier(.2, .7, .2, 1),
              transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  transition-delay: var(--reveal-delay, 0s), var(--reveal-delay, 0s), 0s, 0s, 0s;
}
.flow-step:hover, .mode:hover, .feature-card:hover, .other:hover, .value-card:hover, .plan:hover,
.addon:hover, .step:hover, .stat:hover, .service-card:hover, .contact-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--accent) 55%, transparent);
}
.feature-card .icon, .step .num, .flow-step .num { transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.feature-card:hover .icon, .step:hover .num, .flow-step:hover .num { transform: scale(1.12) rotate(-6deg); }

/* Scroll reveal. site.js only adds .reveal when it can also remove it, so
   without JS (or with reduced motion) everything is simply visible. */
.reveal { opacity: 0; translate: 0 26px; }
.reveal.is-in { opacity: 1; translate: 0 0; }

footer a:hover { color: var(--accent) !important; }

@media (prefers-reduced-motion: reduce) {
  .hero::before, .page-head::before, .hero .accent { animation: none; }
  .reveal { opacity: 1; translate: none; }
  .btn:hover, .flow-step:hover, .mode:hover, .feature-card:hover, .other:hover, .value-card:hover, .plan:hover,
  .addon:hover, .step:hover, .stat:hover, .service-card:hover, .contact-card:hover { transform: none; }
  .btn-primary::after { display: none; }
}