@font-face {
  font-family: LoveTamil;
  src: url('fonts/kavivanar.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* A handwritten love letter, framed in emerald and champagne gold. */
.cover-title { text-shadow: 0 2px 24px #0b302d55; }
.cover .eyebrow { letter-spacing: 3.2px; }
.seal { transition: filter .4s; touch-action: manipulation; }
.seal .heart-art { filter: drop-shadow(0 12px 24px #0c221b70); }
.seal:focus-visible { outline-color: #f4dca6; border-radius: 30px; }
.seal::before { text-shadow: 0 0 12px #fff3c9; }
.gates { transition: visibility 0s 2.05s; }
.gate { will-change: transform; }
.gate.left { transition-duration: 2.05s; }
.gate.right { transition-duration: 2.05s; }
.scene.opening { transition: opacity .75s ease, transform 1.5s ease, filter 1s; }
.scene.active:not(.cover) > .scene-inner > .eyebrow { animation: letterArrival 1.25s both; }
.scene.active .display:not(.names) { animation: letterArrival 1.4s .12s both; }
.scene.active:not(.cover) .copy { animation: letterArrival 1.5s .45s both; }
.scene.active .date-pill { animation: letterArrival 1.4s 1.2s both; }
.names {
  position: relative;
  overflow: visible;
  padding: 0 .11em .08em;
  margin: -.04em 0;
  flex-shrink: 0;
}
.scene.active .names {
  animation: signatureReveal 1.9s .3s cubic-bezier(.22,.68,.25,1) both;
}
.scene.active .names:last-of-type { animation-delay: 1.15s; }
.names::after {
  content: '';
  position: absolute;
  inset: 5% -5% 4%;
  background: linear-gradient(110deg, transparent 38%, #e6c480b0 49%, transparent 59%);
  background-size: 260% 100%;
  pointer-events: none;
  mix-blend-mode: soft-light;
  opacity: 0;
}
.scene.active .names::after { animation: signatureLight 2.3s .25s both; }
.scene.active .names:last-of-type::after { animation-delay: 1.1s; }
.amp { width: 110px; height: 42px; margin: 4px auto 8px; flex-shrink: 0; }
.love-thread { width: 110px; height: 42px; overflow: visible; }
.love-thread path { fill: none; stroke: #b79255; stroke-width: 1; stroke-linecap: round; }
.scene.active .love-thread path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: loveLine 2.1s .8s ease both;
}
.endmark { height: 85px; margin: 0 0 20px; }
.endmark svg { width: 110px; height: 85px; overflow: visible; }
.endmark path { fill: #d8b77912; stroke: #b08b51; stroke-width: 1.2; }
.scene.active .endmark { animation: quietHeart 4s 1s ease-in-out infinite; }
.scene.active .endmark path { stroke-dasharray: 300; animation: loveLine 2.5s .3s both; }
.scene.active .rings { animation: ringsArrival 1.6s .25s both; }
.scene.active .ring { border-color: #b78b43; box-shadow: inset 0 0 0 1px #fff7d8, 0 0 0 1px #9c7c45, 0 5px 18px #d2af591b; }

/* One tap, one small celebration. Particles never intercept guest controls. */
.love-effects { position: absolute; inset: 0; z-index: 10; pointer-events: none; overflow: hidden; }
.love-glow { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at var(--origin-x) var(--origin-y), #ffe9af9c, #e4bc6824 26%, transparent 57%); animation: openingGlow 2s ease-out both; }
.gold-burst {
  position: absolute; left: var(--origin-x); top: var(--origin-y);
  width: var(--size); height: var(--size); margin: calc(var(--size) / -2);
  background: linear-gradient(135deg, #fff2c9, #b98843 85%);
  border-radius: 50%; opacity: 0; box-shadow: 0 0 7px #f5ce7a80;
  animation: goldBloom var(--duration) var(--delay) cubic-bezier(.08,.5,.25,1) both;
}
.gold-burst.heart {
  border-radius: 0; box-shadow: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 29C10 24 2 18 2 10C2 2 12 0 16 7C20 0 30 2 30 10C30 18 22 24 16 29Z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 29C10 24 2 18 2 10C2 2 12 0 16 7C20 0 30 2 30 10C30 18 22 24 16 29Z' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
}
.love-ripple { position: absolute; width: 60px; height: 60px; left: var(--origin-x); top: var(--origin-y); margin: -30px; border: 1px solid #f3d99b; border-radius: 50%; opacity: 0; animation: heartRipple 1.7s ease-out both; }
.love-ripple:nth-child(2) { animation-delay: .2s; }
.floating-heart { position: absolute; bottom: -35px; width: 10px; height: 10px; color: #ba985d; z-index: 1; pointer-events: none; opacity: 0; animation: heartDrift 16s linear infinite; }
.floating-heart svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.1; }
.app:not(.opened) .floating-heart { color: #f0d696; z-index: 6; }
.nav { width: 42px; height: 42px; }
.dots { gap: 1px; }
.dot { position: relative; width: 25px; height: 34px; background: none; border-radius: 0; }
.dot::before { content: ''; position: absolute; width: 5px; height: 5px; left: 10px; top: 14px; border-radius: 50%; background: #aa966a66; }
.dot.on { background: none; box-shadow: none; }
.dot.on::before { background: #8a7140; box-shadow: 0 0 0 4px #b89a6020; }

html[lang=ta] .display {
  font-family: LoveTamil, InviteTamil, sans-serif;
  font-size: 33px; font-style: normal; line-height: 1.55;
  font-feature-settings: 'kern';
}
html[lang=ta] .names { font-size: 46px; line-height: 1.65; padding-bottom: .1em; }
html[lang=ta] .cover-title { font-size: 35px; line-height: 1.6; }
html[lang=ta] .copy { font-size: 12px; line-height: 2; }
html[lang=ta] .storyline { font-family: LoveTamil, InviteTamil, sans-serif; font-size: 12px; line-height: 2; }
html[lang=ta] .details h3 { font-family: LoveTamil, InviteTamil, sans-serif; font-size: 25px; }
html[lang=ta] .names::after { inset: 12% -5% 10%; }

@keyframes signatureReveal {
  0% { clip-path: inset(-25% 110% -30% -15%); opacity: .3; }
  25% { opacity: 1; }
  100% { clip-path: inset(-25% -15% -30% -15%); opacity: 1; }
}
@keyframes signatureLight {
  0% { background-position: 100% 0; opacity: 0; }
  20% { opacity: .85; }
  90%,100% { background-position: 0 0; opacity: 0; }
}
@keyframes letterArrival { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ringsArrival { from { opacity: 0; transform: translateY(14px) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes loveLine { from { stroke-dashoffset: 300; opacity: .1; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes quietHeart { 0%,100% { transform: scale(1); } 50% { transform: scale(1.045); } }
@keyframes goldBloom {
  0% { opacity: 0; transform: translate(0,0) scale(.2) rotate(0); }
  8% { opacity: 1; }
  65% { opacity: .8; }
  100% { opacity: 0; transform: translate(var(--dx),var(--dy)) scale(.55) rotate(var(--spin)); }
}
@keyframes openingGlow { 0% { opacity: 0; } 18% { opacity: .8; } 100% { opacity: 0; } }
@keyframes heartRipple { 0% { opacity: .8; transform: scale(.4); } 100% { opacity: 0; transform: scale(7); } }
@keyframes heartDrift { 5% { opacity: .25; } 70% { opacity: .18; } 100% { opacity: 0; transform: translate(35px,-105svh) rotate(25deg); } }
@media (max-height: 750px) {
  .scene { top: 78px; bottom: 98px; }
  .names { font-size: 78px; }
  .rule { margin: 14px auto; }
  .copy { margin: 16px auto; }
  .amp { height: 32px; margin: 0 auto; }
  .love-thread { height: 32px; }
  html[lang=ta] .display { font-size: 27px; line-height: 1.6; }
  html[lang=ta] .names { font-size: 37px; line-height: 1.55; }
  html[lang=ta] .cover-title { font-size: 29px; }
  html[lang=ta] .copy { font-size: 11px; margin: 12px auto; }
  html[lang=ta] .storyline { font-size: 10px; }
}
@media (max-width: 360px) {
  html[lang=ta] .names { font-size: 34px; }
  html[lang=ta] .display { font-size: 26px; }
  html[lang=ta] .cover-title { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .love-effects, .floating-heart { display: none; }
  .names { clip-path: none !important; }
  .names::after { display: none; }
}

/* Stronger contrast and a little more size for the words guests read. */
.scene { justify-content: safe center; }
.copy { color: #46503d; font-size: 15px; }
.small, .eyebrow { color: #67522e; font-size: 11px; }
.storyline { color: #70532a; font-size: 14px; }
.date-pill, .month { color: #64502b; }
.details p { color: #49513f; font-size: 13px; }
.chapter { color: #67522e; font-size: 10px; letter-spacing: 1.2px; }
.cover .copy { color: #fff8e7; font-size: 15px; }
.cover .small { color: #fff0c9; }
.app:not(.opened) .chapter { color: #fff0cb; }
.scene:nth-of-type(4) > .copy { font-size: 14px !important; }
.time {
  color: #334b3c; font-size: 17px; font-weight: 600;
  letter-spacing: .6px; margin-top: 17px; line-height: 1.6;
}
.scene .faith-word {
  font-family: Georgia, serif; font-size: 23px; font-style: italic;
  letter-spacing: .3px; line-height: 1.45; text-transform: none;
  color: #77592e; margin-bottom: 18px;
}
html[lang=ta] .copy { color: #46503d; font-size: 13px; line-height: 1.95; }
html[lang=ta] .cover .copy { color: #fff8e7; font-size: 13px; }
html[lang=ta] .small, html[lang=ta] .eyebrow { font-size: 11px; }
html[lang=ta] .storyline { font-size: 13px; line-height: 1.9; }
html[lang=ta] .details p { font-size: 12px; line-height: 1.85; }
html[lang=ta] .date-pill, html[lang=ta] .month { font-size: 12px; }
html[lang=ta] .chapter { font-size: 11px; }
html[lang=ta] .time { font-size: 16px; letter-spacing: 0; line-height: 1.8; }
html[lang=ta] .scene .faith-word {
  font-family: LoveTamil, InviteTamil, sans-serif;
  font-style: normal; font-size: 25px; line-height: 1.6;
  letter-spacing: 0;
}
@media (max-height: 750px) {
  .copy, .cover .copy { font-size: 14px; margin: 12px auto; }
  .scene .faith-word { font-size: 21px; margin-bottom: 13px; }
  .storyline { font-size: 12px; }
  html[lang=ta] .copy, html[lang=ta] .cover .copy { font-size: 12px; margin: 10px auto; }
  html[lang=ta] .storyline { font-size: 11px; }
  html[lang=ta] .scene .faith-word { font-size: 22px; margin-bottom: 12px; }
  html[lang=ta] .scene:nth-of-type(4) > .copy { font-size: 12px !important; }
  .time { margin-top: 12px; }
  .scene:nth-of-type(3) .rings { height: 74px; margin-bottom: 14px; flex-shrink: 0; }
}