/* =========================================================================
   VANTARA DENTAL — ELEVATION
   Sage motion language, considered-pace reveals, bolder typography,
   refined depth, and magnetic interactions.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. COLOR & SHADOW ENRICHMENT
   ------------------------------------------------------------------------- */
:root {
  /* Deepen the palette */
  --sage-400: #6F8078;        /* mid-sage for transitions */
  --ink-50: #F5F3EE;          /* near-white for elevated cards */

  /* Elevation shadow scale */
  --shadow-lift-sm: 0 4px 12px rgba(31, 43, 37, 0.08);
  --shadow-lift-md: 0 8px 24px rgba(31, 43, 37, 0.12);
  --shadow-lift-lg: 0 16px 40px rgba(31, 43, 37, 0.14);

  /* Motion: sage breath + easing */
  --ease-sage: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-breath: cubic-bezier(0.17, 0.67, 0.83, 0.67);
  --dur-breath: 240ms;
}

/* -------------------------------------------------------------------------
   2. FILM GRAIN OVERLAY (fixed, low opacity)
   ------------------------------------------------------------------------- */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="400" height="400"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" /%3E%3C/filter%3E%3Crect width="400" height="400" fill="rgb(28,31,29)" filter="url(%23n)" opacity="0.04" /%3E%3C/svg%3E');
  background-repeat: repeat;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
}

/* -------------------------------------------------------------------------
   3. TYPOGRAPHY: BOLDER DISPLAYS + ITALIC SAGE EMPHASIS
   ------------------------------------------------------------------------- */
h1, h2 {
  font-weight: 450;
}

h1 em, h2 em, .display em {
  font-style: italic;
  color: var(--sage-700);
  font-weight: 420;
}

/* Enhance Fraunces SOFT for more character */
h1, h2 {
  font-variation-settings: 'opsz' 144, 'SOFT' 35;
}

/* -------------------------------------------------------------------------
   4. STAGGERED REVEAL: Considered-pace scroll
   The existing .reveal observer triggers .is-visible. We layer stagger
   via data-stagger attribute on child elements.
   --------- ------------------------------------------------------------ */

/* Base reveal: slower entrance for more breath */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger elements within a revealed container */
.reveal[data-stagger] > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}

.reveal.is-visible[data-stagger] > :nth-child(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0ms;
}
.reveal.is-visible[data-stagger] > :nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 120ms;
}
.reveal.is-visible[data-stagger] > :nth-child(3) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 160ms;
}
.reveal.is-visible[data-stagger] > :nth-child(4) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 200ms;
}
.reveal.is-visible[data-stagger] > :nth-child(n+5) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 240ms;
}

/* -------------------------------------------------------------------------
   5. HERO ELEVATION
   --------- ------------------------------------------------------------ */
.home-hero {
  position: relative;
}

.home-hero__copy {
  position: relative;
  z-index: 2;
}

/* Hero headline: stronger presence */
.home-hero h1 {
  font-weight: 460;
  letter-spacing: -0.035em;
}

/* Hero image: subtle lift + refined borders */
.home-hero__media {
  position: relative;
}

.home-hero__media img {
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lift-md);
  transition: box-shadow 320ms var(--ease-breath);
}

.home-hero__media:hover img {
  box-shadow: var(--shadow-lift-lg);
}

/* Float card elevation */
.home-hero__floatcard {
  box-shadow: var(--shadow-lift-md);
  border-radius: var(--r-lg);
  background: var(--ivory);
  border-top: 1px solid var(--sage-100);
}

/* -------------------------------------------------------------------------
   6. SAGE MOTION ON INTERACTIVE ELEMENTS
   Gentle sage color-shift + soft scale/opacity on hover.
   --------- ------------------------------------------------------------ */

/* Primary CTAs: magnetic effect on desktop */
.btn--lg, .btn {
  position: relative;
  transition:
    color 200ms var(--ease-breath),
    background-color 200ms var(--ease-breath),
    box-shadow 200ms var(--ease-breath),
    transform 200ms var(--ease-sage);
}

.btn--lg:active, .btn:active {
  transform: scale(0.96);
}

/* Sage breath for primary buttons */
.btn:not(.btn--ghost):not(.btn--alert) {
  transition:
    background-color 200ms var(--ease-breath),
    box-shadow 200ms var(--ease-breath),
    transform 200ms var(--ease-sage);
}

.btn:not(.btn--ghost):not(.btn--alert):hover {
  background-color: var(--sage-700);
  transform: scale(1.02);
}

/* Ghost buttons: sage underline reveal */
.btn--ghost {
  position: relative;
  color: var(--ink-900);
  border-bottom: 1px solid var(--stone);
  padding-bottom: 4px;
  transition: color 200ms var(--ease-breath), border-color 200ms var(--ease-breath);
}

.btn--ghost:hover {
  color: var(--sage-700);
  border-color: var(--sage-700);
}

/* Alert buttons: restrained warmth */
.btn--alert {
  transition: background-color 200ms var(--ease-breath), transform 200ms var(--ease-sage);
}

.btn--alert:hover {
  background-color: var(--alert);
  transform: scale(1.01);
}

/* -------------------------------------------------------------------------
   7. CARD ELEVATION: Hover lift + edge accent
   --------- ------------------------------------------------------------ */
.service-card, .card {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lift-sm);
  transition:
    box-shadow 280ms var(--ease-breath),
    transform 280ms var(--ease-breath),
    border-color 280ms var(--ease-breath);
  border-top: 2px solid transparent;
}

.service-card:hover, .card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lift-lg);
  border-top-color: var(--sage-700);
}

.service-card__media img {
  transition: transform 320ms var(--ease-breath);
}

.service-card:hover .service-card__media img {
  transform: scale(1.02);
}

/* Card link arrow: sage glow */
.service-card .link-arrow {
  color: var(--sage-700);
  transition: color 200ms var(--ease-breath);
}

.service-card:hover .link-arrow {
  color: var(--sage-600);
}

/* -------------------------------------------------------------------------
   8. SECTION RHYTHM: Refined dividers + breathing space
   --------- ------------------------------------------------------------ */

/* Top divider: subtle sage hairline */
.section {
  border-top: 1px solid rgba(139, 154, 143, 0.12);
  position: relative;
}

.section:first-of-type {
  border-top: none;
}

/* Enhance cream & paper backgrounds */
.section--cream {
  background: linear-gradient(135deg, var(--cream) 0%, var(--stone) 100%);
  opacity: 0.95;
  background-attachment: fixed;
}

.section--paper {
  background: var(--paper);
}

/* Section heads: stagger-friendly */
.section-head {
  margin-bottom: clamp(40px, 5vw, 80px);
}

.section-head h2 {
  font-weight: 460;
}

/* -------------------------------------------------------------------------
   9. LINK REFINEMENT
   --------- ------------------------------------------------------------ */
a, .link-arrow {
  transition: color 200ms var(--ease-breath);
}

a:hover {
  color: var(--sage-700);
}

/* Arrow links: sage + arrow motion */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sage-700);
  font-weight: 500;
}

.link-arrow svg {
  transition: transform 200ms var(--ease-sage), color 200ms var(--ease-breath);
  width: 20px;
  height: 20px;
  stroke-width: 1.8;
}

.link-arrow:hover svg {
  transform: translateX(3px);
  color: var(--sage-700);
}

/* -------------------------------------------------------------------------
   10. FOCUS-VISIBLE: Refined ring
   --------- ------------------------------------------------------------ */
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid var(--sage-700);
  outline-offset: 3px;
  border-radius: 2px;
}

/* -------------------------------------------------------------------------
   11. TRUST BAR & PROOF ELEMENTS
   --------- ------------------------------------------------------------ */
.trustbar__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  transition: background-color 200ms var(--ease-breath);
  cursor: default;
}

.trustbar__item:hover {
  background-color: rgba(139, 154, 143, 0.06);
}

.trustbar__item svg {
  color: var(--sage-700);
  transition: color 200ms var(--ease-breath);
}

/* -------------------------------------------------------------------------
   12. PARALLAX: Subtle image depth
   --------- ------------------------------------------------------------ */
[data-parallax] {
  overflow: hidden;
  border-radius: var(--r-xl);
}

[data-parallax] img {
  transform-origin: center;
  will-change: transform;
}

/* -------------------------------------------------------------------------
   13. REDUCED MOTION: Respect accessibility
   --------- ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ease-sage: ease;
    --ease-breath: ease;
    --dur-breath: 0ms;
  }

  * {
    animation: none !important;
    transition: none !important;
  }

  .btn,
  .service-card,
  .card,
  .link-arrow,
  a,
  [data-parallax] img {
    transition: none;
  }

  .reveal,
  .reveal[data-stagger] > * {
    opacity: 1;
    transform: none;
  }
}

/* -------------------------------------------------------------------------
   14. DARK MODE ENHANCEMENTS (if dark mode is added in future)
   --------- ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  /* Body grain remains subtle */
  body::before {
    opacity: 0.04;
  }

  .service-card, .card {
    background-color: var(--ink-800);
    border-top-color: transparent;
  }

  .service-card:hover, .card:hover {
    border-top-color: var(--sage-300);
  }
}