/* ═══════════════════════════════════════════════════════════════
   CAFS · Shared Interactions · v1
   6 effects: reveal, stagger, parallax, counter, magnetic, progress
   ═══════════════════════════════════════════════════════════════ */

/* 1. SCROLL PROGRESS BAR (top of page) */
.scroll-progress{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:200;
  background:transparent;pointer-events:none;
}
.scroll-progress-bar{
  height:100%;width:0%;
  background:linear-gradient(90deg, var(--gold, #C8993E), #E5B970);
  transition:width 0.08s linear;
  box-shadow:0 0 12px rgba(200,153,62,0.5);
}

/* 2. REVEAL (enhanced — supports multiple directions + delays via data-reveal) */
[data-reveal]{
  opacity:0;
  transition:opacity 0.9s cubic-bezier(.2,.8,.2,1), transform 0.9s cubic-bezier(.2,.8,.2,1);
  will-change:opacity, transform;
}
[data-reveal="up"]{transform:translateY(36px);}
[data-reveal="down"]{transform:translateY(-36px);}
[data-reveal="left"]{transform:translateX(36px);}
[data-reveal="right"]{transform:translateX(-36px);}
[data-reveal="zoom"]{transform:scale(0.94);}
[data-reveal="fade"]{/* opacity only */}
[data-reveal].is-visible{
  opacity:1;
  transform:translate(0,0) scale(1);
}

/* 3. STAGGER CHILDREN (add .stagger-children to parent, auto-delays children) */
.stagger-children > *{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 0.7s cubic-bezier(.2,.8,.2,1), transform 0.7s cubic-bezier(.2,.8,.2,1);
}
.stagger-children.is-visible > *:nth-child(1){transition-delay:0.00s;}
.stagger-children.is-visible > *:nth-child(2){transition-delay:0.08s;}
.stagger-children.is-visible > *:nth-child(3){transition-delay:0.16s;}
.stagger-children.is-visible > *:nth-child(4){transition-delay:0.24s;}
.stagger-children.is-visible > *:nth-child(5){transition-delay:0.32s;}
.stagger-children.is-visible > *:nth-child(6){transition-delay:0.40s;}
.stagger-children.is-visible > *:nth-child(7){transition-delay:0.48s;}
.stagger-children.is-visible > *:nth-child(8){transition-delay:0.56s;}
.stagger-children.is-visible > *{
  opacity:1;transform:translateY(0);
}

/* 4. KEN BURNS (slow zoom on hero images) */
.ken-burns{
  overflow:hidden;position:relative;
}
.ken-burns > img, .ken-burns > video{
  width:100%;height:100%;object-fit:cover;
  animation:kenBurns 20s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes kenBurns{
  0%{transform:scale(1) translate(0, 0);}
  100%{transform:scale(1.12) translate(-2%, -2%);}
}

/* 5. PARALLAX HERO (images shift slower than scroll) */
.parallax-bg{
  will-change:transform;
  transform:translate3d(0, 0, 0);
}

/* 6. COUNTER — uses tabular-nums for stable width */
[data-counter]{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
}

/* 7. MAGNETIC BUTTONS (cursor-reactive hover) */
.magnetic{
  display:inline-block;position:relative;
  transition:transform 0.35s cubic-bezier(.25,.9,.3,1);
  will-change:transform;
}
.magnetic-inner{
  display:block;
  transition:transform 0.35s cubic-bezier(.25,.9,.3,1);
  will-change:transform;
}

/* 8. IMAGE HOVER LIFT (for photo cards) */
.photo-card{
  overflow:hidden;position:relative;
  transition:transform 0.5s cubic-bezier(.2,.8,.2,1), box-shadow 0.5s;
}
.photo-card img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 0.6s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
.photo-card:hover{
  transform:translateY(-4px);
  box-shadow:0 24px 48px -16px rgba(10,22,40,0.2);
}
.photo-card:hover img{
  transform:scale(1.05);
}

/* 9. SMOOTH SCROLL ANCHOR (if user clicks internal #link) */
html{scroll-behavior:smooth;}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  .ken-burns > img, .ken-burns > video{animation:none;}
  .scroll-progress{display:none;}
}

/* ═══════════════════════════════════════════════════════════════
   DEV PLACEHOLDER ANNOTATIONS — HIDDEN IN PRODUCTION
   ═══════════════════════════════════════════════════════════════
   .photo-note, .photo-tag, .photo-slot-tag are small dev-facing
   annotations left in the source (e.g., "Photo backdrop TBD",
   "MCIA night · approved asset") to help track media pipeline state.
   They are NOT meant to render to end users — hide globally.
   Remove / unhide when wiring final media in the last batch pass.
   ═══════════════════════════════════════════════════════════════ */
.photo-note,
.photo-tag,
.photo-slot-tag {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   7. BLUE-BUTTON LETTER WAVE (hover micro-interaction)
   Each character of the button text is wrapped in a span by
   interactions.js. CSS staggers per-letter translateY using the
   --i custom property so letters lift in sequence on hover —
   reads as a wave passing through the text.
   Applied to:
     .btn-primary.is-blue   (page-level primary CTAs)
     .nav-cta               (the persistent Apply Now in nav)
     .apply-submit          (form submit on /apply)
   Buttons get the .has-letter-wave class added by JS once they're
   wired up — keeps non-target buttons untouched.
   ═══════════════════════════════════════════════════════════════ */
.has-letter-wave .lw-letter{
  display:inline-block;
  transition:transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay:calc(var(--i, 0) * 28ms);
  will-change:transform;
}
.has-letter-wave:hover .lw-letter,
.has-letter-wave:focus-visible .lw-letter{
  transform:translateY(-5px);
}
@media (prefers-reduced-motion: reduce){
  .has-letter-wave .lw-letter{transition:none;}
  .has-letter-wave:hover .lw-letter,
  .has-letter-wave:focus-visible .lw-letter{transform:none;}
}