/* ==========================================================================
   Lanview :: Studio — Decorative effects: hero motion graphic,
   diagonal section dividers, tinted/striped bands
   ========================================================================== */

/* ---------- Animated background (hero) ---------- */
.bg-motion {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}
.bg-motion__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .35;
}
html[data-theme="dark"] .bg-motion__blob { opacity: .28; }
.bg-motion__blob--a {
  width: 520px; height: 520px;
  top: -180px; left: -120px;
  background: radial-gradient(circle at 30% 30%, var(--accent-400), transparent 70%);
  animation: drift-a 26s ease-in-out infinite;
}
.bg-motion__blob--b {
  width: 420px; height: 420px;
  top: 10%; right: -140px;
  background: radial-gradient(circle at 60% 40%, var(--accent-300), transparent 70%);
  animation: drift-b 32s ease-in-out infinite;
}
.bg-motion__blob--c {
  width: 380px; height: 380px;
  bottom: -160px; left: 30%;
  background: radial-gradient(circle at 50% 50%, var(--accent-500), transparent 70%);
  animation: drift-c 22s ease-in-out infinite;
}
.bg-motion__grid {
  position: absolute; inset: -1px;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 40%, transparent 78%);
  opacity: .5;
}

@keyframes drift-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(60px, 40px) scale(1.08); }
  66% { transform: translate(-30px, 70px) scale(.96); }
}
@keyframes drift-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-70px, 50px) scale(1.1); }
}
@keyframes drift-c {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40% { transform: translate(50px, -40px) scale(1.05); }
  70% { transform: translate(-40px, -20px) scale(.94); }
}

.hero {
  position: relative;
  padding: 96px 0 60px;
  overflow: hidden;
}
.hero .container { position: relative; z-index: 1; }
@media (max-width: 780px) { .hero { padding: 64px 0 40px; } }

/* ---------- Nebula background (page-level) ----------
   One continuous, fixed backdrop of soft drifting colour behind the
   entire page — not per-section — so there's no seam between sections
   and no "empty" flat block anywhere as you scroll. Sits behind all
   content (z-index -1) as a direct child of <body>. */
.page-nebula {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.page-nebula__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(74px);
  opacity: .14;
}
html[data-theme="dark"] .page-nebula__blob { opacity: .26; mix-blend-mode: screen; }
.page-nebula__blob--1 {
  width: 560px; height: 560px;
  top: -14%; left: -10%;
  background: radial-gradient(circle, hsl(210 80% 60%), transparent 70%);
  animation: drift-a 36s ease-in-out infinite;
}
.page-nebula__blob--2 {
  width: 480px; height: 480px;
  top: 8%; right: -8%;
  background: radial-gradient(circle, hsl(268 65% 66%), transparent 70%);
  animation: drift-b 40s ease-in-out infinite;
}
.page-nebula__blob--3 {
  width: 500px; height: 500px;
  bottom: -16%; left: 18%;
  background: radial-gradient(circle, hsl(186 70% 55%), transparent 70%);
  animation: drift-c 32s ease-in-out infinite;
}
.page-nebula__blob--4 {
  width: 400px; height: 400px;
  bottom: 12%; right: 12%;
  background: radial-gradient(circle, hsl(330 65% 66%), transparent 70%);
  animation: drift-b 44s ease-in-out infinite reverse;
}
.page-nebula__blob--5 {
  width: 360px; height: 360px;
  top: 42%; left: 42%;
  background: radial-gradient(circle, hsl(150 60% 55%), transparent 70%);
  animation: drift-a 48s ease-in-out infinite reverse;
}

/* Tinted CTA band.
   Light mode: a translucent blue-glass wash, so the page/nebula show
   through instead of sitting as an opaque block.
   Dark mode: a brighter, more saturated blue than the page background
   so it actually reads as a distinct band rather than blending into
   the dark backdrop. */
.cta-band {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 56px 40px;
  text-align: center;
  overflow: hidden;
  background: linear-gradient(135deg, hsl(var(--accent-h) 60% 44% / .72), hsl(var(--accent-h) 65% 30% / .78));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid hsl(var(--accent-h) 60% 46% / .35);
  color: #fff;
  isolation: isolate;
}
html[data-theme="dark"] .cta-band {
  background: linear-gradient(135deg, hsl(var(--accent-h) 58% 30%), hsl(var(--accent-h) 60% 18%));
  border-color: hsl(var(--accent-h) 55% 45% / .4);
  box-shadow: 0 0 0 1px hsl(var(--accent-h) 55% 45% / .15), 0 20px 60px hsl(var(--accent-h) 60% 30% / .35);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .cta-band {
    background: linear-gradient(135deg, hsl(var(--accent-h) 58% 30%), hsl(var(--accent-h) 60% 18%));
    border-color: hsl(var(--accent-h) 55% 45% / .4);
    box-shadow: 0 0 0 1px hsl(var(--accent-h) 55% 45% / .15), 0 20px 60px hsl(var(--accent-h) 60% 30% / .35);
  }
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.75); }
.cta-band .btn-row { justify-content: center; }
.cta-band .btn-ghost { color: #fff; border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.06); }
.cta-band .btn-ghost:hover { border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.12); }
@media (max-width: 640px) { .cta-band { padding: 40px 22px; } }

/* Section tint — translucent, not opaque, so the page-level nebula
   keeps drifting through underneath instead of being blocked by a
   flat, "empty" colour block. */
.section--alt { background: var(--section-tint); }

/* Fade/rise-in on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in-view { opacity: 1; transform: translateY(0); }