:root { color-scheme: dark; --ink:#fff8ef; --gold:#e9b47a; --rose:#b8445b; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:#07101d; }
body { font-family:"DM Sans",sans-serif; color:var(--ink); overflow-x:hidden; overflow-y:auto; }
button { font:inherit; }

.scene { position:relative; min-height:100svh; display:grid; grid-template-columns:minmax(0,1fr); place-items:center; isolation:isolate; background:url("night-garden.png") center 58%/cover no-repeat; }
.scene::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(3,9,19,.33),rgba(5,8,16,.08) 46%,rgba(3,5,11,.62)); }

.intro { width:min(100%,34rem); min-height:100svh; padding:max(2rem,env(safe-area-inset-top)) 1.5rem max(3.5rem,env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; justify-content:space-between; text-align:center; transition:opacity .7s ease, transform .7s ease; }
.eyebrow { margin:0; text-transform:uppercase; letter-spacing:.28em; font-size:.75rem; font-weight:600; color:#f3d5b4; }
.opening { margin:auto 0; text-shadow:0 2px 22px rgba(0,0,0,.65); }
h1 { font:400 clamp(4rem,18vw,7rem)/.82 "Italiana",serif; letter-spacing:-.045em; margin:0 0 1.25rem; transform:translateY(-15px); }
h1 .title-name { display:block; margin-top:15px; }
.hint { margin:0; font-size:1rem; color:rgba(255,248,239,.78); }

.heart-button { position:relative; width:5.25rem; height:5.25rem; border:1px solid rgba(255,255,255,.33); border-radius:50%; color:#321017; background:linear-gradient(145deg,#ffd29e,#d37a85); box-shadow:0 12px 45px rgba(184,68,91,.42),inset 0 1px rgba(255,255,255,.7); display:grid; place-items:center; cursor:pointer; -webkit-tap-highlight-color:transparent; animation:pulse 2.4s ease-in-out infinite; }
.heart-button span { font-size:2rem; transform:translateY(2px); }
.heart-button::after { content:"Tap me"; position:absolute; top:calc(100% + .7rem); width:8rem; color:rgba(255,248,239,.72); font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; }

.letter { position:absolute; inset:0; display:grid; grid-template-columns:minmax(0,1fr); min-width:0; place-items:center; overflow:hidden; padding:max(2rem,env(safe-area-inset-top)) 1.35rem max(2rem,env(safe-area-inset-bottom)); opacity:0; pointer-events:none; transform:translateY(24px); transition:opacity .8s .25s ease,transform .8s .25s ease; }
.card { width:min(100%,31rem); padding:2rem 1.65rem; border:1px solid rgba(255,255,255,.2); border-radius:1.6rem; background:linear-gradient(160deg,rgba(7,13,27,.64),rgba(23,8,22,.82)),url("buhle.jpeg") center 38%/auto 110% no-repeat; box-shadow:0 24px 70px rgba(0,0,0,.4); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); }
.tiny { margin:0 0 1.25rem; color:var(--gold); font-size:.76rem; letter-spacing:.24em; text-transform:uppercase; }
h2 { margin:0; font:400 clamp(2.9rem,13vw,4.6rem)/.92 "Italiana",serif; }
.line { width:3.3rem; height:1px; margin:1.5rem auto; background:var(--gold); }
.message { margin:0; font:400 1.05rem/1.75 "DM Sans",sans-serif; color:rgba(255,248,239,.88); }
.promise { margin:1.45rem 0 0; font:400 1.55rem/1.25 "Italiana",serif; color:#ffe0be; }
.signature { margin:1.8rem 0 0; color:rgba(255,248,239,.72); font-size:.9rem; }
.name-sign { display:inline-block; margin-top:.4rem; font-family:"Parisienne",cursive; font-size:1.4rem; color:var(--gold); }
.restart { margin-top:1.6rem; border:0; background:transparent; color:rgba(255,248,239,.62); text-decoration:underline; text-underline-offset:.25rem; cursor:pointer; }

.revealed .intro { position:absolute; top:0; left:0; right:0; margin-inline:auto; opacity:0; transform:scale(.97); pointer-events:none; }
.revealed .letter { position:relative; inset:auto; width:100%; min-height:100svh; overflow:visible; opacity:1; transform:none; pointer-events:auto; }

.spark { position:fixed; z-index:4; pointer-events:none; color:#ffd09d; animation:rise 1.7s ease-out forwards; }
@keyframes pulse { 50% { transform:scale(1.06); box-shadow:0 16px 54px rgba(184,68,91,.58),inset 0 1px rgba(255,255,255,.7); } }
@keyframes rise { to { transform:translate(var(--drift),-9rem) rotate(25deg); opacity:0; } }

@media (min-width:700px) { .card { padding:2.8rem 3rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }