:root {
  --ink: #342a31;
  --muted: #816c76;
  --paper: #fffaf7;
  --peach: #ffdfd0;
  --pink: #ff6d96;
  --berry: #b8325b;
  --yellow: #ffc94d;
  --serif: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
}

body.theme-cobalt {
  --ink: #172448;
  --muted: #596482;
  --paper: #fffbed;
  --peach: #c4d8ff;
  --pink: #f04c35;
  --berry: #2346b8;
  --yellow: #f5e742;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); }
button { font: inherit; }

#confetti-canvas { position: fixed; inset: 0; z-index: 20; pointer-events: none; }
.audio-controls { position: fixed; right: 16px; bottom: 16px; z-index: 19; display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: #fffbed; border: 2px solid var(--ink); background: var(--berry); box-shadow: 4px 4px 0 var(--yellow); font-size: 12px; font-weight: 700; }
.audio-controls[hidden] { display: none; }
.audio-toggle { padding: 0; color: inherit; border: 0; background: transparent; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.volume-control { display: flex; align-items: center; gap: 7px; }
.volume-control input { width: 76px; accent-color: var(--yellow); cursor: pointer; }

.cover {
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  color: white;
  background: radial-gradient(circle at 15% 20%, #ffb4c9 0, transparent 25%), radial-gradient(circle at 84% 72%, #ffc372 0, transparent 28%), linear-gradient(135deg, #d9406d, #ef5d87 54%, #ee7898);
}
body.theme-cobalt .cover { background: #fffbed url("images/fundo-festa-sem-coleira-v4.png") center / cover no-repeat; }
body.theme-cobalt .cover::before { inset: 14px; width: auto; height: auto; aspect-ratio: auto; border: 7px solid #172448; border-radius: 8px; background: rgba(255, 251, 237, .08); }
body.theme-cobalt .cover-content { max-width: 540px; padding: clamp(30px, 5vw, 52px) clamp(24px, 5vw, 58px); color: #172448; border: 3px solid #172448; border-radius: 0; background: rgba(255, 251, 237, .96); box-shadow: 12px 12px 0 #f5e742; }
body.theme-cobalt .cover .eyebrow, body.theme-cobalt .cover .cover-copy, body.theme-cobalt .cover .hint { color: #172448; opacity: 1; }.theme-cobalt .cover h1 em { color: #ef523a; }.theme-cobalt .open-button { color: #fffbed; background: #2346b8; box-shadow: none; }.theme-cobalt .open-button span:last-child { color: #172448; background: #f5e742; }.theme-cobalt .hero-cats { margin-top: 3px; mix-blend-mode: normal; border: 2px solid #172448; border-radius: 0; }.theme-cobalt .glow-one { background: #f5e742; }.theme-cobalt .glow-two { background: #e95442; }
.cover::before { content: ""; position: absolute; width: min(65vw, 740px); aspect-ratio: 1; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; }
.cover-content { position: relative; z-index: 1; text-align: center; padding: 48px 22px; animation: rise .9s ease-out both; }
.eyebrow { margin: 0; color: inherit; font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.hero-cats { width: min(260px, 64vw); display: block; margin: 12px auto -3px; filter: drop-shadow(0 11px 14px rgba(91, 45, 25, .19)); mix-blend-mode: multiply; border-radius: 45%; animation: rise .9s ease-out .12s both; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; }
h1 { margin-bottom: 20px; font-size: clamp(48px, 8vw, 94px); line-height: .98; letter-spacing: -.055em; }
em { color: #ffe874; font-style: italic; }
.cover-copy { max-width: 280px; margin: 0 auto 31px; font-size: 15px; line-height: 1.65; opacity: .9; }
.open-button { display: inline-flex; gap: 22px; align-items: center; border: 0; padding: 16px 20px 16px 24px; border-radius: 999px; background: #fffdf8; color: var(--berry); font-size: 14px; font-weight: 700; cursor: pointer; box-shadow: 0 11px 25px rgba(110, 18, 52, .18); transition: transform .2s, box-shadow .2s; }
.open-button:hover { transform: translateY(-3px); box-shadow: 0 16px 28px rgba(110, 18, 52, .24); }
.open-button span:last-child { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; color: white; background: var(--pink); }
.hint { margin: 19px 0 0; font-size: 10px; letter-spacing: .12em; opacity: .65; text-transform: uppercase; }
.glow { position: absolute; border-radius: 50%; filter: blur(5px); opacity: .55; }
.glow-one { width: 170px; height: 170px; top: -50px; left: -35px; background: #ffdf69; }.glow-two { width: 230px; height: 230px; bottom: -100px; right: -70px; background: #ffe2a6; }
.orbit { position: absolute; z-index: 1; color: white; opacity: .85; animation: float 4s ease-in-out infinite; }.orbit-one { top: 17%; left: 18%; font-size: 18px; }.orbit-two { top: 28%; right: 17%; color: #ffe875; font-size: 15px; animation-delay: -1s; }.orbit-three { bottom: 14%; left: 22%; font-size: 15px; animation-delay: -2s; }
.floating-items { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }.float-item { position: absolute; display: block; filter: drop-shadow(0 5px 6px rgba(90, 31, 49, .18)); transform-origin: center; animation: item-drift 5s ease-in-out infinite; }.cover-items .float-item { z-index: 2; }.item-ramen { top: 13%; left: 9%; font-size: clamp(27px, 4vw, 49px); animation-delay: -1.3s; }.item-cake { right: 8%; bottom: 14%; font-size: clamp(29px, 4.5vw, 53px); animation-delay: -2.7s; }.item-paws { top: 15%; right: 13%; font-size: clamp(21px, 3vw, 34px); transform: rotate(18deg); animation-delay: -.4s; }.item-paws-two { left: 14%; bottom: 16%; font-size: clamp(18px, 2.8vw, 31px); transform: rotate(-22deg); animation-delay: -3.2s; }.item-socks { top: 42%; left: 5%; font-size: clamp(24px, 3.5vw, 39px); animation-delay: -1.8s; }.item-star { top: 32%; right: 7%; color: #e52735; font-size: clamp(27px, 4vw, 48px); text-shadow: 0 3px 7px rgba(111, 18, 30, .22); animation-delay: -2s; }.item-book { right: 11%; top: 60%; color: var(--berry); font-size: 37px; animation-delay: -3.7s; }.item-heart { bottom: 7%; left: 7%; color: var(--pink); font-size: 34px; animation-delay: -1s; }
.item-hammer { top: 54%; right: 9%; color: #d52231; font-size: clamp(25px, 3.7vw, 44px); animation-delay: -4.4s; }.item-leo { top: 10%; left: 37%; color: #f6a61b; font-size: clamp(28px, 4vw, 47px); animation-delay: -.8s; }
.item-gloves { right: 18%; bottom: 28%; font-size: clamp(25px, 3.6vw, 43px); animation-delay: -2.2s; }.item-ball { top: 57%; left: 8%; font-size: clamp(25px, 3.8vw, 46px); animation-delay: -3.1s; }.item-bone { bottom: 7%; right: 24%; font-size: clamp(24px, 3.5vw, 41px); animation-delay: -4.8s; }
.extra-decorations { position: absolute; inset: 0; pointer-events: none; }.scatter-item { position: absolute; left: var(--x); top: var(--y); z-index: 1; display: block; font-size: clamp(23px, 3.2vw, 41px); filter: drop-shadow(0 4px 5px rgba(90, 31, 49, .17)); animation: item-drift var(--duration) ease-in-out var(--delay) infinite; }.scatter-item.is-hammer { color: #d52231; }.scatter-item.is-leo { color: #f6a61b; }

.surprise { display: none; position: relative; overflow: hidden; padding: clamp(42px, 7vw, 82px) 20px 0; background: #f3a2b5; }
.surprise::before { content: ""; position: absolute; inset: 16px; z-index: 0; border-radius: 30px 30px 0 0; background: radial-gradient(circle at 7% 17%, #ffd66a 0 3px, transparent 4px), radial-gradient(circle at 94% 8%, #fff0bf 0 4px, transparent 5px), linear-gradient(135deg, #fff8ef 0%, #ffe9df 100%); box-shadow: inset 0 0 0 1px rgba(185, 50, 91, .11); }
.surprise.variant-poster { padding-top: clamp(34px, 5vw, 64px); background: #ef6d8c; }.surprise.variant-poster::before { inset: 14px; border-radius: 8px; background: linear-gradient(90deg, rgba(255, 202, 77, .55) 1px, transparent 1px), linear-gradient(rgba(255, 202, 77, .55) 1px, transparent 1px), #ffedf0; background-size: 26px 26px; box-shadow: inset 0 0 0 7px #352b32, inset 0 0 0 10px #ffc94d; }
body.theme-cobalt .surprise.variant-poster { background: #fffbed url("images/fundo-festa-sem-coleira-v4.png") center / cover fixed no-repeat; }.theme-cobalt .surprise.variant-poster::before { background: rgba(255, 251, 237, .08); box-shadow: inset 0 0 0 7px #172448, inset 0 0 0 10px #f5e742; }.theme-cobalt .surprise-header { border-color: #c4d8ff; box-shadow: 12px 12px 0 #f5e742; }.theme-cobalt .love-card:nth-child(1) { background: #f7b2cf; }.theme-cobalt .love-card:nth-child(3) { background: #c4d8ff; }.theme-cobalt .love-card:nth-child(4) { background: #8edfd6; }.theme-cobalt .letter { box-shadow: 14px 16px 0 #f5e742; }.theme-cobalt .astro-panel { background: #2346b8; box-shadow: 10px 10px 0 #f5e742; }.theme-cobalt .montage-card { aspect-ratio: auto; padding: 10px; background: #fffbed; border-width: 4px; box-shadow: 14px 14px 0 #f5e742, 18px 18px 0 #172448; }.theme-cobalt .montage-card img { height: auto; border: 2px solid #172448; }.theme-cobalt .surprise::after { display: none; }
.surprise::after { content: ""; position: absolute; z-index: 1; right: 16px; bottom: 0; left: 16px; height: 230px; pointer-events: none; opacity: .9; background-image: radial-gradient(circle, #ff6d96 0 5px, transparent 6px), radial-gradient(circle, #ffc94d 0 4px, transparent 5px), radial-gradient(circle, #79cfc0 0 4px, transparent 5px), linear-gradient(55deg, transparent 46%, #b8325b 47% 53%, transparent 54%), linear-gradient(-35deg, transparent 46%, #ff9a77 47% 53%, transparent 54%); background-size: 59px 73px, 83px 97px, 71px 61px, 53px 47px, 68px 57px; background-position: 0 0, 22px 12px, 35px 5px, 13px 16px, 30px 21px; animation: confetti-shimmer 3.6s ease-in-out infinite; }
.surprise.is-visible { display: block; animation: reveal .8s ease both; }
.paper-noise { position: absolute; inset: 16px; z-index: 1; opacity: .33; pointer-events: none; background-image: radial-gradient(#eecfc0 .55px, transparent .55px); background-size: 7px 7px; }
.surprise-header, .photo-section, .letter-section, .wish-section { position: relative; z-index: 2; max-width: 940px; margin-left: auto; margin-right: auto; }.loves-section { z-index: 2; }
.cat-overlay { display: none; }
.surprise-header { max-width: 760px; padding: clamp(34px, 6vw, 64px) 25px; text-align: center; background: rgba(255, 250, 247, .77); border: 1px solid #f6c5b6; border-radius: 140px 140px 36px 36px; box-shadow: 0 12px 30px rgba(169, 50, 91, .1); }.surprise-header .eyebrow { color: var(--berry); }.surprise-header h2 { margin: 15px 0 20px; font-size: clamp(42px, 7vw, 76px); line-height: 1.02; letter-spacing: -.055em; }.surprise-header h2 em { color: var(--berry); }.intro { max-width: 490px; margin: 0 auto; color: var(--muted); font-size: 16px; line-height: 1.75; }
.variant-poster .surprise-header { max-width: 680px; border: 3px solid var(--ink); border-radius: 0; background: #fffaf7; box-shadow: 12px 12px 0 #ffbd52; transform: rotate(-1deg); }.variant-poster .surprise-header h2 em { color: var(--pink); }.variant-poster .letter { background: #ffe5de; box-shadow: 12px 12px 0 #ff7197; }.variant-poster .wish-section { border-top: 2px dashed var(--berry); background: rgba(255, 250, 247, .7); }.variant-poster .loves-grid { max-width: 820px; margin: auto; }.variant-poster .page-footer { color: #fff7ec; }
.loves-section { position: relative; max-width: 940px; margin: clamp(67px, 10vw, 120px) auto 0; }.section-heading { display: flex; gap: 15px; align-items: baseline; margin-bottom: 25px; color: var(--muted); }.section-heading span { color: var(--pink); font-family: var(--serif); font-size: 24px; }.section-heading p { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.facts-title { margin: 0 0 27px; color: var(--ink); font-size: clamp(34px, 5vw, 55px); line-height: .95; letter-spacing: -.05em; text-align: center; }.facts-title em { color: var(--berry); }
.loves-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }.love-card { min-height: 168px; padding: 20px 16px; display: flex; flex-direction: column; justify-content: space-between; color: var(--ink); border: 1px solid var(--ink); background: #fff; transform: rotate(var(--tilt)); transition: transform .2s ease, box-shadow .2s ease; }.love-card:hover { transform: rotate(0) translateY(-5px); box-shadow: 7px 7px 0 var(--ink); }.love-card:nth-child(2) { background: var(--yellow); }.love-card:nth-child(3) { background: #ffb6cb; }.love-card:nth-child(4) { background: var(--peach); }.love-icon { font-size: 32px; line-height: 1; }.love-card h3 { margin: 16px 0 4px; font-family: var(--sans); font-size: 17px; letter-spacing: -.04em; }.love-card p { margin: 0; font-size: 12px; line-height: 1.4; color: #514c57; }
.astro-panel { display: grid; grid-template-columns: 120px 1fr; gap: 28px; align-items: center; max-width: 720px; margin: 56px auto 0; padding: clamp(28px, 5vw, 48px); color: #fffaf7; border: 2px solid var(--ink); background: var(--berry); box-shadow: 10px 10px 0 var(--yellow); }.astro-symbol { color: var(--yellow); font-size: 98px; line-height: 1; text-align: center; animation: item-drift 5s ease-in-out infinite; }.astro-panel .eyebrow { color: #ffd9ab; }.astro-panel h3 { margin: 11px 0; font-size: clamp(28px, 4vw, 44px); line-height: .98; }.astro-panel h3 em { color: var(--yellow); }.astro-panel p:last-child { max-width: 510px; margin: 0; font-size: 15px; line-height: 1.65; }
.photo-section { margin-top: clamp(58px, 8vw, 92px); }.montage-card { position: relative; max-width: 940px; aspect-ratio: 16 / 7; margin: 0 auto; overflow: hidden; border: 3px solid var(--ink); background: var(--peach); box-shadow: 12px 12px 0 var(--yellow); }.montage-card img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .5s ease; }.montage-card:hover img { transform: scale(1.03); }
.letter-section { margin-top: clamp(75px, 11vw, 130px); }.letter { position: relative; max-width: 710px; margin: 0 auto; padding: clamp(44px, 7vw, 76px) clamp(28px, 7vw, 86px); background: #fff; border: 2px solid var(--ink); border-radius: 2px; transform: rotate(-1deg); box-shadow: 14px 16px 0 var(--yellow); }.letter-mark { display: block; height: 42px; color: var(--pink); font-family: var(--serif); font-size: 78px; line-height: .9; }.letter p { margin: 8px 0 25px; font-family: var(--serif); font-size: clamp(21px, 3vw, 29px); line-height: 1.5; letter-spacing: -.025em; }.letter footer { color: var(--berry); font-family: var(--serif); font-size: 19px; font-style: italic; }
.wish-section { margin-top: clamp(94px, 14vw, 160px); padding: 58px 20px; text-align: center; border-top: 1px solid #f4d8cb; }.wish-section .eyebrow { color: var(--berry); }.wish-section h3 { max-width: 720px; margin: 17px auto; font-size: clamp(32px, 5vw, 57px); line-height: 1.12; letter-spacing: -.045em; }.final-cat-gif { width: min(176px, 48vw); display: block; margin: 12px auto 20px; mix-blend-mode: multiply; border-radius: 12px; }.final-note { max-width: 370px; margin: 0 auto 18px; color: var(--ink); font-size: 15px; line-height: 1.5; }.final-video-link { display: inline-block; padding: 12px 18px; color: #fffbed; border: 2px solid var(--ink); background: var(--berry); box-shadow: 5px 5px 0 var(--yellow); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }.final-video-link:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--yellow); }.sparkle { display: block; color: var(--yellow); font-size: 21px; }.sparkle-bottom { margin-top: 25px; color: var(--pink); font-size: 14px; }.page-footer { position: relative; padding: 28px; text-align: center; color: #a8818b; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }.page-footer span { color: var(--pink); }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes float { 50% { transform: translateY(-11px) rotate(10deg); } }
@keyframes heartbeat { 50% { transform: scale(1.25); } }
@keyframes item-drift { 0%, 100% { translate: 0 0; rotate: -4deg; } 50% { translate: 0 -16px; rotate: 6deg; } }
@keyframes confetti-shimmer { 50% { opacity: .55; translate: 0 -8px; } }
@keyframes cat-peek { 0%, 100% { margin-top: 0; } 50% { margin-top: -8px; } }
@media (max-width: 580px) {
  .audio-controls { right: 10px; bottom: 10px; gap: 9px; padding: 9px 10px; font-size: 11px; }
  .volume-control input { width: 55px; }

  body.theme-cobalt .cover,
  body.theme-cobalt .surprise.variant-poster {
    background-image: url("images/fundo-festa-mobile-sem-coleira-v2.png");
    background-position: center top;
    background-size: cover;
    background-attachment: scroll;
  }

  .cat-overlay {
    display: block;
    position: absolute;
    z-index: 4;
    width: min(38vw, 158px);
    height: auto;
    pointer-events: none;
    filter: drop-shadow(0 7px 3px rgba(23, 36, 72, .2));
    animation: cat-peek 4.6s ease-in-out infinite;
  }

  .cover-content { padding-top: 26px; padding-bottom: 30px; }
  .hero-cats { width: min(315px, 82vw); margin: 8px auto 12px; border: 0; border-radius: 0; filter: drop-shadow(0 7px 3px rgba(23, 36, 72, .2)); animation: cat-peek 4.6s ease-in-out infinite; }

  .surprise-header { margin-top: 136px; }
  .cat-overlay-pandora { top: -127px; left: -7px; transform: rotate(-5deg); }

  .loves-section { margin-top: 156px; padding-top: 0; }
  .cat-overlay-ricota { top: -139px; right: -6px; transform: rotate(5deg); animation-delay: -1.9s; }

  .surprise-header > :not(.cat-overlay), .loves-section > :not(.cat-overlay) { position: relative; z-index: 2; }

  .loves-grid { grid-template-columns: repeat(2, 1fr); gap: 9px; }.love-card { min-height: 145px; }.astro-panel { grid-template-columns: 1fr; gap: 8px; }.astro-symbol { font-size: 72px; text-align: left; }.montage-card { aspect-ratio: 4 / 3; box-shadow: 7px 7px 0 var(--yellow); }.letter { box-shadow: 8px 10px 0 var(--yellow); }.section-heading p { font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }