/* Sargam's garden: real cutout artwork, quiet gilding, and time-based reveals. */
#home { isolation: isolate; height: 100svh; }
.hero-garlands { display: none; position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.hero-garlands img { position: absolute; top: -25px; width: clamp(54px,16vw,90px); height: clamp(245px,36svh,360px); object-fit: contain; object-position: top; transform-origin: 50% 0; animation: garland-breathe 7s ease-in-out infinite alternate paused; }
.hero-garlands img:first-child { left: -3px; }
.hero-garlands img:last-child { right: -3px; top: -55px; animation-delay: -3.5s; }
.hero-garlands.is-ornament-active img { animation-play-state: running; }
@media (orientation:portrait) { .hero-garlands { display: block; } }

/* A ceremonial picture mount: its portrait film lives only inside the aperture. */
#events { background: linear-gradient(#f8f2e7ed,#f8f2e7ed),url('assets/paper-texture.webp') center/650px; }
#events .celebrations-heading { background: none; padding: 52px 28px 22px; }
#events .celebrations-heading h2 { font-size: clamp(34px,5vw,54px); }
#events .celebrations-heading > p:last-child { font-size: 18px; margin-top: 16px; }
.event-chapter { padding: 12px 0 22px; background: none; min-height: 0; }
.event-media { --frame-pivot: 10.3%; --frame-fold: -88deg; width: min(82%,340px); max-width: none; margin: 0 auto -28px; height: auto; min-height: 0; aspect-ratio: 2/3; padding: 0; overflow: visible; background: none; border: 0; border-radius: 0; isolation: isolate; box-shadow: none; perspective: 1500px; perspective-origin: 50% 44%; }
.event-media::before,.event-media::after { content: none; }
.event-media[data-hinge="right"] { --frame-pivot: 89.7%; --frame-fold: 88deg; }
/* The complete mount swings on a side hinge. The observed footprint never
   transforms, so crossing the reading band cannot make the frame jitter. */
.event-frame-panel {
  position: absolute; inset: 0; transform-origin: var(--frame-pivot) 50%;
  transform: rotateY(0deg) scale(1); opacity: 1; backface-visibility: hidden;
  transition: transform 1.55s cubic-bezier(.2,.82,.25,1), opacity .55s ease;
}
.event-media.is-frame-armed:not(.is-frame-open) .event-frame-panel {
  transform: rotateY(var(--frame-fold)) scale(.98); opacity: 0;
}
.event-frame-hinge {
  position: absolute; z-index: 4; left: calc(var(--frame-pivot) - 3px); top: 22%;
  width: 6px; height: 46%; border: 1px solid #a77c38; border-radius: 4px;
  background: linear-gradient(90deg,#96703a,#fff0b6 38%,#d6b274 62%,#886030);
  box-shadow: 1px 1px 3px #6a482328; pointer-events: none;
  transition: opacity .55s ease;
}
.event-frame-hinge::before,.event-frame-hinge::after {
  content: ''; position: absolute; left: -4px; width: 12px; height: 10px;
  border-radius: 50%; border: 1px solid #ae894b;
  background: radial-gradient(ellipse at 35% 28%,#fff3c9,#ca9e53 60%,#906228);
}
.event-frame-hinge::before { top: -4px; }
.event-frame-hinge::after { bottom: -4px; }
.event-media.is-frame-armed:not(.is-frame-open) .event-frame-hinge { opacity: 0; }
.event-frame-art { position: absolute; inset: 0; z-index: 3; display: block; width: 100%; height: 100%; pointer-events: none; }
.event-media-window { position: absolute; left: 13.3%; top: 11.1%; width: 73.4%; height: auto; aspect-ratio: 3/4; overflow: hidden; border-radius: 12% / 9%; clip-path: none; background: #f5e8d4; isolation: isolate; opacity: 1; transition: opacity .7s ease .25s; }
.event-media.is-frame-armed:not(.is-frame-open) .event-media-window { opacity: 0; transition-delay: 0s; }
.event-media .event-media-window picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.event-media :is(.event-chapter-image,.event-chapter-film) { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: none; animation: none; clip-path: none; }
.event-copy { width: min(100%,370px); margin: 0 auto; background: transparent; padding: 0 31px 48px; }
.event-chapter-number { display: none; }
.event-chapter-title { color: #78243c; font-style: italic; font-weight: 400; font-size: clamp(34px,9vw,43px); letter-spacing: -.025em; line-height: 1.1; text-shadow: none; margin: 0 auto 12px; }
.event-chapter-date { color: #805f3c; font-size: 10px; gap: 5px 9px; margin-bottom: 13px; }
.event-chapter-time { padding-left: 9px; }
.event-chapter-venue { color: #795232; font-size: 21px; font-style: italic; line-height: 1.2; }
.event-chapter-description { font-size: 17px; line-height: 1.4; max-width: 310px; margin: 12px auto; color: #75614e; }
.event-attire { margin: 10px auto 0; }
.event-attire-label { display: none; }
.event-attire p { color: #806750; font-size: 16px; margin: 0; }
.event-chapter-map { position: relative; z-index: 2; color: #946b34; font-size: 10px; margin-top: 4px; }
.event-peacock,.event-camel { position: absolute; right: 2px; bottom: 14px; width: 64px; pointer-events: none; transform-origin: bottom; z-index: -1; }
.event-peacock { transform: scaleX(-1); }
.event-camel { right: auto; left: 2px; transform: scaleX(-1); }
.event-peacock img,.event-camel img { display: block; width: 100%; height: auto; opacity: .46; filter: saturate(.7); transform-origin: 65% 95%; animation: peacock-breathe 9s ease-in-out infinite alternate paused; }
.event-peacock.is-ornament-active img,.event-camel.is-ornament-active img { animation-play-state: running; }

/* Touch follows the photograph, without moving the surrounding words. */
#story { background: linear-gradient(#f8f2e7ed,#f8f2e7ed),url('assets/paper-texture.webp') center/650px; }
#story .story-portrait { perspective: 1000px; touch-action: pan-y; outline-offset: 9px; background: none; padding: 0; transform: none; }
#story .memory-tags[hidden] { display: none; }
.story-keepsake { position: relative; width: 100%; aspect-ratio: 3/4; overflow: hidden; filter: drop-shadow(0 9px 12px #6c4e252b); }
#story .story-keepsake .story-photo { position: absolute; left: 11%; top: 11%; width: 78%; height: 78%; }
.keepsake-frame { position: relative; display: block; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
#story .story-photo { display: block; transform: rotateX(var(--portrait-y,0deg)) rotateY(var(--portrait-x,0deg)) scale(var(--portrait-zoom,1)); transition: transform .65s cubic-bezier(.2,.7,.2,1), filter .65s; transform-origin: center; }
#story .story-portrait::after { content: ''; position: absolute; inset: 5% 5% 15%; pointer-events: none; opacity: 0; background: linear-gradient(115deg,transparent 30%,#fff7d73b 47%,transparent 65%); background-size: 250% 100%; transition: opacity .5s; }
#story .story-portrait:hover::after,
#story .story-portrait.is-touched::after { opacity: 1; animation: portrait-light 1.4s ease both; }
#story .story-portrait.is-touched .story-photo { filter: brightness(1.04); }
#story .story-portrait:focus-visible { outline: 2px solid #805821; }

/* A small blessing above the album, with room around the heading. */
#gallery { position: relative; min-height: 0; padding-top: 35px; background: linear-gradient(#f8f2e7ed,#f8f2e7ed),url('assets/paper-texture.webp') center/650px; background-color: #f8f2e7; }
#gallery .blessing-heading { position: relative; padding: 0 24px; }
.blessing-art { position: relative; height: 102px; max-width: 850px; margin: 0 auto 22px; pointer-events: none; }
.ganesh-blessing { position: relative; display: block; z-index: 1; width: 88px; height: 106px; object-fit: contain; margin: auto; filter: drop-shadow(0 3px 6px #a47c331a); }
.blessing-halo { position: absolute; width: 90px; height: 90px; left: 50%; top: 0; margin-left: -45px; border: 1px solid #b5945733; border-radius: 50%; background: radial-gradient(circle,#f5d98d33,transparent 72%); animation: blessing-glow 5s ease-in-out infinite alternate paused; }
.blessing-heading.is-ornament-active .blessing-halo { animation-play-state: running; }
#gallery .section-heading h2 { font-size: clamp(38px,5vw,68px); line-height: 1.08; }
#gallery .gallery-grid { margin-top: 35px; }

/* A new, inhabited courtyard replaces the empty, hazy palace crop. */
#travel { background: linear-gradient(#f8f2e7ed,#f8f2e7ed),url('assets/paper-texture.webp') center/650px; }
#travel .venue-portrait { position: relative; width: calc(100% - 40px); height: 370px; margin: 0 auto; padding: 6px; border: 1px solid #ab865e80; background: #f9efdf66; }
#travel .venue-portrait img { object-position: center; transform: scale(1); animation: courtyard-drift 18s ease-in-out infinite alternate paused; }
#travel .venue-portrait.is-ornament-active img { animation-play-state: running; }

/* A warm moving courtyard beneath ruby type and a soft parchment wash. */
#countdown { position: relative; isolation: isolate; overflow: hidden; padding: 60px 25px 76px; min-height: 495px; color: #71243b; background: #f7ecda; }
.countdown-scenery { position: absolute; inset: 15px; z-index: -2; pointer-events: none; overflow: hidden; }
.countdown-scenery img,.countdown-scenery video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: sepia(.85) saturate(.65) brightness(1.35); }
.countdown-scenery video { opacity: 0; transition: opacity 1.2s ease; }
.countdown-scenery video.ready { opacity: 1; }
#countdown::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg,#f8efdff2 0%,#f8efdfeb 40%,#f8efdfdc 72%,#f8efdf8f 100%); }
#countdown::after { content: ''; position: absolute; inset: 15px; border: 1px solid #a47b4859; pointer-events: none; }
.countdown-content { position: relative; width: min(100%,740px); margin: auto; }
#countdown .eyebrow { color: #86562e; font-size: 10px; letter-spacing: .14em; }
#countdown h2 { color: #79233e; font-size: clamp(40px,5vw,66px); margin-top: 20px; line-height: 1.12; text-shadow: 0 1px 0 #fff8ed; }
#countdown .countdown-grid { margin: 35px auto 24px; width: 100%; max-width: 510px; gap: clamp(12px,4vw,35px); }
#countdown .countdown-grid strong { display: block; color: #79233e; font-weight: 500; font-size: clamp(39px,9vw,66px); font-variant-numeric: lining-nums tabular-nums; text-shadow: 0 1px 0 #fff8ed; }
#countdown .countdown-grid span { color: #714726; font-size: 10px; letter-spacing: .11em; }
#countdown .countdown-date { margin-top: 27px; color: #6e4528; font-size: 24px; font-weight: 500; }
#countdown .calendar-actions { margin-top: 18px; gap: 20px; font-size: 11px; }
#countdown .calendar-actions a { color: #74213c; padding: 10px 2px; min-height: 44px; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: #a47b4870; }

@keyframes garland-breathe { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
@keyframes peacock-breathe { 0%,100% { transform: rotate(-1deg) translateY(0); } 45% { transform: rotate(1deg) translateY(-3px); } 60% { transform: rotate(.4deg) translateY(-2px); } }
@keyframes blessing-glow { from { opacity: .5; transform: scale(.96); } to { opacity: 1; transform: scale(1.04); } }
@keyframes portrait-light { from { background-position: 130% 0; } to { background-position: -40% 0; } }
@keyframes courtyard-drift { from { transform: scale(1); } to { transform: scale(1.045); } }

@media (min-width:900px), (min-width:700px) and (orientation:landscape) {
  .event-chapter { width: min(100%,1040px); margin: auto; padding: 16px 40px; min-height: 0; grid-template-columns: 1fr 1fr; align-items: center; gap: 20px; }
  .event-media { width: min(100%,370px); height: auto; min-height: 0; align-self: center; margin-bottom: 0; }
  .event-copy { width: 100%; max-width: 390px; padding: 20px 28px 55px; }
  .event-chapter-title { font-size: 46px; }
  .event-chapter-description { font-size: 19px; max-width: 330px; }
  .event-peacock,.event-camel { width: 74px; bottom: 5px; }
  #travel .venue-arrival { max-width: 1360px; grid-template-columns: 1.55fr 1fr; }
  #travel .venue-portrait { width: 100%; height: 440px; }
  #countdown { padding-block: 70px; min-height: 490px; }
}
@media (max-width:360px) {
  .hero-garlands img { width: 51px; }
  .event-copy { padding-inline: 22px; }
  .event-peacock,.event-camel { width: 55px; }
  #countdown { padding-inline: 24px; }
  #countdown h2 { font-size: 37px; }
  #countdown .countdown-grid { gap: 11px; }
}
@media (prefers-reduced-motion:reduce) {
  #invitation-page .scroll-ornament img,#invitation-page .blessing-halo { animation: none; }
  #events .event-frame-panel { transform: none; opacity: 1; transition: none; }
  #events .event-media-window,#events .event-frame-hinge { opacity: 1; transition: none; }
  #events .event-chapter-film { display: none; }
  #events .event-chapter-title,#events .event-chapter-venue { animation: none; }
  #story .story-photo { transform: none; transition: none; }
  #story .story-portrait::after { display: none; }
}