/* Pastel gingham, watercolor ribbon and lace inspired by the supplied design. */
:root { --paper: #eaf3ff; --accent: #426b9a; --accent-dark: #315780; }
.invitation-confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 90;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .invitation-confetti { display: none; }
}
.kawaii-sky {
  background-color: #edf5ff;
  background-image: linear-gradient(90deg, #b9d1ef50 50%, transparent 50%),
    linear-gradient(0deg, #b9d1ef50 50%, transparent 50%);
  background-size: 84px 84px;
  background-position: 0 0;
  background-repeat: repeat;
}
.kawaii-sky::before {
  background-image: radial-gradient(circle at 17% 24%, #fff 0 1px, transparent 5px),
    radial-gradient(circle at 78% 62%, #fff 0 1.2px, transparent 7px);
  background-size: 139px 157px, 181px 199px;
}
.deco-cloud { opacity: .3; fill: #f8fcff; }
.deco-heart { fill: #c4dcf8; stroke: #688dbb; opacity: .62; }
.deco-bow { fill: #c4dcf8; stroke: #7e9fc8; opacity: .6; }
.invitation-sheet {
  --sheet-inset: 84px;
  width: calc(100% - 68px);
  max-width: 900px;
  margin-top: 52px;
  margin-bottom: 40px;
  border: 1px solid #bfd1e9;
  border-radius: 20px;
  background: radial-gradient(ellipse at 50% 12%, #fcfdff, #eef4ff 68%, #f6f9ff);
  box-shadow: 0 16px 44px #6d8bad2e;
}
.sheet-ornaments::before, .sheet-ornaments::after { display: none; }
.sheet-ornament { opacity: .55; }
.ornament-left { left: 30px; }
.ornament-right { right: 30px; }
.reference-lace {
  position: absolute;
  top: 150px;
  bottom: 170px;
  width: 42px;
  z-index: 2;
  background: url('assets/encaje-azul.svg') left top / 42px 112px repeat-y;
  pointer-events: none;
}
.lace-left { left: -13px; }
.lace-right { right: -13px; transform: scaleX(-1); }
.reference-ribbon {
  position: relative;
  width: calc(100% + 56px);
  aspect-ratio: 3.6;
  margin-left: -28px;
  pointer-events: none;
  user-select: none;
  z-index: 3;
}
.ribbon-top { margin-top: -36px; margin-bottom: -6px; }
.reference-ribbon > .ribbon-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: none;
  height: auto;
  transform: translateY(-6%);
}
.ribbon-peeker {
  position: absolute;
  left: 2%;
  top: -2%;
  width: 22%;
  height: auto;
  z-index: 1;
  transform: rotate(-10deg);
}
.reference-heart-badge {
  position: absolute;
  right: 3%;
  top: 1%;
  width: 16%;
  height: auto;
  aspect-ratio: 1;
  transform: rotate(12deg);
}
.invitation-sheet .hero-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding-top: 22px;
  padding-bottom: 34px;
}
.paper-heart { display: none; }
.welcome-message { max-width: 650px; }
.welcome-title {
  max-width: 620px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 5.8vw, 62px);
  line-height: 1.13;
  letter-spacing: -1.2px;
  color: #315b85;
  margin-bottom: 0;
}
.welcome-title strong { font-weight: 700; }
.welcome-copy { font-size: 18px; line-height: 1.85; color: #3a587a; }
.welcome-copy > p + p { margin-top: 22px; }
.welcome-copy .welcome-closing { font-size: 19px; color: #315b85; }
.reference-heart-rule {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  width: 245px;
  max-width: 80%;
  margin: 24px auto;
  pointer-events: none;
}
.reference-heart-rule::before, .reference-heart-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #7197c080;
}
.reference-heart-rule svg { width: 18px; height: 18px; fill: #a9c8ee; stroke: #7096c3; stroke-width: 1; }
.welcome-garland { margin-top: 22px; }
.reference-character-band {
  position: relative;
  width: calc(100% + 92px);
  height: 155px;
  pointer-events: none;
}
.reference-character-band img { position: absolute; object-fit: contain; }
.band-heart { width: 150px; height: 155px; left: 0; bottom: 0; transform: rotate(-9deg); }
.band-peeker { width: 175px; height: 130px; right: 0; bottom: 0; transform: rotate(9deg); }
.reference-character-band > svg { position: absolute; width: 34px; height: 34px; left: calc(50% - 17px); bottom: 23px; fill: #c0d8f2; stroke: #799bc1; stroke-width: .8; }
.invitation-sheet .hero-card .hero-copy { width: 100%; max-width: 650px; text-align: center; margin-top: -20px; }
/* Sapphire and violet lettering with a moving silver reflection. */
.birthday-name {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 650px;
  margin: 0 auto;
  padding: 18px 0 26px;
}
.birthday-name::before {
  content: "";
  position: absolute;
  inset: 9% -4% 15%;
  z-index: -1;
  background: radial-gradient(ellipse, #c6d6fa80, #e3d6fb60 42%, transparent 72%);
  filter: blur(14px);
  pointer-events: none;
}
.invitation-sheet .hero-card .birthday-name .hero-title {
  font-size: clamp(136px, 31vw, 272px);
  color: #51379a;
  line-height: 1.12;
  letter-spacing: -.015em;
  margin: 0;
  text-shadow: none;
  -webkit-text-stroke: 0;
}
.name-lettering {
  display: inline-block;
  color: #51379a;
  filter: drop-shadow(0 2px 1px #fff) drop-shadow(0 8px 12px #8797d175);
}
.hero-title .name-lettering { padding: .02em .16em .05em .08em; }
.invitation-sheet .hero-card .birthday-name .hero-full-name {
  color: #544c9a;
  margin: -10px 0 0;
  padding: 0;
  letter-spacing: 0;
  line-height: 1.45;
}
.birthday-name .name-middle {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(30px, 5.8vw, 46px);
  padding: 0 .2em;
  animation-delay: -.7s;
}
.birthday-name .name-surname {
  display: block;
  font-size: clamp(20px, 4.8vw, 28px);
  font-weight: 700;
  letter-spacing: .06em;
  margin-top: 6px;
  text-shadow: 0 1px 0 #fff, 0 3px 12px #a6a0dc45;
}
.birthday-name .hero-full-name::after {
  width: 220px;
  max-width: 78%;
  height: 2px;
  margin-top: 20px;
  background: linear-gradient(90deg, transparent, #c8d7f4, #8c87c6, #c8d7f4, transparent);
}
.name-sparkles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.name-sparkle {
  position: absolute;
  width: 24px;
  height: 24px;
  fill: #fff;
  stroke: #9194cc;
  stroke-width: .6;
  filter: drop-shadow(0 0 5px #b0c5fa) drop-shadow(0 0 2px #fff);
  animation: name-sparkle-glow 4.8s ease-in-out infinite;
}
.sparkle-one { left: 15%; top: 22%; }
.sparkle-two { right: 12%; top: 32%; width: 28px; height: 28px; animation-delay: -1.6s; }
.sparkle-three { right: 28%; top: 8%; width: 14px; height: 14px; animation-delay: -3.2s; }
.sparkle-four { left: 12%; bottom: 28%; width: 15px; height: 15px; animation-delay: -2.4s; }
.sparkle-five { right: 22%; bottom: 18%; width: 12px; height: 12px; animation-delay: -.8s; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .birthday-name .name-lettering {
    background-image: linear-gradient(110deg, transparent 38%, #e7f6ffb3 46%, #fff 50%, #cbdcffa3 54%, transparent 62%),
      linear-gradient(135deg, #354795, #6350ad 25%, #8871c7 42%, #4777bb 61%, #494b9d 78%, #603a92);
    background-size: 250% 100%, 100% 100%;
    background-position: 140% 0, 0 0;
    background-repeat: no-repeat;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: .6px #51459480;
    animation: name-silver-reflection 6.5s ease-in-out infinite;
  }
  .birthday-name .name-middle { animation-delay: -.7s; }
}
@keyframes name-silver-reflection {
  0%, 12% { background-position: 140% 0, 0 0; }
  68%, 100% { background-position: -140% 0, 0 0; }
}
@keyframes name-sparkle-glow {
  0%, 100% { opacity: .55; transform: scale(.75) rotate(-8deg); }
  50% { opacity: 1; transform: scale(1.16) rotate(12deg); }
}
@media (prefers-reduced-motion: reduce) {
  .birthday-name .name-lettering, .birthday-name .name-sparkle { animation: none; }
  .birthday-name .name-lettering { background-position: -140% 0, 0 0; }
  .birthday-name .name-sparkle { opacity: .85; }
}
.invitation-sheet .hero-card .hero-birthday { font-size: 23px; margin-top: 18px; }
.invitation-sheet .hero-card .hero-birthday strong { font-size: 25px; }
.invitation-sheet .hero-card .hero-countdown { max-width: 450px; margin: 24px auto 0; }
.hero-card .hero-countdown .birthday-scene { width: 100%; max-width: 420px; margin: 0 auto 18px; }
.birthday-illustration { display: block; width: 100%; height: auto; overflow: visible; }
.birthday-still { display: none; }
.birthday-balloon-motion, .birthday-kuromi-motion, .birthday-flame-motion { transform-box: view-box; }
.birthday-balloon-motion { transform-origin: 41.5% 65.5%; animation: birthday-balloon-sway 4.6s ease-in-out infinite; }
.birthday-kuromi-motion { transform-origin: 55% 96%; animation: birthday-kuromi-sway 3.8s ease-in-out infinite; }
.birthday-flame-motion { transform-origin: 87.7% 50.2%; animation: birthday-flame-flicker .85s ease-in-out infinite; }
@keyframes birthday-balloon-sway {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(1.3deg); }
}
@keyframes birthday-kuromi-sway {
  0%, 100% { transform: rotate(-.5deg); }
  50% { transform: translateY(-8px) rotate(.5deg); }
}
@keyframes birthday-flame-flicker {
  0%, 100% { transform: scale(.88, .92) rotate(-3deg); opacity: .88; }
  35% { transform: scale(1.03, 1.08) rotate(2deg); opacity: 1; }
  70% { transform: scale(.94, 1.02) rotate(-1deg); opacity: .96; }
}
@media (prefers-reduced-motion: reduce) {
  .birthday-balloon-motion, .birthday-kuromi-motion, .birthday-flame-motion { animation: none; }
  .birthday-layers { display: none; }
  .birthday-still { display: block; }
}
.hero-card .hero-countdown .countdown { max-width: 375px; }
.hero-countdown .countdown-copy:empty { display: none; }
.hero-card .hero-countdown .countdown span { color: #456d9b; }
.hero-card .hero-countdown .countdown-heart { color: #8eadd2; }
.invitation-sheet .section-heading h2, .invitation-sheet .location-copy h2, .invitation-sheet .rsvp-section h2 { color: #315b85; }
.invitation-sheet .location-panel { grid-template-columns: 1fr; gap: 30px; max-width: 620px; margin: 0 auto; }
.invitation-sheet .location-copy { text-align: center; }
.invitation-sheet .location-copy > p:not(.eyebrow) { margin-left: auto; margin-right: auto; }
.invitation-sheet .directions-card { display: contents; }
.invitation-sheet .ticket-time .party-end { margin-top: 18px; font-size: 26px; color: #456d9b; }
.invitation-sheet .ticket-time .party-end .end-label {
  display: block;
  font-size: 9px;
  letter-spacing: 1.2px;
  margin-bottom: 6px;
  color: #405976;
}
.invitation-sheet .ticket-time .party-end .period { font-size: 13px; }
.directions-guide {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.4fr);
  gap: 12px 24px;
  align-items: center;
}
.directions-kuromi {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: auto;
  max-width: 270px;
  margin: 0 auto;
  filter: drop-shadow(0 5px 8px #9cb6d530);
}
.directions-guide .directions-heading {
  grid-column: 2;
  grid-row: 1;
  display: block;
  border-bottom: 0;
  padding: 0;
}
.directions-guide .directions-heading .icon { margin-bottom: 8px; }
.directions-steps {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(100px, .6fr);
  gap: 18px;
  align-items: center;
  border-top: 1px dashed #97b0d180;
  padding-top: 8px;
}
.directions-steps .directions-list { margin-top: 0; min-width: 0; }
.directions-cinnamoroll {
  width: 100%;
  max-width: 230px;
  height: auto;
  justify-self: end;
  filter: drop-shadow(0 5px 8px #9cb6d530);
}
.invitation-sheet .directions-heading h3 { font-size: 16px; font-weight: 600; color: #315b85; }
.invitation-sheet .directions-list li { align-items: flex-start; }
.invitation-sheet .directions-list p { font-size: 14px; line-height: 1.85; color: #3a587a; }
.invitation-sheet .directions-list strong { font-weight: 700; color: #315b85; }
.invitation-sheet .directions-footer { grid-column: 1 / -1; font-size: 12px; }
.invitation-sheet .parents-section { padding-top: 36px; padding-bottom: 36px; }
.invitation-sheet .parents-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--sheet-inset);
  right: var(--sheet-inset);
  height: 1px;
  background: linear-gradient(90deg, transparent, #97b0d1aa calc(50% - 24px),
    transparent calc(50% - 17px), transparent calc(50% + 17px),
    #97b0d1aa calc(50% + 24px), transparent);
  pointer-events: none;
}
.parents-inner { max-width: 620px; margin: 0 auto; }
.parents-section .section-heading { margin-bottom: 24px; }
.invitation-sheet .parents-section .section-heading h2 {
  font-size: clamp(25px, 3.5vw, 34px);
  line-height: 1.35;
  letter-spacing: -.4px;
}
.parents-copy { font-size: 15px; line-height: 1.9; color: #3a587a; }
.parents-copy p + p { margin-top: 18px; }
.parents-copy strong { font-weight: 700; color: #315b85; }
.parents-copy .parents-policy { padding: 15px 0; border-top: 1px dashed #97b0d180; border-bottom: 1px dashed #97b0d180; }
.invitation-sheet .rsvp-mascot { width: 150px; height: 110px; }
.ribbon-bottom { aspect-ratio: 2062 / 763; margin-top: 28px; margin-bottom: calc(12px + env(safe-area-inset-bottom)); }
.ribbon-bottom > .ribbon-image { transform: none; }
.ribbon-bottom .ribbon-peeker { left: auto; right: 0; top: -9%; transform: rotate(10deg); }
.invitation-sheet .site-footer { flex-direction: column; gap: 12px; padding-top: 15px; padding-bottom: 18px; text-align: center; }
.invitation-sheet .site-footer::before, .invitation-sheet .site-footer .chapter-charm { display: none; }
.photo-motion-toggle { background: #e5f0fe; }
.invitation-sheet .photo-gallery .section-heading > .gallery-intro {
  max-width: 570px;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(14px, 1.8vw, 16px);
  line-height: 1.85;
}
.button-primary { background: #547cac; border-color: #395d89; box-shadow: 3px 3px 0 #9db8da; }
.button-primary:hover { background: #426895; box-shadow: 2px 2px 0 #9db8da; }
.button-small { border-color: #7195be; box-shadow: 2px 2px 0 #abc4e3; }
.invitation-sheet .location-copy .button-sky { background: #d8e8fb; border-color: #7195be; }
@media (max-width: 900px) {
  .invitation-sheet { --sheet-inset: 56px; }
  .invitation-sheet .event-ticket { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .invitation-sheet .ticket-time { border-right: 0; }
  .invitation-sheet .ticket-calendar {
    grid-column: 1 / -1;
    border-top: 1px solid #97b0d180;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 14px;
    padding: 18px 0 0;
  }
  .invitation-sheet .ticket-calendar button { margin-top: 0; }
}
@media (max-width: 760px) {
  .kawaii-sky { background-size: 56px 56px; }
  .invitation-sheet { --sheet-inset: 34px; width: calc(100% - 44px); margin-top: 28px; margin-bottom: 24px; border-radius: 16px; }
  .reference-lace { width: 28px; top: 72px; bottom: 84px; background-size: 28px 75px; }
  .lace-left { left: -9px; }
  .lace-right { right: -9px; }
  .sheet-ornament { width: 16px; height: 16px; }
  .ornament-left { left: 15px; }
  .ornament-right { right: 15px; }
  .reference-ribbon { width: calc(100% + 20px); margin-left: -10px; }
  .ribbon-top { margin-top: -17px; margin-bottom: 1px; }
  .ribbon-peeker { width: 24%; left: 0; top: -3%; }
  .reference-heart-badge { width: 17%; right: 0; }
  .invitation-sheet .hero-card { padding-top: 20px; padding-bottom: 28px; gap: 16px; }
  .welcome-title { font-size: clamp(30px, 8vw, 40px); letter-spacing: -.7px; line-height: 1.18; }
  .welcome-copy { font-size: 14px; line-height: 1.85; }
  .welcome-copy > p + p { margin-top: 17px; }
  .welcome-copy .welcome-closing { font-size: 15px; }
  .reference-heart-rule { width: 180px; margin: 20px auto; gap: 12px; }
  .reference-heart-rule svg { width: 15px; height: 15px; }
  .reference-character-band { width: calc(100% + 40px); height: 92px; }
  .band-heart { width: 86px; height: 92px; }
  .band-peeker { width: 99px; height: 78px; }
  .reference-character-band > svg { width: 23px; height: 23px; left: calc(50% - 11.5px); bottom: 13px; }
  .invitation-sheet .hero-card .hero-copy { margin-top: -12px; }
  .birthday-name { padding-top: 10px; padding-bottom: 20px; }
  .sparkle-one { left: 2%; top: 22%; width: 18px; height: 18px; }
  .sparkle-two { right: 1%; top: 35%; width: 20px; height: 20px; }
  .sparkle-three { right: 23%; }
  .sparkle-four { left: 3%; bottom: 27%; width: 11px; height: 11px; }
  .sparkle-five { right: 8%; bottom: 18%; width: 10px; height: 10px; }
  .invitation-sheet .hero-card .hero-full-name { font-size: 16px; letter-spacing: .45px; }
  .invitation-sheet .hero-card .hero-birthday { font-size: 21px; }
  .invitation-sheet .hero-card .hero-birthday strong { font-size: 23px; }
  .invitation-sheet .hero-card .hero-countdown { margin-top: 22px; }
  .invitation-sheet .photo-gallery .section-heading { padding-left: 22px; padding-right: 22px; }
  .invitation-sheet .section-heading h2 { font-size: 27px; }
  .invitation-sheet .location-copy h2 { font-size: 28px; }
  .invitation-sheet .parents-section { padding-top: 28px; padding-bottom: 28px; }
  .parents-copy { font-size: 14px; line-height: 1.85; }
  .parents-copy p + p { margin-top: 16px; }
  .invitation-sheet .rsvp-mascot { width: 126px; height: 90px; }
  .ribbon-bottom { margin-top: 18px; margin-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .invitation-sheet .site-footer { padding-bottom: 20px; }
}
@media (max-width: 370px) {
  .invitation-sheet { --sheet-inset: 28px; }
  .ornament-left { left: 10px; }
  .ornament-right { right: 10px; }
  .invitation-sheet .hero-card .hero-full-name { font-size: 14px; }
  .invitation-sheet .hero-card .birthday-name .hero-title { font-size: clamp(112px, 33vw, 126px); }
  .birthday-name .name-middle { font-size: 28px; }
  .birthday-name .name-surname { font-size: 18px; }
  .hero-card .hero-countdown h2 { font-size: 22px; }
  .hero-card .hero-countdown .countdown span { font-size: 28px; }
  .invitation-sheet .section-heading h2 { font-size: 24px; }
  .invitation-sheet .location-copy h2 { font-size: 26px; }
}
@media (max-width: 600px) {
  .directions-guide { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 10px 14px; }
  .directions-guide .directions-heading h3 { font-size: 15px; line-height: 1.6; }
  .directions-steps { grid-template-columns: minmax(0, 1fr) minmax(86px, .45fr); gap: 12px; }
  .invitation-sheet .ticket-time .party-end { font-size: 23px; }
  .invitation-sheet .ticket-time .party-end .end-label { font-size: 8px; letter-spacing: .9px; }
  .invitation-sheet .ticket-time .party-end .period { font-size: 12px; }
}
@media (max-width: 370px) {
  .directions-steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .directions-cinnamoroll { width: 156px; margin-top: -6px; }
}