/* Floral section framing – additive only. Core layout remains unchanged. */
.floral-frame-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.floral-frame-art::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(187, 123, 80, 0.30);
  border-radius: 26px;
}

.floral-cluster {
  position: absolute;
  width: clamp(170px, 18vw, 250px);
  aspect-ratio: 360 / 330;
  background: center / contain no-repeat url('../ui/floral-corner.svg');
  filter: drop-shadow(0 8px 14px rgba(64, 37, 75, 0.09));
  opacity: 0.98;
}

.floral-cluster.tl {
  top: -26px;
  left: -22px;
}

.floral-cluster.br {
  right: -22px;
  bottom: -26px;
  transform: scale(-1, -1);
}

/* Make only the relevant section content sit above the decorative frame. */
.hero > :not(.floral-frame-art),
.events-section .section-shell > :not(.floral-frame-art),
.experience .section-shell > :not(.floral-frame-art),
.process .section-shell > :not(.floral-frame-art),
.contact-panel > :not(.floral-frame-art) {
  position: relative;
  z-index: 1;
}

/* Hero: frame sits comfortably within the section without changing the existing layout. */
.hero .floral-frame-art {
  inset: 26px max(10px, calc((100% - 1380px) / 2));
}
.hero .floral-frame-art::before {
  inset: 18px;
  border-radius: 34px;
}
.hero .floral-cluster {
  width: clamp(190px, 18vw, 270px);
}
.hero .floral-cluster.tl {
  top: -18px;
  left: -18px;
}
.hero .floral-cluster.br {
  right: -18px;
  bottom: -18px;
}

/* Content sections: the frame is around the section shell, not through the content. */
.events-section .section-shell,
.experience .section-shell,
.process .section-shell {
  position: relative;
}
.events-section .floral-frame-art,
.experience .floral-frame-art,
.process .floral-frame-art {
  inset: -34px -22px;
}
.events-section .floral-frame-art::before,
.experience .floral-frame-art::before,
.process .floral-frame-art::before {
  inset: 18px;
  border-radius: 30px;
}

/* Dark experience section gets a brighter gold border. */
.experience .floral-frame-art::before,
.contact-panel .floral-frame-art::before {
  border-color: rgba(212, 165, 125, 0.34);
}
.experience .floral-cluster,
.contact-panel .floral-cluster {
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.15));
}

/* Contact panel uses its own internal floral frame. */
.contact-panel {
  position: relative;
}
.contact-panel .floral-frame-art {
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}
.contact-panel .floral-frame-art::before {
  inset: 18px;
  border-radius: 22px;
}
.contact-panel .floral-cluster.tl {
  top: -30px;
  left: -24px;
}
.contact-panel .floral-cluster.br {
  right: -24px;
  bottom: -30px;
}

/* The older line-drawn ornaments are hidden so the floral frame is not visually cluttered. */
.hero-ornament,
.hero-festive-decor,
.celebration-garland,
.contact-ornament {
  display: none !important;
}

@media (max-width: 1024px) {
  .floral-cluster {
    width: clamp(150px, 22vw, 210px);
  }
  .hero .floral-frame-art {
    inset: 18px 12px;
  }
  .events-section .floral-frame-art,
  .experience .floral-frame-art,
  .process .floral-frame-art {
    inset: -24px -14px;
  }
}

@media (max-width: 620px) {
  .floral-frame-art::before {
    inset: 8px;
    border-radius: 22px;
    opacity: .7;
  }
  .floral-cluster {
    width: 112px;
    opacity: .92;
  }
  .floral-cluster.tl {
    top: -14px;
    left: -14px;
  }
  .floral-cluster.br {
    right: -14px;
    bottom: -14px;
  }

  /* On mobile keep the cinematic hero clean: one decorative corner only. */
  .hero .floral-frame-art {
    inset: 4px;
  }
  .hero .floral-frame-art::before {
    display: none;
  }
  .hero .floral-cluster {
    width: 105px;
  }
  .hero .floral-cluster.tl {
    top: -4px;
    left: -4px;
  }
  .hero .floral-cluster.br {
    display: none;
  }

  .events-section .floral-frame-art,
  .experience .floral-frame-art,
  .process .floral-frame-art {
    inset: -10px -6px;
  }
  .contact-panel .floral-frame-art::before {
    inset: 8px;
    border-radius: 18px;
  }
  .contact-panel .floral-cluster {
    width: 100px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .floral-frame-art,
  .floral-cluster {
    animation: none !important;
  }
}