/* =====================================================================
   HermitMonster — motion.css
   The signature motion + vector-visual layer. Pairs with Animate.css
   (assets/vendor/animate.min.css) for entrances; everything bespoke here.
   Philosophy: the hermit is calm & deliberate, the monster is bold & playful.
   Motion follows suit — slow reveals, then small sparks of delight.
   All motion is gated behind prefers-reduced-motion at the bottom.
   ===================================================================== */

/* ----- Animate.css tuning (calmer, more editorial defaults) --------- */
:root {
  --animate-duration: 820ms;
  --animate-delay: 0.9s;
}

/* ====================================================================
   1. KEYFRAMES  (animista / web.dev inspired, hand-tuned)
   ==================================================================== */
@keyframes hm-float        { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes hm-float-slow   { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-18px) rotate(2deg); } }
@keyframes hm-drift        { 0%,100% { transform: translate(0,0); } 33% { transform: translate(10px,-8px); } 66% { transform: translate(-8px,6px); } }
@keyframes hm-spin-slow    { to { transform: rotate(360deg); } }
@keyframes hm-spin-rev     { to { transform: rotate(-360deg); } }
@keyframes hm-pulse-ring   { 0% { transform: scale(.85); opacity: .7; } 70% { transform: scale(1.6); opacity: 0; } 100% { opacity: 0; } }
@keyframes hm-blink        { 0%,90%,100% { transform: scaleY(1); } 94% { transform: scaleY(.08); } }
@keyframes hm-draw         { to { stroke-dashoffset: 0; } }
@keyframes hm-dash         { to { stroke-dashoffset: -1000; } }
@keyframes hm-gradient     { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes hm-shimmer      { to { background-position: 200% center; } }
@keyframes hm-twinkle      { 0%,100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes hm-marquee      { to { transform: translateX(-50%); } }
@keyframes hm-fade-up      { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes hm-pop          { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
@keyframes hm-wiggle       { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
@keyframes hm-bob-eye      { 0%,100% { transform: translate(0,0); } 25% { transform: translate(2px,-2px); } 50% { transform: translate(-1px,2px); } 75% { transform: translate(-2px,-1px); } }
@keyframes hm-sheen        { 0% { transform: translateX(-120%) skewX(-18deg); } 60%,100% { transform: translateX(220%) skewX(-18deg); } }

/* ====================================================================
   2. UTILITY ANIMATION HOOKS
   ==================================================================== */
.anim-float       { animation: hm-float 6s var(--ease) infinite; }
.anim-float-slow  { animation: hm-float-slow 9s var(--ease) infinite; }
.anim-drift       { animation: hm-drift 14s ease-in-out infinite; }
.anim-spin-slow   { animation: hm-spin-slow 40s linear infinite; transform-origin: center; }
.anim-spin-rev    { animation: hm-spin-rev 60s linear infinite; transform-origin: center; }

/* gradient/animated text — the "monster" energy on key words.
   Uses --spark-text (deep amber on light, bright amber on dark) so every stop
   stays legible against the page background in both themes. */
.text-grad {
  background: linear-gradient(100deg, var(--accent), var(--spark-text), var(--accent-2), var(--accent));
  background-size: 280% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: hm-shimmer 9s linear infinite;
}
/* when the headline is split into words for the reveal, the glyphs move into
   .word children — so re-apply the clipped gradient there or it renders blank */
.text-grad .word {
  background-image: linear-gradient(100deg, var(--accent), var(--spark-text), var(--accent-2), var(--accent));
  background-size: 280% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* scroll-reveal variants (JS adds .in) — calmer than Animate.css for body */
[data-anim] { opacity: 0; will-change: opacity, transform; }
[data-anim].in { opacity: 1; }
[data-anim="up"]      { transform: translateY(30px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-anim="up"].in   { transform: none; }
[data-anim="left"]    { transform: translateX(-34px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-anim="left"].in { transform: none; }
[data-anim="right"]   { transform: translateX(34px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-anim="right"].in{ transform: none; }
[data-anim="scale"]   { transform: scale(.92); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-anim="scale"].in{ transform: none; }
[data-anim="blur"]    { filter: blur(14px); transition: opacity .9s var(--ease), filter .9s var(--ease); }
[data-anim="blur"].in { filter: blur(0); }
[data-anim-delay="1"] { transition-delay: .09s; }
[data-anim-delay="2"] { transition-delay: .18s; }
[data-anim-delay="3"] { transition-delay: .27s; }
[data-anim-delay="4"] { transition-delay: .36s; }
[data-anim-delay="5"] { transition-delay: .45s; }

/* word-by-word headline reveal */
.reveal-words .word { display: inline-block; opacity: 0; transform: translateY(.6em) rotate(2deg); }
.reveal-words.in .word { animation: hm-fade-up .7s var(--ease) forwards; }

/* ====================================================================
   3. SCROLL PROGRESS + CUSTOM CURSOR
   ==================================================================== */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--accent), var(--spark));
  z-index: 200; pointer-events: none;
}

.cursor-glow {
  position: fixed; top: 0; left: 0;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--accent);
  translate: -50% -50%;
  pointer-events: none; z-index: 190;
  transition: width .25s var(--ease), height .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), opacity .25s var(--ease);
  mix-blend-mode: difference; opacity: 0;
}
.cursor-glow.is-active { opacity: 1; }
.cursor-glow.is-hot { width: 54px; height: 54px; background: color-mix(in srgb, var(--spark) 30%, transparent); border-color: var(--spark); }
@media (hover: none) { .cursor-glow { display: none; } }

/* magnetic + sheen buttons */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-120%) skewX(-18deg);
}
.btn:hover::after { animation: hm-sheen .9s var(--ease); }

/* ====================================================================
   4. VECTOR VISUALS  (the hermit + monster system)
   ==================================================================== */

/* animated SVG stroke draw-on (JS toggles .draw when in view) */
.draw-path { stroke-dasharray: 1200; stroke-dashoffset: 1200; }
.draw-path.draw { animation: hm-draw 2.2s var(--ease) forwards; }
.dash-flow { stroke-dasharray: 8 10; animation: hm-dash 18s linear infinite; }

/* the brand emblem — part hermit (hood/cave), part monster (eye) */
.emblem { display: block; }
.emblem .eye-iris { transform-origin: center; animation: hm-bob-eye 7s var(--ease) infinite; }
.emblem .eye-iris.is-tracking { animation: none; }   /* JS takes over: eye follows the cursor */
.emblem .eye-lid  { transform-origin: center; animation: hm-blink 7s var(--ease) infinite; }
.emblem .halo     { transform-origin: center; animation: hm-spin-slow 50s linear infinite; }
.emblem .spark    { animation: hm-twinkle 3.4s ease-in-out infinite; transform-origin: center; }

/* hero constellation backdrop */
.constellation { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: .9; }
.constellation .node { animation: hm-twinkle 4s ease-in-out infinite; transform-origin: center; }
.constellation .node:nth-child(3n) { animation-duration: 5.5s; }
.constellation .node:nth-child(4n) { animation-duration: 7s; }

/* floating decorative blobs */
.blob { position: absolute; filter: blur(2px); opacity: .5; pointer-events: none; z-index: 0; }
.orbit { transform-origin: center; }

/* sparkle field */
.spark-dot { fill: var(--spark); animation: hm-twinkle 3s ease-in-out infinite; transform-origin: center; }

/* ====================================================================
   5. INTERACTIVE CARD TILT + GLOW
   ==================================================================== */
.tilt { transform-style: preserve-3d; transition: transform .3s var(--ease); will-change: transform; }
.tilt__inner { transform: translateZ(30px); }
.glow-card { position: relative; }
.glow-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 28%, transparent), transparent 45%);
  opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; z-index: 0;
}
.glow-card:hover::before { opacity: 1; }
.glow-card > * { position: relative; z-index: 1; }

/* marquee journey line */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: inline-flex; gap: 2.4rem; white-space: nowrap; animation: hm-marquee 36s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track span { font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 3rem); color: var(--ink-2); opacity: .5; letter-spacing: -.02em; }
.marquee__track span b { color: var(--accent); opacity: 1; font-style: italic; }

/* section glyph dividers */
.glyph-divider { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: clamp(1.5rem,4vw,3rem) 0; color: var(--ink-2); }
.glyph-divider svg { width: 30px; height: 30px; }
.glyph-divider .line { height: 1px; flex: 1; max-width: 140px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }

/* magnetic wrapper */
.magnetic { display: inline-block; will-change: transform; transition: transform .3s var(--ease); }

/* ====================================================================
   7. OVERHAUL LAYOUT  (hero, stats, icons, scroll hint)
   ==================================================================== */
.hero--xl { min-height: min(calc(100dvh - var(--header-h)), 760px); display: flex; align-items: center; overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; position: relative; z-index: 1; }
.hero__copy { max-width: 40ch; }
.hero__title { font-size: clamp(2.4rem, 6.8vw, 5rem); margin: .8rem 0 0; letter-spacing: -.035em; line-height: 1.02; }
.hero__copy .lead { margin-top: 1.1rem; }
.hero__copy .actions { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.hero__aside { margin-top: 1.5rem; display: flex; align-items: center; gap: .9rem; color: var(--ink-2); font-size: .92rem; }
.hero__aside .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); position: relative; }
.hero__aside .dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--accent); animation: hm-pulse-ring 2.4s var(--ease) infinite; }
.hero__emblem { justify-self: center; width: clamp(220px, 32vw, 400px); aspect-ratio: 1; }
.hero__emblem .emblem { width: 100%; height: 100%; filter: drop-shadow(0 24px 50px rgba(24,23,15,.18)); }

.blob { border-radius: 50%; }
.blob--1 { width: clamp(260px, 34vw, 520px); aspect-ratio: 1; right: -8%; top: -10%; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%); }
.blob--2 { width: clamp(180px, 24vw, 360px); aspect-ratio: 1; left: -6%; bottom: -8%; background: radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--spark) 22%, transparent), transparent 60%); }

.scroll-hint { position: absolute; left: 50%; bottom: clamp(1rem, 3vw, 2rem); translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: .5rem; color: var(--ink-2); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; z-index: 1; }
.scroll-hint__mouse { width: 22px; height: 34px; border: 2px solid var(--ink-2); border-radius: 12px; display: flex; justify-content: center; padding-top: 5px; }
.scroll-hint__mouse span { width: 3px; height: 7px; border-radius: 2px; background: var(--accent); animation: hm-float 1.6s var(--ease) infinite; }

/* stats band */
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 3vw, 2rem); }
.stat { text-align: center; padding: clamp(1rem, 2.2vw, 1.5rem) .5rem; border-radius: var(--radius); position: relative; }
.stat + .stat::before { content: ""; position: absolute; left: 0; top: 18%; height: 64%; width: 1px; background: var(--line); }
.stat__num { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(2.6rem, 6vw, 4.2rem); line-height: 1; letter-spacing: -.03em; background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat__num--inf { background: linear-gradient(120deg, var(--spark), var(--accent)); -webkit-background-clip: text; background-clip: text; }
.stat__label { display: block; margin-top: .5rem; color: var(--ink-2); font-size: .92rem; }

/* capability icons */
.cap { position: relative; overflow: hidden; }
.cap__icon { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; border-radius: 12px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); margin-bottom: .4rem; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); }
.cap__icon svg { width: 26px; height: 26px; }
.cap:hover .cap__icon { transform: rotate(-6deg) scale(1.08); background: color-mix(in srgb, var(--accent) 18%, transparent); }

/* about emblem */
.about__card { position: relative; overflow: hidden; }
.about__emblem { position: absolute; top: -18px; right: -18px; width: 120px; height: 120px; opacity: .5; }
.about__emblem img { width: 100%; height: 100%; }

/* CTA spark field */
.cta { position: relative; overflow: hidden; }
.spark-field { position: absolute; inset: 0; background-image: radial-gradient(2px 2px at 20% 30%, color-mix(in srgb, var(--cta-ink) 55%, transparent), transparent), radial-gradient(2px 2px at 70% 60%, color-mix(in srgb, var(--cta-ink) 45%, transparent), transparent), radial-gradient(1.5px 1.5px at 45% 80%, color-mix(in srgb, var(--cta-ink) 45%, transparent), transparent), radial-gradient(1.5px 1.5px at 85% 25%, color-mix(in srgb, var(--cta-ink) 40%, transparent), transparent); background-size: cover; opacity: .5; animation: hm-twinkle 6s ease-in-out infinite; }

@media (max-width: 860px) {
  .hero--xl { min-height: 0; padding-top: clamp(1.5rem, 6vw, 2.75rem); }
  .hero__grid { grid-template-columns: 1fr; gap: clamp(1.1rem, 3vw, 2rem); }
  .hero__emblem { order: -1; width: clamp(140px, 38vw, 200px); }
  .hero__copy { max-width: none; }
  .scroll-hint { display: none; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3)::before { display: none; }
}
@media (max-width: 480px) {
  /* keep the stats as a compact 2×2 grid rather than a tall single column */
  .stat { padding: clamp(.85rem, 4vw, 1.25rem) .4rem; }
  .stat__num { font-size: clamp(2.2rem, 12vw, 3.2rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
  .anim-float, .anim-float-slow, .anim-drift, .anim-spin-slow, .anim-spin-rev,
  .emblem .eye-iris, .emblem .eye-lid, .emblem .halo, .emblem .spark,
  .constellation .node, .text-grad, .marquee__track, .spark-dot { animation: none !important; }
  [data-anim] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .reveal-words .word { opacity: 1 !important; transform: none !important; }
  .cursor-glow { display: none !important; }
  .draw-path { stroke-dashoffset: 0 !important; }
  .scroll-progress { display: none; }
}