/* ============================================================
   Animations — entrance, scroll-reveal, hover micro-interactions
   ============================================================ */

/* ---- Hero entrance sequence ---- */
@keyframes heroFadeUp{
  from{ opacity: 0; transform: translateY(28px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes heroScaleIn{
  from{ opacity: 0; transform: scale(0.96) translateY(20px); }
  to{ opacity: 1; transform: scale(1) translateY(0); }
}
.hero-anim{
  opacity: 0;
  animation: heroFadeUp 900ms var(--ease-out) forwards;
}
.hero-anim--scale{ animation-name: heroScaleIn; }
.hero-anim[data-delay="1"]{ animation-delay: 0.15s; }
.hero-anim[data-delay="2"]{ animation-delay: 0.32s; }
.hero-anim[data-delay="3"]{ animation-delay: 0.48s; }
.hero-anim[data-delay="4"]{ animation-delay: 0.62s; }

/* ---- Generic scroll reveal (JS toggles .is-visible via IntersectionObserver) ---- */
.reveal{
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  will-change: transform, opacity;
}
.reveal.is-visible{ opacity: 1; transform: translateY(0); }

.reveal-left{ opacity: 0; transform: translateX(-36px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.reveal-left.is-visible{ opacity: 1; transform: translateX(0); }

.reveal-right{ opacity: 0; transform: translateX(36px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.reveal-right.is-visible{ opacity: 1; transform: translateX(0); }

/* On narrow viewports, horizontal slide-in offsets can push edge-positioned
   elements past the viewport boundary and create phantom horizontal scroll.
   Use a vertical offset instead below 860px — same entrance feel, no overflow risk. */
@media (max-width: 860px){
  .reveal-left, .reveal-right{ transform: translateY(24px); }
  .reveal-left.is-visible, .reveal-right.is-visible{ transform: translateY(0); }
}

.reveal-scale{ opacity: 0; transform: scale(0.92); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
.reveal-scale.is-visible{ opacity: 1; transform: scale(1); }

/* stagger children — JS assigns --stagger-i custom property */
.stagger .reveal,
.stagger .reveal-left,
.stagger .reveal-right,
.stagger .reveal-scale{
  transition-delay: calc(var(--stagger-i, 0) * 90ms);
}

/* ---- Parallax hero background ---- */
.parallax-bg{
  position: absolute; inset: -6% -2%;
  background-size: cover;
  background-position: center;
  will-change: transform;
}

/* ---- Icon micro animations ---- */
@keyframes iconPop{
  0%{ opacity: 0; transform: scale(0.5); }
  60%{ opacity: 1; transform: scale(1.08); }
  100%{ transform: scale(1); }
}
.icon-pop{ animation: iconPop 500ms var(--ease-out) both; }

.arrow-hover{ transition: transform var(--dur-fast) var(--ease-out); }
*:hover > .arrow-hover{ transform: translateX(4px); }

/* ---- Chevron rotate (accordions) ---- */
.chevron{ transition: transform var(--dur-fast) var(--ease-default); }
.is-open .chevron{ transform: rotate(180deg); }

/* ---- Loading spinner (standalone) ---- */
.spinner{
  width: 20px; height: 20px;
  border: 2.5px solid var(--line);
  border-top-color: var(--ember);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ---- Modal / lightbox ---- */
.lightbox{
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(13,17,25,0.92);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-med) var(--ease-default);
  padding: 40px;
}
.lightbox.is-open{ opacity: 1; pointer-events: auto; }
.lightbox__frame{
  max-width: 1100px; max-height: 85vh;
  transform: scale(0.92) translateY(16px);
  transition: transform var(--dur-med) var(--ease-out);
  position: relative;
}
.lightbox.is-open .lightbox__frame{ transform: scale(1) translateY(0); }
.lightbox__frame img{ max-height: 85vh; width: auto; border-radius: 8px; }
.lightbox__caption{ color: rgba(255,255,255,0.75); font-size: 0.85rem; margin-top: 14px; font-family: var(--font-mono); text-align: center; }
.lightbox__close{
  position: absolute; top: -46px; right: 0;
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-default), transform var(--dur-fast) var(--ease-out);
}
.lightbox__close:hover{ background: var(--ember); border-color: var(--ember); transform: rotate(90deg); }

/* ---- Success checkmark draw ---- */
.check-draw{ width: 22px; height: 22px; }
.check-draw circle{
  stroke-dasharray: 63; stroke-dashoffset: 63;
  animation: circleDraw 500ms var(--ease-out) forwards;
}
.check-draw path{
  stroke-dasharray: 20; stroke-dashoffset: 20;
  animation: checkDraw 300ms var(--ease-out) 400ms forwards;
}
@keyframes circleDraw{ to{ stroke-dashoffset: 0; } }
@keyframes checkDraw{ to{ stroke-dashoffset: 0; } }

/* ---- Skeleton / lazy image blur-up ---- */
.lazy-img{ filter: blur(14px); transform: scale(1.04); transition: filter 700ms var(--ease-out), transform 700ms var(--ease-out); }
.lazy-img.is-loaded{ filter: blur(0); transform: scale(1); }