/* ============================================================================
 * Squatch CC — DELIGHT LAYER (tomrankin 84/100 playbook, warm palette)
 * Full-bleed WARM-LIGHT art hero (gold resonance mark + sasquatch) · staggered
 * entrance · scroll reveals · composed hovers · capabilities ticker.
 * Loads after dist/output.css; reuses the --c-* tokens defined there.
 * ========================================================================== */

:root {
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --d-fast: 140ms; --d-med: 240ms;
  --void-warm: #1C160E;         /* warm-black for the ticker strip */
  --shadow-lift: 0 22px 48px -16px rgba(58,50,38,.34);
  --shadow-cover: 0 12px 30px -12px rgba(58,50,38,.26);
}

/* ── 1. FULL-BLEED WARM ART HERO ───────────────────────────────────────── */
.hero-art {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(90vh, 860px); display: flex; align-items: flex-end;
  padding-block: clamp(3rem, 8vw, 6rem);
  background: #241C12; color: var(--c-on-mark);
}
.hero-art__art { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.hero-art__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
/* warm-dark scrim: heavy lower-left so the cream copy reads; clears to the subject on the right */
.hero-art::after {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(92deg, rgba(28,20,12,.90) 0%, rgba(28,20,12,.60) 40%, rgba(28,20,12,.16) 72%, transparent 100%),
    linear-gradient(0deg, rgba(28,20,12,.78) 0%, transparent 50%);
}
/* demoted resonance mark — small glowing corner accent (was the hero centerpiece) */
.hero-art__accent { position:absolute; right:2.4rem; bottom:1.8rem; width:116px; height:116px; z-index:1; opacity:.5; pointer-events:none; filter: drop-shadow(0 0 12px rgba(184,134,11,.5)); }
.hero-art__accent img { width:100%; height:100%; display:block; }
@media (prefers-reduced-motion: no-preference) { .hero-art__accent { animation: markFloat 12s ease-in-out infinite; } }
@keyframes markFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.hero-art__inner { width: min(72rem, 92vw); margin-inline: auto; position: relative; z-index: 1; }
.hero-art__copy { max-width: 42rem; }
.hero-art .eyebrow { color: var(--c-gold-hi); }
.hero-art__title {
  font-size: clamp(2.6rem, 1.2rem + 5.4vw, 5rem); line-height: 1.04; letter-spacing: -0.01em;
  margin: .4rem 0 0; text-wrap: balance; color: var(--c-bg); text-shadow: 0 2px 30px rgba(0,0,0,.45);
}
.hero-art__title .em { color: var(--c-gold-hi); }
.hero-art__title .accent { color: var(--c-gold-hi); }
.hero-art__lede { font-size: 1.125rem; line-height: 1.6; color: var(--c-on-mark); max-width: 46ch; margin-top: 1.25rem; text-shadow: 0 1px 16px rgba(0,0,0,.45); }
.hero-art__ctas { margin-top: 1.75rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-art .btn--ghost { color: var(--c-bg); border-color: rgba(247,241,227,.42); background: transparent; }
.hero-art .btn--ghost:hover { border-color: var(--c-gold-hi); color: var(--c-gold-hi); }

@media (prefers-reduced-motion: no-preference) {
  .hero-art__copy > * { animation: heroRise .82s var(--ease-out) both; }
  .hero-art .eyebrow    { animation-delay: .05s; }
  .hero-art__title      { animation-delay: .16s; }
  .hero-art__lede       { animation-delay: .32s; }
  .hero-art__ctas       { animation-delay: .46s; }
}
@keyframes heroRise { from { opacity:0; transform: translateY(16px); } to { opacity:1; transform:none; } }
@media (max-width: 52em) { .hero-art { min-height:auto; } .hero-art__accent { display:none; } }

/* ── 2. CAPABILITIES TICKER (warm tobacco strip) ───────────────────────── */
.capstrip { display:flex; align-items:center; gap:1rem; background: var(--c-mark); color: var(--c-on-mark-soft);
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size:.8rem; letter-spacing:.03em;
  padding-block:.85rem; border-block:1px solid color-mix(in oklab, var(--c-accent) 32%, transparent); overflow:hidden; }
.capstrip__label { flex:0 0 auto; padding-left: max(1.5rem, calc((100vw - min(72rem,92vw))/2)); color: var(--c-gold-hi); text-transform:uppercase; letter-spacing:.12em; }
.capstrip__viewport { flex:1 1 auto; overflow:hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 94%, transparent); }
.capstrip__track { display:flex; width:max-content; animation: capscroll 44s linear infinite; }
.capstrip__seq { padding-right:2rem; white-space:nowrap; }
.capstrip__seq b { color: var(--c-on-mark); font-weight:600; }
.capstrip:hover .capstrip__track { animation-play-state: paused; }
@keyframes capscroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .capstrip__track { animation:none; } .capstrip__viewport { mask-image:none; } }

/* ── 3. SCROLL REVEALS ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal .reveal-item { opacity:0; transform: translateY(20px);
    transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
  .js-reveal .reveal-item.is-visible { opacity:1; transform:none; }
  .js-reveal .grid-3 .reveal-item:nth-child(2), .js-reveal .grid-2 .reveal-item:nth-child(2) { transition-delay:.08s; }
  .js-reveal .grid-3 .reveal-item:nth-child(3) { transition-delay:.16s; }
}
@media print { .js-reveal .reveal-item { opacity:1 !important; transform:none !important; } }

/* ── 4. COMPOSED HOVERS ────────────────────────────────────────────────── */
.tile, .card, .principle { transition: transform var(--d-med) var(--ease-out), box-shadow var(--d-med) var(--ease-out), border-color var(--d-med) var(--ease-out); }
.tile:hover, .tile:focus-within { transform: translateY(-6px); box-shadow: var(--shadow-lift); }
.card:hover, .principle:hover { transform: translateY(-4px); box-shadow: var(--shadow-cover); border-color: color-mix(in oklab, var(--c-accent) 45%, transparent); }
.tile__media img { transition: transform var(--d-med) var(--ease-out); }
.tile:hover .tile__media img { transform: scale(1.04); }
.nav-links a { position: relative; }
.nav-links a::after { content:""; position:absolute; left:0; right:0; bottom:-.3rem; height:2px; border-radius:2px;
  background: var(--c-accent); transform: scaleX(0); transform-origin:left center; transition: transform var(--d-med) var(--ease-out); }
.nav-links a:hover::after, .nav-links a:focus-visible::after { transform: scaleX(1); }

/* ── 5. Designed fallback for any missing tile/media image ──────────────── */
.tile__media, .media-split__figure {
  background:
    radial-gradient(120% 120% at 70% 30%, color-mix(in oklab, var(--c-accent) 16%, var(--c-bg-2)) 0%, var(--c-bg-2) 70%);
}
.section-head__sub, .lede { text-wrap: pretty; }