/* ChimiChurri Code — Animations
   Subtle, editorial, hover-only. No load or scroll triggers. */

/* ——— Baseline transitions (set once; hover states below) ——— */
a, button,
.topbar .nav a,
.index-item, .idx-arrow,
.scene, .device, .block,
.sticker, .sticker-item,
.post, .rel-item,
.color-chip, .pair, .swatch,
.feat-type-card, .type-specimen,
.btn, .nl-input button,
.env, .card, .biz-card,
.cover,
.ig-story, .li-post,
.logo-lockup, .lockup,
.principle, .team-card,
.author-bio-inner,
.postmark, .stamp-corner,
.seal, .circle-seal,
.marquee,
.rel-cover, .bio-links a,
.filters .chip,
.hero-title .teal, .hero-title .lemon, .hero-title .outline {
  transition:
    transform .55s cubic-bezier(.22,.61,.36,1),
    box-shadow .55s cubic-bezier(.22,.61,.36,1),
    opacity .4s ease,
    background-color .4s ease,
    color .4s ease,
    border-color .4s ease,
    letter-spacing .55s cubic-bezier(.22,.61,.36,1),
    filter .55s ease;
}

/* ——— Nav links: lemon underline draws in on hover ——— */
.topbar .nav a {
  position: relative;
}
.topbar .nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: -4px;
  height: 1px;
  background: var(--lemon);
  transition: right .4s cubic-bezier(.22,.61,.36,1);
}
.topbar .nav a:hover::after { right: 0; }
.topbar .nav a:hover { opacity: 1; }

/* ——— Brand mark: gentle tilt on hover ——— */
.topbar .brand:hover .brand-mark {
  transform: rotate(-4deg);
}
.topbar .brand-mark {
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}

/* ——— Index cards on home: lift + lemon wash ——— */
.index-item:hover {
  background: var(--charcoal-90);
}
.index-item:hover .idx-title {
  letter-spacing: 0.015em;
}
.index-item .idx-arrow {
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.index-item:hover .idx-arrow {
  transform: translate(6px, -6px);
}

/* ——— Hero title pieces: color shifts on hover ——— */
.hero-title .teal:hover { color: var(--patagonia-soft); }
.hero-title .lemon:hover { color: var(--lemon-deep); }
.hero-title .outline:hover { -webkit-text-stroke-color: var(--lemon); color: transparent; }

/* ——— Marquee: paused by default, scrolls on hover ——— */
.marquee {
  cursor: default;
}
.marquee-track {
  display: inline-block;
  animation: ccMarquee 28s linear infinite;
  animation-play-state: paused;
}
.marquee:hover .marquee-track {
  animation-play-state: running;
}
@keyframes ccMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Fallback: animate inline spans if no track wrapper exists */
.marquee > span {
  display: inline-block;
}
.marquee:hover > span {
  animation: ccDrift 2.5s ease-in-out infinite alternate;
}
@keyframes ccDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(-6px); }
}

/* ——— Scenes / devices: slight lift + shadow ——— */
.scene:hover, .device:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.25);
}

/* ——— Blog posts / related items ——— */
.post:hover .cover,
.rel-item:hover .rel-cover {
  transform: scale(1.015);
  filter: brightness(1.04);
}
.post .cover, .rel-item .rel-cover {
  transition: transform .6s cubic-bezier(.22,.61,.36,1), filter .6s ease;
}
.post:hover h3 { color: var(--patagonia); }
.rel-item:hover .rel-title { color: var(--red); }

/* ——— Color swatches: scale + label reveal ——— */
.color-chip:hover, .swatch:hover, .pair:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* ——— Type specimens: letter-spacing loosens ——— */
.feat-type-card:hover .type-sample,
.type-specimen:hover .specimen-body,
.type-specimen:hover .type-name {
  letter-spacing: 0.015em;
}

/* ——— Stickers / merch: rotate peel effect ——— */
.sticker, .sticker-item {
  transform-origin: center;
}
.sticker:hover, .sticker-item:hover {
  transform: rotate(-3deg) translateY(-4px) scale(1.03);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.2));
}

/* ——— Stamp / postmark: rotate in slightly on hover of parent ——— */
.env:hover .stamp-corner {
  transform: rotate(-4deg);
}
.env:hover .postmark {
  transform: rotate(-14deg) scale(1.02);
}
.stamp-corner, .postmark {
  transform-origin: center;
}

/* ——— Circular seal: slow spin on hover ——— */
.seal:hover, .circle-seal:hover,
.lockup:hover .seal, .lockup:hover .circle-seal {
  animation: ccSealSpin 14s linear infinite;
}
@keyframes ccSealSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ——— Logo lockups: subtle punch on hover ——— */
.logo-lockup:hover, .lockup:hover {
  transform: translateY(-2px);
}

/* ——— Business cards / envelope: gentle 3D tilt ——— */
.biz-card, .card, .env {
  transform-style: preserve-3d;
  perspective: 1000px;
}
.biz-card:hover, .card:hover {
  transform: perspective(900px) rotateX(2deg) rotateY(-2deg) translateY(-3px);
  box-shadow: 0 22px 44px rgba(0,0,0,0.25);
}

/* ——— Filter chips ——— */
.filters .chip:hover {
  border-color: var(--patagonia);
  color: var(--patagonia);
  opacity: 1;
}

/* ——— Buttons ——— */
.btn:hover, .nl-input button:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}
.btn:active, .nl-input button:active {
  transform: translateY(0);
}

/* ——— Bio links underline draw ——— */
.bio-links a {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
}
.bio-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px; background: currentColor;
  transition: right .45s cubic-bezier(.22,.61,.36,1);
}
.bio-links a:hover::after { right: 0; }

/* ——— Team cards: slight lift + avatar spin ——— */
.team-card:hover {
  background: var(--charcoal-90);
  transform: translateY(-3px);
}
.team-card.authored:hover {
  background: var(--patagonia-soft);
}
.team-card .avatar {
  transition: transform .8s cubic-bezier(.22,.61,.36,1);
}
.team-card:hover .avatar {
  transform: rotate(-4deg) scale(1.03);
}

/* ——— Principle cards ——— */
.principle:hover h3 {
  color: var(--lemon);
}

/* ——— IG story & LinkedIn cards ——— */
.ig-story:hover, .li-post:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 36px rgba(0,0,0,0.28);
}

/* ——— Code blocks: blinking caret on hover ——— */
pre {
  position: relative;
}
pre:hover::after {
  content: '▊';
  position: absolute;
  right: 16px; bottom: 12px;
  color: var(--lemon);
  animation: ccBlink 1s steps(2) infinite;
  font-family: var(--font-mono);
  font-size: 14px;
  opacity: 0.8;
}
@keyframes ccBlink {
  50% { opacity: 0; }
}

/* ——— Mate steam: already-drawn paths can lift on lockup hover ——— */
.logo-lockup:hover .steam,
.lockup:hover .steam {
  animation: ccSteam 2.4s ease-in-out infinite;
}
@keyframes ccSteam {
  0%   { transform: translateY(0);    opacity: .8; }
  50%  { transform: translateY(-4px); opacity: 1; }
  100% { transform: translateY(-8px); opacity: 0; }
}

/* ——— Featured colored index items get a color wash instead ——— */
.index-item.feat-teal:hover { background: var(--patagonia); color: var(--charcoal); }
.index-item.feat-lemon:hover { background: var(--lemon); color: var(--charcoal); }
.index-item.feat-teal:hover .idx-num,
.index-item.feat-lemon:hover .idx-num { opacity: 0.7; }

/* ——— Author bio: avatar scales on hover of block ——— */
.author-bio-inner:hover .bio-avatar {
  transform: rotate(-3deg) scale(1.04);
}
.bio-avatar {
  transition: transform .7s cubic-bezier(.22,.61,.36,1);
}