:root{color-scheme:light;--bg:#f7f5ef;--paper:#fffefa;--ink:#302f28;--muted:#817d72;--gold:#977944;--line:#e5e1d5;--focus:#af8d46}
*{box-sizing:border-box}
body{min-height:100vh;margin:0;display:grid;place-items:center;overflow-x:hidden;background:radial-gradient(ellipse at center,var(--paper),#f0ebdf);color:var(--ink);font-family:Arial,sans-serif}
body:before,body:after{position:fixed;z-index:-1;top:50%;left:50%;width:min(94vmin,900px);aspect-ratio:1;border:1px solid #d8ccb361;border-radius:50%;content:"";transform:translate(-50%,-50%);pointer-events:none}
body:after{width:min(122vmin,1160px)}
.entry-shell{width:min(92vw,540px);padding:30px 0;text-align:center}
.eyebrow{margin-bottom:28px;color:var(--gold);font-size:13px;letter-spacing:4px;direction:ltr}
.entry-stage{position:relative;display:grid;align-items:center;justify-items:center;min-height:430px;isolation:isolate;perspective:1100px}
.entry-stage:after{position:absolute;z-index:2;top:12%;bottom:12%;left:50%;width:1px;content:"";background:linear-gradient(transparent,#bd9850,transparent);box-shadow:0 0 24px 5px #d6b87955;opacity:0;pointer-events:none}
.brand-trigger{position:relative;grid-area:1/1;display:block;width:min(330px,78vw);height:min(330px,78vw);margin:0 auto;padding:0;border:0;background:transparent;cursor:pointer;animation:breath 3.5s ease-in-out infinite;transform-style:preserve-3d}
.brand-trigger:focus-visible,.login-button:focus-visible,input:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.logo-half{position:absolute;inset:0;background:url("./logo-transparent.png") center/contain no-repeat;transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity .8s ease}
.logo-right{clip-path:inset(0 0 0 50%)}
.logo-left{clip-path:inset(0 50% 0 0)}
.prompt{position:absolute;bottom:0;margin:0;color:var(--gold);font-size:14px;letter-spacing:.3px;transition:opacity .3s ease}
.couple-login{position:relative;z-index:1;grid-area:1/1;width:min(100%,390px);margin:0 auto;text-align:right;animation:appear 1s .45s cubic-bezier(.16,1,.3,1) both}
.couple-login[hidden]{display:none}
.couple-login h1{margin:0 0 8px;font-size:32px}
.subtitle{margin:0 0 30px;color:var(--muted);font-size:15px;line-height:1.7}
.couple-login label{display:block;margin:0 0 9px;font-size:15px;font-weight:700}
.couple-login input{width:100%;min-height:58px;padding:14px 16px;border:1px solid #d6cebc;border-radius:12px;background:#fffdf7;color:var(--ink);font-size:18px}
.couple-login input::placeholder{color:#999387}
.login-button{display:flex;width:100%;min-height:60px;justify-content:center;align-items:center;gap:26px;margin-top:20px;padding:12px 20px;border:1px solid var(--gold);border-radius:12px;background:var(--gold);color:white;font-size:17px;font-weight:700;cursor:pointer}
.login-button span{font-size:22px}
.login-note{min-height:25px;margin:12px 0 0;color:var(--muted);font-size:12px;line-height:1.6}
footer{margin-top:34px;color:var(--gold);font-size:13px}
.entry-shell.is-open .brand-trigger{animation:none;pointer-events:none}
.entry-shell.is-open .logo-half{will-change:transform,opacity;backface-visibility:hidden}
.entry-shell.is-open .logo-right{animation:open-right 2s cubic-bezier(.16,1,.3,1) both}
.entry-shell.is-open .logo-left{animation:open-left 2s cubic-bezier(.16,1,.3,1) both}
.entry-shell.is-open .entry-stage:after{animation:gold-flash 1.1s ease-out both}
.entry-shell.is-open .prompt{opacity:0;pointer-events:none}
@keyframes open-right{0%{transform:none;opacity:1}18%{transform:translateX(12px) translateZ(35px) rotateY(-8deg);filter:drop-shadow(0 0 12px #bb974966);opacity:1}100%{transform:translateX(clamp(150px,25vw,265px)) translateZ(-80px) rotateY(-32deg);filter:drop-shadow(0 8px 20px #bb974922);opacity:.12}}
@keyframes open-left{0%{transform:none;opacity:1}18%{transform:translateX(-12px) translateZ(35px) rotateY(8deg);filter:drop-shadow(0 0 12px #bb974966);opacity:1}100%{transform:translateX(clamp(-265px,-25vw,-150px)) translateZ(-80px) rotateY(32deg);filter:drop-shadow(0 8px 20px #bb974922);opacity:.12}}
@keyframes gold-flash{0%{opacity:0;transform:scaleY(.15)}22%{opacity:.85;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1.15)}}
@keyframes breath{0%,45%,70%,100%{transform:scale(1)}50%{transform:scale(1.025)}60%{transform:scale(1.01)}}
@keyframes appear{from{opacity:0;filter:blur(7px);transform:translateY(20px) scale(.96)}to{opacity:1;filter:blur(0);transform:none}}
@media(max-width:520px){.entry-shell{width:min(90vw,420px)}.entry-stage{min-height:400px}.eyebrow{font-size:11px;letter-spacing:3px}.brand-trigger{width:min(270px,68vw);height:min(270px,68vw)}.couple-login h1{font-size:28px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.entry-shell.is-open .brand-trigger{opacity:0}}