/* ═══════════════════════════════════════════
   TANDHEELKUNDIG CENTRUM BORNEBROEK & DE BOER
   animations.css — Premium Animation Overrides
   MOBILE-FIRST OPTIMIZED & ACCESSIBLE
═══════════════════════════════════════════ */

/* ── ENHANCED CARD ANIMATIONS ────────── */
.treat-card {
  transition: all .5s cubic-bezier(.16,1,.3,1) !important;
  transform-origin: center;
}

.treat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 120%, rgba(107,143,62,.12) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}

.treat-card::after {
  height: 3px !important;
  background: linear-gradient(90deg, var(--green) 0%, var(--green-light) 100%) !important;
  box-shadow: 0 0 12px var(--green);
  transition: transform .5s cubic-bezier(.16,1,.3,1) !important;
}

.treat-card:hover {
  background: rgba(255,255,255,.09) !important;
  transform: translateY(-10px) scale(1.02) !important;
  border-color: rgba(255,255,255,.15) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.4) !important;
}

.treat-card:hover::before {
  opacity: 1;
}

.treat-card:hover .treat-icon {
  transform: scale(1.15) rotate(5deg);
}

.treat-icon {
  transition: transform .5s cubic-bezier(.34,1.56,.64,1) !important;
  display: inline-block;
}

/* ── TEAM CARD ENHANCEMENTS ────────── */
.team-card {
  transition: all .5s cubic-bezier(.16,1,.3,1) !important;
  position: relative;
  transform-origin: center bottom;
}

.team-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(107,143,62,.08) 0%, transparent 50%);
  opacity: 0;
  transition: opacity .5s ease;
  z-index: 1;
  pointer-events: none;
}

.team-card:hover {
  transform: translateY(-12px) scale(1.03) !important;
  box-shadow: 0 28px 70px rgba(15,37,64,.2), 0 0 0 1px rgba(107,143,62,.2) !important;
}

.team-card:hover::before {
  opacity: 1;
}

.team-avatar img {
  transition: transform .6s cubic-bezier(.16,1,.3,1) !important;
}

.team-card:hover .team-avatar img {
  transform: scale(1.08) rotate(1deg) !important;
}

.team-badge {
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), background .3s ease !important;
}

.team-card:hover .team-badge {
  transform: scale(1.08);
  background: var(--green-light) !important;
}

/* ── GALLERY ENHANCEMENTS (Simplified for accessibility) ────────── */
.gallery-item {
  transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease !important;
  position: relative;
}

.gallery-item:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.5) !important;
  z-index: 10;
}

.gallery-item img {
  transition: transform .6s cubic-bezier(.16,1,.3,1) !important;
}

.gallery-item:hover img {
  transform: scale(1.1) !important;
}

/* ── INFO BLOCKS ANIMATION ────────── */
.info-block {
  transition: all .4s cubic-bezier(.16,1,.3,1) !important;
  position: relative;
  overflow: hidden;
}

.info-block::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--green-light);
  transform: scaleY(0);
  transition: transform .4s cubic-bezier(.16,1,.3,1);
  transform-origin: bottom;
}

.info-block:hover {
  background: rgba(255,255,255,.1) !important;
  transform: translateX(8px);
  border-left-color: var(--green) !important;
}

.info-block:hover::before {
  transform: scaleY(1);
}

.info-icon {
  transition: transform .4s cubic-bezier(.34,1.56,.64,1) !important;
}

.info-block:hover .info-icon {
  transform: scale(1.15) rotate(5deg);
}

/* ── HERO ENHANCEMENTS ────────── */
.hero-bg-grid {
  animation: gridShift 30s linear infinite !important;
}

@keyframes gridShift {
  from { background-position: 0 0; }
  to { background-position: 70px 70px; }
}

.hero-glow-1, .hero-glow-2 {
  animation-duration: 8s !important;
}

/* Subtle parallax on hero glows (desktop only) */
@media (min-width: 1024px) {
  .hero-glow-1 {
    animation: glowFloat1 10s ease-in-out infinite !important;
  }

  .hero-glow-2 {
    animation: glowFloat2 12s ease-in-out 2s infinite !important;
  }

  @keyframes glowFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: .6; }
    33% { transform: translate(20px, -30px) scale(1.1); opacity: .8; }
    66% { transform: translate(-15px, 20px) scale(1.15); opacity: 1; }
  }

  @keyframes glowFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: .6; }
    33% { transform: translate(-25px, 15px) scale(1.12); opacity: .85; }
    66% { transform: translate(20px, -20px) scale(1.08); opacity: 1; }
  }
}

/* ── SCROLL PROGRESS INDICATOR ────────── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--green) 0%, var(--green-light) 100%);
  z-index: 9999;
  transition: width 0.1s ease-out;
  box-shadow: 0 0 10px var(--green-light);
}

/* ── MARQUEE SPEED VARIATION ON HOVER ────────── */
.marquee-wrap:hover .marquee-track {
  animation-duration: 15s !important;
}

/* ── FLOATING ANIMATION FOR BADGES ────────── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.hero-img-badge {
  animation: float 3s ease-in-out infinite;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}

.hero-img-badge:hover {
  animation-play-state: paused;
  transform: scale(1.1) rotate(-2deg);
}

/* ── ENHANCED HOVER STATES FOR NAV LINKS ────────── */
.nav-link {
  position: relative;
  transition: color .3s ease, transform .3s ease !important;
}

.nav-link::after {
  transition: all .4s cubic-bezier(.16,1,.3,1) !important;
}

.nav-link:hover {
  transform: translateY(-2px);
}

.drop-item {
  position: relative;
  transition: all .3s cubic-bezier(.16,1,.3,1) !important;
}

.drop-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 70%;
  background: var(--green);
  opacity: 0;
  transition: width .3s cubic-bezier(.16,1,.3,1), opacity .3s ease;
  border-radius: 0 4px 4px 0;
}

.drop-item:hover::before {
  width: 3px;
  opacity: 1;
}

.drop-item:hover {
  transform: translateX(6px);
}

/* ── ALERT BAR SLIDE IN ────────── */
.alert-bar {
  animation: slideDown 0.6s cubic-bezier(.16,1,.3,1) 0.5s both;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ── TEXT SELECTION STYLING ────────── */
::selection {
  background: rgba(107, 143, 62, 0.3);
  color: var(--navy-dark);
}

::-moz-selection {
  background: rgba(107, 143, 62, 0.3);
  color: var(--navy-dark);
}

/* ── SMOOTH SCROLLBAR (Chrome/Edge/Safari) ────────── */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(15, 37, 64, 0.3);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--green) 0%, var(--green-light) 100%);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--green-light);
}

/* ── FOCUS VISIBLE STYLES (ACCESSIBILITY) ────────── */
:focus-visible {
  outline: 2px solid var(--green-light);
  outline-offset: 3px;
  border-radius: 2px;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--green-light);
  outline-offset: 4px;
}

/* ── STAGGER DELAYS FOR LARGER GROUPS ────────── */
.d7 { transition-delay: .56s; }
.d8 { transition-delay: .64s; }
.d9 { transition-delay: .72s; }
.d10 { transition-delay: .80s; }
.treat-card {
  transition: all .5s cubic-bezier(.16,1,.3,1) !important;
  transform-origin: center;
  will-change: transform;
}

.treat-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 120%, rgba(107,143,62,.12) 0%, transparent 60%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
}

.treat-card::after {
  height: 3px !important;
  background: linear-gradient(90deg, var(--green) 0%, var(--green-light) 100%) !important;
  box-shadow: 0 0 12px var(--green);
  transition: transform .5s cubic-bezier(.16,1,.3,1) !important;
}

.treat-card:hover {
  background: rgba(255,255,255,.09) !important;
  transform: translateY(-10px) scale(1.02) !important;
  border-color: rgba(255,255,255,.15) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.4) !important;
}

.treat-card:hover::before {
  opacity: 1;
}

.treat-card:hover .treat-icon {
  transform: scale(1.15) rotate(5deg);
  filter: drop-shadow(0 4px 8px rgba(107,143,62,.4));
}

.treat-icon {
  transition: transform .5s cubic-bezier(.34,1.56,.64,1), filter .4s ease !important;
  display: inline-block;
}

/* ── TEAM CARD ENHANCEMENTS ────────── */
.team-card {
  transition: all .5s cubic-bezier(.16,1,.3,1) !important;
  position: relative;
  transform-origin: center bottom;
}

.team-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(107,143,62,.08) 0%, transparent 50%);
  opacity: 0;
  transition: opacity .5s ease;
  z-index: 1;
  pointer-events: none;
}

.team-card:hover {
  transform: translateY(-12px) scale(1.03) !important;
  box-shadow: 0 28px 70px rgba(15,37,64,.2), 0 0 0 1px rgba(107,143,62,.2) !important;
}

.team-card:hover::before {
  opacity: 1;
}

.team-avatar img {
  transition: transform .6s cubic-bezier(.16,1,.3,1), filter .4s ease !important;
}

.team-card:hover .team-avatar img {
  transform: scale(1.08) rotate(1deg) !important;
  filter: brightness(1.05) !important;
}

.team-badge {
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), background .3s ease !important;
}

.team-card:hover .team-badge {
  transform: scale(1.08);
  background: var(--green-light) !important;
}

/* ── GALLERY ENHANCEMENTS ────────── */
.gallery-item {
  transition: transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease !important;
  position: relative;
}

/* Verwijder blur overlay en vergrootglas - alleen zoom effect */
.gallery-item:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.5) !important;
  z-index: 10;
}

.gallery-item img {
  transition: transform .6s cubic-bezier(.16,1,.3,1) !important;
}

.gallery-item:hover img {
  transform: scale(1.1) !important;
}

/* ── INFO BLOCKS ANIMATION ────────── */
.info-block {
  transition: all .4s cubic-bezier(.16,1,.3,1) !important;
  position: relative;
  overflow: hidden;
}

.info-block::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--green-light);
  transform: scaleY(0);
  transition: transform .4s cubic-bezier(.16,1,.3,1);
  transform-origin: bottom;
}

.info-block:hover {
  background: rgba(255,255,255,.1) !important;
  transform: translateX(8px);
  border-left-color: var(--green) !important;
}

.info-block:hover::before {
  transform: scaleY(1);
}

.info-icon {
  transition: transform .4s cubic-bezier(.34,1.56,.64,1) !important;
}

.info-block:hover .info-icon {
  transform: scale(1.15) rotate(5deg);
}

/* ── HERO ENHANCEMENTS ────────── */
.hero-bg-grid {
  animation: gridShift 30s linear infinite !important;
}

@keyframes gridShift {
  from { background-position: 0 0; }
  to { background-position: 70px 70px; }
}

.hero-glow-1, .hero-glow-2 {
  animation-duration: 8s !important;
}

/* Subtle parallax on hero glows */
@media (min-width: 1024px) {
  .hero-glow-1 {
    animation: glowFloat1 10s ease-in-out infinite !important;
  }

  .hero-glow-2 {
    animation: glowFloat2 12s ease-in-out 2s infinite !important;
  }

  @keyframes glowFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: .6; }
    33% { transform: translate(20px, -30px) scale(1.1); opacity: .8; }
    66% { transform: translate(-15px, 20px) scale(1.15); opacity: 1; }
  }

  @keyframes glowFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: .6; }
    33% { transform: translate(-25px, 15px) scale(1.12); opacity: .85; }
    66% { transform: translate(20px, -20px) scale(1.08); opacity: 1; }
  }
}

/* ── SCROLL PROGRESS INDICATOR ────────── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--green) 0%, var(--green-light) 100%);
  z-index: 9999;
  transition: width 0.1s ease-out;
  box-shadow: 0 0 10px var(--green-light);
}

/* ── BUTTON RIPPLE EFFECT ────────── */
.btn, .nav-cta {
  position: relative;
  overflow: hidden;
}

.btn::before, .nav-cta::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.btn:active::before, .nav-cta:active::before {
  width: 300px;
  height: 300px;
}

/* ── MARQUEE SPEED VARIATION ON HOVER ────────── */
.marquee-wrap:hover .marquee-track {
  animation-duration: 15s !important;
}

/* ── SMOOTH SCROLL BEHAVIOR ────────── */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

/* ── FLOATING ANIMATION FOR BADGES ────────── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.hero-img-badge {
  animation: float 3s ease-in-out infinite;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}

.hero-img-badge:hover {
  animation-play-state: paused;
  transform: scale(1.1) rotate(-2deg);
}

/* ── ENHANCED HOVER STATES FOR NAV LINKS ────────── */
.nav-link {
  position: relative;
  transition: color .3s ease, transform .3s ease !important;
}

.nav-link::after {
  transition: all .4s cubic-bezier(.16,1,.3,1) !important;
}

.nav-link:hover {
  transform: translateY(-2px);
}

.drop-item {
  position: relative;
  transition: all .3s cubic-bezier(.16,1,.3,1) !important;
}

.drop-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 70%;
  background: var(--green);
  opacity: 0;
  transition: width .3s cubic-bezier(.16,1,.3,1), opacity .3s ease;
  border-radius: 0 4px 4px 0;
}

.drop-item:hover::before {
  width: 3px;
  opacity: 1;
}

.drop-item:hover {
  transform: translateX(6px);
}

/* ── ALERT BAR SLIDE IN ────────── */
.alert-bar {
  animation: slideDown 0.6s cubic-bezier(.16,1,.3,1) 0.5s both;
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ── MOBILE OPTIMIZATIONS ────────── */
@media (max-width: 768px) {
  /* Reduce animation complexity on mobile for performance */
  .treat-card:hover,
  .team-card:hover,
  .gallery-item:hover {
    transform: translateY(-5px) !important;
  }

  .custom-cursor,
  .custom-cursor-dot {
    display: none !important;
  }
}

/* ── ACCESSIBILITY: Respect reduced motion preference ────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .custom-cursor,
  .custom-cursor-dot {
    display: none !important;
  }
}

/* ── PAGE TRANSITION ANIMATIONS ────────── */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  }
}

/* ── BREATHING PULSE ON PRIMARY CTA ────────── */
@keyframes breathe {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(107, 143, 62, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(107, 143, 62, 0);
  }
}

.btn-g, .nav-cta {
  animation: breathe 3s ease-in-out infinite;
}

.btn-g:hover, .nav-cta:hover {
  animation: none;
}

/* ── SMOOTH LINK TRANSITIONS ────────── */
a {
  transition: color 0.25s ease, opacity 0.25s ease;
}

/* ── TEXT SELECTION STYLING ────────── */
::selection {
  background: rgba(107, 143, 62, 0.3);
  color: var(--navy-dark);
}

::-moz-selection {
  background: rgba(107, 143, 62, 0.3);
  color: var(--navy-dark);
}

/* ── SMOOTH SCROLLBAR (Chrome/Edge/Safari) ────────── */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(15, 37, 64, 0.3);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--green) 0%, var(--green-light) 100%);
  border-radius: 5px;
  transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--green-light);
}

/* ── LOADING STATE SHIMMER ────────── */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.loading-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.05) 100%
  );
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}

/* ── FOCUS VISIBLE STYLES (ACCESSIBILITY) ────────── */
:focus-visible {
  outline: 2px solid var(--green-light);
  outline-offset: 3px;
  border-radius: 2px;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--green-light);
  outline-offset: 4px;
}

/* ── PRINT STYLES ────────── */
@media print {
  .custom-cursor,
  .custom-cursor-dot,
  .scroll-progress,
  #bb-panel,
  #nav,
  #bb-call-btn,
  #bb-call-popup,
  .hero-bg-grid,
  .hero-glow-1,
  .hero-glow-2 {
    display: none !important;
  }

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

/* ── UTILITY: Disable animations on specific elements ────────── */
.no-animate,
.no-animate * {
  animation: none !important;
  transition: none !important;
}

/* ── PERFORMANCE: GPU acceleration hints ────────── */
.treat-card,
.team-card,
.gallery-item,
.btn,
.nav-cta,
#bb-panel,
.hero-glow-1,
.hero-glow-2 {
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Remove will-change after animation completes (handled by JS for scroll items) */
.reveal.visible,
.reveal-l.visible,
.reveal-r.visible,
.reveal-s.visible,
.reveal-scale.visible,
.reveal-blur.visible {
  will-change: auto;
}

/* ── EXTRA: Tooltip style for titles ────────── */
[title] {
  position: relative;
  cursor: help;
}

/* ── STAGGER DELAYS FOR LARGER GROUPS ────────── */
.d7 { transition-delay: .56s; }
.d8 { transition-delay: .64s; }
.d9 { transition-delay: .72s; }
.d10 { transition-delay: .80s; }

/* ── MOBILE: Reduce transform intensity for better performance ────────── */
@media (max-width: 768px) {
  /* Simplified animations for mobile performance */
  .treat-card,
  .team-card,
  .gallery-item {
    transition-duration: 0.3s !important; /* Faster on mobile */
  }

  .treat-card:hover,
  .team-card:hover {
    transform: translateY(-4px) !important; /* Less movement */
  }

  .gallery-item:hover {
    transform: scale(1.01) !important;
  }

  .btn:hover,
  .nav-cta:hover {
    transform: translateY(-2px) !important;
  }

  /* Disable expensive effects on mobile */
  [data-parallax] {
    transform: none !important;
  }

  .treat-card::before,
  .team-card::before,
  .gallery-item::after {
    display: none; /* Remove overlay effects */
  }

  /* Simplified reveals for mobile */
  .reveal,
  .reveal-l,
  .reveal-r,
  .reveal-s,
  .reveal-scale,
  .reveal-blur {
    opacity: 0;
    transform: translate3d(0, 22px, 0) !important; /* Lighter, uniform slide */
    filter: none !important;
    transition: opacity 0.55s var(--reveal-ease), transform 0.55s var(--reveal-ease) !important;
    transition-delay: calc(var(--reveal-i, 0) * 60ms) !important;
  }

  .reveal.visible,
  .reveal-l.visible,
  .reveal-r.visible,
  .reveal-s.visible,
  .reveal-scale.visible,
  .reveal-blur.visible {
    opacity: 1;
    transform: none !important;
  }

  /* Faster delays on mobile */
  .d1 { transition-delay: .05s !important; }
  .d2 { transition-delay: .1s !important; }
  .d3 { transition-delay: .15s !important; }
  .d4 { transition-delay: .2s !important; }
  .d5 { transition-delay: .25s !important; }

  /* Remove blur effects (expensive on mobile) */
  .reveal-blur {
    filter: none !important;
  }

  /* Simpler lightbox on mobile */
  #lb-img {
    transition: transform 0.3s ease !important;
  }

  /* Remove breathing animation on mobile */
  .btn-g,
  .nav-cta {
    animation: none !important;
  }

  /* Simplify button effects */
  .btn::after,
  .nav-cta::before {
    display: none;
  }

  /* Remove GPU hints on mobile (can cause issues) */
  .treat-card,
  .team-card,
  .gallery-item {
    will-change: auto !important;
    backface-visibility: visible !important;
    perspective: none !important;
  }

  /* Optimize scroll progress */
  .scroll-progress {
    height: 2px; /* Thinner on mobile */
  }
}

/* ── HIGH CONTRAST MODE SUPPORT ────────── */
@media (prefers-contrast: high) {
  .custom-cursor {
    border-width: 3px;
  }

  .btn,
  .nav-cta {
    border: 2px solid currentColor;
  }

  ::selection {
    background: var(--green);
    color: white;
  }
}

/* ── DARK MODE DETECTION (if implemented later) ────────── */
@media (prefers-color-scheme: dark) {
  /* Currently site is dark by design, but this is here for future light mode */
}

/* ── LANDSCAPE MOBILE ADJUSTMENTS ────────── */
@media (max-width: 960px) and (orientation: landscape) {
  #hero {
    min-height: auto;
  }

  .hero-right {
    max-height: 60vh;
  }
}