/* animations.css – Soft Museum Animations */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }

/* Elegant slow fade in for ancient pages */
@keyframes fadeReveal {
  from { opacity: 0; filter: blur(8px); transform: translateY(20px); }
  to   { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* Masterpiece Stone Carving: Lines draw themselves on scroll */
@keyframes chiselReveal {
  from { stroke-dashoffset: 1200; fill: transparent; filter: drop-shadow(0 0 0 transparent); }
  60%  { stroke-dashoffset: 600; fill: transparent; filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.05)); }
  to   { stroke-dashoffset: 0; fill: var(--surface2); filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.08)); }
}

/* Pulsating heartbeat effect for the stone lines */
@keyframes stonePulse {
  0%   { opacity: 0.3; transform: scale(1); filter: drop-shadow(0px 0px 1px var(--accent)); }
  50%  { opacity: 0.8; transform: scale(1.02); filter: drop-shadow(0px 0px 6px var(--accent)); }
  100% { opacity: 0.3; transform: scale(1); filter: drop-shadow(0px 0px 1px var(--accent)); }
}

/* Soft cinematic floating dust (Clean, museum grade) */
@keyframes floatDust {
  0%   { transform: translateY(0) translateX(0) scale(0.8); opacity: 0; filter: blur(2px); }
  30%  { opacity: 0.4; filter: blur(1px); }
  80%  { opacity: 0.4; filter: blur(1px); }
  100% { transform: translateY(-150px) translateX(40px) scale(1.2); opacity: 0; filter: blur(2px); }
}

/* Soft subtle light movement */
@keyframes goldenSunlight {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.15; }
  50%  { transform: translate(5%, 5%) scale(1.1); opacity: 0.3; filter: blur(80px); }
  100% { transform: translate(0, 0) scale(1); opacity: 0.15; }
}

@keyframes ambientStoneShift {
  0%   { transform: translate3d(0, 0, 0) scale(1); opacity: 0.86; }
  50%  { transform: translate3d(0, -1%, 0) scale(1.01); opacity: 0.94; }
  100% { transform: translate3d(0, 1.2%, 0) scale(1.02); opacity: 0.88; }
}

@keyframes lightSweep {
  0%   { transform: translate3d(-8%, -2%, 0) rotate(-10deg) scale(1); opacity: 0.18; }
  50%  { transform: translate3d(2%, 0, 0) rotate(-7deg) scale(1.04); opacity: 0.34; }
  100% { transform: translate3d(10%, 2%, 0) rotate(-5deg) scale(1.02); opacity: 0.2; }
}

@keyframes reliefBreath {
  0%   { opacity: 0.18; transform: translateY(0); }
  50%  { opacity: 0.28; transform: translateY(-4px); }
  100% { opacity: 0.2; transform: translateY(4px); }
}

@keyframes khachkarFloat {
  0% {
    transform: translate3d(0, 0, 0) rotate(var(--float-tilt, 0deg)) scaleX(var(--float-scale-x, 1));
    opacity: 0.12;
  }
  45% {
    transform: translate3d(8px, -18px, 0) rotate(calc(var(--float-tilt, 0deg) + 2deg)) scaleX(var(--float-scale-x, 1));
    opacity: 0.22;
  }
  100% {
    transform: translate3d(-6px, 12px, 0) rotate(calc(var(--float-tilt, 0deg) - 1deg)) scaleX(var(--float-scale-x, 1));
    opacity: 0.14;
  }
}

@keyframes stoneFragmentDrift {
  0% {
    transform: translate3d(0, 0, 0) rotate(var(--float-tilt, 0deg)) scale(0.96);
    opacity: 0.12;
  }
  35% {
    transform: translate3d(10px, -14px, 0) rotate(calc(var(--float-tilt, 0deg) + 4deg)) scale(1);
    opacity: 0.22;
  }
  70% {
    transform: translate3d(-8px, 6px, 0) rotate(calc(var(--float-tilt, 0deg) - 2deg)) scale(1.03);
    opacity: 0.17;
  }
  100% {
    transform: translate3d(4px, 12px, 0) rotate(var(--float-tilt, 0deg)) scale(0.98);
    opacity: 0.13;
  }
}

@keyframes glyphOrbit {
  0% {
    transform: translate3d(0, 0, 0) rotate(var(--glyph-rotate, 0deg)) scale(0.94);
    opacity: 0.1;
  }
  50% {
    transform: translate3d(0, -12px, 0) rotate(calc(var(--glyph-rotate, 0deg) + 10deg)) scale(1.05);
    opacity: 0.18;
  }
  100% {
    transform: translate3d(0, 8px, 0) rotate(calc(var(--glyph-rotate, 0deg) - 8deg)) scale(0.96);
    opacity: 0.12;
  }
}

@keyframes sectionAura {
  0% {
    transform: translate3d(0, 0, 0) scale(0.98);
    opacity: 0.12;
  }
  50% {
    transform: translate3d(2%, -3%, 0) scale(1.06);
    opacity: 0.24;
  }
  100% {
    transform: translate3d(-1%, 2%, 0) scale(1.01);
    opacity: 0.16;
  }
}

@keyframes sectionTextureDrift {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0.08;
  }
  50% {
    transform: translate3d(0, -12px, 0);
    opacity: 0.16;
  }
  100% {
    transform: translate3d(0, 8px, 0);
    opacity: 0.1;
  }
}

/* Parallax slow movement */
@keyframes parallaxSlow {
  from { transform: translateY(0); }
  to   { transform: translateY(80px); }
}

/* ── AOS (Animate On Scroll) ─────────────────────────── */
[data-aos] {
  opacity: 0;
  transition-property: opacity, transform, filter;
  transition-duration: 1.2s;
  transition-timing-function: ease-out;
}
[data-aos="fade-up"]    { transform: translateY(40px); }
[data-aos="zoom-in"]    { transform: scale(0.98); filter: blur(4px); }

[data-aos].aos-in {
  opacity: 1; transform: none; filter: blur(0);
}

/* Elegant slow fade for texture background (NO UP/DOWN MOVEMENT) */
@keyframes pulseStoneBg {
  0%   { opacity: 0.04; }
  50%  { opacity: 0.08; }
  100% { opacity: 0.04; }
}

/* ── Image Hover Zoom Effects (Museum Style) ────────── */
.img-zoom-wrap {
  overflow: hidden;
  border-radius: var(--radius);
  position: relative;
  transition: transform 0.6s ease-out, box-shadow 0.8s ease;
}
.img-zoom-wrap img, .img-zoom-wrap .bg-img {
  transition: transform 1.5s ease-out;
}
.img-zoom-wrap:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.img-zoom-wrap:hover img, .img-zoom-wrap:hover .bg-img {
  transform: scale(1.05); /* Gentle zoom */
}
/* Golden Frame Glow on Hover */
.img-zoom-wrap::after {
  content: '';
  position: absolute; inset: 0;
  border: 1px solid rgba(184, 115, 51, 0); /* Terracotta */
  transition: border-color 0.8s ease;
  pointer-events: none;
  border-radius: inherit;
}
.img-zoom-wrap:hover::after {
  border-color: rgba(184, 115, 51, 0.4);
}

/* Helper */
.animate-in-1 { animation: fadeReveal 1.2s ease-out both; }
.animate-in-2 { animation: fadeReveal 1.2s ease-out 0.2s both; }
.animate-in-3 { animation: fadeReveal 1.2s ease-out 0.4s both; }
.animate-in-4 { animation: fadeReveal 1.2s ease-out 0.6s both; }

@media (prefers-reduced-motion: reduce) {
  .about::before,
  .about::after,
  .portfolio::before,
  .portfolio::after,
  .mission::before,
  .mission::after,
  .process::before,
  .process::after,
  .masterclasses::before,
  .masterclasses::after,
  .press::before,
  .press::after,
  .charity::before,
  .charity::after,
  .contact::before,
  .contact::after {
    animation: none !important;
  }
}