:root {
  color-scheme: dark;
  --gold: #ffc843;
  --cream: #fff4cf;
  --ink: #071323;
  font-family: "DM Sans", system-ui, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; }
body { min-height: 100svh; background: #071323; color: var(--cream); }
button { font: inherit; }
.scene {
  position: relative; isolation: isolate; display: grid; min-height: 100svh;
  overflow: hidden; place-items: center; padding: 4.5rem 1.5rem 5rem;
}
.backdrop, .shade, #garden, .intro-video, .video-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.backdrop {
  z-index: -3; background: #101e31 url("jardin-mapi.png") center 51% / cover no-repeat;
  transform: scale(1.025); animation: arrive 1.5s ease both;
}
.shade {
  z-index: -2;
  background: radial-gradient(ellipse at 51% 40%, rgba(5,16,29,.56), rgba(5,16,29,.46) 33%, transparent 69%),
    linear-gradient(180deg, rgba(2,9,20,.1), rgba(3,11,22,.14) 55%, rgba(4,12,19,.47));
}
#garden { z-index: -1; pointer-events: none; }
.intro-video {
  z-index: 5; object-fit: contain; background: #080a12 url("jardin-mapi.png") center / cover no-repeat;
  opacity: 1; transition: opacity .85s ease, visibility .85s ease;
}
.video-shade { z-index: 6; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.12), transparent 25%, transparent 76%, rgba(0,0,0,.3)); }
.video-controls { position: absolute; z-index: 7; top: 1.1rem; right: 1.1rem; display: flex; gap: .55rem; }
.video-controls button {
  padding: .62rem .9rem; border: 1px solid rgba(255,255,255,.42); border-radius: 999px;
  color: white; background: rgba(8,12,22,.55); backdrop-filter: blur(10px); cursor: pointer;
}
.video-controls button:hover, .video-controls button:focus-visible { background: rgba(8,12,22,.82); outline: 2px solid white; outline-offset: 2px; }
.play-video-button {
  position: absolute; z-index: 8; top: 50%; left: 50%; transform: translate(-50%,-50%);
  display: inline-flex; align-items: center; gap: .75rem; padding: .95rem 1.45rem;
  border: 1px solid #ffe18a; border-radius: 999px; color: #263011; background: #ffc843;
  box-shadow: 0 8px 34px rgba(0,0,0,.32),0 0 30px rgba(255,200,67,.36);
  font-weight: 700; cursor: pointer;
}
.play-video-button[hidden] { display: none; }
.play-video-button:hover { background: #ffdb69; }
.play-video-button:focus-visible { outline: 3px solid white; outline-offset: 5px; }
.play-icon { font-size: .88rem; }
.scene.video-finished .intro-video, .scene.video-finished .video-shade, .scene.video-finished .video-controls {
  opacity: 0; visibility: hidden; pointer-events: none;
}
.scene.video-finished .play-video-button { opacity: 0; visibility: hidden; pointer-events: none; }
.greeting { width: min(100%, 56rem); margin-top: -1.1rem; text-align: center; animation: lift-in 1.2s cubic-bezier(.2,.7,.15,1) .1s both; }
.greeting[hidden] { display: none; }
.glow-heart { height: 2.2rem; color: var(--gold); font: 2.5rem/1 Georgia, serif; text-shadow: 0 0 22px #ffc843; }
h1 {
  margin: .2rem 0 0; color: var(--cream); font: 500 clamp(3.25rem,8vw,7rem)/.99 "Playfair Display", Georgia, serif;
  letter-spacing: -.055em; text-shadow: 0 3px 25px rgba(0,0,0,.38);
}
h1 em { color: #ffd66e; font-weight: 500; }
.wish { margin: 1.45rem 0 0; font-size: clamp(1rem,2vw,1.32rem); color: #fff8e4; text-shadow: 0 2px 12px #071323; }
.surprise-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 1.25rem; min-height: 3.65rem;
  margin-top: 2.2rem; padding: .75rem 1.65rem .75rem 1.9rem; border: 1px solid #ffde76; border-radius: 999px;
  background: linear-gradient(135deg,#ffe17b,#ffb91f 82%);
  box-shadow: 0 0 0 5px rgba(255,196,53,.11),0 7px 36px rgba(255,177,32,.36),inset 0 1px rgba(255,255,255,.75);
  color: #263011; font-size: 1.05rem; font-weight: 700; cursor: pointer;
  transition: transform .25s ease,box-shadow .25s ease,filter .25s ease;
}
.surprise-button:hover { transform: translateY(-3px) scale(1.025); box-shadow: 0 0 0 7px rgba(255,196,53,.13),0 10px 44px rgba(255,177,32,.48); filter: saturate(1.08); }
.surprise-button:active { transform: translateY(0) scale(.99); }
.surprise-button:focus-visible { outline: 3px solid white; outline-offset: 5px; }
.button-arrow { font-size: 1.35rem; line-height: 1; transition: transform .25s ease; }
.surprise-button:hover .button-arrow { transform: translate(3px,-3px); }
.hint { margin: 1.1rem 0 0; color: rgba(255,248,226,.8); font-size: .82rem; letter-spacing: .015em; text-shadow: 0 2px 10px #071323; }
.birthday-note {
  width: min(100%,31rem); margin: 1.8rem auto 0; padding: 1.45rem 1.8rem 1.35rem;
  border: 1px solid rgba(255,221,139,.45); border-radius: 1.25rem; background: rgba(8,20,31,.82);
  box-shadow: 0 18px 65px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(15px); animation: note-open .7s cubic-bezier(.18,.76,.2,1) both;
}
.birthday-note[hidden] { display: none; }
.note-flower { color: var(--gold); font: 2.15rem/1 Georgia,serif; text-shadow: 0 0 20px #ffc843; }
.birthday-note p { margin: .55rem 0 0; color: var(--cream); font: 500 1.65rem/1.25 "Playfair Display",Georgia,serif; }
.birthday-note .note-small { margin-top: .65rem; color: rgba(255,248,226,.88); font: 400 .96rem/1.65 "DM Sans",system-ui,sans-serif; }
.note-signoff { display: block; margin-top: .8rem; color: #ffd66e; font: italic 500 1.05rem "Playfair Display",Georgia,serif; }
.signature { position: absolute; z-index: 2; bottom: 1.35rem; left: 50%; transform: translateX(-50%); white-space: nowrap; color: rgba(255,248,226,.78); font-size: .76rem; letter-spacing: .08em; text-shadow: 0 1px 8px #071323; }
.signature span { margin-right: .25rem; }
@keyframes arrive { from { opacity:.45; transform:scale(1.07); } to { opacity:1; transform:scale(1.025); } }
@keyframes lift-in { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@keyframes note-open { from { opacity:0; transform:translateY(14px) scale(.96); } to { opacity:1; transform:translateY(0) scale(1); } }
@media (max-width:640px) {
  .scene { padding: 3rem 1.1rem 4.4rem; }
  .backdrop { background-position: 48% center; }
  .shade { background: radial-gradient(ellipse at 50% 43%,rgba(4,15,27,.64),rgba(4,15,27,.36) 65%,rgba(4,15,27,.36)); }
  .greeting { margin-top: -.7rem; }
  .glow-heart { height: 1.85rem; font-size: 2.15rem; }
  .wish { max-width: 19rem; margin: 1.15rem auto 0; line-height: 1.55; }
  .surprise-button { min-height: 3.45rem; margin-top: 1.8rem; font-size: .98rem; }
  .birthday-note { margin-top: 1.45rem; padding: 1.25rem 1.25rem 1.2rem; }
  .birthday-note p { font-size: 1.45rem; }
  .birthday-note .note-small { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.01ms!important; }
}