/* Premium motion layer. Loads last.
   Patterns adapted, not copied:
   - opposing-edge spin from CodePen "multiple glow effects button"
   - slow aurora wash from Atmosphere / Purple Blob references
   - restrained grid shift from Bend the Grid
   - liquid glass spotlight from the glass-card references
*/

:root {
  --canvas: #07090d;
  --canvas-2: #0b0e14;
}

/* Non-cinema sections share one charcoal field so joins do not cut. */
.section:not(.section-cinema),
.section-product {
  position: relative;
  background: var(--canvas);
  isolation: isolate;
}
.section-product { background: var(--canvas); }
.section:not(.section-cinema)::before,
.section-product::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -12vh 0;
  pointer-events: none;
  background:
    radial-gradient(42vw 28vw at calc(var(--px, 68) * 1%) calc(var(--py, 24) * 1%), rgba(88, 64, 170, 0.22), transparent 62%),
    radial-gradient(34vw 24vw at 12% 78%, rgba(32, 110, 150, 0.16), transparent 64%),
    radial-gradient(26vw 20vw at 86% 70%, rgba(150, 54, 110, 0.1), transparent 66%);
  animation: ambient-drift 32s ease-in-out infinite alternate;
}
.section:not(.section-cinema)::after,
.section-product::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 76px 76px;
  background-position: calc(var(--px, 50) * -0.35px) calc(var(--py, 40) * -0.35px);
  mask-image: radial-gradient(ellipse at 50% 40%, #000 10%, transparent 72%);
}
.section > .container,
.section-product .tour { position: relative; z-index: 1; }

/* Crossfade into the datacenter only where a cinema section meets the field. */
#why {
  background: linear-gradient(180deg, transparent, var(--canvas) 11%, var(--canvas));
}
#audiences {
  background: linear-gradient(180deg, var(--canvas), var(--canvas) 82%, transparent);
}
#guidance {
  background: linear-gradient(180deg, transparent, var(--canvas) 14%, var(--canvas));
}
#faq {
  background: linear-gradient(180deg, var(--canvas), var(--canvas) 84%, transparent);
}

@keyframes ambient-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-2%, 1.5%, 0) scale(1.04); }
}
html.is-hidden .section::before,
html.is-hidden .section-product::before { animation-play-state: paused; }

/* Proof strip stays translucent over the hero scene. */
.proof-strip {
  background: rgba(8, 10, 14, 0.38);
  backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.proof-row p { text-align: center; }

/* Opposing-edge purchase button. Dark body, two lights traveling opposite sides. */
.btn-spin {
  color: #f5f8fc;
  background-color: #121820;
  background-image: linear-gradient(180deg, #1c2634, #10151c);
  isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 10px 24px rgba(0, 0, 0, 0.32);
}
.btn-spin:hover {
  color: #fff;
  background-image: linear-gradient(180deg, #243246, #141b26);
}
.btn-spin .shimmer {
  inset: -8px;
  opacity: 1;
  mix-blend-mode: plus-lighter;
  animation: spin 3.2s linear infinite both;
  mask-image: conic-gradient(
    from var(--mask, 0deg),
    transparent 0%,
    transparent 10%,
    #000 36%,
    #000 45%,
    transparent 50%,
    transparent 60%,
    #000 85%,
    #000 95%,
    transparent 100%
  );
}
.btn-spin .shimmer::before,
.btn-spin .shimmer::after {
  opacity: 1;
  inset: 8px;
}
.btn-spin .shimmer::before {
  box-shadow:
    0 0 3px 2px hsl(205 50% 82%),
    0 0 12px 4px hsl(204 90% 56% / 0.55),
    0 0 18px 6px hsl(262 75% 58% / 0.35);
}
.btn-spin .shimmer::after {
  box-shadow:
    inset 0 0 0 1px hsl(204 80% 82% / 0.8),
    inset 0 0 5px 1px hsl(258 80% 70% / 0.4);
}
.btn-spin:hover .shimmer { animation-duration: 1.35s; }
.btn-spin:hover .shimmer::before {
  box-shadow:
    0 0 4px 2px #fff,
    0 0 16px 5px hsl(196 95% 62% / 0.75),
    0 0 24px 8px hsl(262 80% 62% / 0.45);
}

.postpone figcaption strong { font-size: clamp(1.45rem, 2vw, 1.85rem); }

/* Data story glass */
.evidence-lead,
.evidence-side article,
.debt,
.feature-mix article,
.persona,
.price-card,
.glass-panel {
  position: relative;
}
.evidence-lead::after,
.evidence-side article::after,
.persona::after,
.price-card::after,
.glass-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, 0.14), transparent 62%);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.evidence-lead:hover::after,
.evidence-side article:hover::after,
.persona:hover::after,
.price-card:hover::after,
.glass-panel:hover::after { opacity: 1; }

@media (hover: hover) and (pointer: fine) {
  .feature-mix article,
  .persona {
    transition: transform 0.28s ease;
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  }
  .feature-mix article:hover,
  .persona:hover { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px); }
}

.mix-lead .mix-shot {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 0.9rem;
  object-fit: contain;
  background: transparent;
  border-radius: 10px;
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.4));
}

/* Workflow arrives 01 → 04 */
@media (prefers-reduced-motion: no-preference) {
  .stages li { opacity: 0; transform: translateY(8px); }
  #workflow.is-in .stages li { animation: stage-in 0.55s ease forwards; }
  #workflow.is-in .stages li:nth-child(2) { animation-delay: 0.12s; }
  #workflow.is-in .stages li:nth-child(3) { animation-delay: 0.24s; }
  #workflow.is-in .stages li:nth-child(4) { animation-delay: 0.36s; }
}
@keyframes stage-in {
  to { opacity: 1; transform: none; }
}

.faq-list { align-items: start; }
.faq-item:nth-child(even) { margin-top: 1.6rem; }
.faq-more { margin: 1.4rem 0 0; color: #c5d0e4; }

.pointer-field {
  position: fixed;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

h1, h2 { text-wrap: balance; }

@media (max-width: 1024px) {
  .faq-item:nth-child(even) { margin-top: 0; }
  .section:not(.section-cinema)::before,
  .section-product::before { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .section:not(.section-cinema)::before,
  .section-product::before,
  .btn-spin .shimmer { animation: none; }
  .feature-mix article,
  .persona { transform: none !important; }
  .stages li { opacity: 1; transform: none; }
  .pointer-field { display: none; }
}