@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap");

:root {
  --button-color: #6f7479;
  --brand: #a0886f;
  /* --brand: #ff9804; */
}

/* HERO PAGE */

.logo-white,
.logo-black {
  transition: opacity 0.3s ease;
}

.logo-black.hidden,
.logo-white.hidden {
  display: none;
}
#ourWork .gallery-img {
  display: block;
}

.btn-primary {
  /* background-color: var(--button-color); */
  color: #fff;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 0.5rem;
  border: 1px solid var(--brand);
  transition: background-color 0.3s ease, button-border-color 0.3s ease;
  display: inline-block;
}

.border-nav {
  border-bottom: 1px solid rgba(233, 222, 217, 0.2);
}

.btn-primary.scrolled {
  background-color: #fff; /* match navbar background */
  color: #000; /* black text */
  border-color: var(--brand); /* keep orange border */
}

.text-lg {
  font-family: "Source Serif 4", serif;
  text-transform: uppercase;
}

.text-3xl {
  font-family: "Source Serif 4", serif;
}

.btn-primary:hover {
  background-color: var(--brand);
  border-color: var(--brand);
}

.icon-colored {
  color: var(--brand);
  fill: currentColor;            /* SVG inherits the color */
  transition: color .2s ease, fill .2s ease;
}

/* When the button is hovered, make only the icon white */
.btn-primary:hover .icon-colored {
  color: #fff;
}

/* Secondary mobile nav */
.mobile-topbar {
  display: none;
}

.location-link {
  flex-direction: row;
}

@media (max-width: 1200px) {
  .desktop-phone {
    display: none;
  }
  .mobile-topbar {
    display: flex;
  }
}

/* On very small screens (<500px): stack vertically */
@media (max-width: 500px) {
  .location-link {
    flex-direction: column;
  }

  .location-link span {
    margin-left: 10px !important; /* remove horizontal spacing */
    margin-right: 10px !important; /* remove horizontal spacing */
    margin-top: 8px; /* add vertical spacing instead */
  }
}

/* Reviews Section */

/* About Section */
.doctor-name {
  font-family: "Source Serif 4", serif; /* ili 'Helvetica Light' ako želiš */
  letter-spacing: 0.5px;
}

/* Slider base */
.ba-slider {
  position: relative;
}

/* Ensure TwentyTwenty wrappers inherit the card height */
#ourWork .twentytwenty-wrapper,
#ourWork .twentytwenty-container {
  height: 100% !important;
}

/* Make the plugin images truly fill the box */
#ourWork .twentytwenty-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/* Desktop/tablet: keep a fixed, elegant height */
@media (min-width: 768px) {
  .ba-slider {
    height: 520px;
  }
  .ba-slider img {
    object-fit: cover;
  } /* crop nicely */
}

/* Mobile: auto-fit height to the image (no letterboxing) */
@media (max-width: 767px) {
  .ba-slider img {
    object-fit: contain;
  } /* show full image */
}

/* helps Tailwind columns behave nicely */
.break-inside-avoid {
  break-inside: avoid;
}

.edge-wrap {
  position: relative;
  --edge-wrap-width: 1330px;
  --edge-fade-width: 28px; /* try 20–40px */
  --edge-color: rgba(0, 0, 0, 0.07);
}

/* Two vertical fades anchored to the content edges */
.edge-wrap::before {
  content: "";
  position: absolute;
  inset: 0; /* cover the whole section */
  pointer-events: none;
  background:
    /* left rail */ linear-gradient(
        to right,
        var(--edge-color),
        rgba(0, 0, 0, 0) 60%
      )
      left calc(50% - (var(--edge-wrap-width) / 2)) top / var(--edge-fade-width)
      100% no-repeat,
    /* right rail */
      linear-gradient(to left, var(--edge-color), rgba(0, 0, 0, 0) 60%) right
      calc(50% - (var(--edge-wrap-width) / 2)) top / var(--edge-fade-width) 100%
      no-repeat;
  /* Only show on light backgrounds; if you need to hide on dark, just don't add .edge-wrap there */
}

/* Optional: soften on small screens (content is narrower anyway) */
@media (max-width: 768px) {
  .edge-wrap {
    --edge-fade-width: 18px;
    --edge-color: rgba(0, 0, 0, 0.06);
  }
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
} /* your nav = 110px */


/* ANIMATIONS */

/* HERO ANIMATION */

/* ===== Motion-safe defaults ===== */
@media (prefers-reduced-motion: reduce) {
  .reveal, .kenburns, .parallax-y { transition: none !important; animation: none !important; transform: none !important; }
}

/* Ken Burns (very gentle) */
@keyframes kenburns {
  from { transform: scale(1) translateZ(0); }
  to   { transform: scale(1.06) translateZ(0); }
}
.kenburns {
  transform-origin: center center;
  animation: kenburns 16s ease-out forwards;
}

/* Staggered reveal */
.reveal {
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition:
    opacity 600ms ease,
    transform 600ms cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Subtle slide-up for the bottom location bar */
.reveal-up {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.reveal-up.in {
  opacity: 1;
  transform: translateY(0);
}


/* ABOUT ANIMATION */

/* ===== About: extra reveal variants ===== */
.reveal-left,
.reveal-right,
.reveal-fade {
  opacity: 0;
  transition: opacity 600ms ease, transform 600ms cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal-left   { transform: translateX(-18px); }
.reveal-right  { transform: translateX(18px); }
.reveal-fade   { transform: translateY(8px) scale(.99); }

.reveal-left.in,
.reveal-right.in,
.reveal-fade.in {
  opacity: 1;
  transform: translateX(0) translateY(0) scale(1);
}

/* Full-width, draw-in underline for headings */
.title-underline{
  position: relative;
  display: inline-block;          /* shrink to the text, even if parent is text-center */
}
.title-underline::after{
  content:"";
  position:absolute;
  left:0;                         /* anchor to left edge: no translateX bugs */
  right:0;                        /* makes the bar width == text width */
  bottom:-0.15em;                 /* sits nicely below any font size/line-height */
  height:3px;
  background: var(--brand, #A0886F);
  border-radius: 2px;
  transform: scaleX(0);           /* hidden at start */
  transform-origin: left center;  /* grow from left to right */
  transition: transform 700ms cubic-bezier(.22,.61,.36,1) var(--reveal-delay,0ms);
  will-change: transform;
}
.title-underline.in::after{
  transform: scaleX(1);
}
/* Card micro-hover (already had transition on card; add subtle lift) */
.team-card {
  transition: transform 300ms ease, box-shadow 300ms ease;
  will-change: transform;
}
.team-card:hover {
  transform: translateY(-4px);
}

/* Reduced motion safety */
@media (prefers-reduced-motion: reduce) {
  .reveal-left, .reveal-right, .reveal-fade, .title-underline::after {
    transition: none !important;
    transform: none !important;
  }
}


/* Reviews Animation */

/* ---- Reviews: subtle card lift + reveal helpers ---- */
.review-card {
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
  will-change: transform;
}
.review-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  border-color: rgba(160,136,111,.35);
}

/* Avatar pop-in (child element inside a revealing card) */
.avatar-pop {
  opacity: 0;
  transform: scale(0.92) translateZ(0);
  transition: opacity 500ms ease, transform 500ms cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--avatar-delay, 140ms);
  will-change: transform, opacity;
}
.in .avatar-pop { /* when parent (card) becomes .in via IntersectionObserver */
  opacity: 1;
  transform: scale(1) translateZ(0);
}

/* Stars glow-in */
.stars-glow {
  opacity: 0;
  transform: translateY(4px);
  filter: saturate(0.9);
  transition: opacity 500ms ease, transform 500ms ease, filter 600ms ease;
  transition-delay: var(--stars-delay, 160ms);
  will-change: opacity, transform, filter;
}
.in .stars-glow {
  opacity: 1;
  transform: translateY(0);
  filter: saturate(1);
}

/* Heading underline already exists as .title-underline (we reuse it) */

/* Reduced motion safety (piggybacks on your existing block) */
@media (prefers-reduced-motion: reduce) {
  .review-card, .avatar-pop, .stars-glow {
    transition: none !important;
    transform: none !important;
  }
}



/* Gallery Animations */

/* Bullet dot grow-in */
.dot-grow {
  transform: scale(0.5);
  opacity: 0;
  transition: transform 500ms ease, opacity 500ms ease;
  will-change: transform, opacity;
}
.in .dot-grow,
.dot-grow.in { /* support applying 'in' directly if needed */
  transform: scale(1);
  opacity: 1;
}

/* Card-ish hover for rating box */
.rating-card {
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
  will-change: transform;
}
.rating-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
  border-color: rgba(160,136,111,.5);
}


/* Services */

/* --- Services: hero & cards --- */
.services-hero {
  /* subtle entrance */
}
.services-hero.reveal-fade {}

/* Icon pop/tilt */
.icon-pop {
  opacity: 0;
  transform: scale(.92) rotate(-2deg);
  transition: opacity 500ms ease, transform 500ms cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--icon-delay, 120ms);
  will-change: transform, opacity;
}
.in .icon-pop { opacity: 1; transform: scale(1) rotate(0deg); }

/* Card sheen on hover (soft, non-janky) */
.card-sheen {
  position: relative;
  overflow: hidden;
}
.card-sheen::after {
  content: "";
  position: absolute;
  inset: -150% -50% auto -50%;
  height: 200%;
  width: 60%;
  transform: rotate(20deg) translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transition: transform 700ms ease;
  pointer-events: none;
}
.card-sheen:hover::after {
  transform: rotate(20deg) translateX(120%);
}

/* Card lift + border tint on hover (you already have some; this refines it) */
.service-card {
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease, background-color 250ms ease;
  will-change: transform;
}
.service-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  border-color: rgba(160,136,111,.5);
}

/* Title underline reused (title-underline already defined earlier) */

/* Reduced motion safety */
@media (prefers-reduced-motion: reduce) {
  .icon-pop, .card-sheen::after, .service-card {
    transition: none !important;
    transform: none !important;
  }
}


/* Contact Animations */

/* Contact: card polish + sheen hover */
.contact-card {
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease, background-color 250ms ease;
  will-change: transform;
}
.contact-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  border-color: rgba(160,136,111,.45);
}
.card-sheen::after {
  content: "";
  position: absolute;
  inset: -150% -50% auto -50%;
  height: 200%;
  width: 60%;
  transform: rotate(20deg) translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
  transition: transform 700ms ease;
  pointer-events: none;
}
.card-sheen:hover::after { transform: rotate(20deg) translateX(120%); }

/* Icon pop for contact list */
.icon-pop {
  opacity: 0;
  transform: scale(.92) rotate(-2deg);
  transition: opacity 500ms ease, transform 500ms cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--icon-delay, 120ms);
  will-change: transform, opacity;
}
.in .icon-pop { opacity: 1; transform: scale(1) rotate(0deg); }

/* Video fade-in and map slide-in reuse reveal-fade / reveal-right */




/* HERO LOADING */

/* Start the hero video hidden; fade in when ready */
#hero-video {
  opacity: 0;
  transition: opacity 600ms ease;
  will-change: opacity;
}
#hero-video.video-ready { opacity: 1; }

/* Loader overlay */
.hero-loader {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(1px);
  z-index: 5; /* above video, below your hero content which has z-10 */
}

/* Spinner */
.hero-spinner {
  width: 44px;
  height: 44px;
  border: 3px solid rgba(255,255,255,0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: hero-spin 800ms linear infinite;
}
@keyframes hero-spin { to { transform: rotate(360deg); } }

/* Reduced-motion: no spinner spin, just a subtle dot */
@media (prefers-reduced-motion: reduce) {
  .hero-spinner { animation: none; border: 3px solid rgba(255,255,255,0.5); border-top-color: rgba(255,255,255,0.5); }
}