/* ==========================================================================
   SiratSync Animations & Micro-Interactions
   Calm, purposeful motion — slow ambience, soft reveals, tactile feedback
   ========================================================================== */

/* Registered property: lets a conic-gradient angle animate smoothly */
@property --ss-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* ─── Keyframes ─────────────────────────────────────────────────── */
@keyframes ssReveal {
  from { opacity: 0; transform: translateY(28px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

@keyframes ssRevealScale {
  from { opacity: 0; transform: translateY(24px) scale(0.955); filter: blur(8px); }
  to   { opacity: 1; transform: translateY(0) scale(1);        filter: blur(0); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pulseGlow {
  0%   { box-shadow: 0 0 0 0 rgba(201, 168, 112, 0.4); }
  70%  { box-shadow: 0 0 0 12px rgba(201, 168, 112, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 168, 112, 0); }
}

@keyframes ssDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(3vmax, -2vmax, 0) scale(1.07); }
  100% { transform: translate3d(-3vmax, 2vmax, 0) scale(1.02); }
}

@keyframes ssBreathe {
  0%   { opacity: 0.65; transform: scale(0.96); }
  100% { opacity: 1;    transform: scale(1.06); }
}

@keyframes ssFloatY {
  0%   { translate: 0 0; }
  100% { translate: 0 -10px; }
}

@keyframes ssRing {
  0%   { transform: scale(1);    opacity: 0.55; }
  100% { transform: scale(1.16); opacity: 0; }
}

@keyframes ssSpin {
  to { --ss-angle: 360deg; }
}

@keyframes ssLineGrow {
  from { width: 0; opacity: 0; }
  to   { width: 14px; opacity: 1; }
}

@keyframes ssDot {
  0%, 100% { opacity: 0.55; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.15); }
}

@keyframes ssLattice {
  to { background-position: 120px 120px; }
}

@keyframes ssProgress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ─── Scroll Reveal (keyframe-driven, so hover transitions stay free) ─ */
.reveal-on-scroll,
.reveal-scale {
  opacity: 0;
  transform: translateY(26px);
  will-change: opacity, transform;
}

.reveal-scale {
  transform: translateY(24px) scale(0.955);
}

.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: none;
  filter: none;
  animation: ssReveal var(--ss-duration-reveal) var(--ss-ease-spring) var(--rd, 0ms) backwards;
}

.reveal-scale.is-revealed {
  opacity: 1;
  transform: none;
  filter: none;
  animation: ssRevealScale 1s var(--ss-ease-spring) var(--rd, 0ms) backwards;
}

/* Without JavaScript, never hide content */
html:not(.js) .reveal-on-scroll,
html:not(.js) .reveal-scale {
  opacity: 1;
  transform: none;
}

.reveal-delay-1 { --rd: 100ms; }
.reveal-delay-2 { --rd: 200ms; }
.reveal-delay-3 { --rd: 300ms; }
.reveal-delay-4 { --rd: 400ms; }

/* Automatic stagger for siblings revealed together */
.bento-grid > .reveal-on-scroll:nth-child(3n + 2),
.metrics-grid > .reveal-on-scroll:nth-child(2),
.footer-grid > .reveal-on-scroll:nth-child(2) { --rd: 90ms; }

.bento-grid > .reveal-on-scroll:nth-child(3n + 3),
.metrics-grid > .reveal-on-scroll:nth-child(3),
.footer-grid > .reveal-on-scroll:nth-child(3) { --rd: 180ms; }

.metrics-grid > .reveal-on-scroll:nth-child(4),
.footer-grid > .reveal-on-scroll:nth-child(4) { --rd: 270ms; }

/* ─── Ambient atmosphere: slow, barely-there light drifting behind ─ */
body::before {
  content: "";
  position: fixed;
  inset: -20vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40vmax 40vmax at 14% 22%, rgba(var(--ss-gold-rgb), 0.11), transparent 62%),
    radial-gradient(34vmax 34vmax at 86% 72%, rgba(var(--ss-accent-rgb), 0.075), transparent 62%),
    radial-gradient(28vmax 28vmax at 62% 8%, rgba(var(--ss-sage-rgb), 0.07), transparent 62%);
  animation: ssDrift 42s ease-in-out infinite alternate;
  will-change: transform;
}

[data-theme="dark"] body::before {
  opacity: 0.75;
}

/* ─── Micro-Interactions ────────────────────────────────────────── */
.hover-lift {
  transition: transform var(--ss-duration-normal) var(--ss-ease-spring),
              box-shadow var(--ss-duration-normal) var(--ss-ease-spring);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--ss-shadow-md);
}

.hover-glow {
  transition: border-color var(--ss-duration-fast), box-shadow var(--ss-duration-fast);
}

.hover-glow:hover {
  border-color: rgba(201, 168, 112, 0.5);
  box-shadow: 0 0 20px rgba(201, 168, 112, 0.15);
}

/* Utility: slow vertical float (uses `translate`, so it never fights hover transforms) */
.float-slow {
  animation: ssFloatY 7s var(--ss-ease-soft) infinite alternate;
}

/* ─── Page entrance & scroll progress ───────────────────────────── */
html.js body {
  opacity: 0;
  transition: opacity 0.45s var(--ss-ease-out);
}

html.js body.is-ready {
  opacity: 1;
}

.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  width: var(--scroll-progress, 0%);
  background: linear-gradient(90deg, var(--ss-accent), var(--ss-gold), var(--ss-accent));
  box-shadow: 0 0 10px rgba(var(--ss-gold-rgb), 0.55);
  transition: width 80ms linear;
}

/* Native scroll-linked progress where supported — smoother than JS */
@supports (animation-timeline: scroll()) {
  .site-header::after {
    width: 100%;
    transform-origin: left center;
    transition: none;
    animation: ssProgress linear both;
    animation-timeline: scroll(root block);
  }
}

/* ─── Mobile: lighter ambience for battery & smoothness ─────────── */
@media (max-width: 768px) {
  body::before {
    animation: none;
  }
}

/* ─── Accessibility: Reduced Motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal-on-scroll,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
  }

  body::before,
  .float-slow,
  .marquee-forward,
  .marquee-backward,
  .floating-card {
    animation: none !important;
  }

  .site-header::after {
    animation: none !important;
    transform: none;
    width: var(--scroll-progress, 0%);
  }

  html.js body,
  html.js body.is-ready {
    opacity: 1;
    transition: none !important;
  }
}