/* =============================================
   CORRECT REFLECT — effects.css
   Premium visual effects. Additive only.
   ============================================= */

/* ─── TOKENS ─── */
:root {
  --gold-glow:    rgba(232,160,32,0.30);
  --gold-bright:  #f5c842;
  --glass-bg:     rgba(11,31,58,0.60);
  --glass-border: rgba(232,160,32,0.16);
  --ease-out:     cubic-bezier(0.22,0.61,0.36,1);
}

/* ══════════════════════════════════════════════
   1. CURSOR — native, deliberately
══════════════════════════════════════════════ */
/* There used to be a custom gold dot here, with `cursor: none` on body, a,
   button and [tabindex]. It is gone on purpose. Three reasons:
     - `transition: transform 0.06s linear` made the dot trail the real pointer.
       The lag was the feature, and it read as the site being slow.
     - `cursor: none` is CSS, the dot was JS. Any JS failure left a page with no
       pointer at all, and it threw away the I-beam, the resize and the
       disabled cursors that tell people what a control does.
     - it bound two listeners to every link and button on the page plus an
       unthrottled document mousemove, which is what drove the style recalcs.
   Do not reintroduce it. */

/* ══════════════════════════════════════════════
   2. HERO PARTICLE CANVAS
══════════════════════════════════════════════ */
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 2;
}
.hero-overlay { z-index: 1; }
.hero-content { z-index: 3; position: relative; }

/* ══════════════════════════════════════════════
   3. GLASSMORPHISM NAV
══════════════════════════════════════════════ */
.site-header {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  transition: background 0.5s ease, box-shadow 0.5s ease,
              border-color 0.5s ease !important;
}
.site-header.scrolled {
  background: rgba(11,31,58,0.98) !important;
  box-shadow: 0 2px 40px rgba(0,0,0,0.35) !important;
  border-bottom-color: rgba(232,160,32,0.22) !important;
}

/* Nav links — gold slide underline */
.nav-links a { padding-bottom: 3px; }
.nav-links a::after {
  height: 1.5px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  box-shadow: 0 0 8px var(--gold-glow);
}

/* Logo glow on hover */
.nav-logo img {
  transition: filter 0.3s ease, transform 0.3s var(--ease-out);
}
.nav-logo:hover img {
  filter: drop-shadow(0 0 8px var(--gold-glow));
  transform: scale(1.06);
}

/* ══════════════════════════════════════════════
   4. HERO
══════════════════════════════════════════════ */
.hero {
  /* background-attachment: fixed is deliberately NOT here. Chrome cannot
     composite a scroll that carries a fixed background, so every scroll frame
     repaints the full hero on the main thread. It was the single largest
     source of scroll jank on this page, and the effect it bought was a slow
     drift nobody asked for. It was already disabled under 768px, which is why
     the site felt smoother on a phone than on a laptop. */
  background-size: cover;
  background-position: center 50%;
}

/* Richer overlay — left heavy, right opens up */
.hero-overlay {
  background: linear-gradient(
    125deg,
    rgba(11,31,58,0.94) 0%,
    rgba(11,31,58,0.72) 55%,
    rgba(11,31,58,0.35) 100%
  ) !important;
}

/* Subtle vignette top & bottom */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(11,31,58,0.5) 0%, transparent 25%),
    linear-gradient(to top,    rgba(11,31,58,0.6) 0%, transparent 30%);
  pointer-events: none;
}

/* ══════════════════════════════════════════════
   5. SPLIT-TEXT HERO HEADING
══════════════════════════════════════════════ */
.w-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1.15;
}
.w {
  display: inline-block;
  transform: translateY(105%);
  opacity: 0;
  transition: transform 0.7s var(--ease-out),
              opacity   0.7s var(--ease-out);
}
.w--in { transform: translateY(0); opacity: 1; }

/* Eyebrow slides in from left */
.hero-content .eyebrow {
  animation: eyebrowIn 0.65s var(--ease-out) 0.05s both;
}
@keyframes eyebrowIn {
  from { opacity:0; transform:translateX(-20px); letter-spacing:0.3em; }
  to   { opacity:1; transform:translateX(0);     letter-spacing:0.14em; }
}

/* Subtitle fades up */
.hero-sub {
  animation: fadeUp 0.65s var(--ease-out) 0.55s both;
}
/* CTA fades up slightly later */
.hero-content .btn-primary {
  animation: fadeUp 0.65s var(--ease-out) 0.72s both;
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ══════════════════════════════════════════════
   6. BUTTONS — premium fill + glow
══════════════════════════════════════════════ */
.btn-primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1.5px solid var(--gold);
  transition: color 0.35s var(--ease-out),
              box-shadow 0.35s ease !important;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
  z-index: -1;
}
.btn-primary:hover::after,
.btn-primary:focus-visible::after { transform: scaleX(1); }
.btn-primary:hover,
.btn-primary:focus-visible {
  color: var(--navy) !important;
  box-shadow: 0 4px 20px var(--gold-glow), 0 0 0 1px var(--gold);
}

.btn-outline-gold:hover,
.btn-outline-gold:focus-visible {
  box-shadow: 0 4px 20px var(--gold-glow), 0 0 0 1px var(--gold);
}

.btn-outline-nav {
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out),
              box-shadow 0.3s ease !important;
}
.btn-outline-nav:hover,
.btn-outline-nav:focus-visible {
  box-shadow: 0 4px 16px var(--gold-glow);
}

/* ══════════════════════════════════════════════
   7. FLOATING PHONE FAB
══════════════════════════════════════════════ */
#phone-fab {
  position: fixed;
  bottom: 28px;
  left: 24px;
  z-index: 8500;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gold);
  color: var(--navy);
  padding: 12px 20px 12px 14px;
  border-radius: 999px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-decoration: none;
  box-shadow: 0 4px 24px rgba(232,160,32,0.45),
              0 1px 4px rgba(0,0,0,0.15);
  transition: transform 0.3s var(--ease-out),
              box-shadow 0.3s ease,
              opacity 0.3s ease,
              bottom 0.3s var(--ease-out);
  animation: fabIn 0.6s var(--ease-out) 1.4s both;
}
@keyframes fabIn {
  from { opacity:0; transform:translateY(24px) scale(0.85); }
  to   { opacity:1; transform:translateY(0)    scale(1); }
}
#phone-fab:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 32px rgba(232,160,32,0.6),
              0 2px 8px rgba(0,0,0,0.12);
}
#phone-fab svg { flex-shrink:0; color:var(--navy); }
.fab-text { white-space:nowrap; color:var(--navy); }

/* Pulse ring */
.fab-pulse {
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  border: 2px solid rgba(232,160,32,0.7);
  animation: fabPulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes fabPulse {
  0%   { transform:scale(1);    opacity:0.8; }
  100% { transform:scale(1.45); opacity:0;   }
}

/* Hidden state */
#phone-fab.fab--hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px) scale(0.92);
}

/* Mobile: icon-only circle */
@media (max-width: 480px) {
  #phone-fab { padding:14px; left:16px; bottom:20px; border-radius:50%; }
  .fab-text  { display:none; }
}

/* ══════════════════════════════════════════════
   8. SCROLL PROGRESS BAR
══════════════════════════════════════════════ */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2.5px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright), var(--gold));
  background-size: 200% 100%;
  transform: scaleX(0);
  transform-origin: left;
  z-index: 99998;
  pointer-events: none;
  box-shadow: 0 0 10px var(--gold-glow);
  animation: progressShimmer 3s linear infinite;
}
@keyframes progressShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ══════════════════════════════════════════════
   9. IMAGE CLIP-PATH WIPE REVEAL
══════════════════════════════════════════════ */
.img-wipe {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.85s var(--ease-out);
}
.img-wipe--in { clip-path: inset(0 0% 0 0); }

/* Gold frame border flash on reveal */
.image-frame {
  transition: box-shadow 0.4s ease;
}
.image-frame:has(.img-wipe--in) {
  box-shadow: 0 0 0 4px rgba(232,160,32,0.2);
}

/* ══════════════════════════════════════════════
   10. EYEBROW SHIMMER
══════════════════════════════════════════════ */
.eyebrow--shimmer {
  background: linear-gradient(90deg, var(--gold) 20%, var(--gold-bright) 50%, var(--gold) 80%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerSweep 1.2s var(--ease-out) forwards;
}
@keyframes shimmerSweep {
  from { background-position: 200% center; }
  to   { background-position:   0% center; }
}

/* ══════════════════════════════════════════════
   11. SECTION DIVIDER — gold line draw
══════════════════════════════════════════════ */
.section-divider {
  display: block;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 4px auto 44px;
  border-radius: 1px;
  transition: width 1.0s var(--ease-out);
  box-shadow: 0 0 6px var(--gold-glow);
}
.divider--drawn { width: 72px; }

/* ══════════════════════════════════════════════
   12. CARDS — shimmer + border reveal
══════════════════════════════════════════════ */
.card {
  isolation: isolate;
  overflow: hidden;
  transition: transform 0.35s var(--ease-out),
              box-shadow 0.35s ease !important;
}
/* Light sweep */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    108deg,
    transparent 35%,
    rgba(255,255,255,0.07) 50%,
    transparent 65%
  );
  transform: translateX(-100%) skewX(-8deg);
  transition: transform 0.55s ease;
  pointer-events: none;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(11,31,58,0.14); }
.card:hover::before { transform: translateX(200%) skewX(-8deg); }

/* Service items — gold underline draw */
.service-item {
  isolation: isolate;
  overflow: hidden;
}
.service-item::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  transition: width 0.4s var(--ease-out);
  pointer-events: none;
}
.service-item:hover { transform: translateY(-2px); }
.service-item:hover::after { width: 100%; }

/* Why cards — ambient inner glow */
.why-card {
  transition: transform 0.3s var(--ease-out),
              box-shadow 0.3s ease,
              background 0.3s ease !important;
}
.why-card:hover {
  box-shadow:
    0 0 0 1px rgba(232,160,32,0.35),
    0 14px 40px rgba(11,31,58,0.22),
    inset 0 0 32px rgba(232,160,32,0.05);
}

/* Icon float on card hover (set by JS) */
.card-icon, .svc-icon {
  transition: transform 0.4s var(--ease-out);
}

/* ══════════════════════════════════════════════
   13. STATS — bar glow + badge shadow
══════════════════════════════════════════════ */
.bar-fill {
  background: linear-gradient(90deg, var(--gold), var(--gold-bright)) !important;
  box-shadow: 0 0 10px rgba(232,160,32,0.45);
}
.stat-pct {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800;
  color: var(--gold);
  text-shadow: 0 0 14px var(--gold-glow);
}
.experience-badge {
  box-shadow: 0 8px 48px rgba(0,0,0,0.28),
              5px 5px 0 var(--gold) !important;
}
.exp-number {
  text-shadow: 0 0 24px var(--gold-glow);
}

/* ══════════════════════════════════════════════
   14. TESTIMONIAL — large decorative quote
══════════════════════════════════════════════ */
blockquote {
  position: relative;
}
blockquote::before {
  content: '\201C';
  position: absolute;
  top: -28px; left: -6px;
  font-size: 6rem;
  line-height: 1;
  font-family: Georgia, serif;
  color: var(--gold);
  opacity: 0.14;
  pointer-events: none;
  user-select: none;
}

/* ══════════════════════════════════════════════
   15. CTA BANNER — diagonal slice + radial glow
══════════════════════════════════════════════ */
.cta-banner {
  isolation: isolate;
  overflow: hidden;
  clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);
  padding: 96px 24px !important;
  margin: -2px 0;
}
.cta-banner::before {
  content: '';
  position: absolute;
  inset: -20%;
  background: radial-gradient(
    ellipse 60% 60% at 50% 50%,
    rgba(232,160,32,0.09) 0%,
    transparent 70%
  );
  animation: ctaBreath 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
.cta-banner-content { position: relative; z-index: 1; }
@keyframes ctaBreath {
  0%,100% { transform: scale(1);   opacity:0.7; }
  50%      { transform: scale(1.1); opacity:1;   }
}
@media (max-width: 768px) {
  .cta-banner {
    clip-path: polygon(0 2%, 100% 0, 100% 98%, 0 100%);
    padding: 72px 20px !important;
  }
}

/* ══════════════════════════════════════════════
   16. PAGE HERO — gold rule at bottom
══════════════════════════════════════════════ */
.page-hero {
  overflow: hidden;
}
.page-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.5;
}

/* ══════════════════════════════════════════════
   17. FAQ — open state styling
══════════════════════════════════════════════ */
.faq-item {
  transition: background 0.3s ease;
}
.faq-item[open] {
  background: linear-gradient(180deg, rgba(232,160,32,0.03) 0%, transparent 60%);
}
.faq-item[open] > summary {
  color: var(--gold);
  border-bottom-color: rgba(232,160,32,0.25);
}

/* ══════════════════════════════════════════════
   18. SERVICE AREAS — subtle hover glow
══════════════════════════════════════════════ */
.areas-grid li {
  transition: background 0.25s ease, border-color 0.25s ease,
              transform 0.25s var(--ease-out);
}
.areas-grid li:hover { transform: translateY(-2px); }

/* ══════════════════════════════════════════════
   19. FOOTER — gradient divider
══════════════════════════════════════════════ */
.footer-divider {
  background: linear-gradient(90deg, transparent, rgba(232,160,32,0.4), transparent) !important;
  height: 1px !important;
}

/* ══════════════════════════════════════════════
   20. SOCIAL LINK — spin on hover
══════════════════════════════════════════════ */
.social-link {
  transition: background 0.3s ease, transform 0.4s var(--ease-out),
              box-shadow 0.3s ease !important;
}
.social-link:hover {
  transform: rotate(8deg) scale(1.12);
  box-shadow: 0 4px 16px rgba(232,160,32,0.4);
}

/* ══════════════════════════════════════════════
   REDUCED MOTION — kill everything animated
══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  #hero-canvas, .fab-pulse,
  .cta-banner::before, #scroll-progress { display:none !important; }

  .w         { transform:none !important; opacity:1 !important; transition:none !important; }
  .img-wipe  { clip-path:none !important; transition:none !important; }
  .eyebrow--shimmer { animation:none !important; -webkit-text-fill-color:var(--gold); }
  .card::before, .service-item::after { display:none !important; }
  .cta-banner { clip-path:none !important; }
  #phone-fab  { animation:none; }
  .section-divider { width:72px; transition:none; }
}