/* Reveal the wish and card-meeting animation only when those screens open. */
.wish-card,.wish-card:before,.wish-copy p,.wish-sign,.bank-card,.bank-card:before,.card-pair:after{animation:none!important}
.wish-screen.is-active .wish-card{animation:wish-reveal .85s cubic-bezier(.18,.8,.25,1) both!important}
.wish-screen.is-active .wish-card:before{animation:wish-aura 6s ease-in-out infinite alternate!important}
.wish-screen.is-active .wish-copy p:nth-child(1){animation:wish-line .6s .18s both!important}
.wish-screen.is-active .wish-copy p:nth-child(2){animation:wish-line .6s .38s both!important}
.wish-screen.is-active .wish-copy p:nth-child(3){animation:wish-line .6s .58s both!important}
.wish-screen.is-active .wish-sign{animation:wish-line .6s .75s both!important}
.cards-screen.is-active .link-card{animation:card-left-join 1.1s cubic-bezier(.16,.82,.23,1) both!important}
.cards-screen.is-active .werbilous-card{animation:card-right-join 1.1s .08s cubic-bezier(.16,.82,.23,1) both!important}
.cards-screen.is-active .bank-card:before{animation:card-glint 4.2s .85s ease-in-out infinite!important}
.cards-screen.is-active .card-chip{animation:chip-connect .7s .72s ease-out both!important}
.cards-screen.is-active .card-pair:after{animation:cards-connect .8s .73s ease-out both!important}
@media(prefers-reduced-motion:reduce){.wish-screen.is-active .wish-card{animation:wish-reveal .85s cubic-bezier(.18,.8,.25,1) both!important}.cards-screen.is-active .link-card{animation:card-left-join 1.1s cubic-bezier(.16,.82,.23,1) both!important}.cards-screen.is-active .werbilous-card{animation:card-right-join 1.1s .08s cubic-bezier(.16,.82,.23,1) both!important}}

/* Use the actual iPhone viewport and keep the page backdrop behind safe areas. */
html,body{min-height:100%;background:#300911}
body{min-height:100vh;min-height:100dvh}
.aurora{height:100vh;height:100dvh}
.birthday-site,.screen,.cards-wrap{min-height:100vh;min-height:100dvh}

/* Let both card faces settle long enough to read on a phone. */
.cards-screen.is-active .link-card{animation:card-left-join 2.25s cubic-bezier(.18,.72,.2,1) both!important}
.cards-screen.is-active .werbilous-card{animation:card-right-join 2.25s .12s cubic-bezier(.18,.72,.2,1) both!important}
.cards-screen.is-active .card-chip{animation:chip-connect .9s 1.65s ease-out both!important}
.cards-screen.is-active .card-pair:after{animation:cards-connect 1s 1.65s ease-out both!important}
.werbilous-card .card-top>span:first-child,.card-name{white-space:nowrap;text-shadow:0 1px 8px rgba(60,0,8,.35)}
.werbilous-card .card-name{font-size:clamp(14px,1.25vw,17px);font-weight:700;letter-spacing:.015em}
@media(max-width:760px){
  @keyframes card-left-join-mobile{0%{opacity:0;transform:translateX(-110vw) rotate(-18deg) scale(.95)}70%{opacity:1;transform:translateX(12px) rotate(-2deg) scale(1.01)}88%{transform:translateX(0) rotate(0) scale(1)}100%{transform:translateX(4px) rotate(-1deg) scale(1)}}
  @keyframes card-right-join-mobile{0%{opacity:0;transform:translateX(110vw) rotate(18deg) scale(.95)}70%{opacity:1;transform:translateX(-12px) rotate(2deg) scale(1.01)}88%{transform:translateX(0) rotate(0) scale(1)}100%{transform:translateX(-4px) rotate(1deg) scale(1)}}
  .cards-screen.is-active .link-card{animation:card-left-join-mobile 2.25s cubic-bezier(.18,.72,.2,1) both!important}
  .cards-screen.is-active .werbilous-card{animation:card-right-join-mobile 2.25s .12s cubic-bezier(.18,.72,.2,1) both!important}
  .card-pair{gap:0}
  .bank-card{width:calc((100vw - 36px)/2);padding:13px 11px}
  .link-card{transform-origin:right center}
  .werbilous-card{transform-origin:left center;margin-left:-5px;z-index:3}
  .werbilous-card .card-top{gap:5px;font-size:clamp(11px,3.5vw,15px)}
  .werbilous-card .card-name{font-size:clamp(12px,3.35vw,15px);letter-spacing:0}
  .card-bottom{font-size:6px;letter-spacing:.08em}
  .link-card .card-chip{margin-right:8px}
  .werbilous-card .card-chip{margin-left:8px}
}
@media(max-width:360px){
  .bank-card{padding:10px 8px}
  .werbilous-card .card-top{font-size:11px}
  .werbilous-card .card-name{font-size:12px}
}