/* Construction-themed motion. Respects prefers-reduced-motion globally via base.css. */

@keyframes grid-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 80px 80px, 80px 80px; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes hero-blueprint-drift {
  from { background-position: 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 160px 180px, 160px 180px, 80px 90px, 80px 90px; }
}

@keyframes hero-sweep {
  0%   { transform: translate3d(-6%, -2%, 0); opacity: 0.35; }
  35%  { opacity: 0.85; }
  55%  { transform: translate3d(6%, 1%, 0); opacity: 0.65; }
  100% { transform: translate3d(-6%, -2%, 0); opacity: 0.35; }
}

/* Compositor-friendly site background motion (transform only).
   Avoids animating background-position, which triggers repaints. */
@keyframes site-bg-drift {
  from { transform: translate3d(0, 0, 0) rotate(-0.25deg); }
  to   { transform: translate3d(80px, 90px, 0) rotate(-0.25deg); }
}

@keyframes site-bg-sweep {
  0%   { transform: translate3d(-4%, -2%, 0); opacity: 0.25; }
  35%  { opacity: 0.65; }
  55%  { transform: translate3d(4%, 1%, 0); opacity: 0.5; }
  100% { transform: translate3d(-4%, -2%, 0); opacity: 0.25; }
}

/* Theme flip reveal (View Transitions API) */
@keyframes theme-reveal {
  from { clip-path: circle(0px at var(--vt-x, 50%) var(--vt-y, 50%)); }
  to   { clip-path: circle(140vmax at var(--vt-x, 50%) var(--vt-y, 50%)); }
}

/* Crane: lower beam into place, then idle sway. The SVG sets transform-box on
   the relevant groups so transforms originate from logical pivots (cab top
   for the jib, hook anchor for the load). */
@keyframes crane-sway {
  0%, 100% { transform: rotate(-1.5deg); }
  50%      { transform: rotate(1.5deg); }
}

@keyframes hook-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

@keyframes beam-lower {
  0%   { transform: translateY(-180px); opacity: 0; }
  20%  { opacity: 1; }
  85%  { transform: translateY(2px); }
  100% { transform: translateY(0); }
}

@keyframes cable-extend {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@keyframes spotlight-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 0.95; }
}

.crane-jib {
  transform-origin: 50% 88%;
  transform-box: fill-box;
  animation: crane-sway 6.5s ease-in-out 2.4s infinite;
}

.crane-cable {
  transform-origin: top center;
  transform-box: fill-box;
  animation: cable-extend 1.2s var(--ease-emphatic) 0.6s both;
}

.crane-hook {
  transform-box: fill-box;
  animation: hook-bob 3s ease-in-out 2.4s infinite;
}

.crane-beam {
  animation: beam-lower 1.8s var(--ease-emphatic) 1s both;
}

.crane-spotlight {
  animation: spotlight-pulse 4s ease-in-out infinite;
}

/* Skyline twinkle (optional faint nighttime glints) */
@keyframes twinkle {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

.skyline-window {
  animation: twinkle 4s ease-in-out infinite;
}

.skyline-window:nth-child(2n) { animation-delay: 0.6s; }
.skyline-window:nth-child(3n) { animation-delay: 1.2s; }
.skyline-window:nth-child(5n) { animation-delay: 1.8s; }

/* Page micro-loader: hard-hat pulse */
.page-loader {
  position: fixed;
  inset: 0;
  background: var(--background-main);
  display: grid;
  place-items: center;
  z-index: 500;
  transition: opacity var(--dur-slow) var(--ease-standard),
    visibility 0s linear var(--dur-slow);
}

.page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.page-loader__hat {
  width: 64px;
  height: 64px;
  color: var(--accent);
  animation: hat-bounce 1.2s ease-in-out infinite;
}

@keyframes hat-bounce {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-10px) rotate(4deg); }
}

/* Blueprint draw-on for SVG icons. Set --pathLen to total path length. */
.draw-svg path {
  stroke-dasharray: var(--pathLen, 600);
  stroke-dashoffset: var(--pathLen, 600);
  transition: stroke-dashoffset 1.6s var(--ease-emphatic);
}

.draw-svg.is-drawn path {
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .draw-svg path {
    stroke-dashoffset: 0;
    transition: none;
  }
  .crane-jib,
  .crane-cable,
  .crane-hook,
  .crane-beam,
  .crane-spotlight,
  .skyline-window,
  .page-loader__hat {
    animation: none !important;
  }
  .page-loader {
    display: none;
  }

  .hero::before,
  .hero::after {
    animation: none !important;
  }
}

/* Subtle parallax girder layer (transform driven by JS) */
.parallax-layer {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .parallax-layer {
    transform: none !important;
  }
}