@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Space+Grotesk:wght@400;500&display=swap');

:root{
  --bg:#14161d;
  --bg2:#1c1f2a;
  --paper:#f3ede1;
  --paper-edge:#e2d8c4;
  --ink:#2c2a26;
  --gold:#c9a24b;
  --soft:#8b8676;
  --accent:#b8895f;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:'Cormorant Garamond',serif;
  background:
    radial-gradient(circle at 30% 20%, rgba(60,55,80,.5), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(50,60,75,.4), transparent 55%),
    var(--bg);
  color:var(--paper);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
}

/* paroles floutées façon écran de veille DVD (rebond) */
#floating{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:1;}
.float-lyric{
  position:absolute;
  white-space:nowrap;
  font-style:italic;
  font-weight:400;
  color:rgba(243,237,225,.72);
  filter:blur(0.5px);
  user-select:none;
  letter-spacing:.02em;
  will-change:transform;
}

/* scène enveloppe */
.stage{position:relative;z-index:3;text-align:center;padding:24px;}

.intro-eyebrow{
  font-family:'Space Grotesk',sans-serif;
  font-size:.7rem;
  letter-spacing:.4em;
  text-transform:uppercase;
  color:var(--soft);
  margin-bottom:26px;
}

/* enveloppe */
.envelope{
  position:relative;
  width:min(340px,78vw);
  height:min(227px,52vw);
  margin:0 auto;
  cursor:pointer;
  transition:transform .4s ease;
  filter:drop-shadow(0 30px 60px rgba(0,0,0,.5));
}
.envelope:hover{transform:translateY(-6px);}
.env-body{
  position:absolute;inset:0;
  background:linear-gradient(160deg,var(--paper),var(--paper-edge));
  border-radius:8px;
}
/* triangles latéraux + bas */
.env-side{position:absolute;inset:0;overflow:hidden;border-radius:8px;}
.env-side::before,.env-side::after{
  content:"";position:absolute;top:0;width:50%;height:100%;
  background:linear-gradient(160deg,#ece4d4,#ded3bd);
}
.env-side::before{left:0;clip-path:polygon(0 0,100% 50%,0 100%);}
.env-side::after{right:0;clip-path:polygon(100% 0,0 50%,100% 100%);}
.env-bottom{
  position:absolute;inset:0;
  background:linear-gradient(160deg,#e7ddca,#d8ccb4);
  clip-path:polygon(0 100%,50% 42%,100% 100%);
  border-radius:8px;
}
/* rabat */
.env-flap{
  position:absolute;top:0;left:0;width:100%;height:58%;
  background:linear-gradient(160deg,#efe7d7,#e0d5bf);
  clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:top;
  transition:transform .7s cubic-bezier(.6,.05,.3,1);
  z-index:4;
  border-radius:8px 8px 0 0;
}
.envelope.open .env-flap{transform:rotateX(180deg);z-index:1;}
/* sceau */
.seal{
  position:absolute;top:42%;left:50%;
  transform:translate(-50%,-50%);
  width:54px;height:54px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#d9b25e,var(--gold) 60%,#9d7a30);
  display:flex;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;
  font-weight:600;font-size:1.4rem;color:#3a2c08;
  z-index:6;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  transition:opacity .3s;
}
.envelope.open .seal{opacity:0;}

/* carte qui sort */
.card{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-46%) translateY(0);
  width:88%;
  background:#fbf7ee;
  color:var(--ink);
  border-radius:6px;
  padding:30px 26px;
  z-index:2;
  opacity:0;
  transition:transform .8s cubic-bezier(.2,.7,.2,1) .25s, opacity .5s .3s;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
  text-align:center;
}
.envelope.open .card{
  transform:translate(-50%,-92%);
  opacity:1;
}
.card .c-eyebrow{
  font-family:'Space Grotesk',sans-serif;
  font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--accent);margin-bottom:10px;
}
.card h1{
  font-size:2.6rem;font-weight:600;line-height:1;color:var(--ink);
}
.card .c-age{
  font-size:1.05rem;font-style:italic;color:var(--soft);margin-top:8px;
}

.hint{
  margin-top:30px;
  font-family:'Space Grotesk',sans-serif;
  font-size:.78rem;letter-spacing:.12em;
  color:var(--soft);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:.9}}
.hint.hidden{display:none;}

/* bloc roulette (visible dès le début) */
.reveal{
  margin-top:40px;
}

.roulette-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:1.5em;
  margin-bottom:6px;
}
.roulette-line{
  font-size:1.5rem;
  font-style:italic;
  color:var(--paper);
  transition:color .15s;
}
.roulette-line.spinning{color:var(--soft);}
.roulette-line.landed{color:var(--gold);}
.roulette-artist{
  font-family:'Space Grotesk',sans-serif;
  font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--soft);min-height:1em;margin-bottom:20px;
}

.btn{
  cursor:pointer;border:1px solid var(--gold);
  background:transparent;color:var(--gold);
  font-family:'Space Grotesk',sans-serif;
  font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  padding:13px 30px;border-radius:40px;
  transition:background .25s, color .25s, transform .12s;
}
.btn:hover{background:var(--gold);color:var(--bg);}
.btn:active{transform:scale(.97);}
.btn:disabled{opacity:.45;cursor:default;}

.play-btn{
  display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--gold);color:var(--gold);
  background:transparent;text-decoration:none;
  font-size:.7rem;line-height:1;padding-left:2px;
  flex-shrink:0;
  transition:background .25s, color .25s, transform .12s;
}
.play-btn:hover{background:var(--gold);color:var(--bg);}
.play-btn:active{transform:scale(.94);}
.play-btn.hidden{display:none;}

/* bouton cadeau sur la carte d'anniversaire */
.card-gift{
  display:inline-block;
  margin-top:18px;
  text-decoration:none;
  font-family:'Space Grotesk',sans-serif;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:#3a2c08;
  background:radial-gradient(circle at 35% 30%,#d9b25e,var(--gold) 70%,#b3892f);
  padding:11px 22px;border-radius:40px;
  box-shadow:0 6px 16px rgba(201,162,75,.35);
  transition:transform .12s, box-shadow .25s;
}
.card-gift:hover{
  transform:translateY(-2px);
  box-shadow:0 9px 22px rgba(201,162,75,.45);
}
.card-gift:active{transform:scale(.97);}

footer{
  position:fixed;bottom:16px;left:0;right:0;text-align:center;
  font-family:'Space Grotesk',sans-serif;font-size:.68rem;
  letter-spacing:.1em;color:rgba(139,134,118,.6);z-index:3;
}

@media (prefers-reduced-motion: reduce){
  .float-lyric{animation:none;}
}