/* ============================================================
   SACRED EVENTS SECTION — STYLING & ANIMATION
   Handcrafted Indian Wedding Invitation Aesthetic
   ============================================================ */

.events {
  container-type: inline-size;
  position: relative;
  width: 100%;
  overflow-x: clip;
  background-color: var(--paper, #fcf3dc);
  color: var(--ink-navy, #17395c);

  --events-paper: #f8f0dd;
  --events-navy: #17406e;
  --events-body: #6b3a2a;
  --events-measure: min(92vw, 68rem);
}

/* ============================================================
   ZONE 1: FULL-WIDTH PARCHMENT AREA
   ============================================================ */

.events__parchment {
  --u: min(0.27933cqw, 3px);
  position: relative;
  width: 100%;
  background-color: var(--events-paper);
  background-image: url("../images/bg.png");
  background-size: 100% auto;
  background-repeat: repeat-y;
  background-position: center top;
  background-blend-mode: multiply;
  padding: clamp(2.6rem, 7vw, 5.5rem) 0 clamp(2.4rem, 6vw, 5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ------------------------------------------------------------
   FOUR HANGING BELLS (2 Left Pair + 2 Right Pair)
   ------------------------------------------------------------ */

.events__bells {
  position: absolute;
  top: 0;
  z-index: 5;
  height: 0;
  pointer-events: none;
}

.events__bells--left {
  left: clamp(8px, 3.5vw, 60px);
  width: clamp(70px, 10vw, 130px);
}

.events__bells--right {
  right: clamp(8px, 3.5vw, 60px);
  width: clamp(70px, 10vw, 130px);
}

.events__bell {
  position: absolute;
  top: 0;
  height: auto;
  max-width: none;
  transform-origin: 50% 0%;
  will-change: transform;
}

/* Dimensions and offsets */
.events__bell--big {
  width: clamp(36px, 4.8vw, 70px);
}

.events__bell--small {
  width: clamp(26px, 3.6vw, 52px);
}

/* Left pair positioning: Big on outside, Small slightly inside/higher */
.events__bells--left .events__bell--big {
  left: 0;
}

.events__bells--left .events__bell--small {
  left: clamp(28px, 4.2vw, 58px);
}

/* Right pair positioning: Big on outside, Small slightly inside/higher */
.events__bells--right .events__bell--big {
  right: 0;
}

.events__bells--right .events__bell--small {
  right: clamp(28px, 4.2vw, 58px);
}

/* ------------------------------------------------------------
   HEADER — Exactly matching Our Story Section
   ------------------------------------------------------------ */

.events__header {
  position: relative;
  z-index: 3;
  width: var(--events-measure);
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(1.4rem, 3.2vw, 2.6rem);
}

/* The small gold ornament that opens the section, above the eyebrow */
.events__trishul {
  display: block;
  width: calc(46 * var(--u));
  height: auto;
  margin: 0 auto clamp(0.5rem, 1.3vw, 0.95rem);
}

.events__eyebrow {
  /* Rises just enough on wide screens to stay legible under a 55px
     heading, while holding the hierarchy at roughly 4:1. */
  margin: 0;
  font-family: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(11px, 0.9vw, 14px);
  line-height: 1.4;
  letter-spacing: 0.05em;
  color: var(--events-body);
}

.events__title {
  /* Reaches its full 55px at laptop width (~1280px) and holds there on
     larger desktops, then eases down through tablet to 30px on a phone.
     Line height is unitless so it tracks the size at every step. */
  margin: clamp(0.1rem, 0.4vw, 0.3rem) 0 0;
  font-family: 'Roaster Brush', 'Brush Script MT', cursive;
  font-weight: 400;
  font-size: clamp(30px, 4.3vw, 55px);
  line-height: 1.15;
  letter-spacing: 0.005em;
  color: var(--events-navy);
}

/* Decorative rule underneath the title */
.events__divider {
  display: block;
  width: calc(90 * var(--u));
  height: auto;
  margin: clamp(0.2rem, 0.7vw, 0.55rem) auto 0;
}

/* ------------------------------------------------------------
   EVENT SLIDER (Handcrafted Frame & Navigation)
   ------------------------------------------------------------ */

.events__slider-wrap {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: min(92vw, 1260px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.6vw, 24px);
}

.events__viewport {
  position: relative;
  width: 100%;
  max-width: min(84vw, 1140px);
  overflow: hidden;
  border-radius: 4px;
}

.events__track {
  display: flex;
  width: 100%;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.events__slide {
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 0 6px;
  opacity: 0.35;
  transform: scale(0.975);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.events__slide.is-active {
  opacity: 1;
  transform: scale(1);
}

.events__card {
  position: relative;
  width: 100%;
  background-image: url("../images/frame.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: clamp(34px, 4.5vw, 68px) clamp(28px, 4.8vw, 76px);
  filter: drop-shadow(0 8px 24px rgba(110, 51, 35, 0.08));
}

.events__card-body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.28fr);
  gap: clamp(22px, 3.8vw, 54px);
  align-items: center;
}

/* Event Ceremony Image Container */
.events__card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1.05 / 1;
  min-height: clamp(180px, 24vw, 320px);
  background-color: #f7f2e8;
  border-radius: clamp(14px, 1.8vw, 22px);
  overflow: hidden;
  box-shadow: inset 0 1px 4px rgba(189, 151, 54, 0.12), 0 3px 10px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(211, 178, 105, 0.38);
}

.events__card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.events__slide.is-active:hover .events__card-img {
  transform: scale(1.035);
}

.events__card-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.events__card-title {
  margin: 0 0 clamp(8px, 1.2vw, 14px);
  font-family: 'Mahameru', 'Iowan Old Style', Georgia, serif;
  font-size: clamp(1.45rem, 2.4vw, 2.25rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #5c2c1e;
  line-height: 1.2;
}

.events__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(10px, 1.4vw, 20px);
  margin-bottom: clamp(10px, 1.2vw, 16px);
}

.events__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(0.76rem, 1vw, 0.92rem);
  color: #5e4438;
  letter-spacing: 0.01em;
}

.events__meta-icon {
  width: clamp(14px, 1.1vw, 17px);
  height: clamp(14px, 1.1vw, 17px);
  color: #6e3323;
  flex-shrink: 0;
}

.events__meta-loc-icon {
  width: clamp(12px, 1vw, 15px);
  height: clamp(15px, 1.2vw, 19px);
  flex-shrink: 0;
  display: inline-block;
}

.events__flourish {
  width: clamp(68px, 8.5vw, 100px);
  height: 10px;
  margin: 2px 0 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 8' fill='none'%3E%3Cpath d='M0 4C20 4 25 1 40 4C55 7 60 4 80 4' stroke='%23bd9736' stroke-width='0.8' stroke-opacity='0.6' stroke-dasharray='1 1'/%3E%3Ccircle cx='40' cy='4' r='2' fill='%23bd9736' fill-opacity='0.8'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}

.events__desc {
  margin: 0 0 clamp(14px, 1.8vw, 22px);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(0.76rem, 0.95vw, 0.9rem);
  line-height: 1.6;
  letter-spacing: 0.01em;
  color: #563e33;
  max-width: 480px;
}

.events__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(7px, 0.9vw, 10px) clamp(16px, 1.8vw, 24px);
  background-color: #1b4b66;
  color: #ffffff;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(0.74rem, 0.88vw, 0.84rem);
  letter-spacing: 0.03em;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(27, 75, 102, 0.28);
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.events__btn:hover {
  background-color: #12374d;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(27, 75, 102, 0.38);
}

/* Navigation Arrows (Prev / Next) */
.events__nav {
  position: relative;
  z-index: 4;
  width: clamp(36px, 3.6vw, 50px);
  height: clamp(36px, 3.6vw, 50px);
  border-radius: 50%;
  background: rgba(254, 248, 235, 0.95);
  border: 1.5px solid rgba(189, 151, 54, 0.5);
  color: #6e3323;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(110, 51, 35, 0.12);
  flex-shrink: 0;
  padding: 0;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}

.events__nav svg {
  width: 50%;
  height: 50%;
}

.events__nav:hover {
  background-color: #bd9736;
  color: #ffffff;
  transform: scale(1.08);
  box-shadow: 0 5px 14px rgba(189, 151, 54, 0.35);
}

.events__nav:active {
  transform: scale(0.96);
}

.events__nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Pagination Dots */
.events__dots {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: clamp(12px, 1.8vw, 20px);
}

.events__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(189, 151, 54, 0.35);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.3s ease;
}

.events__dot:hover {
  background-color: rgba(189, 151, 54, 0.7);
}

.events__dot.is-active {
  background-color: #6e3323;
  width: 22px;
  border-radius: 999px;
}

/* ============================================================
   ZONE 2: FULL-WIDTH TEMPLE & COUPLE SCENE
   Natural Aspect Ratio Architecture (No background-size: cover, No 100vh)
   ============================================================ */

.events__scene {
  position: relative;
  width: 100%;
  overflow: hidden;
  display: block;
  line-height: 0; /* eliminate inline image bottom gap */
}

/* Background image scales naturally by 100% width and auto height */
.events__scene-bg {
  display: block;
  width: 100%;
}

.events__scene-bg picture {
  display: block;
  width: 100%;
}

.events__scene-bg-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Temple Cutout Artwork — Positioned proportionally on the courtyard */
.events__temple {
  position: absolute;
  z-index: 2;
  bottom: 22%;
  left: 50%;
  transform: translateX(-50%);
  width: 88%;
  max-width: 520px;
  height: auto;
  pointer-events: none;
  line-height: normal;
}

@media (min-width: 769px) {
  .events__temple {
    bottom: 24%;
    width: 48%;
    max-width: 780px;
  }
}

/* Floating White Jasmine Petals */
.events__petals {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  line-height: normal;
}

.events__petal {
  position: absolute;
  width: clamp(14px, 1.6vw, 24px);
  height: clamp(14px, 1.6vw, 24px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C13 6 15 8 19 9C15 10 13 12 12 16C11 12 9 10 5 9C9 8 11 6 12 2Z' fill='%23ffffff' fill-opacity='0.95' stroke='%23f5e5c9' stroke-width='0.5'/%3E%3Cpath d='M2 12C6 13 8 15 9 19C10 15 12 13 16 12C12 11 10 9 9 5C8 9 6 11 2 12Z' fill='%23ffffff' fill-opacity='0.95' stroke='%23f5e5c9' stroke-width='0.5'/%3E%3Ccircle cx='10.5' cy='10.5' r='1.5' fill='%23bd9736' fill-opacity='0.85'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.9;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
}

.events__petal--1 {
  top: 30%;
  left: 12%;
  animation: petalFloat1 6.5s ease-in-out infinite alternate;
}

.events__petal--2 {
  top: 46%;
  left: 20%;
  transform: scale(0.85) rotate(24deg);
  animation: petalFloat2 8.2s ease-in-out 1s infinite alternate;
}

.events__petal--3 {
  top: 26%;
  right: 38%;
  transform: scale(0.9) rotate(-18deg);
  animation: petalFloat1 7.4s ease-in-out 0.5s infinite alternate;
}

.events__petal--4 {
  top: 36%;
  right: 14%;
  transform: scale(1.1) rotate(45deg);
  animation: petalFloat2 7.0s ease-in-out 1.5s infinite alternate;
}

/* Bride and Groom Foreground Artwork — Grounded on flower carpet */
.events__couple {
  position: absolute;
  z-index: 4;
  bottom: 0;
  left: 50%;
  transform: translateX(-48%);
  width: clamp(260px, 72vw, 380px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.16));
  line-height: normal;
}

@media (min-width: 769px) {
  .events__couple {
    width: clamp(320px, 30vw, 560px);
  }
}

/* The groom and the bride, as two layers of the one painting on the same canvas:
   the groom sets the box, the bride lies exactly over it. */
.events__couple-part {
  display: block;
  width: 100%;
  height: auto;
}

.events__couple-part--bride {
  position: absolute;
  left: 0;
  top: 0;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Tablet & Smaller Desktop Adjustments */
@media (max-width: 900px) {
  .events__viewport {
    max-width: 680px;
  }
}

/* Mobile Stack Layout */
@media (max-width: 680px) {
  .events__parchment {
    padding: 28px 10px 44px;
  }

  .events__slider-wrap {
    width: 100%;
    gap: 4px;
  }

  .events__nav {
    width: 32px;
    height: 32px;
  }

  .events__card {
    padding: 30px 18px 34px;
  }

  .events__card-body {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .events__card-media {
    aspect-ratio: 1.15 / 1;
    min-height: 180px;
  }

  .events__card-info {
    align-items: center;
    text-align: center;
  }

  .events__meta {
    justify-content: center;
    gap: 10px;
  }

  .events__desc {
    text-align: center;
  }
}

/* ============================================================
   ANIMATION & SEQUENCING
   ============================================================ */

/* Idle state before entering viewport */
.events--idle .events__bells,
.events--idle .events__trishul,
.events--idle .events__eyebrow,
.events--idle .events__title,
.events--idle .events__divider,
.events--idle .events__slider-wrap,
.events--idle .events__dots,
.events--idle .events__scene-bg,
.events--idle .events__temple,
.events--idle .events__couple,
.events--idle .events__petal {
  opacity: 0;
}

/* Live state triggered on scroll */
.events--live .events__trishul {
  animation: eventsRise 0.8s var(--ease-settle, cubic-bezier(0.22, 0.61, 0.24, 1)) 0.15s both;
}

.events--live .events__eyebrow {
  animation: eventsRise 0.85s var(--ease-settle, cubic-bezier(0.22, 0.61, 0.24, 1)) 0.25s both;
}

.events--live .events__title {
  animation: eventsTitleRise 0.95s var(--ease-settle, cubic-bezier(0.22, 0.61, 0.24, 1)) 0.35s both;
}

.events--live .events__divider {
  animation: eventsFadeScale 0.85s var(--ease-settle, cubic-bezier(0.22, 0.61, 0.24, 1)) 0.45s both;
}

.events--live .events__slider-wrap {
  animation: eventsCardReveal 1.05s var(--ease-settle, cubic-bezier(0.22, 0.61, 0.24, 1)) 0.5s both;
}

.events--live .events__dots {
  animation: eventsFadeScale 0.85s var(--ease-settle, cubic-bezier(0.22, 0.61, 0.24, 1)) 0.65s both;
}

/* Lower Scene Reveal */
.events--live .events__scene-bg {
  animation: eventsFadeIn 1.4s ease-out 0.4s both;
}

.events--live .events__temple {
  animation: eventsTempleReveal 1.3s var(--ease-settle, cubic-bezier(0.22, 0.61, 0.24, 1)) 0.6s both;
}

.events--live .events__couple {
  animation: eventsCoupleReveal 1.4s var(--ease-settle, cubic-bezier(0.22, 0.61, 0.24, 1)) 0.75s both;
}

.events--live .events__petal {
  animation-play-state: running;
  opacity: 0.85;
  transition: opacity 1.2s ease 0.8s;
}

/* Bell Entrance & Continuous Organic Sway */
.events--live .events__bells {
  opacity: 1;
}

.events--live .events__bells--left .events__bell--big {
  animation:
    bellEnter 1.4s var(--ease-settle, cubic-bezier(0.22, 0.61, 0.24, 1)) 0.2s both,
    bellSwingLeftBig 7.4s ease-in-out 1.6s infinite alternate;
}

.events--live .events__bells--left .events__bell--small {
  animation:
    bellEnterSmall 1.3s var(--ease-settle, cubic-bezier(0.22, 0.61, 0.24, 1)) 0.3s both,
    bellSwingLeftSmall 6.2s ease-in-out 1.6s infinite alternate;
}

.events--live .events__bells--right .events__bell--big {
  animation:
    bellEnter 1.4s var(--ease-settle, cubic-bezier(0.22, 0.61, 0.24, 1)) 0.25s both,
    bellSwingRightBig 7.8s ease-in-out 1.65s infinite alternate;
}

.events--live .events__bells--right .events__bell--small {
  animation:
    bellEnterSmall 1.3s var(--ease-settle, cubic-bezier(0.22, 0.61, 0.24, 1)) 0.35s both,
    bellSwingRightSmall 6.6s ease-in-out 1.65s infinite alternate;
}

/* ------------------------------------------------------------
   KEYFRAMES
   ------------------------------------------------------------ */

@keyframes eventsRise {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes eventsTitleRise {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes eventsFadeScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes eventsCardReveal {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes eventsFadeIn {
  from {
    opacity: 0;
    transform: scale(1.015);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes eventsTempleReveal {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes eventsCoupleReveal {
  from {
    opacity: 0;
    transform: translateX(-48%) translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateX(-48%) translateY(0);
  }
}

/* Bell Initial Entrance */
@keyframes bellEnter {
  0% {
    opacity: 0;
    transform: translateY(-12%) rotate(-2.2deg);
  }
  30% {
    opacity: 1;
  }
  50% {
    transform: translateY(0) rotate(1.6deg);
  }
  75% {
    transform: rotate(-0.8deg);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg);
  }
}

@keyframes bellEnterSmall {
  0% {
    opacity: 0;
    transform: translateY(-12%) rotate(1.8deg);
  }
  30% {
    opacity: 1;
  }
  50% {
    transform: translateY(0) rotate(-1.4deg);
  }
  75% {
    transform: rotate(0.6deg);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg);
  }
}

/* Continuous, subtle, non-synchronized swinging motions */
@keyframes bellSwingLeftBig {
  0% {
    transform: rotate(-1.4deg);
  }
  50% {
    transform: rotate(1.1deg);
  }
  100% {
    transform: rotate(-1.4deg);
  }
}

@keyframes bellSwingLeftSmall {
  0% {
    transform: rotate(1.5deg);
  }
  50% {
    transform: rotate(-1.2deg);
  }
  100% {
    transform: rotate(1.5deg);
  }
}

@keyframes bellSwingRightBig {
  0% {
    transform: rotate(1.3deg);
  }
  50% {
    transform: rotate(-1.1deg);
  }
  100% {
    transform: rotate(1.3deg);
  }
}

@keyframes bellSwingRightSmall {
  0% {
    transform: rotate(-1.6deg);
  }
  50% {
    transform: rotate(1.3deg);
  }
  100% {
    transform: rotate(-1.6deg);
  }
}

/* Petal Floating Keyframes */
@keyframes petalFloat1 {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(8px, -12px) rotate(15deg);
  }
  100% {
    transform: translate(-6px, -20px) rotate(-10deg);
  }
}

@keyframes petalFloat2 {
  0% {
    transform: translate(0, 0) rotate(20deg);
  }
  50% {
    transform: translate(-10px, -10px) rotate(5deg);
  }
  100% {
    transform: translate(6px, -18px) rotate(35deg);
  }
}

/* ------------------------------------------------------------
   PREFERS-REDUCED-MOTION
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .events--idle .events__bells,
  .events--idle .events__trishul,
  .events--idle .events__eyebrow,
  .events--idle .events__title,
  .events--idle .events__divider,
  .events--idle .events__slider-wrap,
  .events--idle .events__dots,
  .events--idle .events__scene-bg,
  .events--idle .events__temple,
  .events--idle .events__couple,
  .events--idle .events__petal {
    opacity: 1;
    transform: none;
  }

  .events--live .events__trishul,
  .events--live .events__eyebrow,
  .events--live .events__title,
  .events--live .events__divider,
  .events--live .events__slider-wrap,
  .events--live .events__dots,
  .events--live .events__scene-bg,
  .events--live .events__temple,
  .events--live .events__couple,
  .events--live .events__bells .events__bell,
  .events--live .events__petal {
    animation: none;
  }
}