/* =========================================
   HANDYMANPRO.AI — ANIMATIONS & FX
   Guiding principle: motion that informs, not entertains.
   Everything here either (a) directs attention to new content,
   (b) confirms an interaction, or (c) adds depth/hierarchy.
   Nothing loops purely for decoration.
   ========================================= */

/* ─────────────────────────────────────────
   Scroll Reveal
   Starts 18px below final position —
   enough to feel purposeful, not theatrical.
   Easing: natural deceleration (ease-out expo).
───────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 550ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }
.reveal-delay-5 { transition-delay: 400ms; }

/* Lateral reveals — tight range (22px), same natural easing */
.reveal-left {
  opacity: 0;
  transform: translateX(-22px);
  transition: opacity 550ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-right {
  opacity: 0;
  transform: translateX(22px);
  transition: opacity 550ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 550ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-left.revealed,
.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Scale reveal — subtle, no overshoot */
.reveal-scale {
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* ─────────────────────────────────────────
   Keyframe Animations
   Only kept if actively used and meaningful.
───────────────────────────────────────── */

/* Skeleton shimmer — genuine loading feedback */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* Smooth entry for dynamically injected content */
@keyframes slide-up {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

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

/* SVG path draw — used on house illustration */
@keyframes draw-stroke {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

/* Count-up entry */
@keyframes count-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scroll chevron — subtle drift, not a bounce */
@keyframes chevron-drift {
  0%, 100% { transform: rotate(45deg) translateY(0);   opacity: 0.35; }
  50%       { transform: rotate(45deg) translateY(4px); opacity: 0.65; }
}

/* Click ripple on house hotspots — expands and fades, one-shot */
@keyframes ripple-out {
  0%   { transform: scale(0.4); opacity: 0.55; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ─────────────────────────────────────────
   Applied Utility Animations
───────────────────────────────────────── */
.anim-slide-up { animation: slide-up 400ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.anim-fade-in  { animation: fade-in  350ms ease both; }

/* ─────────────────────────────────────────
   Card Hover Lift
   4px rise + deepened shadow = clickable depth.
───────────────────────────────────────── */
.lift {
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.35), 0 2px 8px rgba(0,0,0,0.2);
}

/* ─────────────────────────────────────────
   House SVG Hotspots
───────────────────────────────────────── */
.house-hotspot {
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
              filter 200ms ease;
}

.house-hotspot:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 8px rgba(20,184,166,.5));
}

.hotspot-active {
  filter: drop-shadow(0 0 8px rgba(20,184,166,.5));
  transition: filter 200ms ease;
}

/* ─────────────────────────────────────────
   Loading Skeleton
───────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg,
    var(--black-100) 25%,
    var(--black-200) 50%,
    var(--black-100) 75%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}

/* ─────────────────────────────────────────
   Gradient Text
───────────────────────────────────────── */
.gradient-text-teal {
  background: linear-gradient(135deg, var(--teal-400), var(--teal-600));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-text-warm {
  background: linear-gradient(135deg, var(--orange-400), var(--orange-600));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ─────────────────────────────────────────
   Static Glow Utilities
───────────────────────────────────────── */
.glow-teal {
  box-shadow: 0 0 24px rgba(20,184,166,.22), 0 0 48px rgba(20,184,166,.08);
}

.glow-orange {
  box-shadow: 0 0 24px rgba(249,115,22,.22), 0 0 48px rgba(249,115,22,.08);
}

/* ─────────────────────────────────────────
   Tab / Panel Transitions
───────────────────────────────────────── */
.tab-content { display: none; }
.tab-content.active {
  display: block;
  animation: fade-in 220ms ease both;
}

/* ─────────────────────────────────────────
   Tooltip Entry
───────────────────────────────────────── */
.tooltip-enter {
  animation: slide-up 170ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ─────────────────────────────────────────
   Number Counter
───────────────────────────────────────── */
.counter-num {
  animation: count-up 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ─────────────────────────────────────────
   Scroll Indicator
───────────────────────────────────────── */
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.35);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  animation: fade-in 1s 1.2s both;
  pointer-events: none;
}

.scroll-arrow {
  width: 20px;
  height: 20px;
  border-right: 2px solid rgba(255,255,255,.35);
  border-bottom: 2px solid rgba(255,255,255,.35);
  animation: chevron-drift 2.2s ease-in-out infinite;
}

/* ─────────────────────────────────────────
   Season dot — static, no pulse loop
───────────────────────────────────────── */
.season-active-indicator {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--orange-400);
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 0 2px rgba(249,115,22,.22);
}

/* ─────────────────────────────────────────
   SVG house draw animation
───────────────────────────────────────── */
.house-draw-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

.house-draw-path.drawn {
  animation: draw-stroke 1.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ─────────────────────────────────────────
   Reduced Motion
───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .anim-slide-up, .anim-fade-in,
  .skeleton, .scroll-arrow,
  .counter-num, .tooltip-enter { animation: none; }

  .lift:hover, .card:hover, .zone-card:hover,
  .btn:hover, .tool-card:hover,
  .house-hotspot:hover { transform: none; }
}