:root {
  --ink: #345f91;
  --deep: #274d79;
  --sky: #d9eff7;
  --foam: #f9fdfe;
  --aqua: #a9dedc;
  --gold: #c99252;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--foam);
  font-family: "Montserrat", sans-serif;
  overflow-x: hidden;
}
body.locked { overflow: hidden; }

.opening {
  position: fixed;
  inset: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 2rem;
  background: #f9fdfe url("assets/padrao-oceano.jpg") center/cover no-repeat;
  display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 gap: 1.5rem;
  cursor: pointer;
  color: var(--deep);
  transition: opacity .32s ease, visibility .32s ease;
}
.opening-wash {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.3);
}
.opening-crest {
  position: relative;
  width: min(62vw, 360px);
  max-height: 65svh;
  object-fit: contain;
  filter: drop-shadow(0 14px 24px rgba(42,89,130,.13));
  animation: drift 4s ease-in-out infinite;
}
.opening-prompt {
  position: relative;
 bottom: auto;
  padding: .75rem 1rem;
  border: 1px solid rgba(39,77,121,.2);
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 8px 22px rgba(39,77,121,.1);
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  animation: pulse 2s ease-in-out infinite;
}
.opening.is-open { opacity: 0; visibility: hidden; pointer-events: none; }

main { opacity: 0; transition: opacity .32s ease; }
main.is-visible { opacity: 1; }
.music-toggle {
  position: fixed;
  top: max(1rem, env(safe-area-inset-top));
  right: 1rem;
  z-index: 12;
  width: 42px;
  height: 42px;
  padding: 10px;
  border: 1px solid rgba(52,95,145,.22);
  border-radius: 50%;
  color: var(--deep);
  background: rgba(255,255,255,.78);
  box-shadow: 0 8px 22px rgba(39,77,121,.12);
  backdrop-filter: blur(8px);
}
.music-toggle svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.music-toggle .music-off { display: none; }
.music-toggle.is-paused .music-on { display: none; }
.music-toggle.is-paused .music-off { display: block; }
#background-music { display: none; }
.section-shell {
  position: relative;
  min-height: 94svh;
  padding: 5.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.hero {
  min-height: 100svh;
  background: linear-gradient(180deg, #fafdff 0%, #e9f7fb 70%, #d7f1f1 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 28%;
  background: url("assets/padrao-oceano.jpg") center top/cover no-repeat;
  opacity: .28;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.crest { width: min(94vw, 620px); height: auto; max-height: 59svh; object-fit: contain; flex: 0 0 auto; z-index: 1; filter: drop-shadow(0 18px 35px rgba(63,112,151,.12)); }
.eyebrow { margin: 0 0 1.4rem; text-transform: uppercase; letter-spacing: .2em; font-size: .75rem; font-weight: 600; z-index: 1; }
.parents { max-width: 620px; margin: 1.4rem 0 3rem; font-family: "Cormorant Garamond", serif; font-size: clamp(1.4rem, 5vw, 2rem); line-height: 1.35; z-index: 1; }
.parents span { display: block; }
.parents-names { white-space: nowrap; }
.birthday-line { margin-top: .25rem; color: var(--deep); font-size: 1.16em; font-style: italic; }
.scroll-cue { position: absolute; bottom: 2rem; z-index: 2; font-size: 2.2rem; animation: bob 1.8s ease-in-out infinite; }

.details { background: #fff; }
.coral-divider { font-size: 1.5rem; color: var(--gold); margin-bottom: 1.5rem; }
.script { position: relative; font-family: "Cormorant Garamond", serif; font-style: italic; font-size: clamp(2rem, 8vw, 3.4rem); line-height: 1.05; margin: 0 0 2.3rem; color: var(--deep); }
.date-lockup { position: relative; display: flex; align-items: center; gap: 1.15rem; }
.day { font-family: "montserrat", sans-serif; font-size: clamp(6rem, 23vw, 10rem); line-height: .82; color: var(--deep); }
.date-copy { border-left: 1px solid var(--gold); padding-left: 1.15rem; text-align: left; text-transform: uppercase; letter-spacing: .13em; line-height: 1.2; font-size: clamp(1.15rem, 4.8vw, 1.75rem); }
.date-copy span, .date-copy strong { display: block; }
.date-copy strong { margin-top: .35rem; color: var(--gold); font-size: 1.12em; }
.time { position: relative; margin-top: 2rem; text-transform: uppercase; letter-spacing: .14em; font-size: clamp(1rem, 4.4vw, 1.35rem); font-weight: 500; }

.location { min-height: 70svh; color: #fff; background: linear-gradient(160deg, #3f83a9, #276886 52%, #245573); }
.location::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/padrao-oceano.jpg") center/cover;
  opacity: .12;
  mix-blend-mode: screen;
}
.location > * { position: relative; }
.location h2 { margin: 0; font-family: "Cormorant Garamond", serif; font-size: clamp(2.4rem, 9vw, 4.3rem); font-weight: 500; }
.location p:not(.eyebrow) { margin: .5rem 0 2rem; font-size: 1rem; letter-spacing: .08em; }
.button { display: inline-flex; align-items: center; gap: .65rem; min-height: 50px; padding: .85rem 1.35rem; border: 1px solid rgba(255,255,255,.8); border-radius: 999px; color: #fff; text-decoration: none; text-transform: uppercase; letter-spacing: .13em; font-size: .74rem; font-weight: 600; transition: .25s ease; }
.button:hover, .button:focus-visible { background: #fff; color: var(--deep); transform: translateY(-2px); }
.button svg { width: 1.1rem; fill: currentColor; }

.countdown { min-height: 82svh; background: linear-gradient(#faffff, #e4f6f5); }
.clock { display: grid; grid-template-columns: repeat(4, minmax(58px, 88px)); gap: .45rem; z-index: 1; }
.clock div { padding: 1.1rem .25rem; border: 1px solid rgba(52,95,145,.2); background: rgba(255,255,255,.68); backdrop-filter: blur(8px); border-radius: 45% 45% 42% 42%; box-shadow: 0 12px 30px rgba(58,112,145,.08); }
.clock strong { display: block; font-family: "Cormorant Garamond", serif; font-size: clamp(2rem, 8vw, 3.25rem); font-weight: 500; line-height: 1; }
.clock span { display: block; margin-top: .45rem; font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; }
.closing { margin: 3.2rem 0 0; z-index: 1; font-family: "Cormorant Garamond", serif; font-style: italic; font-size: clamp(1.8rem, 7vw, 2.8rem); line-height: 1.15; color: var(--deep); }

footer { position: relative; overflow: hidden; padding: 0 1.5rem 2rem; text-align: center; background: #e4f6f5; }
.sea-life { display: block; width: min(1180px, 140vw); max-width: none; margin: 0 50% 1.5rem; transform: translateX(-50%); }
.signature { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; color: var(--deep); text-decoration: none; font-size: .7rem; letter-spacing: .15em; text-transform: uppercase; }
.signature svg { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-width: 1.6; opacity: .82; }
.signature .instagram-dot { fill: currentColor; stroke: none; }

.bubbles { position: absolute; inset: 0; pointer-events: none; }
.bubbles { z-index: 2; }
.bubbles i { position: absolute; bottom: -3rem; width: 18px; height: 18px; border: 1.5px solid rgba(72,142,177,.38); box-shadow: inset 2px 2px 4px rgba(255,255,255,.75); border-radius: 50%; animation: rise 8s linear infinite; }
.bubbles i:nth-child(1) { left: 10%; bottom: 8%; animation-delay: -1s; }
.bubbles i:nth-child(2) { left: 24%; bottom: 42%; width: 9px; height: 9px; animation-delay: -5s; }
.bubbles i:nth-child(3) { left: 47%; bottom: 20%; width: 25px; height: 25px; animation-delay: -2.5s; }
.bubbles i:nth-child(4) { left: 68%; bottom: 57%; width: 12px; height: 12px; animation-delay: -6.5s; }
.bubbles i:nth-child(5) { left: 84%; bottom: 32%; width: 31px; height: 31px; animation-delay: -4s; }
.bubbles i:nth-child(6) { left: 94%; bottom: 72%; width: 8px; height: 8px; animation-delay: -.2s; }

.reveal { opacity: 0; transform: translateY(20px); transition: opacity .9s ease, transform .9s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
@keyframes drift { 50% { transform: translateY(-10px); } }
@keyframes pulse { 50% { opacity: .42; } }
@keyframes bob { 50% { transform: translateY(8px); opacity: .45; } }
@keyframes rise { from { transform: translateY(0) scale(.85); opacity: .85; } to { transform: translateY(-115svh) scale(1.35); opacity: 0; } }

@media (max-width: 430px) {
  .opening-crest {
    width: min(75vw, 340px);
  }
}
  .section-shell { padding-inline: 1.1rem; }
  .clock { width: 100%; gap: .32rem; }
  .clock div { padding: 1rem .1rem; }
  .parents { font-size: 1.42rem; }
  .birthday-line { font-size: 1.1em; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}