/* Theme layer: "Fundo do mar" (under the sea). Loaded after site.css only when config.tema is "fundo-do-mar".
   Token names are roles, not colours: blush = pale surface tint, rose = primary accent (coral here),
   gold = warm secondary (sand and amber), plum = night (deep navy), ink = text.
   The rest of this file re-skins the components that site.css paints with fixed Jardim colours. */
:root {
  --blush-50: #f4fcfd;
  --blush-100: #e6f7f9;
  --blush-200: #d3f0f4;
  --blush-300: #b4e3ea;
  --pink-400: #4fc1d1;
  --rose-500: #e0614a;
  --rose-600: #c4452f;
  --rose-700: #9d3322;
  --gold-300: #fde7c4;
  --gold-400: #f7c98a;
  --gold-500: #e8a45a;
  --gold-600: #b9701f;
  --gold-700: #8a4f12;
  --plum-900: #041428;
  --plum-800: #072445;
  --plum-700: #0d3763;
  --ink: #0b2e4f;
  --line: rgba(31, 111, 150, .3);
  --card: rgba(255, 255, 255, .72);
  --shadow-soft: 0 24px 50px -30px rgba(11, 46, 79, .5);

  /* Display: Lilita One (chunky cartoon titles). Text: Baloo 2 (rounded, friendly, full Portuguese accents). */
  --font-script: 'Lilita One', ui-rounded, 'Arial Rounded MT Bold', system-ui, sans-serif;
  --font-serif: 'Lilita One', ui-rounded, 'Arial Rounded MT Bold', system-ui, sans-serif;
  --font-sans: 'Baloo 2', ui-rounded, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --stage-font: 400 {size}px 'Lilita One', ui-rounded, 'Arial Rounded MT Bold', sans-serif;
  --navy: #0d3a6e;

  --gold-text: linear-gradient(135deg, #0b3d63 0%, #1b78a6 28%, #7fd6e6 46%, #d9f7fb 52%, #2c8fb5 64%, #0b3d63 100%);
  --gold-text-deep: linear-gradient(135deg, #0b3d63 0%, #1b78a6 50%, #0b3d63 100%);
  --shine: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .85) 50%, transparent 58%);

  --stem: #2f9a8c;
  --hill-a: #f1d9ad;
  --hill-b: #e3bd84;
  --night-rgb: 7, 36, 69;

  --magic-mode: bubbles;
  --magic-colors: 190,240,250|255,255,255|140,220,235|255,190,150|230,250,255;
  --magic-sky: #04152c #082a4f #0f5a86;
  --magic-name: #ffd9b0 #fff3e4 #ffffff #ffc6a0 #f59a74;
  --magic-name-glow: 120,215,235;
  --magic-halo: 90,200,225;
  --magic-age: #e9fbff;
}

body { font: 500 1.08rem/1.6 var(--font-sans); }
h1, h2, h3, .h2 { font-weight: 400; }
.h2 { font-size: clamp(2.35rem, 10.4vw, 3.9rem); line-height: 1.04; letter-spacing: .005em; }
.h2 em { font-style: normal; }
.eyebrow { font-weight: 800; font-size: .8rem; letter-spacing: .18em; }
.script { font-weight: 400; letter-spacing: .01em; }
.btn { font-weight: 700; font-size: 1.05rem; }
/* Paragraph-like text stays in Baloo 2 (Lilita One is for titles only and has no italic) */
.lede, .notes__lede, .hero__date, .countdown__status, .countdown__date, .map-soon__text, .guest-empty, .note__text, .notes__empty, .envelope__to {
  font-family: var(--font-sans); font-style: normal; font-weight: 600;
}
.lede { font-size: clamp(1.2rem, 4.6vw, 1.45rem); line-height: 1.45; }
.h2 em, .site-footer__line em { font-style: normal; }
.field__label { font-weight: 700; }

/* Descent: each chapter is a depth. Surface (light aqua) to the dark deep, then the sunlit reef (sand). */
#inicio { --theme-bg: #d5f3f7; --theme-ink: #0b2e4f; --theme-accent: #c4452f; }
#convite { --theme-bg: #bfe8f0; --theme-ink: #0b2e4f; --theme-accent: #b93c27; }
#contagem { --theme-bg: #072445; --theme-ink: #e8fbff; --theme-accent: #ffb48f; }
#detalhes { --theme-bg: #f8ead2; --theme-ink: #0b2e4f; --theme-accent: #b93c27; }
#confirmar { --theme-bg: #f9dfc4; --theme-ink: #0b2e4f; --theme-accent: #b03520; }
#lista { --theme-bg: #fcf1dd; --theme-ink: #0b2e4f; --theme-accent: #b93c27; }
#recados { --theme-bg: #f8e6cc; --theme-ink: #0b2e4f; --theme-accent: #b93c27; }
.chapters .countdown.chapter { background: linear-gradient(180deg, rgba(var(--night-rgb), 0) 0, var(--theme-bg) clamp(50px, 7vh, 80px)); }
body { background: var(--blush-200); }

/* Caustics shimmer and sun rays (always on, CSS only, fade with depth) */
.caustics, .sea-rays { position: fixed; inset: 0; pointer-events: none; z-index: 58; }
.caustics {
  mix-blend-mode: soft-light; opacity: calc(.55 - var(--depth, 0) * .35);
  background:
    radial-gradient(ellipse 22% 9% at 20% 24%, rgba(255, 255, 255, .55), transparent 70%),
    radial-gradient(ellipse 26% 10% at 74% 38%, rgba(255, 255, 255, .5), transparent 70%),
    radial-gradient(ellipse 20% 8% at 42% 70%, rgba(255, 255, 255, .45), transparent 70%),
    radial-gradient(ellipse 24% 9% at 88% 84%, rgba(255, 255, 255, .4), transparent 70%);
  background-size: 140% 140%;
}
.sea-rays {
  opacity: calc(.5 * (1 - var(--depth, 0) * 1.6));
  background: repeating-linear-gradient(104deg, transparent 0 7%, rgba(255, 255, 255, .16) 9% 11%, transparent 13% 20%);
  -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 70%); mask-image: linear-gradient(180deg, #000 0, transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
  .caustics { animation: caustics 14s ease-in-out infinite alternate; }
  .sea-rays { animation: rays 18s ease-in-out infinite alternate; }
}
@keyframes caustics { from { background-position: 0% 0%; transform: scale(1); } to { background-position: 100% 60%; transform: scale(1.04); } }
@keyframes rays { from { transform: translateX(-2%); } to { transform: translateX(2%); } }
html.has-opener .caustics, html.has-opener .sea-rays, html.has-opener .depth-gauge { visibility: hidden; }
.depth-gauge {
  position: fixed; left: 10px; top: 50%; z-index: 56; transform: translateY(-50%);
  display: grid; justify-items: center; gap: .35rem; pointer-events: none;
  font: 700 .66rem/1 var(--font-sans); letter-spacing: .08em; color: var(--ink);
  mix-blend-mode: normal;
}
.depth-gauge::before { content: ""; width: 3px; height: 92px; border-radius: 3px; background: linear-gradient(180deg, #fff, var(--pink-400) 45%, var(--plum-700)); opacity: .85; }
.depth-gauge span { padding: .2rem .45rem; border-radius: 999px; background: rgba(255, 255, 255, .78); border: 1px solid var(--line); }
@media (min-width: 900px) { .depth-gauge { left: 22px; } }

/* Sparkles become plankton bubbles */
.tw { background: radial-gradient(circle at 32% 30%, #fff 0 14%, rgba(255, 255, 255, .35) 16% 56%, rgba(120, 215, 235, .45) 100%); clip-path: none; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .7); }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: translateY(14px) scale(.4); } 50% { opacity: .95; transform: translateY(-6px) scale(1); } }

/* Opening: a bubble with the name inside and a pearl to tap */
.opener { background: radial-gradient(120% 90% at 50% 20%, #f4fdff 0%, #c6eef4 46%, #6cc9d9 100%) !important; }
html.has-opener .opener { background: radial-gradient(120% 90% at 50% 20%, #f4fdff 0%, #c6eef4 46%, #6cc9d9 100%); }
.opener::before { background: repeating-linear-gradient(104deg, transparent 0 7%, rgba(255, 255, 255, .35) 9% 11%, transparent 13% 20%); opacity: .9; }
.opener::after { background: radial-gradient(60% 45% at 50% 50%, rgba(255, 255, 255, .55), transparent 75%); }
.opener__kicker, .opener__hint { color: var(--plum-700); }
.opener__hint { font-style: normal; font-weight: 500; font-size: 1.05rem; }
.bubble {
  position: relative; width: min(74vw, 330px); aspect-ratio: 1; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .95) 0 5%, rgba(255, 255, 255, .0) 6%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .08) 55%, rgba(170, 235, 247, .5) 82%, rgba(60, 170, 200, .6) 100%);
  box-shadow: inset 0 0 36px rgba(255, 255, 255, .7), inset -16px -20px 40px rgba(31, 111, 150, .3), 0 30px 50px -22px rgba(11, 46, 79, .5);
  border: 1.5px solid rgba(255, 255, 255, .8);
  animation: env-in 1.3s var(--ease-out) both;
}
.bubble::before { content: ""; position: absolute; left: 16%; top: 12%; width: 26%; height: 14%; border-radius: 50%; background: rgba(255, 255, 255, .8); transform: rotate(-28deg); filter: blur(1px); }
@media (prefers-reduced-motion: no-preference) { .bubble { animation: env-in 1.3s var(--ease-out) both, bubble-bob 4.2s ease-in-out 1.3s infinite; } }
@keyframes bubble-bob { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-9px) scale(1.015); } }
.bubble__inner { display: grid; justify-items: center; gap: .15rem; margin-top: -14%; text-align: center; }
.bubble__name { font: 500 clamp(2.4rem, 12.5vw, 3.4rem)/1.1 var(--font-script); color: var(--plum-700); }
.bubble__age { font: 600 .82rem/1 var(--font-sans); letter-spacing: .3em; text-transform: uppercase; color: var(--rose-600); margin-right: -.3em; }
.bubble__to { margin-top: .4rem; font: 600 1rem/1.2 var(--font-sans); color: var(--plum-700); }
.bubble .seal {
  left: calc(50% - 36px); top: auto; bottom: 11%; width: 72px; height: 72px;
  background: radial-gradient(circle at 34% 28%, #fff 0%, #ffe6d2 28%, #f7b99a 62%, #e0805e 100%);
  box-shadow: 0 8px 18px rgba(11, 46, 79, .35), inset 0 2px 3px rgba(255, 255, 255, .8), inset 0 -4px 8px rgba(160, 70, 40, .35);
  animation: pearl-pulse 2.4s ease-in-out 1.4s infinite;
}
.bubble .seal::before { border-color: rgba(255, 255, 255, .6); }
.bubble .seal__m { font: 600 34px/1 var(--font-script); color: #a8402a; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); transform: translate(0, 1px); }
@keyframes pearl-pulse { 0%, 100% { box-shadow: 0 8px 18px rgba(11, 46, 79, .35), inset 0 2px 3px rgba(255, 255, 255, .8), 0 0 0 0 rgba(224, 128, 94, .5); } 60% { box-shadow: 0 8px 18px rgba(11, 46, 79, .35), inset 0 2px 3px rgba(255, 255, 255, .8), 0 0 0 18px rgba(224, 128, 94, 0); } }
.is-opening .bubble { animation: bubble-pop .95s cubic-bezier(.3, .0, .2, 1) .45s forwards; }
@keyframes bubble-pop { 0% { transform: scale(1); opacity: 1; } 55% { transform: scale(1.16); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; filter: blur(6px); } }
.is-leaving .bubble { opacity: 0; }

/* Cover */
.hero__veil { background: radial-gradient(75% 40% at 50% 47%, rgba(244, 253, 255, .78) 0%, rgba(230, 249, 252, .5) 45%, rgba(213, 243, 247, .08) 78%, transparent 100%), linear-gradient(180deg, rgba(255, 255, 255, .18) 0%, transparent 25%, transparent 62%, rgba(248, 234, 210, .85) 100%); }
.hero__name { filter: drop-shadow(0 2px 14px rgba(244, 253, 255, .9)); font-size: clamp(5rem, 25vw, 10.5rem); line-height: 1.1; }
.hero__name.is-long, .envelope__name.is-long, .bubble__name.is-long { font-size: clamp(3rem, 15vw, 6.4rem); }
@keyframes write { from { opacity: 0; clip-path: inset(0 100% 0 0); } 15% { opacity: 1; } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.hero__age { color: var(--plum-700); }
.ornament { color: var(--gold-500); }
.hero__fg { filter: blur(1.4px); opacity: .9; }
.art-flowers { opacity: .95; }
.hero__art .rays { fill: rgba(255, 255, 255, .22); }
@media (prefers-reduced-motion: no-preference) {
  .hero__art .bub { animation: bub-rise 9s linear infinite; }
  .hero__art .bub:nth-of-type(2n) { animation-duration: 12s; animation-delay: -4s; }
  .hero__art .weed { transform-origin: 50% 100%; transform-box: fill-box; animation: sway 5s ease-in-out infinite alternate; }
}
@keyframes bub-rise { from { transform: translateY(0); opacity: 0; } 12% { opacity: .8; } to { transform: translateY(-120px); opacity: 0; } }
@keyframes sway { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }

/* Fish replace the butterflies */
.fish { position: absolute; left: 0; top: 0; width: var(--size, 56px); pointer-events: none; will-change: transform; }
.fish svg { display: block; width: 100%; height: auto; overflow: visible; }
.fish .tail { transform-box: fill-box; transform-origin: 100% 50%; }
@media (prefers-reduced-motion: no-preference) { .fish .tail { animation: tail var(--flap, .5s) ease-in-out infinite alternate; } }
@keyframes tail { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.is-paused .fish .tail { animation-play-state: paused; }

/* Photo in a porthole */
.arch::before { border-radius: 50%; inset: -14px; border: 6px solid var(--gold-500); box-shadow: inset 0 0 0 3px var(--gold-300), 0 18px 40px -18px rgba(11, 46, 79, .6); }
.arch__frame { border-radius: 50%; aspect-ratio: 1; box-shadow: 0 30px 60px -30px rgba(11, 46, 79, .7); }
html.fx-ready .arch .arch__frame { clip-path: circle(0% at 50% 50%); }
html.fx-ready .arch.is-in .arch__frame { clip-path: circle(75% at 50% 50%); }
.arch__flower--a { left: -8%; bottom: -3%; }
.arch__flower--b { right: -6%; bottom: 18%; }

/* Night -> deep: jellyfish glow, silhouette seabed */
.night-stage { position: relative; }
.jelly { position: absolute; width: 74px; right: 4%; top: -8%; opacity: .9; filter: drop-shadow(0 0 14px rgba(120, 220, 240, .7)); }
@media (prefers-reduced-motion: no-preference) { .jelly { animation: jelly-bob 6s ease-in-out infinite; } .jelly .tent { transform-box: fill-box; transform-origin: 50% 0; animation: sway 3s ease-in-out infinite alternate; } }
@keyframes jelly-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
.timer__cell { border-color: rgba(127, 214, 230, .35); background: linear-gradient(165deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03)); }
.timer__num { color: #d9f7fb; }
.timer__val { background-image: linear-gradient(160deg, #e9fbff 0%, #9fe3ef 45%, #ffffff 60%, #5cc8d6 100%); }
.countdown__status, .countdown :focus-visible { color: #ffd9b0; outline-color: #ffd9b0; }

/* Components painted with fixed Jardim colours */
.btn--primary, .fab { background: linear-gradient(135deg, #ec7a5f 0%, #cf4f37 58%, #aa3822 100%); box-shadow: 0 14px 30px -14px rgba(172, 56, 34, .8), inset 0 1px 0 rgba(255, 255, 255, .3); }
.btn--primary:hover { box-shadow: 0 18px 36px -14px rgba(172, 56, 34, .9), inset 0 1px 0 rgba(255, 255, 255, .3); }
.btn--ghost { color: var(--plum-700); border-color: rgba(31, 111, 150, .4); }
.btn--glow { color: #6c2a14; background: linear-gradient(135deg, #fff0d9 0%, #f9cf9c 50%, #fde3bf 100%); box-shadow: 0 0 34px -6px rgba(247, 201, 138, .6), inset 0 1px 0 rgba(255, 255, 255, .6); }
.countdown .btn--glow { color: #4b1c0b; }
:focus-visible { outline-color: var(--rose-600); }
.choice__opt span { border-color: rgba(31, 111, 150, .3); }
.choice__opt input:checked + span { border-color: var(--rose-600); color: #7d2616; background: linear-gradient(135deg, #ffe6d8, #fbc9b2); box-shadow: 0 10px 22px -12px rgba(172, 56, 34, .6); }
.field__input { border-color: rgba(31, 111, 150, .3); }
.field__input:focus { border-color: var(--rose-600); box-shadow: 0 0 0 4px rgba(224, 97, 74, .2); }
.stepper { border-color: rgba(31, 111, 150, .3); }
.stepper__btn { background: var(--blush-200); color: var(--plum-700); }
.stepper__btn:active { background: var(--blush-300); }
.rsvp__card { box-shadow: 0 40px 80px -40px rgba(11, 46, 79, .5), inset 0 1px 0 #fff; }
.rsvp__done-icon { background: linear-gradient(135deg, #ffe6d8, #f9c3a8); box-shadow: 0 14px 30px -14px rgba(172, 56, 34, .6); }
.rsvp__done-icon svg { fill: var(--rose-500); }
.guest { box-shadow: 0 8px 18px -12px rgba(11, 46, 79, .45); }
.guest.is-me { background: linear-gradient(135deg, #ffe6d8, #f9c3a8); border-color: var(--rose-500); }
.note { box-shadow: 0 26px 50px -30px rgba(11, 46, 79, .5), inset 0 1px 0 #fff; background: linear-gradient(170deg, rgba(255, 255, 255, .94), rgba(244, 252, 253, .85)); }
.note--rose { background: linear-gradient(170deg, rgba(255, 232, 220, .96), rgba(251, 208, 188, .88)); }
.note--gold { background: linear-gradient(170deg, rgba(255, 246, 226, .96), rgba(250, 226, 188, .88)); }
.music-btn { border-color: rgba(31, 111, 150, .35); background: rgba(244, 253, 255, .8); color: var(--plum-700); box-shadow: 0 10px 24px -12px rgba(11, 46, 79, .55); }
.ticket { background: rgba(4, 20, 40, .66); }
.ticket__panel { background: linear-gradient(180deg, #f4fdff, #d3f0f4); }
.site-footer { color: #e4f8fc; background: radial-gradient(120% 80% at 50% 0%, #0d3763 0%, #041428 62%); }
.site-footer__line em { color: #ffb48f; }
.seal-ring__svg { color: #7fd6e6; }
.seal-ring text { fill: #bfeaf2; }
.seal-ring__m { background-image: linear-gradient(160deg, #fff3e4 0%, #ffc6a0 45%, #ffffff 58%, #f59a74 100%); }
.site-footer__credit a { border-color: rgba(127, 214, 230, .3); color: rgba(228, 248, 252, .8); }
.site-footer__credit strong { color: #ffc6a0; }
.read-progress { background: linear-gradient(90deg, #4fc1d1, #e0614a, #f7c98a); }
.vine__stem, .vine__curl, .ov__stem, .arch__vine-stem { stroke: var(--stem); }
.map-soon__path { color: #5fb6c8; }
.venue__map { background: linear-gradient(160deg, #e6f7f9, #bfe8f0); }
.map-soon__pin::before { border-color: rgba(224, 97, 74, .45); }

/* Reduced motion: still sea, no rays animation, no bubbles movement (the engines also stop). */
@media (prefers-reduced-motion: reduce) {
  .caustics, .sea-rays { animation: none; }
  .depth-gauge { display: none; }
}

/* Reef-cam viewfinder over the cover: corner brackets, blinking REC dot, running timecode and a depth readout. */
.viewfinder { position: fixed; inset: 0; z-index: 57; pointer-events: none; color: #0b3d63; text-shadow: 0 1px 6px rgba(255, 255, 255, .7); font: 700 .72rem/1 var(--font-sans); letter-spacing: .14em; }
html.has-opener .viewfinder { visibility: hidden; }
.vf { position: absolute; width: 28px; height: 28px; border: 0 solid rgba(11, 61, 99, .75); }
.vf--tl { left: 14px; top: calc(14px + env(safe-area-inset-top)); border-left-width: 2px; border-top-width: 2px; }
.vf--tr { right: 14px; top: calc(14px + env(safe-area-inset-top)); border-right-width: 2px; border-top-width: 2px; }
.vf--bl { left: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); border-left-width: 2px; border-bottom-width: 2px; }
.vf--br { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); border-right-width: 2px; border-bottom-width: 2px; }
.vf__rec { position: absolute; left: 52px; top: calc(21px + env(safe-area-inset-top)); display: inline-flex; align-items: center; gap: .45rem; }
.vf__rec i { width: 9px; height: 9px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 8px rgba(255, 59, 48, .8); }
.vf__time { position: absolute; left: 52px; top: calc(40px + env(safe-area-inset-top)); font-variant-numeric: tabular-nums; opacity: .9; }
.vf__depth { position: absolute; left: 52px; bottom: calc(21px + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: no-preference) { .vf__rec i { animation: rec-blink 1.2s steps(2, jump-none) infinite; } }
@keyframes rec-blink { 0% { opacity: 1; } 100% { opacity: .15; } }
.turtle { position: absolute; left: -30%; top: 36%; width: clamp(110px, 26vw, 190px); color: #2a7f87; opacity: .5; z-index: -1; pointer-events: none; }
.turtle svg { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) { .turtle { animation: glide 56s linear 6s infinite; } }
@keyframes glide { 0% { transform: translate(0, 0); } 50% { transform: translate(85vw, -18px); } 100% { transform: translate(190vw, 10px); } }
@media (prefers-reduced-motion: reduce) { .turtle { left: 62%; top: 30%; } }
.hero__art .peek { transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
  .hero__art .peek { animation: peek 11s ease-in-out infinite; }
  .hero__art .clam path:first-child { transform-box: fill-box; transform-origin: 50% 100%; animation: clam 7s ease-in-out infinite; }
}
@keyframes peek { 0%, 55%, 100% { transform: translateX(16px); opacity: 0; } 62%, 88% { transform: translateX(0); opacity: 1; } }
@keyframes clam { 0%, 80%, 100% { transform: rotate(0); } 88% { transform: rotate(-18deg) translateY(-1px); } }
.hero__fg--top circle { vector-effect: non-scaling-stroke; }

.hero__reef { position: absolute; left: 0; bottom: -1%; width: 100%; height: 40%; z-index: 0; }