/* Eastbrook Cinematic — motion & depth system. Loaded after style.css.
   JS-dependent states are gated on html.motion-on (set by motion.js).
   CSS-only enhancements are gated on prefers-reduced-motion media queries. */

/* ---- Depth Level 2 (approved: layered shadows, NO gradient coloring) ---- */
:root {
  --shadow-l2: 0 3px 6px rgba(16,35,60,0.08), 0 16px 36px rgba(16,35,60,0.14), 0 48px 110px rgba(16,35,60,0.20);
  --shadow-l2-hover: 0 6px 12px rgba(16,35,60,0.09), 0 26px 56px rgba(16,35,60,0.18), 0 64px 140px rgba(16,35,60,0.26);
}
@media (prefers-reduced-motion: no-preference) {
  .service-card, .why-card, .sidebar-card {
    border-color: rgba(16,35,60,0.05);
    box-shadow: var(--shadow-l2);
  }
  .project-card { box-shadow: var(--shadow-l2); }
}

/* ---- Scroll progress bar ---- */
#eb-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1200;
  background: linear-gradient(90deg, var(--orange), var(--blue));
  transform: scaleX(0); transform-origin: left center; pointer-events: none;
}

/* ---- Hero headline line-wipe ---- */
.hline { display: block; overflow: hidden; }
.hline-in { display: inline-block; }
.hero h1 .hline-in { color: var(--white); }   /* style.css colors all h1 spans orange */
.hero h1 .hline-accent { color: var(--orange); }

.hero-dim { position: absolute; inset: 0; background: #0a1424; opacity: 0; pointer-events: none; z-index: 1; }

/* ---- Trust strip hover lift ---- */
@media (prefers-reduced-motion: no-preference) {
  .trust-item { transition: transform 0.25s ease; }
  html.motion-on .trust-item:not(.eb-settled) { transition: none; }
  .trust-item:hover { transform: translateY(-3px); }
}

/* ---- Service card bounce hover (approved: spring overshoot, image zoom, arrow slide) ---- */
@media (prefers-reduced-motion: no-preference) {
  .service-card { transition: transform 0.5s cubic-bezier(0.34, 2.1, 0.5, 1), box-shadow 0.35s ease; }
  html.motion-on .service-card:not(.eb-settled) { transition: box-shadow 0.35s ease; }
  .service-card:hover {
    transform: translateY(-12px) scale(1.025);
    box-shadow: var(--shadow-l2-hover);
  }
  .service-card-img { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
  .service-card:hover .service-card-img { transform: scale(1.08); }
  .service-card-link { transition: transform 0.3s ease; }
  .service-card:hover .service-card-link { transform: translateX(5px); }
}

/* ---- Project cards: tilt + glare ---- */
@media (prefers-reduced-motion: no-preference) {
  .project-card { transform-style: preserve-3d; will-change: transform; }
  html.motion-on .project-card img { transition: none; }
  .eb-glare {
    position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 2;
    background: radial-gradient(600px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,0.28), transparent 45%);
    transition: opacity 0.3s ease;
  }
  .project-card:hover .eb-glare { opacity: 1; }
}

/* ---- Why Eastbrook: opaqued photo (69%, natural colors — approved) ---- */
.why-section { position: relative; overflow: hidden; background: var(--white); }
.why-photo {
  position: absolute; inset: 0; opacity: 0.69; pointer-events: none;
  background: url('/images/projects/lakeview-pointe/IMG_5899-scaled.lg.webp') center 42% / cover no-repeat;
}
.why-section .container { position: relative; z-index: 2; }
.why-section .section-head.center { margin-bottom: 2.4rem; }
.why-panel {
  display: inline-block; text-align: center;
  background: rgba(255,255,255,0.62);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  border: 1px solid rgba(255,255,255,0.7); border-radius: 14px;
  padding: 1.6rem 2.4rem;
  box-shadow: 0 3px 6px rgba(16,35,60,0.07), 0 18px 44px rgba(16,35,60,0.13);
}
.why-panel h2 { margin: 0; }
.why-section .why-card {
  background: var(--white); border: 1px solid rgba(16,35,60,0.05);
  box-shadow: var(--shadow-l2); border-radius: 10px;
}
.why-section .why-card:hover { background: var(--white); }
.why-section .why-title { color: var(--dark); }
.why-section .why-desc { color: var(--text-lt); }
.why-rule { width: 44px; height: 3px; background: var(--orange); border-radius: 2px; margin-bottom: 0.9rem; }
@media (prefers-reduced-motion: no-preference) {
  .why-section .why-card { transition: transform 0.5s cubic-bezier(0.34, 2.1, 0.5, 1), box-shadow 0.35s ease; }
  html.motion-on .why-section .why-card:not(.eb-settled) { transition: box-shadow 0.35s ease; }
  .why-section .why-card:hover { transform: translateY(-10px) scale(1.015); box-shadow: var(--shadow-l2-hover); }
}

/* ---- Process rail (drawn by scroll on desktop) ---- */
.process-rail {
  position: absolute; top: 2rem; left: 12.5%; right: 12.5%; height: 3px;
  background: var(--orange); border-radius: 2px;
  transform: scaleX(0); transform-origin: left center; z-index: 0;
}

/* ---- Orange CTA shimmer sweep ---- */
@media (prefers-reduced-motion: no-preference) {
  html.motion-on .btn-primary { position: relative; overflow: hidden; }
  html.motion-on .btn-primary::after {
    content: ''; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,0.5), transparent);
    transform: skewX(-20deg); animation: eb-shimmer 3.4s ease-in-out infinite;
  }
  html.motion-on .btn-primary, html.motion-on .btn-outline { transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s; }
}
@keyframes eb-shimmer {
  0%, 60% { left: -80%; }
  80%, 100% { left: 140%; }
}

/* ---- Pinned scene fills the viewport (no dead band below content while pinned) ---- */
.eb-pinned-scene {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ---- Pinned process: VERTICAL story layout (matches approved mockup) ---- */
.eb-pinned-scene .process-grid {
  display: flex; flex-direction: column; gap: 1.1rem;
  max-width: 720px; margin: 0 auto; padding-left: 84px; position: relative;
}
.eb-pinned-scene .process-grid::before { content: none; }
.eb-pinned-scene .process-step {
  text-align: left; background: var(--white); border-radius: 10px;
  padding: 1.05rem 1.4rem; box-shadow: var(--shadow-l2);
  z-index: 1; /* keeps circles painting above the rail once GSAP transforms make steps stacking contexts */
}
.eb-pinned-scene .step-num { position: absolute; left: -58px; top: 0; margin: 0; }
.eb-pinned-scene .step-title { margin-bottom: 0.25rem; }
.eb-pinned-scene .process-rail {
  top: 8px; bottom: 8px; left: 50px; right: auto;
  width: 4px; height: auto;
  transform: scaleY(0); transform-origin: top center;
}