/* ─────────────────────────────────────────────────────────────────────────
   Echo Vale — Animations & Effects
   loader / cursor / echo-title / keyframes / reduced-motion / mockup-mode
   ───────────────────────────────────────────────────────────────────────── */

/* ── Loader ──────────────────────────────────────────────────────────────── */
.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--ink);
  transition: opacity .7s var(--ease-out), visibility .7s;
}
.loader.is-gone { opacity: 0; visibility: hidden; }
.loader-inner { width: min(72vw, 760px); }
.loader-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.loader-count {
  font: 500 clamp(3rem, 11vw, 8rem)/.8 'Unbounded', sans-serif;
  letter-spacing: -.08em;
}
.loader-track {
  height: 1px;
  background: rgba(233, 237, 230, .18);
  overflow: hidden;
}
.loader-bar {
  width: 0;
  height: 100%;
  background: var(--ember);
  transition: width .12s linear;
}

/* ── Custom cursor ───────────────────────────────────────────────────────── */
.cursor-dot,
.cursor-ring {
  position: fixed;
  left: 0; top: 0;
  pointer-events: none;
  z-index: 250;
  border-radius: 50%;
}
.cursor-dot {
  width: 5px; height: 5px;
  background: var(--bone);
  transform: translate(-50%, -50%);
}
.cursor-ring {
  width: 42px; height: 42px;
  border: 1px solid rgba(233, 237, 230, .48);
  transform: translate(-50%, -50%);
  transition: width .25s, height .25s, background .25s, border-color .25s;
}
.cursor-ring.is-hover {
  width: 70px; height: 70px;
  background: rgba(228, 75, 60, .14);
  border-color: var(--ember);
}

/* ── Echo title effect ───────────────────────────────────────────────────── */
.echo-title {
  position: relative;
  isolation: isolate;
  contain: layout style;
  transform-style: preserve-3d;
}
.echo-title-copy,
.echo-title-front {
  display: block;
  width: 100%;
  transform-origin: 50% 55%;
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
}
.echo-title-copy {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}
.echo-title-copy * { color: inherit !important; }
.echo-title-front {
  position: relative;
  z-index: 2;
  pointer-events: none;
  text-shadow: 0 .035em 0 rgba(255,255,255,.04);
}
.echo-title:not(.echo-ready) .echo-title-front {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
}

/* ── Keyframes ───────────────────────────────────────────────────────────── */
@keyframes nudge {
  0%, 100% { transform: translateY(-2px); }
  50%       { transform: translateY(3px); }
}
@keyframes breathe-1 {
  0%, 100% { transform: rotate(45deg) scale(1); }
  50%       { transform: rotate(45deg) scale(1.15); }
}
@keyframes breathe-2 {
  0%, 100% { transform: scale(1); box-shadow: 0 0 25px rgba(228,75,60,.35); }
  50%       { transform: scale(1.15); box-shadow: 0 0 45px rgba(228,75,60,.6); }
}
@keyframes breathe-3 {
  0%, 100% { transform: rotate(32deg) scaleY(1); }
  50%       { transform: rotate(32deg) scaleY(1.3); }
}

/* ── Reduced-motion overrides ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hero-scroll  { height: 100vh; }
  .hero-stage   { position: relative; }
  .gallery-scroll  { height: auto; }
  .gallery-sticky  { position: relative; height: auto; padding: 6rem 0; }
  .gallery-track   { width: 100%; display: grid; grid-template-columns: 1fr 1fr; transform: none !important; }
  .gallery-card    { width: 100%; height: 60vh; }
  .echo-title-front { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
}

/* ── Mockup / screenshot mode ────────────────────────────────────────────── */
body.mockup-mode .site-nav     { position: absolute; }
body.mockup-mode .hero-scroll  { height: 100vh; }
body.mockup-mode .hero-stage   { position: relative; }
body.mockup-mode .hero-shell   { transform: scale(.9) !important; }
body.mockup-mode .hero-blur    { opacity: .76 !important; }
body.mockup-mode .hero-peek    { display: none; }
body.mockup-mode .cursor-dot,
body.mockup-mode .cursor-ring,
body.mockup-mode .noise        { display: none; }
body.mockup-mode .showcase-visual { position: relative; top: 0; height: 78vh; }
body.mockup-mode .gallery-scroll  { height: auto; }
body.mockup-mode .gallery-sticky  { position: relative; height: auto; padding: 8rem 0; }
body.mockup-mode .gallery-track   { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); transform: none !important; }
body.mockup-mode .gallery-card    { width: 100%; height: 58vh; margin-top: 0; }
body.mockup-mode .reveal          { opacity: 1; transform: none; }
html:has(body.mockup-mode) { scrollbar-width: none; }

/* ── Mobile base cursor override ─────────────────────────────────────────── */
@media (max-width: 900px) {
  body, a, button, input { cursor: auto; }
  .cursor-dot, .cursor-ring { display: none; }
}