/* ═══════════════════════════════════════════════════
   ANIMATION LIBRARY — Coral Bells
   All scroll-reveal, Ken Burns, image panel animations,
   marquee-pause, letter-stagger, counter styles
═══════════════════════════════════════════════════ */

/* ─── 1. HERO STAGGERED FADE-UP ─── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-eyebrow.animate   { animation: fadeUp 1s   cubic-bezier(.25,.46,.45,.94) .3s  both; }
.hero-title.animate     { animation: fadeUp 1.1s cubic-bezier(.25,.46,.45,.94) .55s both; }
.hero-subtitle.animate  { animation: fadeUp .9s  cubic-bezier(.25,.46,.45,.94) .85s both; }

/* ─── 2. SCROLL-REVEAL (fade-up / slide-in) ─── */
.reveal,
.reveal-left,
.reveal-right {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal       { transform: translateY(30px); }
.reveal-left  { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }

.reveal.visible,
.reveal-left.visible,
.reveal-right.visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* ─── 3. STAGGER CHILDREN ─── */
.stagger-children > .reveal,
.stagger-children > .reveal-left,
.stagger-children > .reveal-right {
  transition-delay: calc(var(--stagger-i, 0) * 0.12s);
}

/* ─── 4. IMAGE KEN BURNS / SCALE REVEAL ─── */
.image-wrap {
  overflow: hidden;
  position: relative;
}
.image-wrap img,
.image-wrap .image-placeholder {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transform: scale(1.08);
  transition: transform 2s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.image-wrap.visible img,
.image-wrap.visible .image-placeholder {
  transform: scale(1);
}
/* Continuous Ken Burns for hero images */
@keyframes kenBurns {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.ken-burns img {
  animation: kenBurns 18s ease-in-out infinite;
}

/* ─── 5. CINEMATIC PANEL SLIDE-IN (Reference animation) ─── */
/*
  .img-panel-wrap  — outer clipping shell (overflow:hidden)
  .img-panel-inner — the actual image container that slides
*/
.img-panel-wrap {
  overflow: hidden;
  position: relative;
}

/* LEFT panel: slides from the left */
.img-panel-wrap.from-left .img-panel-inner {
  transform: translateX(-102%);
  opacity: 0;
  transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.9s ease;
  will-change: transform, opacity;
}
.img-panel-wrap.from-left.visible .img-panel-inner {
  transform: translateX(0);
  opacity: 1;
}

/* RIGHT panel: slides from the right */
.img-panel-wrap.from-right .img-panel-inner {
  transform: translateX(102%);
  opacity: 0;
  transition: transform 1.3s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.9s ease;
  will-change: transform, opacity;
}
.img-panel-wrap.from-right.visible .img-panel-inner {
  transform: translateX(0);
  opacity: 1;
}

/* BOTTOM panel: slides up (for gallery items) */
.img-panel-wrap.from-bottom .img-panel-inner {
  transform: translateY(30px);
  opacity: 0;
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.8s ease;
  will-change: transform, opacity;
}
.img-panel-wrap.from-bottom.visible .img-panel-inner {
  transform: translateY(0);
  opacity: 1;
}

/* Inner image: Ken Burns settle — scales from 1.08 → 1 as it enters */
.img-panel-inner {
  width: 100%;
  height: 100%;
  position: relative;
}
.img-panel-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.08);
  transition: transform 1.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
  will-change: transform;
}
.img-panel-wrap.visible .img-panel-inner img {
  transform: scale(1);
}

/* ─── 6. SPLIT SECTION IMAGES — apply panel animation ─── */
/* The split-img is already overflow:hidden via styles.css */
.split-img {
  /* override the plain hover zoom from styles.css — we handle it here */
}
.split-img .img-panel-inner img {
  /* Allow the hover scale to still work ON TOP of the entrance settle */
  transition: transform 1.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
.split-img:hover .img-panel-inner img {
  transform: scale(1.04);
}

/* ─── 7. WORK CARD ENTRANCE ─── */
.work-card, .project-card {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, border-color, box-shadow;
}
.work-card.card-visible, .project-card.card-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── 8. GALLERY ITEM ENTRANCE ─── */
.gallery-item {
  /* gallery-item wraps are also img-panel-wraps — handled by §5 above */
}

/* ─── 9. GALLERY HOVER ─── */
.work-card .work-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,12,12,.85) 0%, transparent 55%);
  opacity: 0;
  transition: opacity .55s ease;
  display: flex; align-items: flex-end;
  padding: 2rem;
}
.work-card:hover .work-overlay { opacity: 1; }
.work-card .work-overlay .overlay-title {
  font-family: var(--serif);
  font-size: 1.2rem; font-weight: 300;
  color: var(--white); letter-spacing: .04em;
  transform: translateY(18px);
  transition: transform .5s cubic-bezier(.25,.46,.45,.94);
}
.work-card:hover .work-overlay .overlay-title {
  transform: translateY(0);
}

/* ─── 10. INFINITE MARQUEE (PAUSE ON HOVER) ─── */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee-track {
  display: inline-flex; align-items: center;
  animation: marqueeScroll 30s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}
@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ─── 11. COUNTER COUNT-UP ─── */
.count-up {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* ─── 12. LETTER-BY-LETTER LOGO ─── */
.letter-logo .letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.25,.46,.45,.94);
}
.letter-logo.animate .letter {
  opacity: 1;
  transform: translateY(0);
}

/* ─── 13. SMOOTH GRADIENT REVEAL LINE ─── */
@keyframes revealLine {
  0%   { width: 0; }
  100% { width: 100%; }
}
.reveal-line::after {
  content: '';
  display: block;
  height: 1px;
  background: var(--gold);
  animation: revealLine 1.2s cubic-bezier(.25,.46,.45,.94) both;
}

/* ─── 14. HERO PARALLAX WRAPPER ─── */
/* Hero media already has will-change:transform from styles.css */

/* ═══════════════════════════════════════════════════
   16. SPLIT-ANIM — Our Story & Design Philosophy
       Matches reference: full-panel slide + image scale
       + nth-child stagger on text side
═══════════════════════════════════════════════════ */

/*
 * The .split grid needs overflow:hidden so the sliding
 * panel is clipped at the container edge (not the viewport).
 * The image column slides AS A WHOLE — not an inner wrapper.
 */
.split-anim {
  overflow: hidden; /* clips the translating image column */
}

/* ── IMAGE PANEL: slides in as a full column ── */
/*
 * #about: text is left, image is right → image slides from right
 * #principal: image is left, text is right → image slides from left
 * We use :first-child / :last-child to detect position in grid.
 */

/* Image on the RIGHT of the grid → slide from right */
.split-anim .split-img:last-child,
.split-anim .split-img:not(:first-child) {
  transform: translateX(100%);
  opacity: 0;
  transition:
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    opacity   0.7s ease;
  will-change: transform, opacity;
}

/* Image on the LEFT of the grid → slide from left */
.split-anim .split-img:first-child {
  transform: translateX(-100%);
  opacity: 0;
  transition:
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    opacity   0.7s ease;
  will-change: transform, opacity;
}

/* ── Active: panel slides to position ── */
.split-anim.sa-active .split-img {
  transform: translateX(0) !important;
  opacity: 1 !important;
}

/* ── Image INSIDE the panel: Ken Burns scale settle (1.08 → 1) ── */
/* This runs simultaneously with the panel slide */
.split-anim .split-img img {
  transform: scale(1.08);
  transition: transform 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
  will-change: transform;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.split-anim.sa-active .split-img img {
  transform: scale(1);
}

/* ── Hover: gentle softness — no sharp motion ── */
.split-anim .split-img:hover img {
  transform: scale(1.035);
  transition-duration: 1.4s;
  transition-delay: 0s;
}

/* ══════════════════════════════
   TEXT SIDE — staggered children
   Matches reference .ac pattern:
   translateY(26px) → 0, per-child delays
══════════════════════════════ */

/* All direct children of .split-text start hidden */
.split-anim .split-text > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity  1s cubic-bezier(0.16, 1, 0.3, 1),
    transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

/* Exact reference stagger delays — nth-child on each element */
.split-anim .split-text > *:nth-child(1) { transition-delay: 0.08s; }
.split-anim .split-text > *:nth-child(2) { transition-delay: 0.18s; }
.split-anim .split-text > *:nth-child(3) { transition-delay: 0.28s; }
.split-anim .split-text > *:nth-child(4) { transition-delay: 0.38s; }
.split-anim .split-text > *:nth-child(5) { transition-delay: 0.48s; }
.split-anim .split-text > *:nth-child(6) { transition-delay: 0.58s; }

/* Per-element tuning for that luxury layered feel */
.split-anim .split-text > .eyebrow       { transform: translateY(10px); transition-duration: 0.8s; }
.split-anim .split-text > .section-title { transform: translateY(22px); transition-duration: 1.2s; }
.split-anim .split-text > .quote         { transform: translateY(15px); transition-duration: 1.1s; }
.split-anim .split-text > .body-text     { transform: translateY(12px); transition-duration: 1s; }
.split-anim .split-text > .cta-link      { transform: translateY(10px); transition-duration: 0.9s; }

/* ── Active: text children reveal ── */
.split-anim.sa-active .split-text > * {
  opacity: 1;
  transform: translateY(0);
}

/* ── Eyebrow gold accent line draws itself in ── */
.split-anim .split-text > .eyebrow::after {
  content: '';
  display: block;
  height: 1px;
  width: 0;
  background: var(--gold);
  margin-top: 6px;
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.4s;
}
.split-anim.sa-active .split-text > .eyebrow::after {
  width: 42px;
}

/* ─── 16. DECORATIVE CIRCLE MOTION ─── */
@keyframes ambientFloat {
  0% { transform: translate(0, 0) scale(1); opacity: 0.8; }
  50% { transform: translate(-8px, 12px) scale(1.05); opacity: 1; }
  100% { transform: translate(12px, -8px) scale(0.96); opacity: 0.75; }
}
.story-ambient-glow {
  animation: ambientFloat 14s ease-in-out infinite alternate;
}

/* ─── 17. RESPONSIVE FALLBACKS ─── */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right,
  .image-wrap img, .image-wrap .image-placeholder,
  .img-panel-wrap .img-panel-inner,
  .img-panel-wrap .img-panel-inner img,
  .work-card,
  .split-anim .split-text > *,
  .split-anim .split-img,
  .split-anim .split-img img {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .marquee-track { animation: none !important; }
  .letter-logo .letter { opacity: 1 !important; transform: none !important; }
  .split-anim .split-text > .eyebrow::after { width: 42px !important; }
}