/* ════════════════════════════════════════════════════════════
   AMINISM Animations — Line Art, Kinetic, Scroll-Driven
════════════════════════════════════════════════════════════ */

/* ── Line Art SVG base ─────────────────────────────────── */
.lineart {
  fill: none;
  stroke: var(--c-gold);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.lineart--ink   { stroke: var(--c-ink); }
.lineart--thin  { stroke-width: .5; }
.lineart--thick { stroke-width: 1.5; }

/* ── Draw-on animation ─────────────────────────────────── */
@keyframes draw-stroke {
  from { stroke-dashoffset: var(--len, 1000); }
  to   { stroke-dashoffset: 0; }
}
.draw {
  stroke-dasharray: var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
}
.draw.is-visible {
  animation: draw-stroke 2.4s var(--ease-silk) forwards;
}
.draw-d1.is-visible { animation-delay: 100ms; }
.draw-d2.is-visible { animation-delay: 300ms; }
.draw-d3.is-visible { animation-delay: 500ms; }
.draw-d4.is-visible { animation-delay: 700ms; }

/* ── Orbits ────────────────────────────────────────────── */
@keyframes orbit { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes orbit-rev { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
.orbit-slow,
.orbit-medium,
.orbit-fast,
.orbit-rev { transform-origin: center; }
/* Infinite orbit animations disabled for perf */

/* ── Pulse ─────────────────────────────────────────────── */
@keyframes pulse-soft {
  0%, 100% { transform: scale(1); opacity: .7; }
  50%       { transform: scale(1.05); opacity: 1; }
}
.pulse-soft { /* off — was infinite */ transform-origin: center; }

@keyframes pulse-ring {
  0%   { transform: scale(.85); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: scale(1.4); opacity: 0; }
}
.pulse-ring { /* off */ }

/* ── Float ─────────────────────────────────────────────── */
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@keyframes float-rot {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-12px) rotate(2deg); }
}
/* Infinite float animations disabled for perf */
.float-slow, .float-medium, .float-tilt { /* off */ }

/* ── Breathing scale ───────────────────────────────────── */
@keyframes breath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.025); }
}
.breath { /* off */ transform-origin: center; }

/* ── Petal bloom ───────────────────────────────────────── */
@keyframes bloom {
  from { transform: scale(.4) rotate(-90deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
.bloom { animation: bloom 1.6s var(--ease-spring) both; transform-origin: center; }

/* ── Soft glow ─────────────────────────────────────────── */
@keyframes glow-pulse {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(176,137,86,0)); }
  50%      { filter: drop-shadow(0 0 18px rgba(176,137,86,.45)); }
}
.glow-pulse { /* off */ }

/* ── Fade primitives ───────────────────────────────────── */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-down { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-right { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scale-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
.anim-fade     { animation: fade-in   var(--dur-slow) var(--ease-out) both; }
.anim-fade-up  { animation: fade-up   var(--dur-slow) var(--ease-out) both; }
.anim-fade-down{ animation: fade-down var(--dur-slow) var(--ease-out) both; }
.anim-fade-right{ animation: fade-right var(--dur-slow) var(--ease-out) both; }
.anim-scale-in { animation: scale-in  var(--dur-slow) var(--ease-spring) both; }

/* ── Hover line underline ──────────────────────────────── */
.hover-line { position: relative; display: inline-block; }
.hover-line::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0; right: 0;
  height: 1px;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-normal) var(--ease-out);
}
.hover-line:hover::after { transform: scaleX(1); }

/* ── Parallax container ────────────────────────────────── */
.parallax {
  overflow: hidden;
  position: relative;
}
.parallax__inner {
  position: absolute; inset: -8% 0;
  width: 100%; height: 116%;
  will-change: transform;
  transition: transform .1s linear;
}

/* ── Shimmer (skeletons) ───────────────────────────────── */
@keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } }
.shimmer {
  background: linear-gradient(90deg, var(--c-line) 25%, rgba(255,255,255,.5) 50%, var(--c-line) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s linear infinite;
}

/* ── Spin / loader ─────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.loader {
  display: inline-block;
  width: 24px; height: 24px;
  border: 2px solid var(--c-line);
  border-top-color: var(--c-gold);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

/* ── Page transition ──────────────────────────────────── */
.page-veil {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  display: flex;
}
.page-veil__panel {
  flex: 1;
  background: var(--c-urushi);
  transform: scaleY(0);
  transform-origin: top;
}
.page-veil.is-entering .page-veil__panel {
  animation: veil-enter 1s var(--ease-silk) forwards;
}
.page-veil.is-leaving .page-veil__panel {
  animation: veil-leave 1s var(--ease-silk) forwards;
  transform-origin: bottom;
}
.page-veil__panel:nth-child(1) { animation-delay: 0ms !important; }
.page-veil__panel:nth-child(2) { animation-delay: 60ms !important; }
.page-veil__panel:nth-child(3) { animation-delay: 120ms !important; }
.page-veil__panel:nth-child(4) { animation-delay: 180ms !important; }
.page-veil__panel:nth-child(5) { animation-delay: 240ms !important; }
@keyframes veil-enter { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes veil-leave { from { transform: scaleY(1); } to { transform: scaleY(0); } }

/* ── Kinetic line (horizontal sweep) ───────────────────── */
@keyframes line-sweep {
  0%   { transform: scaleX(0); transform-origin: left; }
  50%  { transform: scaleX(1); transform-origin: left; }
  51%  { transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}
.line-sweep { /* off */ }

/* ── Type cursor ───────────────────────────────────────── */
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.type-cursor { display: none; /* off */ }

/* ── Magnetic wrap (set by JS) ────────────────────────── */
.magnet {
  display: inline-block;
  transform: translate3d(0,0,0);
  transition: transform var(--dur-normal) var(--ease-out);
  will-change: transform;
}
.magnet__inner {
  display: inline-block;
  transition: transform var(--dur-normal) var(--ease-out);
}

/* ── Scroll progress bar ──────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--c-gold), var(--c-gold-light));
  z-index: 9999;
  transition: width .12s linear;
  pointer-events: none;
}

/* ── Hero ambient circle layers ───────────────────────── */
.ambient {
  position: absolute;
  pointer-events: none;
}
.ambient--ring {
  border-radius: 50%;
  border: 1px solid var(--c-line-gold);
}
.ambient--fill {
  border-radius: 50%;
  background: radial-gradient(circle at center, var(--c-gold-glow), transparent 70%);
  filter: blur(40px);
}

/* ════════════════════════════════════════════════════
   SECTION REVEAL — scroll-driven, performant.
   Add one of these classes + .reveal on any element.
   They animate in when scrolled into view.
════════════════════════════════════════════════════ */
/* Lightweight reveal — opacity-first, minimal transform.
   `will-change` is applied dynamically via JS so we don't pin GPU layers on
   hundreds of elements at once. */
.rv,
.rv-up, .rv-down, .rv-left, .rv-right,
.rv-scale, .rv-blur, .rv-rise {
  opacity: 0;
  transition: opacity .55s var(--ease-silk), transform .55s var(--ease-silk);
}
.rv-up    { transform: translate3d(0, 16px, 0); }
.rv-down  { transform: translate3d(0, -14px, 0); }
.rv-left  { transform: translate3d(-22px, 0, 0); }
.rv-right { transform: translate3d(22px, 0, 0); }
.rv-scale { transform: scale(.98); }
.rv-blur  { filter: blur(6px); transform: translate3d(0, 8px, 0); }
.rv-rise  { transform: translate3d(0, 28px, 0); }

.rv.is-visible,
.rv-up.is-visible, .rv-down.is-visible,
.rv-left.is-visible, .rv-right.is-visible,
.rv-scale.is-visible, .rv-blur.is-visible, .rv-rise.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}
/* Once revealed, drop transition entirely so subsequent re-paints are free
   and the element stops being a candidate for animation. */
.rv.is-revealed,
.rv-up.is-revealed, .rv-down.is-revealed,
.rv-left.is-revealed, .rv-right.is-revealed,
.rv-scale.is-revealed, .rv-blur.is-revealed, .rv-rise.is-revealed,
.rv-stagger.is-revealed > * {
  transition: none !important;
  will-change: auto !important;
}

/* Per-child stagger inside a .rv-stagger container */
.rv-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s var(--ease-silk), transform .9s var(--ease-silk);
}
.rv-stagger.is-visible > *:nth-child(1)  { transition-delay: 50ms;  }
.rv-stagger.is-visible > *:nth-child(2)  { transition-delay: 140ms; }
.rv-stagger.is-visible > *:nth-child(3)  { transition-delay: 230ms; }
.rv-stagger.is-visible > *:nth-child(4)  { transition-delay: 320ms; }
.rv-stagger.is-visible > *:nth-child(5)  { transition-delay: 410ms; }
.rv-stagger.is-visible > *:nth-child(6)  { transition-delay: 500ms; }
.rv-stagger.is-visible > *:nth-child(7)  { transition-delay: 590ms; }
.rv-stagger.is-visible > *:nth-child(n+8){ transition-delay: 680ms; }
.rv-stagger.is-visible > * { opacity: 1; transform: none; }

/* Delay modifiers (optional) */
.rv-d1.is-visible { transition-delay: 100ms; }
.rv-d2.is-visible { transition-delay: 200ms; }
.rv-d3.is-visible { transition-delay: 300ms; }
.rv-d4.is-visible { transition-delay: 400ms; }
.rv-d5.is-visible { transition-delay: 500ms; }

/* Heading mask-reveal — text rises from beneath a clip */
.rv-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
.rv-mask > * {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1.2s var(--ease-silk);
}
.rv-mask.is-visible > * { transform: translateY(0); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rv, .rv-up, .rv-down, .rv-left, .rv-right,
  .rv-scale, .rv-blur, .rv-rise, .rv-mask > *,
  .rv-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* ── Reshuffle product (visible reshuffle on arrival) ──── */
@keyframes card-arrive {
  0%   { opacity: 0; transform: translateY(40px) scale(.95); filter: blur(10px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.reshuffle > * {
  animation: card-arrive 1.1s var(--ease-silk) both;
}
.reshuffle > *:nth-child(1) { animation-delay: 0ms; }
.reshuffle > *:nth-child(2) { animation-delay: 100ms; }
.reshuffle > *:nth-child(3) { animation-delay: 200ms; }
.reshuffle > *:nth-child(4) { animation-delay: 300ms; }
.reshuffle > *:nth-child(5) { animation-delay: 400ms; }
.reshuffle > *:nth-child(6) { animation-delay: 500ms; }
.reshuffle > *:nth-child(7) { animation-delay: 600ms; }
.reshuffle > *:nth-child(8) { animation-delay: 700ms; }

/* ── Tilt on hover (card) ──────────────────────────────── */
.tilt {
  transition: transform var(--dur-slow) var(--ease-out);
  transform-style: preserve-3d;
  will-change: transform;
}

/* ── Word reveal helpers (visible by default, animate ONLY when JS opts-in) ──── */
.line-reveal { display: block; overflow: hidden; }
.line-reveal__inner {
  display: block;
  transform: translateY(0);             /* visible by default — never hide content */
  transition: transform var(--dur-cinema) var(--ease-silk);
}
/* Opt-in slide-up: add data-reveal="line" on the outer to activate */
[data-reveal="line"] > .line-reveal__inner { transform: translateY(110%); }
[data-reveal="line"].is-visible > .line-reveal__inner,
.line-reveal.is-visible > .line-reveal__inner { transform: translateY(0); }

/* ── Heading kinetic underline ────────────────────────── */
.kin-underline {
  position: relative;
  display: inline-block;
}
.kin-underline::after {
  content: '';
  position: absolute;
  bottom: -.15em; left: 0;
  height: 1px;
  width: 100%;
  background: var(--c-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-cinema) var(--ease-silk) .3s;
}
.kin-underline.is-visible::after { transform: scaleX(1); }

/* ── Number ticker ────────────────────────────────────── */
.ticker {
  display: inline-flex;
  vertical-align: bottom;
}

/* ── Image swap on hover ──────────────────────────────── */
.img-swap {
  position: relative;
  overflow: hidden;
}
.img-swap__base, .img-swap__hover {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity var(--dur-slower) var(--ease-out),
              transform var(--dur-slower) var(--ease-out);
}
.img-swap__hover { opacity: 0; transform: scale(1.08); }
.img-swap:hover .img-swap__base { opacity: 0; }
.img-swap:hover .img-swap__hover { opacity: 1; transform: scale(1); }