/* ============================================================
   ANIMATIONS — Casa Lobo Cigars
   ============================================================ */

/* ── Hero initial states — hidden until gate is dismissed ── */
#hero-eyebrow,
#hero-h1 .word-left,
#hero-h1 .word-center,
#hero-h1 .word-right,
#hero-sub,
#hero-cta {
  opacity: 0;
}

/* ── Reveal Base States ── */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
}

.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.reveal-grid {
  opacity: 0;
  transform: translateY(30px);
}

.reveal-grid.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
}

/* ── Nav scrolled ── */
#nav {
  transition: background 200ms ease, box-shadow 200ms ease;
}

/* ── Section entry clip ── */
.section-outreach {
  clip-path: inset(0);
}

/* ── Stats counter ── */
.stat-number {
  transition: none;
}

/* ── Grid stagger delays ── */
.outreach-card:nth-child(1) { transition-delay: 0.00s; }
.outreach-card:nth-child(2) { transition-delay: 0.08s; }
.outreach-card:nth-child(3) { transition-delay: 0.16s; }
.outreach-card:nth-child(4) { transition-delay: 0.24s; }
.outreach-card:nth-child(5) { transition-delay: 0.32s; }
.outreach-card:nth-child(6) { transition-delay: 0.40s; }

/* ── Pairing item stagger ── */
.sustain-item:nth-child(1) { transition-delay: 0.00s; }
.sustain-item:nth-child(2) { transition-delay: 0.07s; }
.sustain-item:nth-child(3) { transition-delay: 0.14s; }
.sustain-item:nth-child(4) { transition-delay: 0.21s; }
.sustain-item:nth-child(5) { transition-delay: 0.28s; }
.sustain-item:nth-child(6) { transition-delay: 0.35s; }

/* ── Craft section reveal stagger ── */
.services-right .reveal-up:nth-child(1) { transition-delay: 0.0s; }
.services-right .reveal-up:nth-child(2) { transition-delay: 0.1s; }
.services-right .reveal-up:nth-child(3) { transition-delay: 0.2s; }

/* ── Mobile nav link stagger ── */
.nav-mobile-link.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

/* ── Focus visible ── */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ── Hero mini-carousel smooth fade ── */
.hero-card {
  transition: opacity 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
}

/* ── Gate logo breathe (subtle) ── */
@keyframes wolfBreath {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.022); }
}

.gate-mark img {
  animation: wolfBreath 5s ease-in-out infinite;
}

/* ============================================================
   SHIMMER SKELETON SYSTEM
   ============================================================
   Usage:
     Images:    add class  `sk-img`   — fills the img container with shimmer
     Text lines: add class `sk-text`  — replaces text with shimmer bars
     Blocks:    add class  `sk-block` — generic shimmer rectangle
   Remove all sk-* classes once content is ready.
   ============================================================ */

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* ── Shared shimmer gradient (warm gold on dark) ── */
.sk-img,
.sk-text::before,
.sk-block {
  --sk-base:      rgba(255, 255, 255, 0.04);
  --sk-highlight: rgba(198, 155, 58, 0.18);
  background: linear-gradient(
    90deg,
    var(--sk-base)      25%,
    var(--sk-highlight) 50%,
    var(--sk-base)      75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: 4px;
}

/* ── Image shimmer ── */
.sk-img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 280px;
  position: relative;
}
/* hide the real <img> until loaded */
.sk-img-wrap img { opacity: 0; transition: opacity 0.4s ease; }
.sk-img-wrap img.sk-loaded { opacity: 1; }

/* ── CMS image containers — shimmer from first paint, before JS ── */
/* The wrapper shows the shimmer gradient; the <img> itself is hidden  */
/* until content-loader sets src and the load event fires.             */
.cms-img-wrap {
  position: relative;
  --sk-base:      rgba(255, 255, 255, 0.04);
  --sk-highlight: rgba(198, 155, 58, 0.18);
  background: linear-gradient(
    90deg,
    var(--sk-base)      25%,
    var(--sk-highlight) 50%,
    var(--sk-base)      75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: 8px;
  min-height: 240px;
}
.cms-img-wrap img {
  opacity: 0;
  transition: opacity 0.4s ease;
  position: relative; /* sit above the shimmer background */
  z-index: 1;
}
.cms-img-wrap img.cms-loaded {
  opacity: 1;
}
/* once loaded, kill the shimmer animation on the wrapper */
.cms-img-wrap.cms-img-done {
  background: none;
  animation: none;
  min-height: unset;
}

/* ── Text shimmer — inline pseudo-element bars ── */
.sk-text {
  color: transparent !important;
  pointer-events: none;
  position: relative;
  display: block;
}
.sk-text::before {
  content: '';
  position: absolute;
  inset: 0 0 0 0;
  border-radius: 4px;
  height: 0.85em;
  top: 0.1em;
  width: var(--sk-width, 85%);
}
/* Varied widths for natural look */
.sk-text:nth-child(1)::before { --sk-width: 75%; }
.sk-text:nth-child(2)::before { --sk-width: 90%; }
.sk-text:nth-child(3)::before { --sk-width: 60%; }
.sk-text:nth-child(4)::before { --sk-width: 82%; }
.sk-text:nth-child(5)::before { --sk-width: 50%; }

/* Eyebrow — short bar */
.sk-eyebrow::before { --sk-width: 35%; height: 0.7em; }

/* Headline — taller, wider bar */
.sk-headline {
  color: transparent !important;
  pointer-events: none;
  position: relative;
  display: block;
}
.sk-headline::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--sk-base, rgba(255,255,255,0.04))      25%,
    var(--sk-highlight, rgba(198,155,58,0.18))   50%,
    var(--sk-base, rgba(255,255,255,0.04))       75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  width: 55%;
}

/* ── Generic block ── */
.sk-block {
  display: block;
  border-radius: 6px;
}

/* ── Stat number placeholder ── */
.sk-stat {
  color: transparent !important;
  position: relative;
}
.sk-stat::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(198,155,58,0.18)  50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
}

/* ── Logo Story tab slide keyframes ── */
@keyframes slideOutLeft  { from { transform: translateX(0);     opacity: 1; } to { transform: translateX(-100%); opacity: 0; } }
@keyframes slideOutRight { from { transform: translateX(0);     opacity: 1; } to { transform: translateX(100%);  opacity: 0; } }
@keyframes slideInLeft   { from { transform: translateX(100%);  opacity: 0; } to { transform: translateX(0);     opacity: 1; } }
@keyframes slideInRight  { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0);     opacity: 1; } }