/* ============================================================
   PMA SOLUTIONS — HERO SCROLL-INTRO
   Cinematic scroll animation that plays before the page and
   resolves onto the existing hero section. Rebranded from the
   CodeGrid "FameEstate" reference to the PMA house style.
   Colors: --color-dark #1A2B3C, --color-accent #38B6FF
   ============================================================ */

/* Full-screen fixed overlay that sits over the hero. It paints from the very
   first frame straight from HTML/CSS — NO dependency on JS, GSAP or any CDN —
   so First Contentful Paint is instant and never stalls (this is what was
   causing Lighthouse "NO_FCP"). intro-scroll.js only wires up the click
   cinematic; if JS/GSAP is unavailable it simply removes this overlay. */
.intro-scroll {
  display: block;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  z-index: 9000;              /* above nav (1000) + announcement bar (1001) */
  background: var(--color-dark);
  cursor: pointer;
  touch-action: none;        /* taps register; touch-scroll gestures don't */
}

/* Already seen this session (a tiny inline head script adds .intro-seen before
   first paint) OR JS disabled (see <noscript>) — skip straight to the hero,
   no flash of the intro. */
html.intro-seen .intro-scroll { display: none; }

/* Lock the page while the cinematic is up so a click is the only way forward
   and we always resolve onto the hero at the very top. */
body.intro-enabled:not(.intro-revealed),
html:has(body.intro-enabled:not(.intro-revealed)) {
  overflow: hidden;
}

/* When dismissed (animation finished, or "Home" pressed) the overlay fades
   out smoothly and lets the hero through. */
body.intro-revealed .intro-scroll {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  touch-action: auto;
  transition: opacity 0.55s ease, visibility 0s linear 0.55s;
}

/* Keep floating site chrome out of the cinematic frame until the hero is
   revealed. */
body.intro-enabled:not(.intro-revealed) .whatsapp-float,
body.intro-enabled:not(.intro-revealed) .announcement-bar {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro-scroll picture {
  display: block;
  width: 100%;
  height: 100%;
}
.intro-scroll img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.intro-bg,
.intro-content,
.intro-revealer,
.intro-images {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.intro-img,
.intro-outro {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) scale(0);
  will-change: transform;
}

/* Initial cinematic background, gently scaled in */
.intro-bg {
  transform: scale(1.4);
}
.intro-bg::after {
  /* subtle dark veil so the white headline reads on any photo */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(26, 43, 60, 0.45),
    rgba(26, 43, 60, 0.65)
  );
}

.intro-content,
.intro-outro {
  padding: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--color-white);
}

.intro-content h1,
.intro-outro h2 {
  width: 70%;
  max-width: 1000px;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.98;
  font-size: clamp(2.6rem, 6vw, 5.5rem);
}

.intro-accent { color: var(--color-accent); }

/* "Click to enter" hint — bottom-center of the opening frame */
.intro-scroll-cue {
  position: absolute;
  top: 66%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  color: var(--color-white);
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Pulsing ring that draws the eye to "click" */
.intro-scroll-cue__ring {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 0 var(--color-accent-glow);
  animation: intro-cue-pulse 1.8s ease-out infinite;
}

.intro-scroll-cue__label {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.95;
}

/* Fade the hint out the moment the cinematic starts. */
.intro-scroll.intro-playing .intro-scroll-cue {
  opacity: 0;
  visibility: hidden;
}

@keyframes intro-cue-pulse {
  0% { box-shadow: 0 0 0 0 rgba(56, 182, 255, 0.55); transform: scale(0.92); }
  70% { box-shadow: 0 0 0 26px rgba(56, 182, 255, 0); transform: scale(1); }
  100% { box-shadow: 0 0 0 0 rgba(56, 182, 255, 0); transform: scale(0.92); }
}

@media (prefers-reduced-motion: reduce) {
  .intro-scroll-cue__ring { animation: none; }
}

/* Blue wipe that splits the screen open */
.intro-revealer {
  background-color: var(--color-accent);
  clip-path: polygon(49.5% 50%, 50.5% 50%, 50.5% 50%, 49.5% 50%);
}

.intro-img {
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  will-change: clip-path;
}

/* Final dark panel that slides apart to reveal the hero */
.intro-outro {
  background-color: var(--color-dark);
}

@media (max-width: 1000px) {
  .intro-content h1,
  .intro-outro h2 {
    width: 100%;
  }
}