/* ============================================================
   LEFT COAST EXTERIORS — Brand Motion System
   Shared animations, scroll reveals, service card interactions.
   All motion respects prefers-reduced-motion.
   ============================================================ */

/* ── Motion tokens ─────────────────────────────────────────── */
:root {
  --motion-fast:     150ms;
  --motion-standard: 300ms;
  --motion-slow:     500ms;
  --motion-ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --motion-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Hero containing context ───────────────────────────────── */
.hero {
  position: relative;
}

/* ── Scroll reveal ─────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity  var(--motion-slow) var(--motion-ease),
    transform var(--motion-slow) var(--motion-ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal--delay-1 { transition-delay: 80ms; }
.reveal--delay-2 { transition-delay: 160ms; }
.reveal--delay-3 { transition-delay: 240ms; }

/* ── Service card microinteractions ────────────────────────── */
.service-card {
  transition:
    transform  var(--motion-standard) var(--motion-ease),
    box-shadow var(--motion-standard) var(--motion-ease);
  will-change: transform;
}
.service-card:hover,
.service-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
}
.service-card-icon svg {
  transition: transform var(--motion-standard) var(--motion-ease);
}
.service-card:hover .service-card-icon svg,
.service-card:focus-within .service-card-icon svg {
  transform: scale(1.15) rotate(-3deg);
}

/* ── Mascot image container ────────────────────────────────── */
.mascot-illustration {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

/* ── Hero mascot ───────────────────────────────────────────── */
.hero-mascot-wrap {
  display: none; /* hidden on mobile; shown at ≥1200px */
  position: absolute;
  bottom: 0;
  left: 24px;
  width: 160px;
  height: 213px; /* 160 × (800/600) ≈ 213 */
  pointer-events: none;
  z-index: 2;
}
.hero-mascot-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}
/* Entrance animation */
@keyframes mascot-rise {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-mascot-wrap.is-visible {
  animation: mascot-rise 0.65s var(--motion-ease) forwards;
}
@media (min-width: 1200px) {
  .hero-mascot-wrap { display: block; opacity: 0; }
}

/* ── CTA banner mascot (replaces existing static img) ──────── */
.cta-mascot-motion {
  flex-shrink: 0;
  width: 140px;
  height: 187px; /* 140 × (800/600) */
  display: flex;
  align-items: flex-end;
}
.cta-mascot-motion img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  transition: transform 0.4s var(--motion-ease);
}
.cta-mascot-motion:hover img {
  transform: translateY(-6px);
}
@media (max-width: 640px) {
  .cta-mascot-motion { display: none; }
}

/* ── Service hub mascot ────────────────────────────────────── */
.hub-mascot-wrap {
  flex-shrink: 0;
  width: 120px;
  height: 160px;
  display: flex;
  align-items: flex-end;
  pointer-events: none;
}
.hub-mascot-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
  pointer-events: auto;
}
/* Add flex to existing cta-banner-content for mascot alignment */
.cta-banner-content {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-5, 1.5rem);
  flex-wrap: wrap;
}
.cta-banner-text {
  flex: 1;
  min-width: 0;
}
@media (max-width: 640px) {
  .hub-mascot-wrap { display: none; }
}

/* ── Process step entrance ─────────────────────────────────── */
.process-step.reveal {
  transform: translateX(-16px);
}
.process-step.reveal.is-visible {
  transform: translateX(0);
}

/* ── Form success mascot ───────────────────────────────────── */
.form-success-mascot {
  display: block;
  width: 80px;
  height: 107px;
  margin: 0 auto var(--sp-4, 1rem);
  object-fit: contain;
  object-position: bottom center;
}

/* ── Reduced motion overrides ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .service-card {
    transition: none;
    will-change: auto;
  }
  .service-card:hover,
  .service-card:focus-within {
    transform: none;
  }
  .service-card-icon svg,
  .service-card:hover .service-card-icon svg,
  .service-card:focus-within .service-card-icon svg {
    transform: none;
    transition: none;
  }
  .hero-mascot-wrap {
    animation: none !important;
    opacity: 1;
  }
  .cta-mascot-motion img {
    transition: none;
  }
}

/* ── Phase AC: Character-specific mascot motions ─────────────
   All animations trigger once, no loops (except idle-breath: 3 cycles).
   All suppressed under prefers-reduced-motion.
   ──────────────────────────────────────────────────────────── */

@keyframes mascot-wave-char {
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  18%  { transform: translateY(-16px) rotate(-7deg) scale(1.08); }
  38%  { transform: translateY(-8px) rotate(5deg) scale(1.04); }
  58%  { transform: translateY(-13px) rotate(-5deg) scale(1.06); }
  78%  { transform: translateY(-4px) rotate(2deg) scale(1.02); }
  100% { transform: translateY(0) rotate(0deg) scale(1); }
}
@keyframes mascot-point-char {
  0%   { transform: translateX(0) rotate(0deg); }
  35%  { transform: translateX(10px) rotate(6deg); }
  65%  { transform: translateX(7px) rotate(4deg); }
  100% { transform: translateX(0) rotate(0deg); }
}
@keyframes mascot-approve-char {
  0%   { transform: scale(1) rotate(0deg); }
  30%  { transform: scale(1.1) rotate(-5deg); }
  55%  { transform: scale(1.06) rotate(3deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes mascot-roof-char {
  0%   { transform: translateY(0) rotate(0deg); }
  40%  { transform: translateY(-14px) rotate(-5deg); }
  70%  { transform: translateY(-6px) rotate(3deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
@keyframes mascot-window-char {
  0%   { transform: translateX(0) scale(1); }
  30%  { transform: translateX(-10px) scale(1.06); }
  65%  { transform: translateX(7px) scale(1.03); }
  100% { transform: translateX(0) scale(1); }
}
@keyframes mascot-siding-char {
  0%   { transform: translateX(0) rotate(0deg); }
  40%  { transform: translateX(-12px) rotate(-5deg); }
  70%  { transform: translateX(6px) rotate(3deg); }
  100% { transform: translateX(0) rotate(0deg); }
}
@keyframes mascot-deck-char {
  0%   { transform: translateY(0) scale(1); }
  35%  { transform: translateY(-14px) scale(1.07); }
  65%  { transform: translateY(-5px) scale(1.03); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes mascot-door-char {
  0%   { transform: translateX(0) rotate(0deg); }
  35%  { transform: translateX(10px) rotate(6deg); }
  65%  { transform: translateX(5px) rotate(3deg); }
  100% { transform: translateX(0) rotate(0deg); }
}
@keyframes mascot-gutter-char {
  0%   { transform: translateY(0) rotate(0deg); }
  30%  { transform: translateY(10px) rotate(-5deg); }
  60%  { transform: translateY(5px) rotate(3deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
@keyframes mascot-estimate-char {
  0%   { transform: translateX(0) rotate(0deg) scale(1); }
  35%  { transform: translateX(10px) rotate(-6deg) scale(1.07); }
  65%  { transform: translateX(5px) rotate(-3deg) scale(1.04); }
  100% { transform: translateX(0) rotate(0deg) scale(1); }
}
@keyframes mascot-success-char {
  0%   { transform: scale(0.78) translateY(18px); opacity: 0; }
  35%  { transform: scale(1.14) translateY(-13px); opacity: 1; }
  58%  { transform: scale(0.95) translateY(5px); }
  76%  { transform: scale(1.06) translateY(-5px); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes mascot-search-char {
  0%   { transform: rotate(0deg) translateX(0); }
  22%  { transform: rotate(-8deg) translateX(-8px); }
  50%  { transform: rotate(0deg) translateX(0); }
  72%  { transform: rotate(8deg) translateX(8px); }
  100% { transform: rotate(0deg) translateX(0); }
}
@keyframes mascot-idle-breath {
  0%, 100% { transform: scale(1) translateY(0); }
  50%       { transform: scale(1.018) translateY(-3px); }
}

/* Animation utility classes */
.mascot-anim-wave     { animation: mascot-wave-char     1.8s var(--motion-ease, cubic-bezier(0.22,1,0.36,1)) both; }
.mascot-anim-point    { animation: mascot-point-char    0.9s var(--motion-ease, cubic-bezier(0.22,1,0.36,1)) both; }
.mascot-anim-approve  { animation: mascot-approve-char  0.7s var(--motion-ease, cubic-bezier(0.22,1,0.36,1)) both; }
.mascot-anim-roof     { animation: mascot-roof-char     1.0s var(--motion-ease, cubic-bezier(0.22,1,0.36,1)) both; }
.mascot-anim-window   { animation: mascot-window-char   0.9s var(--motion-ease, cubic-bezier(0.22,1,0.36,1)) both; }
.mascot-anim-siding   { animation: mascot-siding-char   0.9s var(--motion-ease, cubic-bezier(0.22,1,0.36,1)) both; }
.mascot-anim-deck     { animation: mascot-deck-char     1.0s var(--motion-ease, cubic-bezier(0.22,1,0.36,1)) both; }
.mascot-anim-door     { animation: mascot-door-char     0.9s var(--motion-ease, cubic-bezier(0.22,1,0.36,1)) both; }
.mascot-anim-gutter   { animation: mascot-gutter-char   0.9s var(--motion-ease, cubic-bezier(0.22,1,0.36,1)) both; }
.mascot-anim-estimate { animation: mascot-estimate-char 1.0s var(--motion-ease, cubic-bezier(0.22,1,0.36,1)) both; }
.mascot-anim-success  { animation: mascot-success-char  0.8s var(--motion-ease, cubic-bezier(0.22,1,0.36,1)) both; }
.mascot-anim-search   { animation: mascot-search-char   1.4s var(--motion-ease, cubic-bezier(0.22,1,0.36,1)) both; }
.mascot-anim-idle     { animation: mascot-idle-breath   3.5s ease-in-out 2s 3 both; }

/* Desktop hover microinteraction for mascot containers */
.mascot-hover-lift {
  transition: transform 180ms cubic-bezier(0.22,1,0.36,1);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .mascot-hover-lift:hover { transform: translateY(-3px) scale(1.025); }
}

/* Reduced-motion: disable all Phase AC character motions */
@media (prefers-reduced-motion: reduce) {
  .mascot-anim-wave,
  .mascot-anim-point,
  .mascot-anim-approve,
  .mascot-anim-roof,
  .mascot-anim-window,
  .mascot-anim-siding,
  .mascot-anim-deck,
  .mascot-anim-door,
  .mascot-anim-gutter,
  .mascot-anim-estimate,
  .mascot-anim-success,
  .mascot-anim-search,
  .mascot-anim-idle {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .mascot-hover-lift,
  .mascot-hover-lift:hover {
    transition: none !important;
    transform: none !important;
  }
}