/* ============================================================
   Scroll Reveal Animations
   Classes applied by scroll-animations.js
   ============================================================ */

/* Initial hidden states — JS adds these classes */
.anim-fade-up   { opacity: 0; transform: translateY(28px); }
.anim-fade-up-subtle { opacity: 0; transform: translateY(14px); }
.anim-fade-left { opacity: 0; transform: translateX(-44px); }
.anim-fade-right{ opacity: 0; transform: translateX(44px); }
.anim-fade-in   { opacity: 0; }
.anim-scale-up  { opacity: 0; transform: scale(0.92); }

/* Visible state — JS adds .is-visible, transition set via inline style */
.anim-fade-up.is-visible,
.anim-fade-up-subtle.is-visible,
.anim-fade-left.is-visible,
.anim-fade-right.is-visible,
.anim-fade-in.is-visible,
.anim-scale-up.is-visible {
  opacity: 1;
  transform: none;
}

/* Divider line draw — no hover conflict so CSS transition is fine here */
.anim-divider {
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.6s ease !important;
}
.anim-divider.is-visible {
  transform: scaleX(1);
}

/* Divider-2: lines grow toward diamond, diamond scales up in place */
.anim-divider-2 .divider-2__line--left {
  transform-origin: 0 8px; /* left end of line in viewBox coords */
  transform: scaleX(0);
  transition: transform 0.5s ease 0s;
}
.anim-divider-2 .divider-2__line--right {
  transform-origin: 200px 8px; /* right end of line in viewBox coords */
  transform: scaleX(0);
  transition: transform 0.5s ease 0s;
}
.anim-divider-2 .divider-2__diamond {
  transform-origin: 100px 8px; /* center of diamond in viewBox coords */
  transform: scale(0);
  transition: transform 0.4s ease 0.15s;
}
.anim-divider-2.is-visible .divider-2__line--left,
.anim-divider-2.is-visible .divider-2__line--right {
  transform: scaleX(1);
}
.anim-divider-2.is-visible .divider-2__diamond {
  transform: scale(1);
}

/* ============================================================
   Card & Element Hover Effects
   ============================================================ */

/* Lift on hover */
.pillar-card,
.step-card,
.credential-card,
.feature-card,
.booking-detail-item,
.dispensary-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pillar-card:hover,
.step-card:hover,
.credential-card:hover,
.feature-card:hover,
.booking-detail-item:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
}

.dispensary-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* Testimonial card hover */
.testimonial {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.testimonial:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* Comparison card hover */
.comparison-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.comparison-card--featured:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
}

/* Stat card hover */
.stat-card {
  transition: transform 0.25s ease;
}
.stat-card:hover {
  transform: translateY(-3px);
}

/* Philosophy quote hover */
.philosophy-quote {
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.philosophy-quote:hover {
  background-color: rgba(255, 255, 255, 0.13);
  border-color: rgba(197, 160, 89, 0.3);
}

/* Image zoom on hover */
.specialization__image,
.about-intro__image {
  overflow: hidden;
}
.specialization__image img,
.about-intro__image img {
  transition: transform 0.6s ease;
}
.specialization__image:hover img,
.about-intro__image:hover img {
  transform: scale(1.04);
}

/* Modal panel entrance */
.modal__detail-item {
  transition: background-color 0.2s ease;
}
.modal__detail-item:hover {
  background-color: var(--color-cream-dark);
}