/* ============================================================
   PROFCLEAN — ANIMATIONS.CSS
   Scroll reveals, keyframes, hover transitions
   ============================================================ */

/* ─── Scroll reveal base ──────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variants */
.reveal--left  { transform: translateX(-30px); }
.reveal--right { transform: translateX(30px); }
.reveal--scale { transform: scale(0.94); }
.reveal--left.is-visible,
.reveal--right.is-visible,
.reveal--scale.is-visible { transform: none; opacity: 1; }

/* Stagger delays for children inside .stagger-container */
.stagger-container .reveal:nth-child(1) { transition-delay: 0ms; }
.stagger-container .reveal:nth-child(2) { transition-delay: 80ms; }
.stagger-container .reveal:nth-child(3) { transition-delay: 160ms; }
.stagger-container .reveal:nth-child(4) { transition-delay: 240ms; }
.stagger-container .reveal:nth-child(5) { transition-delay: 320ms; }
.stagger-container .reveal:nth-child(6) { transition-delay: 400ms; }
.stagger-container .reveal:nth-child(7) { transition-delay: 480ms; }
.stagger-container .reveal:nth-child(8) { transition-delay: 560ms; }

/* ─── Hero word animation ─────────────────────────────────── */
.hero-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px);
  animation: word-in 0.6s var(--ease) forwards;
}
.hero-word:nth-child(1) { animation-delay: 0.15s; }
.hero-word:nth-child(2) { animation-delay: 0.27s; }
.hero-word:nth-child(3) { animation-delay: 0.39s; }
.hero-word:nth-child(4) { animation-delay: 0.51s; }
.hero-word:nth-child(5) { animation-delay: 0.63s; }
.hero-word:nth-child(6) { animation-delay: 0.75s; }
.hero-word:nth-child(7) { animation-delay: 0.87s; }
.hero-word:nth-child(8) { animation-delay: 0.99s; }

@keyframes word-in {
  to { opacity: 1; transform: translateY(0); }
}

/* Hero sub elements */
.hero-sub {
  opacity: 0;
  animation: fade-up 0.6s var(--ease) 0.8s forwards;
}
.hero-actions {
  opacity: 0;
  animation: fade-up 0.6s var(--ease) 1s forwards;
}
.hero-trust {
  opacity: 0;
  animation: fade-up 0.5s var(--ease) 1.2s forwards;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ─── Float animation (trust badges in hero) ──────────────── */
@keyframes float {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-8px); }
}
.float-badge {
  animation: float 4s ease-in-out infinite;
}
.float-badge--delay {
  animation-delay: 1.5s;
}

/* ─── Ken Burns (hero bg image) ───────────────────────────── */
@keyframes ken-burns {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
.ken-burns {
  animation: ken-burns 12s ease-in-out infinite alternate;
}

/* ─── Card hover lift ─────────────────────────────────────── */
.card-lift {
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card-lift:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

/* ─── Feature cards ───────────────────────────────────────── */
.feature-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  transition: all var(--dur) var(--ease);
  position: relative;
  overflow: hidden;
}
.feature-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--teal);
  transform: scaleY(0);
  transition: transform var(--dur) var(--ease);
  transform-origin: bottom;
}
.feature-card:hover::before { transform: scaleY(1); }
.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-teal);
  background: #F8FDFF;
}
.feature-card__icon {
  width: 52px; height: 52px;
  border-radius: var(--radius-sm);
  background: var(--teal-pale);
  color: var(--teal);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 20px;
  transition: transform var(--dur) var(--ease), background var(--dur), color var(--dur);
}
.feature-card:hover .feature-card__icon {
  transform: scale(1.1);
  background: var(--teal);
  color: #fff;
}
.feature-card__icon--green { background: var(--green-pale); color: var(--green); }
.feature-card:hover .feature-card__icon--green { background: var(--green); color: #fff; }
.feature-card__icon--clay  { background: #FDF3E8; color: var(--clay); }
.feature-card:hover .feature-card__icon--clay  { background: var(--clay); color: #fff; }
.feature-card__icon--teal  { background: var(--teal-pale); color: var(--teal); }
.feature-card:hover .feature-card__icon--teal  { background: var(--teal); color: #fff; }
.feature-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
  margin-bottom: 10px;
}
.feature-card__text {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.65;
}

/* ─── Service cards ───────────────────────────────────────── */
.service-card {
  display: block;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all var(--dur) var(--ease);
  text-decoration: none;
  color: var(--text);
}
.service-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-teal);
  color: var(--text);
}
.service-card__img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.service-card:hover .service-card__img { transform: scale(1.04); }
.service-card__body { padding: 24px 20px 20px; }
.service-card__eyebrow {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--teal); font-family: var(--font-heading);
  margin-bottom: 6px;
}
.service-card__title {
  font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: var(--navy);
  margin-bottom: 8px;
}
.service-card__text { font-size: 0.87rem; color: var(--muted); line-height: 1.6; margin-bottom: 16px; }
.service-card__link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.85rem; font-weight: 600; font-family: var(--font-heading);
  color: var(--teal); transition: gap var(--dur) var(--ease);
}
.service-card:hover .service-card__link { gap: 10px; }
.service-card__arrow { font-size: 1rem; }

/* ─── Gallery tiles ───────────────────────────────────────── */
.gallery-tile {
  position: relative; overflow: hidden; border-radius: var(--radius);
  cursor: pointer; background: var(--border);
}
.gallery-tile img {
  width: 100%; height: 220px; object-fit: cover;
  transition: transform 0.5s var(--ease);
  display: block;
}
.gallery-tile:hover img { transform: scale(1.06); }
.gallery-tile__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12,35,64,0.75) 0%, transparent 50%);
  opacity: 0; transition: opacity var(--dur) var(--ease);
  display: flex; flex-direction: column; justify-content: flex-end; padding: 16px;
}
.gallery-tile:hover .gallery-tile__overlay { opacity: 1; }
.gallery-tile__caption {
  font-family: var(--font-heading); font-size: 0.85rem; font-weight: 600; color: #fff; margin-bottom: 4px;
}
.gallery-tile__cat {
  font-size: 0.72rem; color: rgba(255,255,255,0.75);
}
.gallery-tile__zoom {
  position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center;
  font-size: 1rem; opacity: 0; transform: scale(0.8);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.gallery-tile:hover .gallery-tile__zoom { opacity: 1; transform: scale(1); }

/* ─── Icon entrance (for icon blocks) ────────────────────────*/
@keyframes icon-bounce {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.icon-animate:hover { animation: icon-bounce 0.35s var(--ease); }

/* ─── Gradient text ───────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, var(--teal) 0%, var(--green) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}