/* ============================================================
   MCNEISH SOLUTION LLC — KEYFRAME ANIMATIONS & TRANSITIONS
   ============================================================ */

/* ─── PRELOADER ──────────────────────────────────────────── */
@keyframes preloader-letter-build {
  0%   { clip-path: inset(100% 0 0 0); opacity: 0; }
  100% { clip-path: inset(0% 0 0 0); opacity: 1; }
}

@keyframes copper-line-draw {
  0%   { transform: scaleX(0); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: scaleX(1); }
}

@keyframes preloader-exit {
  0%   { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 100%); }
}

/* ─── SVG LOGO STROKE DRAW ───────────────────────────────── */
@keyframes svg-draw {
  0%   { stroke-dashoffset: 1000; opacity: 0; }
  5%   { opacity: 1; }
  100% { stroke-dashoffset: 0; }
}

.logo-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: svg-draw 2s var(--ease-out-expo) forwards;
}

.logo-path:nth-child(1) { animation-delay: 0.2s; }
.logo-path:nth-child(2) { animation-delay: 0.4s; }
.logo-path:nth-child(3) { animation-delay: 0.6s; }
.logo-path:nth-child(4) { animation-delay: 0.8s; }

/* ─── TEXT REVEAL ANIMATIONS ─────────────────────────────── */

/* Character-by-character vertical rise */
@keyframes char-rise {
  0%   { transform: translateY(110%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Word fade-in cascade */
@keyframes word-fade {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Horizontal wipe reveal */
@keyframes text-wipe {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0% 0 0); }
}

/* GSAP SplitText helper classes */
.char-wrapper {
  overflow: hidden;
  display: inline-block;
}

.char {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  animation: char-rise 0.8s var(--ease-out-expo) forwards;
}

/* ─── COUNTER ANIMATION ──────────────────────────────────── */
@keyframes count-underline {
  0%   { width: 0; }
  100% { width: 100%; }
}

/* ─── HERO SCROLL TRANSFORMS ─────────────────────────────── */

/* Work lamp oscillation */
@keyframes lamp-oscillate {
  0%   { transform: rotate(-3deg); }
  50%  { transform: rotate(3deg); }
  100% { transform: rotate(-3deg); }
}

.hero-lamp { animation: lamp-oscillate 8s ease-in-out infinite; }

/* Film grain overlay flicker */
@keyframes grain-flicker {
  0%, 100% { opacity: 0.4; background-position: 0 0; }
  25%       { opacity: 0.35; background-position: -5% -10%; }
  50%       { opacity: 0.4; background-position: 10% 5%; }
  75%       { opacity: 0.35; background-position: -10% 10%; }
}

.grain-layer {
  animation: grain-flicker 0.1s steps(1) infinite;
}

/* ─── EMERGENCY HEARTBEAT ────────────────────────────────── */
@keyframes emergency-pulse {
  0%, 100% { background: rgba(184, 115, 51, 0.02); }
  50%       { background: rgba(255, 87, 51, 0.06); }
}

.emergency-section {
  animation: emergency-pulse 3s ease-in-out infinite;
}

/* Phone glow */
@keyframes phone-glow {
  0%, 100% { text-shadow: 0 0 20px rgba(184, 115, 51, 0.4), 0 0 40px rgba(184, 115, 51, 0.2); }
  50%       { text-shadow: 0 0 30px rgba(184, 115, 51, 0.6), 0 0 60px rgba(184, 115, 51, 0.3); }
}

.phone-number-glow {
  animation: phone-glow 2.5s ease-in-out infinite;
}

/* ─── PAGE TRANSITION — WALL REVEAL ──────────────────────── */
.page-transition-wall {
  position: fixed;
  inset: 0;
  background: var(--copper);
  z-index: calc(var(--z-preloader) - 1);
  transform-origin: left center;
  transform: scaleX(0);
  pointer-events: none;
}

@keyframes wall-enter {
  0%   { transform: scaleX(0); transform-origin: left center; }
  50%  { transform: scaleX(1); transform-origin: left center; }
  51%  { transform: scaleX(1); transform-origin: right center; }
  100% { transform: scaleX(0); transform-origin: right center; }
}

.page-transition-wall.animating {
  animation: wall-enter 0.8s var(--ease-inout) forwards;
}

/* Micro vibration after wall */
@keyframes settle-shake {
  0%   { transform: translateX(-2px); }
  25%  { transform: translateX(2px); }
  50%  { transform: translateX(-1px); }
  75%  { transform: translateX(1px); }
  100% { transform: translateX(0); }
}

/* ─── TRANSFORMATION SLIDER ──────────────────────────────── */
@keyframes dial-tick {
  0%   { transform: rotate(-5deg); }
  100% { transform: rotate(5deg); }
}

/* ─── PROCESS FILMSTRIP ──────────────────────────────────── */
@keyframes sprocket-pulse {
  0%, 100% { opacity: 0.4; }
  50%       { opacity: 0.7; }
}

.film-sprocket {
  animation: sprocket-pulse 3s ease-in-out infinite;
}

/* Film grain on before-side */
@keyframes film-grain {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 100%; }
}

/* ─── CLOCK COMPASS ──────────────────────────────────────── */
@keyframes clock-arm-sweep {
  0%   { transform: rotate(0deg); }
  80%  { transform: rotate(28deg); } /* 2 hours / 24 = ~28 degrees */
  90%  { transform: rotate(26deg); }
  95%  { transform: rotate(29deg); }
  100% { transform: rotate(28deg); }
}

.clock-arm.animate {
  animation: clock-arm-sweep 2.5s var(--ease-out-expo) forwards;
}

/* ─── ANGLED PROJECT PANELS ──────────────────────────────── */
@keyframes panel-straighten {
  from { transform: rotate(var(--panel-angle)) scale(0.95); }
  to   { transform: rotate(0deg) scale(1); }
}

/* ─── MATERIAL SWATCH EXPAND ─────────────────────────────── */
@keyframes swatch-expand {
  from { transform: scaleX(1) scaleY(1); }
  to   { transform: scaleX(2) scaleY(3); }
}

/* ─── BLUEPRINT REVEAL ───────────────────────────────────── */
@keyframes blueprint-line-draw {
  from { stroke-dashoffset: 500; opacity: 0; }
  10%  { opacity: 1; }
  to   { stroke-dashoffset: 0; }
}

.blueprint-line {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
}

.blueprint-line.draw {
  animation: blueprint-line-draw 2s var(--ease-out-expo) forwards;
}

/* ─── TROWEL EFFECT (canvas fallback) ───────────────────── */
@keyframes trowel-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* ─── TOPOGRAPHIC MAP PAN ────────────────────────────────── */
@keyframes topo-pan {
  from { background-position: 0 0; }
  to   { background-position: 400px 200px; }
}

.topo-map-bg {
  animation: topo-pan 30s linear infinite;
}

/* ─── ACCORDION (service panels) ────────────────────────── */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease-out-expo);
}

.accordion-content.open {
  max-height: 400px;
}

/* ─── CONFIGURATOR STEP TRANSITIONS ──────────────────────── */
@keyframes step-slide-in {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes step-slide-out {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(-40px); opacity: 0; }
}

/* ─── BRIEF ORIGAMI FOLD (quote submit) ──────────────────── */
@keyframes paper-fold-1 {
  0%   { transform: perspective(600px) rotateX(0deg); }
  100% { transform: perspective(600px) rotateX(-90deg); }
}

@keyframes paper-fold-2 {
  0%   { transform: perspective(600px) rotateX(-90deg) scaleY(0.5); }
  100% { transform: perspective(600px) rotateX(-180deg) scaleY(0); }
}

/* ─── HOVER LIFT ─────────────────────────────────────────── */
.hover-lift {
  transition: transform var(--duration-mid) var(--ease-out-expo);
}
.hover-lift:hover { transform: translateY(-4px); }

/* ─── COPPER SHIMMER ─────────────────────────────────────── */
@keyframes copper-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.shimmer {
  background: linear-gradient(90deg,
    var(--copper) 0%,
    var(--copper-lit) 25%,
    var(--copper) 50%,
    var(--copper-deep) 75%,
    var(--copper) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: copper-shimmer 3s linear infinite;
}