/* ============================================================
   RED PRO — Visual Enhancements (additive layer on styles.css)
   - Stat counter glow + count-up
   - Sticky-pin service cycler (desktop only, mobile keeps grid)
   - Cycler HUD pill at viewport bottom
   - All red-themed using --primary (#E63232). Does NOT clone afdevs.com.
   ============================================================ */

/* ─── STAT COUNTER ANIMATION ────────────────────────────────── */
.stat-item h4 {
  position: relative;
  transition: text-shadow 0.5s ease;
}
.stat-item h4::after {
  content: '';
  position: absolute; inset: -24px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230,50,50,0.22) 0%, rgba(230,50,50,0.08) 40%, transparent 70%);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
}
.stat-item.rp-counted h4 {
  text-shadow: 0 0 22px rgba(230,50,50,0.35);
}
.stat-item.rp-counted h4::after {
  animation: rp-stat-glow 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes rp-stat-glow {
  0%   { opacity: 0; transform: scale(0.6); }
  40%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 0; transform: scale(1.45); }
}

/* ─── SERVICE CYCLER (desktop ≥769px, motion-allowed) ───────── */
@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
  body.rp-cycler-active #services-overview {
    min-height: 280vh;
  }
  body.rp-cycler-active #services-overview .services-grid {
    position: sticky;
    top: 0;
    height: 100vh;
    align-content: center;
    z-index: 1;
  }
  body.rp-cycler-active .service-card {
    transition:
      transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.5s ease,
      box-shadow 0.55s ease,
      border-left-color 0.4s ease,
      border-left-width 0.4s ease !important;
  }
  body.rp-cycler-active .service-card.rp-active {
    transform: translateY(-10px) scale(1.04) !important;
    box-shadow:
      0 0 0 1px var(--primary),
      0 24px 60px rgba(230, 50, 50, 0.28),
      0 0 90px rgba(230, 50, 50, 0.12);
    border-left-color: var(--primary) !important;
    border-left-width: 6px !important;
    z-index: 3;
  }
  body.rp-cycler-active .service-card.rp-dim {
    opacity: 0.32;
    transform: scale(0.96) !important;
  }
}

/* ─── CYCLER HUD PILL ───────────────────────────────────────── */
.rp-cycle-hud {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: #fff;
  z-index: 60;
  background: rgba(15, 15, 15, 0.82);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(230, 50, 50, 0.22);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}
.rp-cycle-hud.visible {
  opacity: 1;
}
.rp-cycle-hud .hud-num {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}
.rp-cycle-hud-bar {
  display: inline-block;
  width: 96px;
  height: 2px;
  background: rgba(255, 255, 255, 0.15);
  position: relative;
  border-radius: 2px;
  overflow: hidden;
}
.rp-cycle-hud-bar-fill {
  position: absolute; top: 0; left: 0;
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--primary), #FF6B6B);
  transition: width 0.25s ease;
  box-shadow: 0 0 8px rgba(230, 50, 50, 0.6);
}
.rp-cycle-hud-name {
  color: var(--primary);
  font-weight: 600;
  letter-spacing: 0.3em;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .rp-cycle-hud { display: none !important; } /* Mobile: cycler off, no HUD needed */
}
@media (prefers-reduced-motion: reduce) {
  .stat-item.rp-counted h4::after { animation: none !important; }
  .rp-cycle-hud { transition: none !important; }
  body.rp-cycler-active .service-card { transition: none !important; }
}

/* ─── PROJECT CARD CINEMA (projects.html) ─────────────────── */
body.rp-projects-fx .project-card {
  opacity: 0;
  transform: translateY(56px);
  transition:
    opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease,
    border-left-color 0.4s ease;
  will-change: opacity, transform;
}
body.rp-projects-fx .project-card.rp-revealed {
  opacity: 1;
  transform: translateY(0);
}
/* sequential stagger so cards roll in like a reel */
body.rp-projects-fx .project-card.rp-revealed:nth-child(1) { transition-delay: 0.00s; }
body.rp-projects-fx .project-card.rp-revealed:nth-child(2) { transition-delay: 0.08s; }
body.rp-projects-fx .project-card.rp-revealed:nth-child(3) { transition-delay: 0.16s; }
body.rp-projects-fx .project-card.rp-revealed:nth-child(4) { transition-delay: 0.04s; }
body.rp-projects-fx .project-card.rp-revealed:nth-child(5) { transition-delay: 0.12s; }
body.rp-projects-fx .project-card.rp-revealed:nth-child(6) { transition-delay: 0.20s; }

/* Hover lift + red halo */
body.rp-projects-fx .project-card:hover {
  transform: translateY(-6px) !important;
  box-shadow:
    0 0 0 1px rgba(230, 50, 50, 0.42),
    0 22px 56px rgba(230, 50, 50, 0.20),
    0 0 90px rgba(230, 50, 50, 0.10);
}
body.rp-projects-fx .project-card:hover .label {
  color: var(--primary);
  text-shadow: 0 0 22px rgba(230, 50, 50, 0.55);
}

/* Video fade-in + slow ken-burns while playing */
body.rp-projects-fx .project-header.photo {
  position: relative;
  overflow: hidden;
}
body.rp-projects-fx .project-header.photo > .project-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.6s ease, transform 7s linear;
  pointer-events: none;
  z-index: 1;
}
body.rp-projects-fx .project-header.photo.rp-playing > .project-video {
  opacity: 1;
  transform: scale(1.08);
}
body.rp-projects-fx .project-header.photo > .label {
  position: relative;
  z-index: 2; /* keep label above video */
}

@media (max-width: 768px) {
  /* Mobile keeps poster, no video autoplay, but reveal still works */
  body.rp-projects-fx .project-card { transform: translateY(32px); }
}
@media (prefers-reduced-motion: reduce) {
  body.rp-projects-fx .project-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  body.rp-projects-fx .project-header.photo > .project-video {
    transition: none !important;
  }
}

/* ============================================================
   HERO CINEMATIC ENTRY (findrealestate-inspired, red/sunset)
   A cloud-sea pools at the building's base so it appears to
   tower above the clouds, then dissolves as the x-ray video
   takes over. Plus a staged, layered headline reveal on load.
   Additive — does not touch the phased x-ray scrub. Sits at
   z8 (in front of building+frame z7, behind scrim z9).
   ============================================================ */
.hero-cloudsea {
  position: absolute;
  left: -12%; right: -12%;
  bottom: -8%;
  height: 48%;
  z-index: 9;            /* above the readability scrim so the cloud-sea reads bright */
  pointer-events: none;
  overflow: visible;
  opacity: 1;
  will-change: opacity, transform;
  animation: rp-cloudsea-in 1.9s cubic-bezier(.16,1,.3,1) both;
}
/* The dense "sea surface" — solid cloud at the very bottom fading up */
.hero-cloudsea::before {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 78%;
  background: linear-gradient(180deg,
     transparent 0%,
     rgba(255,244,235,0.45) 26%,
     rgba(255,240,229,0.82) 52%,
     rgba(255,247,240,0.97) 78%,
     rgba(255,250,245,1) 100%);
  filter: blur(6px);
}
/* Billowing puffs along the cloud line */
.hero-cloudsea .cs {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 62%,
     rgba(255,255,255,0.96) 0%,
     rgba(255,245,234,0.68) 38%,
     rgba(255,231,210,0.26) 62%,
     transparent 80%);
  will-change: transform;
}
.hero-cloudsea .cs-1 { width: 46%; height: 150%; left: -6%; bottom: -40%; filter: blur(34px); animation: rp-cs-a 27s ease-in-out infinite; }
.hero-cloudsea .cs-2 { width: 40%; height: 135%; left: 26%; bottom: -46%; filter: blur(30px); opacity: .95; animation: rp-cs-b 33s ease-in-out infinite; }
.hero-cloudsea .cs-3 { width: 50%; height: 160%; left: 52%; bottom: -42%; filter: blur(36px); animation: rp-cs-a 30s ease-in-out infinite reverse; }
.hero-cloudsea .cs-4 { width: 34%; height: 122%; left: 80%; bottom: -48%; filter: blur(28px); opacity: .9; animation: rp-cs-b 36s ease-in-out infinite reverse; }
.hero-cloudsea .cs-5 { width: 30%; height: 112%; left: 12%; bottom: -34%; filter: blur(24px); opacity: .85; animation: rp-cs-a 39s ease-in-out infinite; }
@keyframes rp-cloudsea-in {
  from { opacity: 0; transform: translateY(64px) scale(1.04); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes rp-cs-a { 0%,100% { transform: translateX(0); } 50% { transform: translateX(28px); } }
@keyframes rp-cs-b { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-32px); } }

/* Staged, layered headline reveal on load */
@media (prefers-reduced-motion: no-preference) {
  .hero-content h1 { animation: rp-hero-rise 1s   cubic-bezier(.16,1,.3,1) both; }
  .hero-content p  { animation: rp-hero-rise 1s   cubic-bezier(.16,1,.3,1) .22s both; }
  .hero-cta        { animation: rp-hero-rise .95s cubic-bezier(.16,1,.3,1) .42s both; }
}
@keyframes rp-hero-rise {
  from { opacity: 0; transform: translateY(34px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* Mobile: keep the cloud-sea a tasteful band, not a wall on tall screens */
@media (max-width: 768px) {
  .hero-cloudsea { height: 34%; bottom: -4%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cloudsea { animation: none; }
}