/* ==========================================================================
   Jenkinstown Resources — ENHANCED variant (index-enhanced.html only)
   Layered on top of styles.css. Adds cinematic polish beyond the flat design:
   hero Ken Burns + refined gradient, staggered entrances, header scroll state,
   active-section nav, and sharper hover states.
   CSS transforms/opacity only, so it stays light and fast.
   `!important` is used only where the design's inline styles must be overridden.
   ========================================================================== */

/* ---------- Hero: two-slide carousel, each with a slow Ken Burns zoom ----------
   18s cycle, two slides offset by half. Each slide fades in, zooms 1.10 -> 1.00
   across its visible window, then crossfades to the next. Pure CSS, no JS. */
@keyframes heroKen {
  0%     { opacity: 0; transform: scale(1.10); }
  6%     { opacity: 1; }
  44%    { opacity: 1; }
  50%    { opacity: 0; transform: scale(1.00); }
  50.01% { transform: scale(1.10); }
  100%   { opacity: 0; transform: scale(1.10); }
}
.hero-slide {
  opacity: 0;
  animation: heroKen 18s infinite cubic-bezier(.16,.6,.2,1);
  will-change: transform, opacity;
}
.hero-slide:nth-of-type(2) { animation-delay: 9s; }

/* ---------- Hero: refined cinematic gradient (extra layer) ---------- */
.hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background:
    /* warm glow around the rig / flare */
    radial-gradient(50% 42% at 66% 44%, rgba(239,125,34,0.18), transparent 62%),
    /* deepen the base so text sits cleanly */
    radial-gradient(120% 85% at 40% 100%, rgba(12,30,46,0.60), transparent 60%),
    /* subtle cinematic vignette */
    radial-gradient(135% 115% at 50% 50%, transparent 48%, rgba(5,12,20,0.58) 100%);
}

/* ---------- Staggered hero entrance ---------- */
@keyframes riseIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.hero-anim {
  opacity: 0;
  animation: riseIn 0.95s cubic-bezier(.16,.6,.2,1) forwards;
  animation-delay: var(--d, 0s);
}

/* ---------- Header: shrink + darken on scroll ---------- */
#site-header { transition: background .35s ease, box-shadow .35s ease; }
#site-header.scrolled {
  background: rgba(10,25,38,0.97) !important;
  box-shadow: 0 10px 34px rgba(0,0,0,0.38);
}
.header-row { transition: padding .35s ease; }
#site-header.scrolled .header-row { padding-top: 11px !important; padding-bottom: 11px !important; }

/* ---------- Desktop nav: amber underline slide-in + active section ---------- */
.dnav a:not(.nav-pill) { position: relative; transition: color .25s ease; }
.dnav a:not(.nav-pill)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px;
  background: #EF7D22; transform: scaleX(0); transform-origin: right;
  transition: transform .35s cubic-bezier(.16,.6,.2,1);
}
.dnav a:not(.nav-pill):hover::after,
.dnav a:not(.nav-pill).active::after { transform: scaleX(1); transform-origin: left; }
.dnav a:not(.nav-pill):hover,
.dnav a:not(.nav-pill).active { color: #FFFFFF !important; }

/* ---------- Buttons: lift + glow ---------- */
.btn-a { transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease; }
.btn-a:hover { transform: translateY(-2px); }
.btn-primary-a:hover { background: #F5994F !important; box-shadow: 0 12px 26px rgba(239,125,34,0.30); }
.btn-ghost-a:hover { background: rgba(255,255,255,0.10) !important; border-color: #FFFFFF !important; }
.nav-pill { transition: transform .2s ease, background .25s ease, box-shadow .25s ease; }
.nav-pill:hover { background: #F5994F !important; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(239,125,34,0.32); }

/* ---------- Sections fade only; their children provide the motion ---------- */
body.reveal-ready #services.reveal,
body.reveal-ready #lifecycle.reveal { transform: none; }

/* ---------- Service cards: staggered rise + hover lift + rule draw ---------- */
.svc-card { position: relative; transition: transform .35s cubic-bezier(.16,.6,.2,1), background .3s ease; }
.svc-card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0; background: #EF7D22;
  transition: width .45s cubic-bezier(.16,.6,.2,1);
}
.svc-card:hover { background: #13324A !important; transform: translateY(-5px); }
.svc-card:hover::before { width: 100%; }
.svc-num { transition: color .3s ease; }
.svc-card:hover .svc-num { color: #F5994F !important; }

body.reveal-ready .svc-card {
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.16,.6,.2,1), background .3s ease;
}
#services.is-visible .svc-card { opacity: 1; transform: none; }
#services.is-visible .svc-card:nth-child(1) { transition-delay: .05s; }
#services.is-visible .svc-card:nth-child(2) { transition-delay: .12s; }
#services.is-visible .svc-card:nth-child(3) { transition-delay: .19s; }
#services.is-visible .svc-card:nth-child(4) { transition-delay: .26s; }
#services.is-visible .svc-card:nth-child(5) { transition-delay: .33s; }
#services.is-visible .svc-card:nth-child(6) { transition-delay: .40s; }

/* ---------- Field lifecycle: rail draws in, stages stagger, circles pop ---------- */
body.reveal-ready .lifecycle-rail {
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.2s cubic-bezier(.16,.6,.2,1) .25s;
}
#lifecycle.is-visible .lifecycle-rail { transform: scaleX(1); }

body.reveal-ready .stage {
  opacity: 0; transform: translateY(22px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.16,.6,.2,1);
}
#lifecycle.is-visible .stage { opacity: 1; transform: none; }
#lifecycle.is-visible .stage:nth-child(1) { transition-delay: .30s; }
#lifecycle.is-visible .stage:nth-child(2) { transition-delay: .42s; }
#lifecycle.is-visible .stage:nth-child(3) { transition-delay: .54s; }
#lifecycle.is-visible .stage:nth-child(4) { transition-delay: .66s; }
#lifecycle.is-visible .stage:nth-child(5) { transition-delay: .78s; }

.stage-circle { transition: transform .3s ease, box-shadow .3s ease; }
.stage:hover .stage-circle { transform: scale(1.09); box-shadow: 0 0 0 7px rgba(239,125,34,0.12); }

/* ---------- Projects gallery: image zoom + warm tint on hover ---------- */
.tile { overflow: hidden; }
.tile img { transition: transform .8s cubic-bezier(.16,.6,.2,1), filter .5s ease; }
.tile:hover img { transform: scale(1.07); filter: saturate(1.08) brightness(1.04); }
.tile::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(239,125,34,0.20));
  transition: opacity .45s ease;
}
.tile:hover::after { opacity: 1; }

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-slide { animation: none !important; opacity: 0; }
  .hero-slide:nth-of-type(1) { opacity: 1; }
  .hero-anim { opacity: 1 !important; animation: none !important; }
  body.reveal-ready .svc-card,
  body.reveal-ready .stage { opacity: 1 !important; transform: none !important; }
  body.reveal-ready .lifecycle-rail { transform: scaleX(1) !important; }
  .tile img, .svc-card, .btn-a, .stage-circle { transition: none !important; }
}