/* ============================================
   AMBIENT DRIFT — hero chips idle motion
   Each chip gets its own drift class with a
   distinct path, duration and delay so the
   field never feels mechanical.
   ============================================ */

@keyframes drift-a {
  0%   { transform: translate(0, 0) rotate(-2deg); }
  25%  { transform: translate(10px, -14px) rotate(1deg); }
  50%  { transform: translate(-6px, -22px) rotate(-1deg); }
  75%  { transform: translate(-14px, -6px) rotate(2deg); }
  100% { transform: translate(0, 0) rotate(-2deg); }
}

@keyframes drift-b {
  0%   { transform: translate(0, 0) rotate(2deg); }
  30%  { transform: translate(-16px, 10px) rotate(-1deg); }
  60%  { transform: translate(-4px, 20px) rotate(1deg); }
  100% { transform: translate(0, 0) rotate(2deg); }
}

@keyframes drift-c {
  0%   { transform: translate(0, 0) rotate(0deg); }
  40%  { transform: translate(14px, 16px) rotate(-2deg); }
  70%  { transform: translate(6px, -8px) rotate(1deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes drift-d {
  0%   { transform: translate(0, 0) rotate(-1deg); }
  35%  { transform: translate(-12px, -10px) rotate(2deg); }
  65%  { transform: translate(16px, -4px) rotate(-2deg); }
  100% { transform: translate(0, 0) rotate(-1deg); }
}

.chip[data-drift="a"] { animation: drift-a 9s ease-in-out infinite; }
.chip[data-drift="b"] { animation: drift-b 11s ease-in-out infinite; }
.chip[data-drift="c"] { animation: drift-c 10s ease-in-out infinite; }
.chip[data-drift="d"] { animation: drift-d 12.5s ease-in-out infinite; }

.chip.dragging,
.chip.settling {
  animation: none;
}

.chip.returning {
  animation: none;
  transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.chip:hover,
.chip.active-touch {
  transform: scale(1.12) !important;
}

/* ============================================
   HERO ENTRANCE
   ============================================ */

@keyframes rise-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-copy .eyebrow { animation: rise-in 0.7s ease 0.1s both; }
.hero-copy h1        { animation: rise-in 0.8s ease 0.22s both; }
.hero-copy p          { animation: rise-in 0.8s ease 0.34s both; }
.hero-actions         { animation: rise-in 0.8s ease 0.46s both; }

@keyframes chip-in {
  from { opacity: 0; transform: translateY(18px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.chip { animation-fill-mode: both; }
.chip.chip-enter {
  animation: chip-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ============================================
   SCROLL REVEAL
   ============================================ */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

.reveal-stagger.in-view .service-card,
.reveal-stagger.in-view .process-step,
.reveal-stagger.in-view .portfolio-card {
  animation: rise-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.reveal-stagger .service-card:nth-child(1),
.reveal-stagger .process-step:nth-child(1),
.reveal-stagger .portfolio-card:nth-child(1) { animation-delay: 0.05s; }
.reveal-stagger .service-card:nth-child(2),
.reveal-stagger .process-step:nth-child(2),
.reveal-stagger .portfolio-card:nth-child(2) { animation-delay: 0.16s; }
.reveal-stagger .service-card:nth-child(3),
.reveal-stagger .process-step:nth-child(3),
.reveal-stagger .portfolio-card:nth-child(3) { animation-delay: 0.27s; }
.reveal-stagger .service-card:nth-child(4) { animation-delay: 0.38s; }

/* ============================================
   LOGO — glass base + shine sweep
   ============================================ */

.logo-mark .ambient-shine {
  transition: opacity 0.3s ease;
}

.logo-mark:hover .ambient-shine,
.logo-mark:focus-visible .ambient-shine {
  animation-duration: 1.1s !important;
}

/* ============================================
   MISC MICRO-INTERACTIONS
   ============================================ */

.service-icon {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.service-card:hover .service-icon {
  transform: rotate(-8deg) scale(1.08);
}

@keyframes pulse-dot {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

.hero-hint .pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
  animation: pulse-dot 1.8s ease-in-out infinite;
}