/* ============================================================
   Case Study Animations — cs-animated.css
   Scroll-driven animations, parallax, split-text, gallery.
   Layered on top of portfolio.css base styles.
   ============================================================ */

/* ── Scroll progress bar ──────────────────────────────────── */
.cs-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
  z-index: 9999;
  pointer-events: none;
}
.cs-progress__bar {
  height: 100%;
  background: var(--ink);
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
}
[data-theme="dark"] .cs-progress__bar {
  background: rgba(255,255,255,0.7);
}

/* ── Title fade-up reveal ────────────────────────────────── */
.cs-anim-title {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.cs-anim-title.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Label slide-in ───────────────────────────────────────── */
.cs-anim-label {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.cs-anim-label.is-revealed {
  opacity: 1;
  transform: translateX(0);
}

/* ── Intro text fade-up ───────────────────────────────────── */
.cs-anim-intro {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease 0.25s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}
.cs-anim-intro.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Meta stagger ─────────────────────────────────────────── */
.cs-anim-meta .cs-meta-item {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.cs-anim-meta.is-revealed .cs-meta-item {
  opacity: 1;
  transform: translateY(0);
}
.cs-anim-meta.is-revealed .cs-meta-item:nth-child(1) { transition-delay: 0.05s; }
.cs-anim-meta.is-revealed .cs-meta-item:nth-child(2) { transition-delay: 0.12s; }
.cs-anim-meta.is-revealed .cs-meta-item:nth-child(3) { transition-delay: 0.19s; }
.cs-anim-meta.is-revealed .cs-meta-item:nth-child(4) { transition-delay: 0.26s; }

/* ── Parallax image containers ────────────────────────────── */
.cs-parallax {
  overflow: hidden;
  border-radius: var(--radius);
}
.cs-parallax img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  will-change: transform;
  transform: translateY(-10%);
}

/* ── Image scale reveal ───────────────────────────────────── */
.cs-scale-reveal {
  overflow: hidden;
  border-radius: var(--radius);
}
.cs-scale-reveal img {
  transform: scale(1.15);
  opacity: 0;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.8s ease;
  will-change: transform, opacity;
}
.cs-scale-reveal.is-revealed img {
  transform: scale(1);
  opacity: 1;
}

/* ── Template grid (replaces carousel) ───────────────────── */
.cs-template-grid {
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.cs-template-grid figure {
  margin: 0;
}
.cs-template-grid .cs-fig-frame,
.cs-template-grid .cs-fig-frame--wide {
  border-radius: 12px;
  overflow: hidden;
}

/* Full-width items */
.cs-tg-full {
  width: 100%;
}

/* Side-by-side pairs */
.cs-tg-pair {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media (min-width: 768px) {
  .cs-tg-pair {
    flex-direction: row;
    gap: 32px;
  }
  .cs-tg-pair > figure {
    flex: 1;
    min-width: 0;
  }
}

/* ── Counter animation ────────────────────────────────────── */
.cs-count {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ── Section divider lines ────────────────────────────────── */
.cs-divider {
  border: none;
  height: 1px;
  background: var(--line);
  margin: 0;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-theme="dark"] .cs-divider {
  background: var(--line-dk);
}
.cs-divider.is-revealed {
  transform: scaleX(1);
}

/* ── Stagger grid reveal (design system 2×2) ──────────────── */
.cs-stagger-grid figure {
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.cs-stagger-grid.is-revealed figure {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.cs-stagger-grid.is-revealed figure:nth-child(1) { transition-delay: 0s; }
.cs-stagger-grid.is-revealed figure:nth-child(2) { transition-delay: 0.1s; }
.cs-stagger-grid.is-revealed figure:nth-child(3) { transition-delay: 0.2s; }
.cs-stagger-grid.is-revealed figure:nth-child(4) { transition-delay: 0.3s; }

/* ── Image clip-path reveal (zoom + unbox) ────────────────── */
.cs-clip-reveal {
  overflow: hidden;
  border-radius: var(--radius);
}
.cs-clip-reveal img {
  transform: scale(1.12);
  opacity: 0;
  clip-path: inset(8%);
  transition: transform 0.8s ease,
              opacity 0.6s ease,
              clip-path 0.8s ease;
  will-change: transform, opacity, clip-path;
}
.cs-clip-reveal.is-revealed img {
  transform: scale(1);
  opacity: 1;
  clip-path: inset(0%);
}

/* ── 3D tilt on hover ─────────────────────────────────────── */
.cs-tilt {
  perspective: 1200px;
}
.cs-tilt__inner {
  transition: transform 600ms ease;
  transform-style: preserve-3d;
  will-change: transform;
}
.cs-tilt:hover .cs-tilt__inner {
  /* JS sets --tilt-x and --tilt-y */
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
}

/* ── Hero title scroll shrink ─────────────────────────────── */
.cs-hero-shrink {
  will-change: transform, opacity;
  transform-origin: left top;
}

/* ── Scroll-linked text fade ──────────────────────────────── */
.cs-scroll-fade {
  will-change: opacity;
  transition: opacity 0.1s linear;
}

/* ── Floating caption labels ──────────────────────────────── */
@keyframes csFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.cs-float-label {
  animation: csFloat 3s ease-in-out infinite;
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .cs-progress { display: none; }
  .cs-anim-title { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cs-anim-label { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cs-anim-intro { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cs-anim-meta .cs-meta-item { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cs-parallax img { height: 100% !important; transform: none !important; }
  .cs-scale-reveal img { transform: none !important; opacity: 1 !important; transition: none !important; }
  .cs-divider { transform: scaleX(1) !important; transition: none !important; }
  .cs-stagger-grid figure { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cs-clip-reveal img { transform: none !important; opacity: 1 !important; clip-path: none !important; transition: none !important; }
  .cs-tilt__inner { transform: none !important; transition: none !important; }
  .cs-hero-shrink { transform: none !important; }
  .cs-float-label { animation: none !important; }
  body::before { filter: blur(1.2px) saturate(118%) contrast(110%) !important; }
}