/* ============================================================
   THE DIVINITY GROUP — CINEMATIC EFFECTS LAYER
   ============================================================ */

/* ── CUSTOM CURSOR — hammer ────────────────────────────────── */
* { cursor: none !important; }

#dg-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 32px; height: 32px;
  pointer-events: none;
  z-index: 99999;
  will-change: transform;
  /* offset so hammer head tip is at pointer hotspot */
  transform: translate(-4px, -4px);
}

/* Hammer swings on click */
#dg-cursor.hammer-hit {
  animation: hammer-swing 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
@keyframes hammer-swing {
  0%   { transform: translate(-4px, -4px) rotate(0deg);   }
  35%  { transform: translate(-4px, -4px) rotate(-32deg);  }
  70%  { transform: translate(-4px, -4px) rotate(8deg);   }
  100% { transform: translate(-4px, -4px) rotate(0deg);   }
}

/* Hover state — slight tilt */
body.cursor-hover #dg-cursor {
  transform: translate(-4px, -4px) rotate(-15deg) scale(1.15);
  transition: transform 0.18s ease;
}

/* Text fields — normal arrow */
body.cursor-text #dg-cursor {
  display: none;
}
body.cursor-text {
  cursor: text !important;
}
body.cursor-text * {
  cursor: text !important;
}

/* Ring — hidden, hammer doesn't need one */
#dg-cursor-ring { display: none !important; }

/* ── FILM GRAIN OVERLAY ─────────────────────────────────────── */
#dg-grain {
  position: fixed;
  inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none;
  z-index: 9997;
  opacity: 0.038;
  will-change: transform;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px;
  animation: dg-grain-shift 0.12s steps(1) infinite;
}
@keyframes dg-grain-shift {
  0%   { transform: translate(0, 0) }
  10%  { transform: translate(-3%, 2%) }
  20%  { transform: translate(2%, -4%) }
  30%  { transform: translate(-1%, 3%) }
  40%  { transform: translate(4%, -1%) }
  50%  { transform: translate(-2%, 4%) }
  60%  { transform: translate(3%, -2%) }
  70%  { transform: translate(-4%, 1%) }
  80%  { transform: translate(1%, -3%) }
  90%  { transform: translate(-3%, 2%) }
  100% { transform: translate(2%, -1%) }
}

/* ── PAGE TRANSITION CURTAIN ────────────────────────────────── */
#dg-curtain {
  position: fixed;
  inset: 0;
  background: #0a0808;
  z-index: 99990;
  transform: scaleY(0);
  transform-origin: bottom;
  pointer-events: none;
  will-change: transform;
}
#dg-curtain.entering {
  transform: scaleY(1);
  transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
  transform-origin: bottom;
  pointer-events: all;
}
#dg-curtain.leaving {
  transform: scaleY(0);
  transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
  transform-origin: top;
  pointer-events: none;
}

/* ── SCROLL PROGRESS BAR ────────────────────────────────────── */
#dg-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, #C05A08, #FF9A3C, #E8720C);
  z-index: 99999;
  pointer-events: none;
  transition: width 0.08s linear;
  box-shadow: 0 0 8px rgba(232,114,12,0.7);
}

/* ── GOLD PARTICLE CANVAS ───────────────────────────────────── */
#dg-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9996;
}

/* ── MAGNETIC BUTTON EFFECT ─────────────────────────────────── */
.btn, .nav-cta, .floating-cta {
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.3s ease !important;
}
.btn:hover, .nav-cta:hover, .floating-cta:hover {
  box-shadow: 0 0 28px rgba(232,114,12,0.35), 0 8px 32px rgba(0,0,0,0.4) !important;
}

/* ── ENHANCED REVEALS ───────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(36px) scale(0.97);
  filter: blur(4px);
  transition:
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.85s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.reveal.visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* ── HERO PARALLAX ──────────────────────────────────────────── */
.hero-photo-bg img {
  will-change: transform;
}

/* ── 3D CARD TILT ───────────────────────────────────────────── */
.content-card, .review-card, .path-card-home,
.damage-card, .manufacturer-tile, .work-step,
.cost-stage, .roof-layer-card, .cta-tile,
.timeline-card, .learning-card {
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.4s ease !important;
  will-change: transform;
}

/* ── GOLD LINE ANIMATORS ────────────────────────────────────── */
.dg-gold-line {
  display: block;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #E8720C, transparent);
  margin: 0 auto;
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 6px rgba(232,114,12,0.4);
}
.dg-gold-line.active { width: 80%; }

/* ── SPOTLIGHT ──────────────────────────────────────────────── */
.section.dark, .dark, .hero, .page-hero,
.featured-photo-section, .guarantee-section,
.how-we-work-section, .damage-education-section {
  position: relative;
  overflow: hidden;
}
.dg-spotlight {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,114,12,0.06) 0%, transparent 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 0.4s ease;
  opacity: 0;
  z-index: 0;
  will-change: transform;
}

/* ── LOGO HOVER ─────────────────────────────────────────────── */
.logo-img {
  transition: filter 0.4s ease, transform 0.4s ease !important;
}
.logo:hover .logo-img {
  filter: drop-shadow(0 0 10px rgba(232,114,12,0.5));
  transform: scale(1.03);
}

/* ── FLOATING CTA PULSE ─────────────────────────────────────── */
.floating-cta {
  animation: dg-float-pulse 3s ease-in-out infinite !important;
}
@keyframes dg-float-pulse {
  0%, 100% { box-shadow: 0 4px 24px rgba(232,114,12,0.25); }
  50%       { box-shadow: 0 4px 40px rgba(232,114,12,0.55), 0 0 0 6px rgba(232,114,12,0.08); }
}

/* ── HERO HEADLINE SPLIT-TEXT ───────────────────────────────── */
.hero-copy h1 .dg-word, .page-hero h1 .dg-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.hero-copy h1 .dg-char, .page-hero h1 .dg-char {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease;
  will-change: transform;
}
.dg-hero-ready .hero-copy h1 .dg-char,
.dg-hero-ready .page-hero h1 .dg-char {
  transform: translateY(0);
  opacity: 1;
}

/* ── NAV UNDERLINE ──────────────────────────────────────────── */
.nav-links > li > a:not(.nav-cta) {
  position: relative;
}
.nav-links > li > a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: #E8720C;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 6px rgba(232,114,12,0.5);
}
.nav-links > li > a:not(.nav-cta):hover::after { width: 100%; }

/* ── IMAGE HOVER ────────────────────────────────────────────── */
.project-photo { overflow: hidden; }
.project-photo img {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform;
}
.project-photo:hover img { transform: scale(1.06) !important; }
.project-photo figcaption {
  transition: transform 0.4s ease, opacity 0.4s ease;
  transform: translateY(4px);
  opacity: 0.7;
}
.project-photo:hover figcaption { transform: translateY(0); opacity: 1; }

/* ── CREDENTIAL HOVER ───────────────────────────────────────── */
.credential { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important; }
.credential:hover { transform: translateY(-3px) scale(1.04) !important; }
.credential-icon svg { transition: filter 0.3s ease; }
.credential:hover .credential-icon svg { filter: drop-shadow(0 0 6px rgba(232,114,12,0.7)); }

/* ── GUARANTEE PORTRAIT ─────────────────────────────────────── */
.guarantee-portrait { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important; }
.guarantee-portrait:hover { transform: translateY(-8px) scale(1.02) !important; }

/* ── FOOTER LINKS ───────────────────────────────────────────── */
.footer a {
  position: relative;
  transition: color 0.25s ease, padding-left 0.25s ease !important;
}
.footer a::before {
  content: '→';
  position: absolute;
  left: -16px;
  opacity: 0;
  transition: opacity 0.25s ease, left 0.25s ease;
  color: #E8720C;
  font-size: 0.75em;
}
.footer a:not(.footer-logo):hover { padding-left: 4px !important; color: #E8720C !important; }
.footer a:hover::before { left: -12px; opacity: 1; }

/* ── EYEBROW ANIMATION ──────────────────────────────────────── */
.reveal.visible .eyebrow {
  animation: dg-eyebrow-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes dg-eyebrow-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: none; }
}

/* ── SIGNATURE SHIMMER ──────────────────────────────────────── */
@keyframes dg-shimmer {
  0%   { background-position: 0% }
  50%  { background-position: 100% }
  100% { background-position: 0% }
}

/* ── REDUCE MOTION ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #dg-cursor, #dg-cursor-ring, #dg-grain,
  #dg-particles, #dg-curtain, #dg-progress { display: none !important; }
  * { cursor: auto !important; animation: none !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ── MOBILE ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #dg-cursor, #dg-cursor-ring { display: none !important; }
  * { cursor: auto !important; }
  .dg-spotlight { display: none !important; }
}

/* ── MOBILE NAV Z-INDEX + LOGO ──────────────────────────────── */
@media (max-width: 1180px) {
  /* Navbar stays sticky (NOT relative — relative traps the fixed menu panel) */
  .navbar {
    z-index: 10000 !important;
    position: sticky !important;
  }
  /* Hamburger button sits above the fullscreen panel so it can close it */
  .menu-btn {
    z-index: 10002 !important;
    position: relative !important;
  }
  /* Fullscreen panel sits just below the navbar bar but covers everything else */
  .nav-links {
    z-index: 9998 !important;
  }

  /* Logo — show full logo, contained */
  .logo-img {
    height: 50px !important;
    width: auto !important;
    max-width: 200px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }
}

@media (max-width: 760px) {
  .logo-img {
    height: 44px !important;
    max-width: 175px !important;
  }
}

/* ── GALLERY GRID — never hidden by reveal ──────────────────── */
.maine-proof-gallery,
.maine-original-gallery {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}
.maine-proof-gallery figure,
.maine-original-gallery figure {
  opacity: 1 !important;
  transform: none !important;
}