/* Light overlay — original daytime hero_city plate. Film is not the identity. */
:root {
  --mx: 50%;
  --my: 42%;
  --al-play: 0;
  --al-bed-x: 0px;
  --al-bed-y: 0px;
  --al-cyan: #0891b2;
  --al-ink: #0f172a;
  --al-paper: #f8fafc;
}

html.al-cinema {
  background: var(--al-paper);
}

/* Hero: keep the built light wash. Do not invert type. */
section.min-h-screen.flex.items-center.overflow-hidden {
  isolation: isolate;
}

section.min-h-screen.flex.items-center .hero-copy {
  position: relative;
  z-index: 8;
}

/* The original city plate — pointer parallax, overflow clipped by the section. */
.al-hero-bed {
  will-change: transform;
  transform-origin: 50% 42%;
  transform: translate3d(var(--al-bed-x), var(--al-bed-y), 0) scale(1.12);
}

.al-pointer-light {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(
    640px circle at var(--mx) var(--my),
    rgba(255, 255, 255, 0.22),
    rgba(8, 145, 178, 0.1) 28%,
    rgba(8, 145, 178, 0.02) 48%,
    transparent 66%
  );
}

.al-grain {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/></svg>");
  mix-blend-mode: multiply;
}

.al-playhead {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 7;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 145, 178, 0.15), rgba(8, 145, 178, 0.85));
  transform-origin: 0 50%;
  transform: scaleX(var(--al-play, 0));
}

@media (hover: hover) and (pointer: fine) {
  section.min-h-screen.flex.items-center .btn-primary {
    transition: transform 0.16s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.16s ease-out;
  }
  section.min-h-screen.flex.items-center .btn-primary:hover {
    transform: translateY(-2px) scale(1.02);
  }
  section.min-h-screen.flex.items-center .btn-primary:active {
    transform: scale(0.97);
  }
}

/* Phones: slow drift so the plate is alive without a pointer. */
@media (hover: none) {
  .al-hero-bed {
    animation: al-bed-drift 24s ease-in-out infinite alternate;
  }
}

@keyframes al-bed-drift {
  from {
    transform: translate3d(0, 0, 0) scale(1.08);
  }
  to {
    transform: translate3d(-1.6%, -1.1%, 0) scale(1.14);
  }
}

@media (prefers-reduced-motion: reduce) {
  .al-pointer-light,
  .al-playhead {
    display: none !important;
  }
  .al-hero-bed {
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }
}

@media (max-width: 640px) {
  section.min-h-screen.flex.items-center .btn-primary,
  section.min-h-screen.flex.items-center .btn-whatsapp {
    min-height: 44px;
  }
}

/* Built app reveals can stick at opacity 0 if the observer misses — never leave empty sections. */
.reveal,
.reveal-left,
.reveal-right {
  opacity: 1 !important;
  transform: none !important;
}

#abbasilabs-support iframe {
  background: transparent !important;
  color-scheme: light;
}