/* ==========================================================================
   Michele Guarino — Celebration of Life
   Palette: Warm ivory (Variant A)
   ========================================================================== */

:root {
  --bg:          #faf6ef;
  --panel:       #f7efe1;
  --panel-alt:   #f1e6d0;
  --accent:      #b48e4c;
  --accent-soft: #d4b88a;
  --text:        #3a2a17;
  --muted:       #8a6b3a;
  --rule:        rgba(180, 142, 76, 0.45);

  --serif: 'Cormorant Garamond', 'EB Garamond', Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* Reset */
* { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Shared typography */
.label {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.section__heading {
  font-family: var(--serif);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-top: 12px;
  color: var(--text);
}
.rule {
  width: 40px;
  height: 1px;
  background: var(--accent);
  margin: 14px 0;
}
.rule--center { margin-left: auto; margin-right: auto; }

.body-copy {
  font-size: 17px;
  color: var(--text);
  line-height: 1.7;
  margin-top: 20px;
}
.body-copy--quiet { color: var(--muted); font-size: 15px; }

.placeholder {
  font-style: italic;
  color: var(--muted);
  opacity: 0.85;
}

/* ==========================================================================
   1. HERO
   ========================================================================== */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}
.hero__photo {
  overflow: hidden;
  background: var(--panel);
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__type {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5vw 7vw;
  background: var(--panel);
}
.hero__name {
  font-family: var(--serif);
  font-size: clamp(48px, 7vw, 84px);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin-top: 16px;
  color: var(--text);
}
.hero__dates {
  font-size: 13px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}
.hero__tag {
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 28px;
  font-weight: 500;
}
.hero .rule {
  background: var(--accent);
  margin: 18px 0 4px;
}

@media (max-width: 820px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .hero__photo {
    aspect-ratio: 4/5;
    max-height: 70vh;
  }
  .hero__type { padding: 48px 28px 64px; }
}

/* ==========================================================================
   Sections (shared)
   ========================================================================== */
.section {
  padding: 96px 24px;
  text-align: center;
}
.section--narrow {
  max-width: 680px;
  margin: 0 auto;
}
.section--wide {
  max-width: 1200px;
  margin: 0 auto;
}
.section .body-copy,
.section .event-details,
.section p {
  text-align: center;
}

@media (max-width: 700px) {
  .section { padding: 64px 20px; }
}

/* ==========================================================================
   3. GALLERY
   ========================================================================== */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 40px;
}
.gallery__item {
  cursor: pointer;
  overflow: hidden;
  border-radius: 4px;
  background: var(--panel);
  aspect-ratio: 3/4;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.gallery__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(58, 42, 23, 0.12);
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (prefers-reduced-motion: reduce) {
  .gallery__item { transition: none; }
  .gallery__item:hover { transform: none; }
}

/* ==========================================================================
   4. EVENT DETAILS
   ========================================================================== */
.event-details {
  margin: 40px auto 24px;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.event-details__row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
}
.event-details__row:last-child { border-bottom: none; }
.event-details dt {
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  padding-top: 3px;
}
.event-details dd {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.4;
  color: var(--text);
}
.event-details dd.placeholder {
  font-family: var(--sans);
  font-size: 15px;
  font-style: italic;
}
/* Inline links inside event details (venue → Google Maps, address → directions) */
.event-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--accent-soft);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.event-link:hover,
.event-link:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
/* Contact phone — prominent on its own line, never wraps mid-number */
.contact-phone {
  margin-top: 14px;
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 0.02em;
}
.contact-phone a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-soft);
  white-space: nowrap;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.contact-phone a:hover,
.contact-phone a:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

@media (max-width: 560px) {
  .event-details__row { grid-template-columns: 1fr; gap: 4px; }
  .event-details dd { font-size: 18px; }
}

/* ==========================================================================
   5. GET TICKETS CTA
   ========================================================================== */
.cta {
  background: var(--panel-alt);
  padding: 96px 24px;
  text-align: center;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.cta__inner {
  max-width: 560px;
  margin: 0 auto;
}
.button {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  padding: 18px 48px;
  border-radius: 2px;
  font-size: 13px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 600;
  margin: 32px 0 20px;
  transition: background 0.2s ease, transform 0.1s ease;
  box-shadow: 0 4px 14px rgba(180, 142, 76, 0.3);
}
.button:hover { background: #8a6b3a; }
.button:active { transform: translateY(1px); }
.button:focus-visible {
  outline: 3px solid var(--accent-soft);
  outline-offset: 3px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.footer {
  padding: 40px 24px 56px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  font-style: italic;
}

/* ==========================================================================
   Rose petal welcome animation (plays once on page load)
   CSS-ONLY positioning — each petal is a position:absolute child of a
   <span class="michele-anchor"> that wraps each "Michele" word in the page.
   The petal positions itself directly relative to the word (no JS, no
   measurement, works on every browser & viewport size).
   Layered nested elements provide independent motion axes:
     .petal       outer:  vertical fall (translateY) from above viewport
     .petal__sway middle: horizontal sway (translateX), settles at 0
     .petal__spin inner:  3D rocking + in-plane spin, settles flat on back
   All use animation-fill-mode: forwards — petals stay landed until refresh.
   ========================================================================== */
.michele-anchor {
  position: relative;
  /* `display: inline` keeps the word inline with surrounding text — but we
     need the relative positioning context. Inline elements DO create a
     containing block for absolute children. */
}
.petal {
  position: absolute;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  will-change: transform, opacity;
  /* `bottom: 65%` puts the petal's bottom edge at 65% of the word's
     line-height above the baseline — roughly at the cap-height of capital
     letters. With slight overlap so the petal sits ON the letters. */
  bottom: 65%;
  left: 50%;
  /* perspective lives on the .petal so 3D transforms render correctly */
  perspective: 800px;
  perspective-origin: 50% 50%;
}
.petal__sway,
.petal__spin {
  display: block;
  width: 100%;
  height: 100%;
}
.petal__spin {
  transform-style: preserve-3d;
}
.petal img {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 3px 5px rgba(140, 90, 100, 0.28));
}

/* Three petals — one rests on each "Michele" instance on the page.
   Petals start off-screen above the viewport (translateY negative),
   fall down into view, and settle on top of each name word.
   Landing translateY values are tuned to specific document positions. */
/* Petal sizes scale with the text they sit on (em units = relative to
   parent font-size). Sized for visibility on each scale of text.
   All petals start animating immediately on page load (no delay).
   Slower durations + larger sway swings = more natural drifting fall. */
.petal--1 {
  width: 1.1em; height: 1.1em;
  margin-left: -0.55em;
  animation: petal-fall 13s linear 0s forwards;
}
.petal--1 .petal__sway { animation: petal-sway-1 13s ease-out 0s forwards; }
.petal--1 .petal__spin { animation: petal-spin-1 13s ease-out 0s forwards; }

.petal--2 {
  width: 1.1em; height: 1.1em;
  margin-left: -0.55em;
  animation: petal-fall 15s linear 0s forwards;
}
.petal--2 .petal__sway { animation: petal-sway-2 15s ease-out 0s forwards; }
.petal--2 .petal__spin { animation: petal-spin-2 15s ease-out 0s forwards; }

.petal--3 {
  width: 2.2em; height: 2.2em;
  margin-left: -1.1em;
  animation: petal-fall 17s linear 0s forwards;
}
.petal--3 .petal__sway { animation: petal-sway-3 17s ease-out 0s forwards; }
.petal--3 .petal__spin { animation: petal-spin-3 17s ease-out 0s forwards; }

/* --- Vertical fall — petal starts 200vh above its anchor (always
       off-screen above viewport) and falls to translateY(0), its
       resting position above the word. Linear timing = constant
       terminal velocity. Per-petal opacity for visual variety. --- */
/* Petal starts ~80vh above the viewport (just off-screen above) so it
   enters the visible viewport within the first ~1.5 seconds and the user
   sees the fall right away. Falls to translateY(0), its resting position. */
@keyframes petal-fall {
  0%   { transform: translateY(-80vh); opacity: 0.85; }
  100% { transform: translateY(0);     opacity: 0.85; }
}

/* --- Sway: WIDE flowing arcs with many keyframes for smooth organic motion.
       Petal drifts side-to-side (and even pauses briefly) like a real petal
       catching air. Each petal has a unique pattern so they don't sync. --- */
@keyframes petal-sway-1 {
  0%   { transform: translateX(-78px); }
  8%   { transform: translateX(-30px); }
  16%  { transform: translateX(48px); }
  24%  { transform: translateX(72px); }
  32%  { transform: translateX(28px); }
  40%  { transform: translateX(-44px); }
  48%  { transform: translateX(-62px); }
  56%  { transform: translateX(-22px); }
  64%  { transform: translateX(38px); }
  72%  { transform: translateX(48px); }
  80%  { transform: translateX(14px); }
  88%  { transform: translateX(-22px); }
  95%  { transform: translateX(-8px); }
  100% { transform: translateX(0); }
}
@keyframes petal-sway-2 {
  0%   { transform: translateX(70px); }
  9%   { transform: translateX(28px); }
  18%  { transform: translateX(-44px); }
  27%  { transform: translateX(-66px); }
  36%  { transform: translateX(-26px); }
  45%  { transform: translateX(40px); }
  54%  { transform: translateX(58px); }
  63%  { transform: translateX(20px); }
  72%  { transform: translateX(-32px); }
  81%  { transform: translateX(-42px); }
  89%  { transform: translateX(-14px); }
  96%  { transform: translateX(8px); }
  100% { transform: translateX(0); }
}
@keyframes petal-sway-3 {
  0%   { transform: translateX(-72px); }
  10%  { transform: translateX(-22px); }
  20%  { transform: translateX(46px); }
  30%  { transform: translateX(64px); }
  40%  { transform: translateX(20px); }
  50%  { transform: translateX(-38px); }
  60%  { transform: translateX(-52px); }
  70%  { transform: translateX(-16px); }
  80%  { transform: translateX(28px); }
  90%  { transform: translateX(20px); }
  96%  { transform: translateX(-6px); }
  100% { transform: translateX(0); }
}

/* --- Spin: 3D tumble during fall. Final keyframe ends with rotateX(55deg)
       so the petal looks like it's lying flat on its back on top of the
       name (the top tilts away from the viewer = foreshortened/flat). --- */
@keyframes petal-spin-1 {
  0%   { transform: rotateZ(0deg)   rotateX(-25deg) rotateY(15deg); }
  20%  { transform: rotateZ(70deg)  rotateX(20deg)  rotateY(-10deg); }
  40%  { transform: rotateZ(150deg) rotateX(-15deg) rotateY(15deg); }
  60%  { transform: rotateZ(230deg) rotateX(25deg)  rotateY(-15deg); }
  80%  { transform: rotateZ(310deg) rotateX(-10deg) rotateY(10deg); }
  92%  { transform: rotateZ(355deg) rotateX(20deg)  rotateY(-5deg); }
  100% { transform: rotateZ(370deg) rotateX(25deg)  rotateY(-5deg); }
}
@keyframes petal-spin-2 {
  0%   { transform: rotateZ(0deg)    rotateX(20deg)  rotateY(-15deg); }
  20%  { transform: rotateZ(-80deg)  rotateX(-25deg) rotateY(20deg); }
  40%  { transform: rotateZ(-170deg) rotateX(15deg)  rotateY(-10deg); }
  60%  { transform: rotateZ(-260deg) rotateX(-20deg) rotateY(15deg); }
  80%  { transform: rotateZ(-340deg) rotateX(15deg)  rotateY(-10deg); }
  92%  { transform: rotateZ(-385deg) rotateX(-15deg) rotateY(5deg); }
  100% { transform: rotateZ(-395deg) rotateX(28deg)  rotateY(0deg); }
}
@keyframes petal-spin-3 {
  0%   { transform: rotateZ(0deg)   rotateX(-15deg) rotateY(25deg); }
  20%  { transform: rotateZ(85deg)  rotateX(20deg)  rotateY(-15deg); }
  40%  { transform: rotateZ(170deg) rotateX(-15deg) rotateY(15deg); }
  60%  { transform: rotateZ(255deg) rotateX(20deg)  rotateY(-10deg); }
  80%  { transform: rotateZ(325deg) rotateX(-10deg) rotateY(10deg); }
  92%  { transform: rotateZ(370deg) rotateX(15deg)  rotateY(-5deg); }
  100% { transform: rotateZ(380deg) rotateX(30deg)  rotateY(0deg); }
}

/* Sizes are now em-based (relative to parent font-size), so they scale
   automatically with the text. No mobile media query needed for sizing. */

@media (prefers-reduced-motion: reduce) {
  .petals { display: none; }
}

/* ==========================================================================
   Lightbox
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(26, 18, 10, 0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
}
.lightbox.open {
  display: flex;
  animation: fade-in 0.25s ease;
}
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.lightbox__img {
  max-width: min(92vw, 1400px);
  max-height: 88vh;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.lightbox__close,
.lightbox__nav {
  position: absolute;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  cursor: pointer;
  font-family: var(--serif);
  transition: background 0.15s ease;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255,255,255,0.25); }
.lightbox__close {
  top: 24px; right: 24px;
  width: 44px; height: 44px;
  font-size: 28px;
  border-radius: 50%;
  line-height: 1;
}
.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px; height: 52px;
  font-size: 36px;
  border-radius: 50%;
  line-height: 0.8;
  user-select: none;
}
.lightbox__nav--prev { left: 24px; }
.lightbox__nav--next { right: 24px; }

@media (max-width: 600px) {
  .lightbox__nav { width: 42px; height: 42px; font-size: 28px; }
  .lightbox__nav--prev { left: 10px; }
  .lightbox__nav--next { right: 10px; }
  .lightbox__close { top: 14px; right: 14px; width: 38px; height: 38px; font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox.open { animation: none; }
}