/* ==============================================
   Alfredo & Valentina Wedding Site
   Watercolor botanical · sticky slides · lyrics
   ============================================== */

:root {
  --color-bg: #F4F7F9;
  --color-bg-alt: #ECF0F4;
  --color-text: #2C3E50;
  --color-muted: #7B8FA0;
  --color-accent: #2C3E50;
  --color-accent-light: #8FA6BE;
  --color-accent-ghost: rgba(44, 62, 80, 0.04);
  --color-border: #D6DFE6;
  --color-white: #fff;

  --font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: Georgia, 'Times New Roman', serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-weight: 300;
  color: var(--color-text);
  line-height: 1.6;
  /* Radial watercolor wash lighter center, pale edges */
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, #FFFFFF 0%, #F4F7F9 55%, #E8EDF2 100%);
  background-attachment: fixed;
}

img { display: block; }

/* ===== Fixed botanical corner illustrations ===== */
.botanical-corner {
  position: fixed;
  pointer-events: none;
  z-index: 5000;
}
.botanical-corner--tl {
  top: 0; left: 0;
  width: clamp(280px, 32vw, 480px);
  height: clamp(320px, 38vw, 560px);
}
.botanical-corner--br {
  bottom: 0; right: 0;
  width: clamp(260px, 30vw, 440px);
  height: clamp(340px, 40vw, 580px);
}

/* ===== Grain overlay (kept subtle) ===== */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== Promise rings ===== */
.ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 3000;
  width: clamp(55px, 7vw, 95px);
  height: auto;
  will-change: transform;
  opacity: 0.92;
  transition: none;
}

/* ===== Scroll progress ===== */
.scroll-progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 2px;
  background: var(--color-accent); transform-origin: left; transform: scaleX(0); z-index: 10000;
}

/* ==============================================
   Slide system
   ============================================== */
.slide {
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}
.slide--hero { opacity: 1; background: #F4F7F9; overflow-y: auto; align-items: flex-start; padding-top: clamp(2rem, 8vh, 6rem); padding-bottom: 2rem; }
.slide.revealed { opacity: 1; }

/* ===== Hero ===== */
.hero__inner { text-align: center; max-width: 640px; padding: 1.5rem; }
.hero__overline {
  font-size: 0.8rem; font-weight: 400; letter-spacing: 0.4em;
  text-transform: uppercase; color: #5D6D7E; margin-bottom: 1.5rem;
}
.hero__names {
  font-size: clamp(0.9rem, 5vw, 5.5rem); font-weight: 300; white-space: nowrap;
  letter-spacing: 0.03em; line-height: 1.2; margin-bottom: 1.25rem;
}
.hero__amp { font-family: var(--font-serif); font-style: italic; color: var(--color-accent-light); margin: 0 0.12em; }
.hero__divider { width: 40px; height: 1px; background: var(--color-accent-light); margin: 0 auto 1.5rem; }
.hero__date-location { font-size: 1.2rem; font-weight: 400; color: #2C3E50; letter-spacing: 0.04em; margin-bottom: 1.5rem; }

.hero__countdown { margin-top: 0.5rem; }
.hero__countdown-number {
  display: block; font-family: var(--font-serif);
  font-size: clamp(2.8rem, 6vw, 4.5rem); font-weight: 400;
  color: var(--color-accent); line-height: 1; letter-spacing: -0.02em;
}
.hero__countdown-label {
  display: block; font-size: 0.7rem; font-weight: 400; letter-spacing: 0.35em;
  text-transform: uppercase; color: var(--color-muted); margin-top: 0.35rem;
}

.hero__map-wrap {
  margin-top: 1.5rem; display: inline-block; border-radius: 8px; overflow: hidden;
  box-shadow: 0 2px 16px rgba(44,62,80,0.08);
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, rgba(0,0,0,1) 45%, rgba(0,0,0,0.35) 78%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, rgba(0,0,0,1) 45%, rgba(0,0,0,0.35) 78%, rgba(0,0,0,0) 100%);
}
.hero__map-container {
  position: relative;
  width: 380px;
  height: 380px;
}
.hero__map-img,
.hero__map-embed {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: none; display: block;
  object-fit: cover;
}
.hero__map-img {
  z-index: 2;
  transition: opacity 0.45s ease;
}
.hero__map-embed {
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
}
@media (hover: hover) {
  .hero__map-container:hover .hero__map-img { opacity: 0; pointer-events: none; }
  .hero__map-container:hover .hero__map-embed { opacity: 1; pointer-events: auto; }
}

/* ==============================================
   Photo slide
   ============================================== */
.slide--photo { background: #F4F7F9; }

.slide__row {
  display: flex; align-items: center; width: 100%; height: 100%;
  padding: 3rem 4rem; gap: 2rem;
}
.slide__row--reverse { flex-direction: row-reverse; }

.slide__media {
  flex: 0 0 52%; display: flex; align-items: center; justify-content: center; position: relative;
  opacity: 0; transform: translateX(-80px);
  transition: transform 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s,
              opacity 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.15s;
}
.slide--photo--rev .slide__media { transform: translateX(80px); }
.slide--photo.revealed .slide__media { transform: translateX(0); opacity: 1; }

.slide__image {
  height: 58vh; max-width: 100%; width: auto; object-fit: cover;
  -webkit-mask-image: radial-gradient(ellipse 78% 72% at 50% 50%, rgba(0,0,0,1) 44%, rgba(0,0,0,0.5) 74%, rgba(0,0,0,0) 100%);
  mask-image: radial-gradient(ellipse 78% 72% at 50% 50%, rgba(0,0,0,1) 44%, rgba(0,0,0,0.5) 74%, rgba(0,0,0,0) 100%);
  will-change: transform;
}
.slide--photo.revealed .slide__image {
  animation: kenBurns 22s ease-in-out infinite alternate;
}
@keyframes kenBurns {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}

/* Photo frame corners */
.frame-corner { position: absolute; pointer-events: none; z-index: 3; }
.frame-corner--tl { top: -2px; left: -2px; }
.frame-corner--tr { top: -2px; right: -2px; }
.frame-corner--bl { bottom: -2px; left: -2px; }
.frame-corner--br { bottom: -2px; right: -2px; }

/* ===== Lyrics ===== */
.slide__lyrics { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem 2.5rem; }
.slide__line {
  font-family: var(--font-serif);
  font-size: clamp(1.05rem, 2.4vw, 1.55rem);
  font-weight: 400; font-style: italic; color: var(--color-text);
  letter-spacing: 0.02em; line-height: 1.55; text-align: center;
  opacity: 0; transform: translateY(16px) translateX(-30px);
  transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.4s,
              transform 1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.4s;
  position: relative; padding: 0 1.5rem;
}
.slide__line::before,
.slide__line::after {
  font-family: var(--font-serif); font-size: 3rem;
  color: var(--color-accent-light); opacity: 0.3; line-height: 0; position: absolute;
}
.slide__line::before { content: '\201C'; top: -0.3em; left: -0.3em; }
.slide__line::after  { content: '\201D'; bottom: -1em; right: -0.3em; }
.slide--photo--rev .slide__line { transform: translateY(16px) translateX(30px); }
.slide--photo.revealed .slide__line { opacity: 1; transform: translateY(0) translateX(0); }

.slide__ru {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.65em;
  font-style: normal;
  font-weight: 300;
  color: var(--color-muted);
  letter-spacing: 0.04em;
  margin-top: 0.35em;
  opacity: 0.8;
}

.slide__counter {
  position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%);
  font-size: 0.65rem; font-weight: 400; letter-spacing: 0.3em; color: var(--color-muted); z-index: 2;
}

/* ===== Story ===== */
.slide--story { background: var(--color-bg-alt); }
.story__inner { text-align: center; max-width: 560px; padding: 2rem; }
.story__title {
  font-family: var(--font-serif); font-size: 1.6rem; font-weight: 400;
  font-style: italic; letter-spacing: 0.02em; margin-bottom: 1.25rem; color: var(--color-text);
}
.story p { font-size: 0.95rem; font-weight: 300; color: var(--color-muted); line-height: 1.9; }
.story__ring {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 300px; height: 300px; pointer-events: none; opacity: 0;
  transition: opacity 1.5s ease-out 0.6s;
}
.slide--story.revealed .story__ring { opacity: 0.1; }

/* ===== Footer ===== */
.footer { position: relative; text-align: center; padding: 4rem 2rem 5rem; background: transparent; }
.footer__names { font-size: 1.15rem; font-weight: 300; letter-spacing: 0.04em; color: var(--color-text); margin-bottom: 0.35rem; }
.footer__amp { font-family: var(--font-serif); font-style: italic; color: var(--color-accent-light); }
.footer__tagline { font-size: 0.75rem; font-weight: 300; color: var(--color-muted); letter-spacing: 0.08em; }

/* ==============================================
   Responsive
   ============================================== */
@media (max-width: 900px) {
  .slide__row { padding: 2rem; gap: 1.5rem; }
  .slide__media { flex: 0 0 50%; }
  .slide__image { height: 48vh; }
  .slide__line { font-size: clamp(0.9rem, 2vw, 1.2rem); padding: 0 1rem; }
  .slide__line::before, .slide__line::after { font-size: 2rem; }
  .slide__lyrics { padding: 1rem 1.5rem; }
  .hero__map-container { width: 80vw; height: 80vw; }
}

@media (max-width: 768px) {
  .slide__row,
  .slide__row--reverse { flex-direction: column; padding: 1.5rem; gap: 1rem; justify-content: center; }
  .slide__media {
    flex: 0 0 auto; width: 100%; max-height: 48vh; order: -1;
    transform: translateX(0) translateY(30px);
  }
  .slide--photo--rev .slide__media { transform: translateX(0) translateY(30px); }
  .slide--photo.revealed .slide__media { transform: translateX(0) translateY(0); }
  .slide__image { height: 38vh; max-width: 94vw; }
  .slide__lyrics { padding: 0 1rem; flex: 0 0 auto; }
  .slide__line {
    font-size: clamp(0.9rem, 3.5vw, 1.2rem);
    transform: translateY(16px) translateX(0); padding: 0 0.5rem;
  }
  .slide--photo--rev .slide__line { transform: translateY(16px) translateX(0); }
  .slide__line::before, .slide__line::after { font-size: 1.8rem; }
  .slide__line::before { left: -0.2em; }
  .slide__line::after { right: -0.2em; }
  .slide__counter { bottom: 1rem; }
  .hero__names { font-size: clamp(0.85rem, 4.5vw, 3rem); }
  .hero__countdown-number { font-size: clamp(2rem, 7vw, 2.8rem); }
  .story__ring { width: 200px; height: 200px; }
  .frame-corner { transform: scale(0.7); }
  .botanical-corner--tl { width: 180px; height: 240px; }
  .botanical-corner--br { width: 170px; height: 250px; }
  .ring { width: clamp(42px, 8vw, 68px); }
}

@media (max-width: 480px) {
  .slide__row,
  .slide__row--reverse { padding: 1rem; gap: 0.25rem; }
  .slide__image { height: 32vh; max-width: 96vw; }
  .slide__lyrics { padding: 0 0.5rem; }
  .slide__line { font-size: clamp(0.85rem, 4vw, 1rem); }
  .slide__line::before, .slide__line::after { font-size: 1.4rem; }
  .hero__inner { padding: 1.25rem; }
  .footer { padding: 2.5rem 1rem 3.5rem; }
  .frame-corner { transform: scale(0.55); }
  .botanical-corner--tl { width: 140px; height: 190px; }
  .botanical-corner--br { width: 130px; height: 200px; }
  .ring { width: clamp(34px, 10vw, 50px); }
}