/* ============================================================
   Microanimations — Sunshine Taboada site
   Quiet, editorial. Built on top of site.css.
   ============================================================ */

/* Scroll progress rail */
.scroll-rail {
  position: fixed; top: 0; left: 0; right: 0; height: 2px;
  z-index: 60; pointer-events: none;
}
.scroll-rail .fill {
  height: 100%;
  background: var(--terracotta);
  width: 0;
  transform-origin: 0 50%;
  transition: width .08s linear;
}

/* ─── PREFERS REDUCED MOTION: NEUTERED ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .word, .word-in, .reveal, .anim-line::before, .pop, .stagger > *,
  .nav, .hero-bg-mark, .cho-bg-mark, .move-bg-mark { transition: none !important; animation: none !important; }
  .word, .word-in, .reveal, .stagger > * { opacity: 1 !important; transform: none !important; }
}

@media (prefers-reduced-motion: no-preference) {

  /* ─── WORD-SPLIT REVEAL ───────────────────────────────────── */
  /* JS wraps every word in: <span class="word"><span class="word-in">word</span></span> */
  .word {
    display: inline-block;
    overflow: hidden;
    /* Pad to keep descenders visible without affecting layout */
    padding-bottom: 0.14em;
    margin-bottom: -0.14em;
    vertical-align: bottom;
    line-height: inherit;
  }
  .word-in {
    display: inline-block;
    transform: translateY(110%);
    transition: transform 0.85s cubic-bezier(0.2, 0.7, 0.15, 1);
    transition-delay: calc(var(--i, 0) * 55ms);
    will-change: transform;
  }
  .word-host.in .word-in { transform: translateY(0); }

  /* For dot/punctuation that sits as a sibling .dot inside the heading */
  .word-host .dot {
    display: inline-block;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: calc(var(--dot-delay, 600ms));
  }
  .word-host.in .dot { opacity: 1; transform: scale(1); }

  /* ─── EYEBROW LINE DRAW ───────────────────────────────────── */
  /* Replaces the static 24px hyphen on .eyebrow::before; site.css already
     paints it with currentColor — we just animate its width.            */
  .eyebrow::before {
    width: 0 !important;
    transition: width 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s;
  }
  .eyebrow.in::before,
  .in .eyebrow::before,
  .word-host.in + * .eyebrow::before { width: 24px !important; }
  /* Once the eyebrow is in view, expand */
  .eyebrow-host.in::before { width: 24px !important; }

  /* ─── DOT POP (terracotta period anywhere) ────────────────── */
  /* Quietly scale the brand period when its container enters view.
     Containers opt in by adding `data-dots` (set by JS).               */
  [data-dots] .dot {
    display: inline-block;
    transform-origin: center 60%;
    opacity: 0;
    transform: scale(0.2);
    transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: 0.35s;
  }
  [data-dots].in .dot { opacity: 1; transform: scale(1); }

  /* ─── GENERIC RISE-IN ─────────────────────────────────────── */
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.75s cubic-bezier(0.2, 0.7, 0.15, 1);
  }
  .reveal.in { opacity: 1; transform: none; }

  /* Stagger children — each child uses --i set inline or via :nth-child */
  .stagger > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.65s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.15, 1);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .stagger.in > * { opacity: 1; transform: none; }
  /* Fallback :nth-child stagger for items without explicit --i */
  .stagger > *:nth-child(1) { --i: 0; }
  .stagger > *:nth-child(2) { --i: 1; }
  .stagger > *:nth-child(3) { --i: 2; }
  .stagger > *:nth-child(4) { --i: 3; }
  .stagger > *:nth-child(5) { --i: 4; }
  .stagger > *:nth-child(6) { --i: 5; }
  .stagger > *:nth-child(7) { --i: 6; }
  .stagger > *:nth-child(8) { --i: 7; }

  /* ─── HOVER LIFTS / INTERACTIONS ──────────────────────────── */

  /* Service rows — nudge right + reveal a hairline accent */
  .service {
    transition: background 0.4s ease;
    position: relative;
  }
  .service::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 0; background: var(--terracotta);
    transition: width 0.35s cubic-bezier(0.2, 0.7, 0.15, 1);
  }
  .service:hover::before { width: 3px; }
  .service:hover .num { color: var(--terracotta); }
  .service .num { transition: color 0.3s ease; }

  /* Rule items — accent slide */
  .rule-item {
    position: relative;
    transition: background 0.35s ease;
  }
  .rule-item::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
    background: var(--terracotta);
    transform-origin: 0 50%;
    transform: scaleX(0);
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.15, 1);
  }
  .rule-item:hover::after { transform: scaleX(1); }
  .rule-item:hover .num { transform: translateX(4px); }
  .rule-item .num { transition: transform 0.3s ease; display: inline-block; }

  /* Case rows — same gentle hover */
  .case { transition: background 0.4s ease; }
  .case:hover .num-block .title .dot { transform: translateY(-2px); }
  .case .num-block .title .dot { transition: transform 0.3s ease; display: inline-block; }

  /* Problem cards — bg deepen on hover, num color shift */
  .problem-card {
    transition: background 0.35s ease, transform 0.35s ease;
  }
  .problem-card:hover { background: var(--bone-soft); }
  .problem-card .num, .problem-card .tag { transition: color 0.3s ease, letter-spacing 0.4s ease; }
  .problem-card:hover .num { color: var(--terracotta); }
  .problem-card:hover .tag { letter-spacing: 0.22em; }

  /* Person card */
  .person-card { transition: background 0.4s ease; }

  /* Process step accent on hover */
  .process-step .step-head .n { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); display: inline-block; }
  .process-step:hover .step-head .n { transform: translateY(-3px) scale(1.05); }

  /* Cred rows — slide chevron on hover */
  .cred-row {
    transition: padding-left 0.3s ease;
  }
  .cred-row:hover { padding-left: 8px; }

  /* Buttons — sharper arrow track */
  .btn::after { transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.15, 1); }
  .btn:hover::after { transform: translateX(6px); }

  /* Nav links — already underlined on hover; add color shift to active */
  .nav-links a {
    transition: opacity 0.18s ease, color 0.25s ease;
  }
  .nav-links a.is-active { opacity: 1; color: var(--terracotta); }
  .nav.is-dark .nav-links a.is-active { color: var(--terracotta-soft); }

  /* ─── BACKGROUND MARK DRIFT (slow, ambient) ───────────────── */
  .hero-bg-mark {
    animation: bgDrift 24s ease-in-out infinite alternate;
    transform-origin: center;
  }
  .cho-bg-mark {
    animation: bgDriftAlt 28s ease-in-out infinite alternate;
    transform-origin: center;
  }
  .move-bg-mark {
    animation: bgDrift 30s ease-in-out infinite alternate;
    transform-origin: center;
  }
  @keyframes bgDrift {
    0%   { transform: translate(0, 0) rotate(0deg) scale(1); opacity: var(--mark-opacity, 0.08); }
    100% { transform: translate(-2.5%, -1.5%) rotate(-1.5deg) scale(1.03); opacity: calc(var(--mark-opacity, 0.08) * 1.4); }
  }
  @keyframes bgDriftAlt {
    0%   { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0.08; }
    100% { transform: translate(3%, 2%) rotate(2deg) scale(1.04); opacity: 0.12; }
  }

  /* ─── HERO ENTRY (on load, not scroll) ────────────────────── */
  body.is-loading .hero .word-in { transform: translateY(110%); }
  body.is-loading .hero-eyebrow > * {
    opacity: 0; transform: translateY(8px);
  }
  body.is-loading .hero-sub,
  body.is-loading .hero-foot {
    opacity: 0; transform: translateY(10px);
  }
  .hero-eyebrow > * {
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.15, 1);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .hero-eyebrow .sep {
    transform-origin: 0 50%;
    transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.15, 1);
  }
  body.is-loading .hero-eyebrow .sep { transform: scaleX(0.1); }
  .hero-sub, .hero-foot {
    transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.15, 1);
  }
  .hero-sub  { transition-delay: 0.9s; }
  .hero-foot { transition-delay: 1.1s; }

  /* ─── SCROLL CHEVRON BOB (already exists) — ensure smoothness */
  .hero-scroll::after { display: inline-block; }

  /* ─── INDEX NUMBER ENTRY ──────────────────────────────────── */
  .section-head .index {
    display: inline-block;
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.15, 1);
    transition-delay: 0.15s;
  }
  .section-head.in .index { opacity: 1; transform: none; }

  /* ─── CREDENTIALS ROWS STAGGER ───────────────────────────── */
  .credentials .cred-row {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.2, 0.7, 0.15, 1);
    transition-delay: calc(var(--i, 0) * 90ms + 0.2s);
  }
  .credentials.in .cred-row { opacity: 1; transform: none; }

  /* ─── PROCESS STEP RAIL ──────────────────────────────────── */
  .process-step {
    position: relative;
  }
  .process-step .step-head .n {
    position: relative;
  }
  .process-step .step-head .n::before {
    content: "";
    position: absolute;
    bottom: -2px; left: 0; height: 2px;
    width: 0; background: var(--terracotta);
    transition: width 0.5s cubic-bezier(0.2, 0.7, 0.15, 1);
  }
  .process.in .process-step .step-head .n::before { width: 100%; transition-delay: calc(var(--i, 0) * 120ms + 0.2s); }

  /* ─── CASE NUMBERS POP ───────────────────────────────────── */
  .case-cell .label .num {
    display: inline-block;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .case.in .case-cell:nth-child(1) .label .num { transition-delay: 0.25s; opacity: 1; transform: none; }
  .case.in .case-cell:nth-child(2) .label .num { transition-delay: 0.35s; opacity: 1; transform: none; }
  .case.in .case-cell:nth-child(3) .label .num { transition-delay: 0.45s; opacity: 1; transform: none; }

  /* ─── PROBLEM CARDS STAGGER ───────────────────────────────── */
  .problems .problem-card {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.65s ease, transform 0.75s cubic-bezier(0.2, 0.7, 0.15, 1);
    transition-delay: calc(var(--i, 0) * 100ms);
  }
  .problems.in .problem-card { opacity: 1; transform: none; }

  /* ─── PERSON CARD STAGGER ─────────────────────────────────── */
  .person-grid .person-card {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.15, 1);
    transition-delay: calc(var(--i, 0) * 100ms);
  }
  .person-grid.in .person-card { opacity: 1; transform: none; }

  /* ─── RULE ITEM STAGGER ───────────────────────────────────── */
  .rules-list .rule-item {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.55s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.15, 1);
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  .rules-list.in .rule-item { opacity: 1; transform: none; }

  /* ─── SERVICE STAGGER ─────────────────────────────────────── */
  .services .service {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.65s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.15, 1);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .services.in .service { opacity: 1; transform: none; }

  /* ─── BUTTON SHIMMER ON HOVER ─────────────────────────────── */
  .btn-primary, .btn-brand {
    position: relative; overflow: hidden;
  }
  .btn-primary::before, .btn-brand::before {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.15) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.15, 1);
    pointer-events: none;
  }
  .btn-primary:hover::before, .btn-brand:hover::before {
    transform: translateX(100%);
  }
}