body { background: radial-gradient(ellipse at 50% 32%, #492739 0%, #241522 47%, #100c14 100%); }
.experience::before { border-color: #f1bdc936; inset: 20px; border-radius: 18px; }
.experience::after { top: 18px; }
#screen-intro .screen-inner::before { display: none; }
.button-secondary { overflow: hidden; position: relative; background: linear-gradient(135deg,#f5d1d4,#d99fb8); color: #422233; border-color: #f4cfda; box-shadow: 0 8px 35px #e9a0bd22,inset 0 1px #ffffff70; }
.button-secondary::after { content: ''; position: absolute; inset: -100% -40%; background: linear-gradient(105deg,transparent 40%,#ffffff55 50%,transparent 60%); transform: translateX(-80%); animation: letterShine 7s ease-in-out 2s infinite; pointer-events: none; }
.button-secondary:hover { background: linear-gradient(135deg,#ffe0dd,#e9b4cb); border-color: #ffe8e8; box-shadow: 0 12px 45px #e9a0bd40; }
.love-letter { position: relative; width: 142px; height: 103px; margin: 0 auto 42px; isolation: isolate; animation: letterFloat 6s ease-in-out infinite; filter: drop-shadow(0 14px 22px #09040e70); }
.envelope-back { position: absolute; inset: 18px 0 0; border-radius: 5px; background: #b97794; z-index: -1; }
.envelope-back::before { content: ''; position: absolute; width: 100%; height: 76px; left: 0; bottom: 100%; background: linear-gradient(#bd809a,#dca6bc); clip-path: polygon(0 100%,50% 16%,100% 100%); }
.letter-paper { position: absolute; width: 112px; height: 95px; left: 15px; bottom: 18px; border: 1px solid #fff1dd; border-radius: 3px; background: linear-gradient(135deg,#fff6e8,#efdad1); rotate: -5deg; animation: paperPeek 6s ease-in-out infinite; }
.letter-paper::after { content: ''; position: absolute; left: 25%; right: 25%; height: 1px; bottom: 32px; background: #b5758a55; box-shadow: 0 7px #b5758a33; }
.letter-paper span { display: block; text-align: center; font: 34px Georgia,serif; margin-top: 9px; color: #b8708a; }
.envelope-front { position: absolute; inset: 18px 0 0; border-radius: 4px; background: linear-gradient(145deg,#ecc1cd,#cc8fa8); clip-path: polygon(0 0,50% 52%,100% 0,100% 100%,0 100%); border-bottom: 1px solid #ffd4df88; }
.envelope-seal { position: absolute; left: calc(50% - 17px); top: 53px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #f9d1d3; font: 16px Georgia,serif; background: radial-gradient(circle at 30% 25%,#bb6887,#853b5b); box-shadow: inset 0 0 0 3px #d388a044,0 3px 7px #51243855; }
#screen-intro .eyebrow::before { display: none; }
.petals { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }
.petals i { position: absolute; width: 11px; height: 18px; border-radius: 80% 0 80% 10%; background: linear-gradient(140deg,#ffd0dc55,#c97fa422); top: -8%; left: 9%; animation: petalFall 23s linear infinite; }
.petals i:nth-child(2) { left: 24%; animation-delay: -7s; animation-duration: 28s; width: 7px; height: 12px; }
.petals i:nth-child(3) { left: 42%; animation-delay: -17s; animation-duration: 31s; opacity: .4; }
.petals i:nth-child(4) { left: 63%; animation-delay: -10s; animation-duration: 25s; }
.petals i:nth-child(5) { left: 84%; animation-delay: -4s; animation-duration: 29s; width: 8px; height: 14px; }
.petals i:nth-child(6) { left: 94%; animation-delay: -19s; animation-duration: 33s; opacity: .5; }
.celebration-content { width: min(100%,700px) !important; padding: 38px 36px; border: 1px solid #edbfd133; border-radius: 22px; background: linear-gradient(135deg,#f5d6e00b,#fff0da03); box-shadow: inset 0 0 70px #f5bad808,0 30px 90px #00000025; backdrop-filter: blur(8px); }
.celebration-content .yes-title { font-size: clamp(2.25rem,5vw,4.1rem); }
.heart-orbit { filter: drop-shadow(0 0 24px #ed8eaa44); }
.love-line { background: linear-gradient(100deg,#ffe9cf,#f0aecb); background-clip: text; -webkit-background-clip: text; color: transparent; }
.screen.is-active .celebration-content { animation: keepsakeReveal 1300ms var(--ease) both; }
@keyframes letterFloat { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-9px) rotate(2deg); } }
@keyframes paperPeek { 0%,100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes petalFall { from { transform: translate3d(0,-20px,0) rotate(0); } to { transform: translate3d(55px,110vh,0) rotate(300deg); } }
@keyframes letterShine { 0%,65% { transform: translateX(-80%); } 100% { transform: translateX(80%); } }
@keyframes keepsakeReveal { from { opacity: 0; transform: perspective(1000px) rotateX(6deg) translateY(22px); } to { opacity: 1; transform: perspective(1000px) rotateX(0) translateY(0); } }
@media (max-width: 520px) {
  .experience::before { inset: 12px; border-radius: 14px; }
  .experience::after { top: 10px; }
  .love-letter { scale: .88; margin-bottom: 28px; }
  .celebration-content { padding: 30px 18px; }
  .celebration-content .yes-title { font-size: clamp(1.9rem,8.2vw,2.65rem); }
  #screen-yes { padding-left: 25px; padding-right: 25px; }
  .date-line { font-size: .66rem; padding: 10px 13px; letter-spacing: .08em; }
  .screenshot-line { font-size: .72rem; }
}
@media (max-height: 740px) {
  .love-letter { scale: .72; margin-top: -12px; margin-bottom: 10px; }
  .celebration-content { padding-top: 24px; padding-bottom: 24px; }
  .celebration-content .heart-orbit { width: 54px; height: 54px; margin-bottom: 17px; }
}
@media (prefers-reduced-motion: reduce) { .petals { display: none; } .love-letter,.letter-paper,.button-secondary::after { animation: none !important; } }