/* ==========================================================
   ÉKLA — Animations
   animations.css
   ========================================================== */

/* ----------------------------------------------------------
   KEYFRAMES
   ---------------------------------------------------------- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes lineGrow {
  from { width: 0; }
  to   { width: 80px; }
}
@keyframes lineGrowFull {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
@keyframes pulseRing {
  0%,100% { box-shadow: 0 0 0 0 rgba(196,144,64,0); }
  50%      { box-shadow: 0 0 0 8px rgba(196,144,64,0.12); }
}
@keyframes rotateSlow {
  from { transform: translateY(-50%) rotate(0deg); }
  to   { transform: translateY(-50%) rotate(360deg); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* ----------------------------------------------------------
   PAGE LOAD — HERO ENTRANCE
   ---------------------------------------------------------- */
.page-loaded .hero__label    { animation: slideDown 0.8s var(--ease) 0.15s both; }
.page-loaded .hero__headline { animation: slideUp  1.1s var(--ease) 0.3s  both; }
.page-loaded .hero__rule     { animation: lineGrow 0.9s var(--ease) 0.7s  both; }
.page-loaded .hero__sub      { animation: slideUp  0.9s var(--ease) 0.65s both; }
.page-loaded .hero__actions  { animation: slideUp  0.9s var(--ease) 0.85s both; }
.page-loaded .hero__scroll   { animation: fadeIn   1s   var(--ease) 1.2s  both; }
.page-loaded .hero__bottom-bar { animation: slideUp 0.8s var(--ease) 1s   both; }

/* Inner page hero */
.page-loaded .page-hero__tag   { animation: slideDown 0.7s var(--ease) 0.2s  both; }
.page-loaded .page-hero__title { animation: slideUp   1s   var(--ease) 0.35s both; }
.page-loaded .page-hero__desc  { animation: slideUp   0.8s var(--ease) 0.6s  both; }

/* ----------------------------------------------------------
   LINK UNDERLINE DRAW
   ---------------------------------------------------------- */
.link-draw {
  position: relative; display: inline-block;
}
.link-draw::after {
  content: ''; position: absolute;
  bottom: -2px; left: 0; width: 0; height: 1px;
  background-color: currentColor;
  transition: width var(--t-slow) var(--ease);
}
.link-draw:hover::after { width: 100%; }

/* ----------------------------------------------------------
   IMAGE ZOOM WRAPPER
   ---------------------------------------------------------- */
.img-zoom { overflow: hidden; }
.img-zoom img {
  transition: transform var(--t-xslow) var(--ease);
}
.img-zoom:hover img { transform: scale(1.05); }

/* ----------------------------------------------------------
   CARD LIFT
   ---------------------------------------------------------- */
.card-lift {
  transition: transform var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease);
}
.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(20,16,12,0.15);
}

/* ----------------------------------------------------------
   NUMBER COUNTER FILL
   ---------------------------------------------------------- */
.counter-wrap { display: inline-block; }

/* ----------------------------------------------------------
   HORIZONTAL SCROLL HINT
   ---------------------------------------------------------- */
.scroll-hint {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--tx-xs); color: var(--c-warm-gray);
  text-transform: uppercase; letter-spacing: 0.1em;
  animation: slideRight 0.8s var(--ease) 1.4s both;
}
.scroll-hint::after {
  content: ''; display: block;
  width: 40px; height: 1px; background-color: var(--c-warm-gray);
  animation: lineGrowFull 0.8s var(--ease) 1.4s both;
  transform-origin: left;
}

/* ----------------------------------------------------------
   ROTATING DECO CIRCLE (hero)
   ---------------------------------------------------------- */
.hero__deco-circle {
  animation: rotateSlow 90s linear infinite;
}

/* ----------------------------------------------------------
   SKELETON LOADING
   ---------------------------------------------------------- */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--c-ivory-2) 25%,
    var(--c-ivory-3) 50%,
    var(--c-ivory-2) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* ----------------------------------------------------------
   TOOLTIP ON HOVER
   ---------------------------------------------------------- */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  background: var(--c-dark); color: var(--c-ivory);
  font-size: var(--tx-xs); white-space: nowrap;
  padding: 0.35rem 0.7rem; border-radius: 2px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-fast) var(--ease);
}
[data-tooltip]:hover::after { opacity: 1; }

/* ----------------------------------------------------------
   PULSE CTA (attention)
   ---------------------------------------------------------- */
.btn--pulse { animation: pulseRing 2.5s ease-in-out infinite; }

/* ----------------------------------------------------------
   SCALE IN (modals, overlays)
   ---------------------------------------------------------- */
.scale-in { animation: scaleIn 0.4s var(--ease) both; }

/* ----------------------------------------------------------
   WORD REVEAL (line-by-line)
   ---------------------------------------------------------- */
.word-reveal { overflow: hidden; }
.word-reveal__inner {
  display: block;
  transform: translateY(100%);
  transition: transform var(--t-slow) var(--ease);
}
.word-reveal.is-visible .word-reveal__inner { transform: translateY(0); }
.word-reveal:nth-child(2) .word-reveal__inner { transition-delay: 0.12s; }
.word-reveal:nth-child(3) .word-reveal__inner { transition-delay: 0.24s; }

/* ----------------------------------------------------------
   PREFERS 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;
  }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .stagger > * { opacity: 1; transform: none; }
  .hero__deco-circle { animation: none; }
}