/* ============================================================
   Animate pass — index.html micro-interactions
   Layered after polish.css. Honors prefers-reduced-motion.
   ============================================================ */

:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --d-fast: 180ms;
  --d-base: 260ms;
  --d-slow: 520ms;
}

/* ---- Primary CTA: gentle breath ---------------------------- */

@keyframes ctaBreath {
  0%, 100% { box-shadow: 0 8px 22px rgba(210, 73, 4, .28); }
  50%      { box-shadow: 0 12px 30px rgba(210, 73, 4, .42); }
}
.hero .btn-primary {
  animation: ctaBreath 3.6s var(--ease-out-quart) infinite;
}
.hero .btn-primary:hover {
  animation: none;
}

/* ---- Hero stars: subtle parallax via JS hook --------------- */

.hero-stars {
  transition: transform 220ms var(--ease-out-quart);
  will-change: transform;
}

/* ---- Service cards: smoother lift + tilt prep -------------- */

.service-card {
  transition:
    transform var(--d-base) var(--ease-out-expo),
    box-shadow var(--d-base) var(--ease-out-expo),
    border-color var(--d-base) var(--ease-out-expo);
  transform: translateY(0) rotateX(0) rotateY(0);
  transform-style: preserve-3d;
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 20px 50px rgba(48, 37, 60, .14),
    0 4px 12px rgba(48, 37, 60, .06);
}

/* ---- Hero stat numerals: subtle count-in feel ------------- */

.hero-stats > div {
  opacity: 0;
  transform: translateY(8px);
  animation: statRise 600ms var(--ease-out-expo) forwards;
}
.hero-stats > div:nth-child(1) { animation-delay: 240ms; }
.hero-stats > div:nth-child(2) { animation-delay: 360ms; }
.hero-stats > div:nth-child(3) { animation-delay: 480ms; }
@keyframes statRise {
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Whom cards: staggered reveal-on-scroll ---------------- */

.for-whom-grid .whom-card {
  transition:
    opacity var(--d-slow) var(--ease-out-expo),
    transform var(--d-slow) var(--ease-out-expo),
    box-shadow var(--d-base) var(--ease-out-expo);
}
.for-whom-grid .whom-card.reveal {
  transition-delay: calc(var(--i, 0) * 90ms);
}
.whom-icon {
  transition: transform var(--d-base) var(--ease-out-expo), background var(--d-base);
}
.whom-card:hover .whom-icon {
  transform: rotate(-8deg) scale(1.05);
  background: rgba(210, 73, 4, .14);
}

/* ---- Steps: staggered reveal ------------------------------- */

.steps .step {
  transition:
    opacity var(--d-slow) var(--ease-out-expo),
    transform var(--d-slow) var(--ease-out-expo),
    box-shadow var(--d-base) var(--ease-out-expo);
}
.steps .step.reveal {
  transition-delay: calc(var(--i, 0) * 100ms);
}
.step-num {
  transition: color var(--d-base), transform var(--d-base) var(--ease-out-expo);
}
.step:hover .step-num {
  transform: translateX(2px);
  color: #b03e02;
}

/* ---- Bot cards: warm hover ------------------------------- */

.bot-card { transition: transform var(--d-base) var(--ease-out-expo), box-shadow var(--d-base); }
.bot-card-img { transition: transform var(--d-base) var(--ease-out-expo); }
.bot-card:hover .bot-card-img {
  transform: rotate(-4deg) scale(1.04);
}

/* ---- Edu timeline: dots breathe lightly ------------------- */

@keyframes eduPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(217, 202, 169, .35); }
  50%      { box-shadow: 0 0 0 8px rgba(217, 202, 169, 0); }
}
.edu-item::before {
  animation: eduPulse 2.8s var(--ease-out-quart) infinite;
}
.edu-item:nth-child(2)::before { animation-delay: .35s; }
.edu-item:nth-child(3)::before { animation-delay: .70s; }
.edu-item:nth-child(4)::before { animation-delay: 1.05s; }
.edu-item:nth-child(5)::before { animation-delay: 1.40s; }

/* ---- Testimonials: hover lift + quote shifts ------------- */

.testimonial {
  transition: transform var(--d-base) var(--ease-out-expo), border-color var(--d-base);
}
.testimonial:hover {
  transform: translateY(-4px);
  border-color: rgba(217, 202, 169, .35);
}
.testimonial::before {
  transition: opacity var(--d-base), transform var(--d-base) var(--ease-out-expo);
}
.testimonial:hover::before {
  opacity: .45;
  transform: translateY(-2px) translateX(2px);
}

/* ---- Channel cards: focus on icon shift ------------------ */

.channel { transition: background var(--d-base), border-color var(--d-base), transform var(--d-base) var(--ease-out-expo); }
.channel-icon { transition: transform var(--d-base) var(--ease-out-expo); display: inline-block; }
.channel:hover .channel-icon {
  transform: translateY(-3px) scale(1.12);
}

/* ---- Brand logo: slow breath ----------------------------- */

@keyframes brandBreath {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
.brand-logo {
  animation: brandBreath 5s var(--ease-out-quart) infinite;
  transition: transform var(--d-base) var(--ease-out-expo);
}
.brand:hover .brand-logo {
  animation: none;
  transform: rotate(8deg) scale(1.08);
}

/* ---- Underline draw on nav links ------------------------- */

.nav-list a:not(.nav-cta)::after {
  transform-origin: left;
  transition: transform 340ms var(--ease-out-expo);
}

/* ---- Hero circle: living portrait ------------------------- */

/* Slow breath on the image itself — almost subliminal */
@keyframes heroImageBreath {
  0%, 100% { transform: scale(1)     translate3d(0, 0, 0); }
  50%      { transform: scale(1.025) translate3d(0, -2px, 0); }
}
.hero-circle img {
  animation: heroImageBreath 8s var(--ease-out-quart) infinite;
  will-change: transform;
  transition: transform var(--d-base) var(--ease-out-expo);
}

/* Mouse tilt — set by animate.js via custom properties */
.hero-circle {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  transform-style: preserve-3d;
  perspective: 1000px;
}
.hero-circle img {
  transform-origin: center;
}
.hero-circle.is-tilting img {
  animation-play-state: paused;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1.02);
}

/* Counter-rotation: the inner solid ring spins very slowly opposite to the
   outer dashed ring (which already rotates 60s clockwise). Gives a sense of
   gears turning. */
@keyframes heroRingCounter {
  from { transform: rotate(0); }
  to   { transform: rotate(-360deg); }
}
.hero-circle::before {
  animation: heroRingCounter 120s linear infinite;
}

/* Orbiting accent dots: two small planets circling the portrait */
.hero-circle__orbit {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  pointer-events: none;
}
.hero-circle__orbit::after {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-highlight);
  box-shadow:
    0 0 8px rgba(217, 202, 169, .9),
    0 0 16px rgba(217, 202, 169, .5);
  transform: translateX(-50%);
}
.hero-circle__orbit--a {
  animation: heroOrbitA 18s linear infinite;
}
.hero-circle__orbit--b {
  inset: -40px;
  animation: heroOrbitB 32s linear infinite reverse;
}
.hero-circle__orbit--b::after {
  width: 5px;
  height: 5px;
  background: var(--color-accent);
  box-shadow:
    0 0 6px rgba(210, 73, 4, .7),
    0 0 14px rgba(210, 73, 4, .3);
}
@keyframes heroOrbitA {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}
@keyframes heroOrbitB {
  from { transform: rotate(0); }
  to   { transform: rotate(360deg); }
}

/* ---- Reduced motion: kill all add-ons -------------------- */

@media (prefers-reduced-motion: reduce) {
  .hero .btn-primary,
  .brand-logo,
  .edu-item::before,
  .hero-stats > div,
  .hero-circle img,
  .hero-circle::before,
  .hero-circle__orbit,
  .hero-circle__orbit--a,
  .hero-circle__orbit--b {
    animation: none !important;
  }
  .hero-circle__orbit { display: none; }
  .hero-stats > div { opacity: 1; transform: none; }
  .service-card:hover,
  .testimonial:hover,
  .whom-card:hover .whom-icon,
  .step:hover .step-num,
  .bot-card:hover .bot-card-img,
  .brand:hover .brand-logo,
  .channel:hover .channel-icon {
    transform: none !important;
  }
}