/* ==========================================================================
   Lumen Arts Co. — Animation system
   Yeniden kullanılabilir reveal sınıfları + hero sekansı.
   JS devre dışıysa (.no-js) tüm içerik anında görünür.
   ========================================================================== */

.reveal,
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0;
  transition:
    opacity var(--dur-section) var(--ease-out),
    transform var(--dur-section) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal-up { transform: translate3d(0, 28px, 0); }
.reveal-left { transform: translate3d(-28px, 0, 0); }
.reveal-right { transform: translate3d(28px, 0, 0); }
.reveal-scale { transform: scale(.96); }

.reveal.is-visible,
.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible,
.reveal-scale.is-visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* --- Stagger ----------------------------------------------------------- */
.stagger-item {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity var(--dur-card) var(--ease-out),
    transform var(--dur-card) var(--ease-out);
}

.stagger-group.is-visible .stagger-item {
  opacity: 1;
  transform: none;
}

.stagger-group.is-visible .stagger-item:nth-child(1)  { transition-delay: 0ms; }
.stagger-group.is-visible .stagger-item:nth-child(2)  { transition-delay: 70ms; }
.stagger-group.is-visible .stagger-item:nth-child(3)  { transition-delay: 140ms; }
.stagger-group.is-visible .stagger-item:nth-child(4)  { transition-delay: 210ms; }
.stagger-group.is-visible .stagger-item:nth-child(5)  { transition-delay: 280ms; }
.stagger-group.is-visible .stagger-item:nth-child(6)  { transition-delay: 350ms; }
.stagger-group.is-visible .stagger-item:nth-child(7)  { transition-delay: 420ms; }
.stagger-group.is-visible .stagger-item:nth-child(8)  { transition-delay: 480ms; }
.stagger-group.is-visible .stagger-item:nth-child(n+9) { transition-delay: 540ms; }

/* --- Text reveal (kelime/satır bazlı) ---------------------------------- */
.text-reveal { display: block; }

.text-reveal .tr-line {
  display: block;
  overflow: hidden;
}

.text-reveal .tr-word {
  display: inline-block;
  transform: translate3d(0, 105%, 0);
  transition: transform 620ms var(--ease-out);
  transition-delay: calc(var(--w, 0) * 45ms + var(--l, 0) * 90ms);
  will-change: transform;
}

.text-reveal.is-visible .tr-word { transform: none; will-change: auto; }

/* --- Image reveal (mask) ----------------------------------------------- */
.image-reveal {
  position: relative;
  overflow: hidden;
}

.image-reveal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--background);
  transform-origin: right;
  transform: scaleX(1);
  transition: transform 760ms var(--ease-inout);
  transition-delay: var(--reveal-delay, 0ms);
  z-index: 2;
  pointer-events: none;
}

.image-reveal > img,
.image-reveal > picture > img {
  transform: scale(1.08);
  transition: transform 1000ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.image-reveal.is-visible::after { transform: scaleX(0); }
.image-reveal.is-visible > img,
.image-reveal.is-visible > picture > img { transform: scale(1); }

/* --- Hero sequence ----------------------------------------------------- */
.hero-seq > * {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  animation: hero-in var(--dur-hero) var(--ease-out) forwards;
}

.hero-seq > .hero__eyebrow { animation-delay: 60ms; }
.hero-seq > .hero__title   { animation-delay: 140ms; }
.hero-seq > .hero__text    { animation-delay: 480ms; }
.hero-seq > .hero__actions { animation-delay: 600ms; }
.hero-seq > .hero__meta    { animation-delay: 680ms; }

.hero__media {
  opacity: 0;
  animation: hero-media-in 900ms var(--ease-out) 700ms forwards;
}

.hero__scroll {
  opacity: 0;
  animation: hero-in 600ms var(--ease-out) 950ms forwards;
}

@keyframes hero-in {
  to { opacity: 1; transform: none; }
}

@keyframes hero-media-in {
  from { opacity: 0; transform: translate3d(0, 26px, 0) scale(.985); }
  to { opacity: 1; transform: none; }
}

/* Scroll göstergesi çizgisi */
.scroll-indicator {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: .72rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
}

.scroll-indicator__line {
  position: relative;
  display: block;
  width: 1px;
  height: 46px;
  background: var(--border);
  overflow: hidden;
}

.scroll-indicator__line::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: 40%;
  background: var(--accent);
  animation: scroll-hint 2.1s var(--ease-inout) infinite;
}

@keyframes scroll-hint {
  0% { transform: translateY(-100%); }
  60%, 100% { transform: translateY(250%); }
}

/* --- Magnetic button --------------------------------------------------- */
.magnetic { will-change: transform; }

/* --- Parallax ---------------------------------------------------------- */
.parallax { will-change: transform; }

/* --- No-JS güvenliği --------------------------------------------------- */
.no-js .reveal,
.no-js .reveal-up,
.no-js .reveal-left,
.no-js .reveal-right,
.no-js .reveal-scale,
.no-js .stagger-item,
.no-js .hero-seq > *,
.no-js .hero__media,
.no-js .hero__scroll {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.no-js .image-reveal::after { display: none; }
.no-js .image-reveal > img { transform: none; }
.no-js .text-reveal .tr-word { transform: none; }

/* --- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal,
  .reveal-up,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .stagger-item,
  .hero-seq > *,
  .hero__media,
  .hero__scroll {
    opacity: 1 !important;
    transform: none !important;
  }

  .image-reveal::after { display: none; }
  .image-reveal > img,
  .image-reveal > picture > img { transform: none !important; }
  .text-reveal .tr-word { transform: none !important; }

  .marquee__track { animation: none !important; }
  .scroll-indicator__line::after { animation: none !important; }
  .skeleton { animation: none !important; }

  .project-card__media img,
  .post-card__media img { transition: none !important; }
}

/* JS tarafından da kapatılabilsin (kullanıcı tercihi okunduğunda) */
body.reduced-motion .marquee__track { animation: none !important; }
body.reduced-motion .scroll-indicator__line::after { animation: none !important; }