:root {
  --black: #120d10;
  --black-soft: #1c1318;
  --rose: #8f5f6d;
  --rose-deep: #4f2f39;
  --rose-powder: #d8b7be;
  --ivory: #f7f0e8;
  --paper: #f3e7df;
  --gold: #c8a96d;
  --gold-soft: #e1c997;
  --muted: rgba(247, 240, 232, .68);
}
* { box-sizing: border-box; }
html, body {
  margin: 0; min-height: 100%;
  background:
    radial-gradient(circle at 50% 10%, rgba(143,95,109,.12), transparent 38%),
    linear-gradient(180deg, var(--black-soft), var(--black));
  color: var(--ivory);
}
body { font-family: Inter, system-ui, sans-serif; overflow: hidden; }
button { font: inherit; }
.screen {
  position: fixed; inset: 0; display: grid; place-items: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 1.8s ease, visibility 1.8s ease;
  background:
    radial-gradient(circle at 50% 22%, rgba(143,95,109,.10), transparent 42%),
    linear-gradient(180deg, var(--black-soft), var(--black));
}
.screen.active { opacity: 1; visibility: visible; pointer-events: auto; }
.film-grain {
  position: absolute; inset: -20%; opacity: .055; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  animation: grain .22s steps(2) infinite;
}
@keyframes grain { 0%{transform:translate(0)} 25%{transform:translate(2%,-3%)} 50%{transform:translate(-3%,2%)} 75%{transform:translate(3%,3%)} 100%{transform:translate(-2%,-2%)} }
.intro-copy { position: relative; z-index: 2; text-align: center; padding: 32px; }
.eyebrow { margin: 0 0 28px; letter-spacing: .24em; text-transform: uppercase; font-size: 11px; color: var(--muted); }
h1, h2 { font-family: "Cormorant Garamond", serif; font-weight: 500; }
h1 { margin: 0; font-size: clamp(52px, 13vw, 96px); letter-spacing: -.025em; }
.intro-line { margin: 18px 0 44px; color: var(--muted); font-family: "Cormorant Garamond", serif; font-size: 24px; }
.primary-btn, .replay-btn {
  border: 1px solid rgba(200,169,109,.72); color: var(--ivory);
  background: linear-gradient(135deg, rgba(143,95,109,.17), rgba(200,169,109,.08));
  padding: 14px 34px; border-radius: 999px; cursor: pointer; letter-spacing: .08em;
  transition: background .3s ease, transform .3s ease;
}
.primary-btn:hover, .replay-btn:hover { background: linear-gradient(135deg, rgba(143,95,109,.30), rgba(200,169,109,.14)); transform: translateY(-2px); }
.sound-note { margin-top: 18px; font-size: 11px; color: rgba(243,238,228,.4); }

.slides, .slide { position: absolute; inset: 0; }
.slide {
  opacity: 0; overflow: hidden; display: grid; place-items: center;
  transition: opacity 2.1s ease;
}
.slide.active { opacity: 1; }
.slide img {
  width: 100%; height: 100%; object-fit: contain; background: #000;
  transform: scale(1.02); animation: kenburns 8.5s ease-out forwards;
}
.slide.landscape img { object-fit: cover; }
@keyframes kenburns { from { transform: scale(1.01); } to { transform: scale(1.095); } }
.vignette { position:absolute; inset:0; pointer-events:none; box-shadow: inset 0 0 130px 35px rgba(0,0,0,.55); }
.progress { position:absolute; left:8vw; right:8vw; bottom:calc(24px + env(safe-area-inset-bottom)); height:1px; background:rgba(255,255,255,.16); }
.progress span { display:block; width:0; height:100%; background:var(--gold); transition:width .4s linear; }
.skip-btn {
  position:absolute; top:calc(20px + env(safe-area-inset-top)); right:20px; z-index:3;
  border:0; background:transparent; color:rgba(255,255,255,.45); cursor:pointer; font-size:12px;
}
.soft-glow { width: 1px; height: 1px; box-shadow: 0 0 120px 70px rgba(181,154,104,.08); }

.envelope-wrap { border:0; background:transparent; color:var(--ivory); cursor:pointer; display:grid; gap:34px; place-items:center; }
.envelope { position:relative; width:min(72vw, 360px); aspect-ratio:1.55; filter:drop-shadow(0 30px 60px rgba(0,0,0,.6)); }
.envelope-back { position:absolute; inset:0; border-radius:5px; background:#9e6d79; }
.envelope-back::before, .envelope-back::after { content:""; position:absolute; inset:0; }
.envelope-back::before { clip-path:polygon(0 0, 50% 58%, 100% 0); background:#c69aa4; }
.envelope-back::after { clip-path:polygon(0 100%, 50% 44%, 100% 100%); background:#80515f; }
.envelope-flap { position:absolute; inset:0; clip-path:polygon(0 0, 50% 58%, 100% 0); background:#d8b7be; transform-origin:top; transition:transform 1s ease; }
.letter-preview { position:absolute; z-index:2; inset:28% 18%; display:grid; place-items:center; background:#f5e9e3; color:#352d24; font-family:"Cormorant Garamond",serif; font-size:32px; }
.seal { position:absolute; z-index:4; left:50%; top:48%; transform:translate(-50%,-50%); width:54px; height:54px; border-radius:50%; display:grid; place-items:center; background:#9b7850; color:#fff3dc; font-family:"Cormorant Garamond",serif; font-size:25px; box-shadow:inset 0 0 0 3px rgba(255,255,255,.12); }
.open-label { color:var(--muted); font-family:"Cormorant Garamond",serif; font-size:22px; letter-spacing:.06em; }
.envelope-wrap:hover .envelope { transform:translateY(-5px); transition:transform .4s ease; }

.letter-screen { overflow-y:auto; align-items:start; padding:36px 15px; }
.letter-shell { width:min(760px, 100%); margin:auto; padding:20px 0 80px; }
.letter-paper {
  position:relative; min-height:74vh; padding:clamp(34px,7vw,72px);
  color:#2f2922; background:
    linear-gradient(rgba(255,255,255,.15),rgba(255,255,255,.15)),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(83,65,42,.035) 32px),
    var(--paper);
  border: 1px solid rgba(200,169,109,.28);
  box-shadow:
    0 35px 90px rgba(0,0,0,.58),
    0 0 0 8px rgba(143,95,109,.035);
}
.letter-content { font-family:"Cormorant Garamond",serif; font-size:clamp(20px,4.6vw,27px); line-height:1.55; }
.letter-content p { opacity:0; transform:translateY(14px); margin:0 0 1.25em; transition:opacity 1.15s ease, transform 1.15s ease; white-space:pre-line; }
.letter-content p.visible { opacity:1; transform:none; }
.letter-next, .letter-close {
  display:block; margin:34px auto 0; border:0; border-bottom:1px solid rgba(47,41,34,.45);
  padding:8px 2px; background:transparent; color:#2f2922; cursor:pointer;
}
.hidden { display:none !important; }

.final-screen { overflow:hidden; }
.final-screen img { width:100%; height:100%; object-fit:cover; filter:saturate(.82) contrast(.94); transform:scale(1.03); }
.final-overlay { position:absolute; inset:0; background:
  linear-gradient(to top, rgba(18,13,16,.96), rgba(18,13,16,.12) 58%, rgba(79,47,57,.25)); }
.final-copy { position:absolute; left:8vw; right:8vw; bottom:10vh; text-align:center; text-shadow:0 2px 18px rgba(0,0,0,.7); }
.final-copy h2 { font-size:clamp(38px,10vw,72px); margin:0; }
.final-copy p { font-family:"Cormorant Garamond",serif; font-size:26px; }

.closing-copy { text-align:center; padding:32px; }
.closing-copy p { font-family:"Cormorant Garamond",serif; font-size:30px; margin:0 0 30px; }
.closing-copy h2 { font-size:clamp(46px,12vw,78px); margin:0; color:var(--ivory); }
.closing-copy span { display:block; margin:28px 0 46px; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }

@media (max-width:600px) {
  .slide.landscape img { object-fit:contain; }
  .letter-paper { min-height:80vh; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

.intro-copy::after {
  content: "";
  display: block;
  width: 72px;
  height: 1px;
  margin: 34px auto 0;
  background: linear-gradient(90deg, transparent, var(--gold-soft), transparent);
  opacity: .72;
}
.intro-copy h1 {
  text-shadow: 0 8px 38px rgba(143,95,109,.18);
}
.eyebrow {
  color: var(--gold-soft);
}

.envelope-wrap::before {
  content: "";
  position: absolute;
  width: min(88vw, 470px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(143,95,109,.16), transparent 65%);
  filter: blur(10px);
  pointer-events: none;
}
.envelope {
  border: 1px solid rgba(200,169,109,.22);
}
.seal {
  border: 1px solid rgba(255,243,220,.24);
}
.final-copy h2,
.closing-copy h2 {
  color: var(--ivory);
  text-shadow: 0 10px 42px rgba(143,95,109,.26);
}
.closing-copy p {
  color: var(--rose-powder);
}
.closing-copy span {
  color: var(--gold-soft);
}
.progress span {
  background: linear-gradient(90deg, var(--rose-powder), var(--gold-soft));
}
.letter-paper::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid rgba(200,169,109,.22);
  pointer-events: none;
}

.gold-mark {
  margin-bottom: 16px;
  color: var(--gold-soft);
  font-size: 16px;
  opacity: .85;
  text-shadow: 0 0 20px rgba(200,169,109,.35);
}

/* Édition Collector : enveloppe interactive et ambiance cinématographique */
.floating-dust,
.floating-dust::before,
.floating-dust::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(225,201,151,.52) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(216,183,190,.34) 0 1px, transparent 1.5px);
  background-size: 105px 105px, 155px 155px;
  background-position: 15px 20px, 70px 45px;
  opacity: .22;
  animation: dustDrift 22s linear infinite;
}
.floating-dust::before { transform: scale(.82) rotate(7deg); opacity: .48; animation-duration: 29s; }
.floating-dust::after { transform: scale(1.15) rotate(-5deg); opacity: .28; animation-duration: 36s; }
@keyframes dustDrift { from { translate: 0 0; } to { translate: 24px -85px; } }

.envelope-scene { position: relative; z-index: 2; display: grid; place-items: center; gap: 28px; text-align: center; }
.awaiting-line {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(20px, 5vw, 28px);
  color: rgba(247,240,232,.76);
  letter-spacing: .035em;
  animation: revealAwaiting 1.8s ease both;
}
@keyframes revealAwaiting { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.envelope-wrap { position: relative; gap: 38px; }
.envelope { animation: envelopeFloat 4.6s ease-in-out infinite; transform-style: preserve-3d; transition: transform .55s ease, filter .55s ease; }
@keyframes envelopeFloat { 0%,100% { transform: translateY(0) rotate(-.35deg); } 50% { transform: translateY(-10px) rotate(.35deg); } }
.envelope-wrap:hover .envelope,
.envelope-wrap:focus-visible .envelope { filter: drop-shadow(0 34px 72px rgba(0,0,0,.72)) drop-shadow(0 0 28px rgba(200,169,109,.16)); }
.open-label {
  border: 1px solid rgba(200,169,109,.68);
  border-radius: 999px;
  padding: 13px 25px;
  color: var(--ivory);
  background: linear-gradient(135deg, rgba(143,95,109,.16), rgba(200,169,109,.08));
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: .08em;
  transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
  box-shadow: 0 12px 28px rgba(0,0,0,.24);
}
.envelope-wrap:hover .open-label,
.envelope-wrap:focus-visible .open-label { transform: translateY(-2px); background: linear-gradient(135deg, rgba(143,95,109,.29), rgba(200,169,109,.15)); box-shadow: 0 14px 34px rgba(0,0,0,.34), 0 0 22px rgba(200,169,109,.08); }
.envelope-wrap:focus-visible { outline: none; }
.envelope-wrap:focus-visible .open-label { outline: 2px solid rgba(225,201,151,.68); outline-offset: 5px; }

.envelope-wrap.opening { pointer-events: none; }
.envelope-wrap.opening .envelope { animation: none; }
.envelope-wrap.opening .envelope-flap { transform: rotateX(178deg); z-index: 0; }
.envelope-wrap.opening .seal { animation: breakSeal .65s ease forwards; }
.envelope-wrap.opening .letter-preview { animation: liftLetter 1.35s .45s cubic-bezier(.22,.78,.2,1) forwards; z-index: 5; }
.envelope-wrap.opening .open-label { opacity: 0; transform: translateY(8px); }
@keyframes breakSeal { 0% { transform: translate(-50%,-50%) scale(1); opacity: 1; } 45% { transform: translate(-50%,-50%) scale(1.12) rotate(7deg); } 100% { transform: translate(-50%,-50%) scale(.35) rotate(24deg); opacity: 0; } }
@keyframes liftLetter { 0% { transform: translateY(0) scale(1); } 70% { transform: translateY(-72%) scale(1.04); } 100% { transform: translateY(-92%) scale(1.08); opacity: 0; } }

.letter-backdrop { position: fixed; inset: 0; backdrop-filter: blur(9px); background: rgba(18,13,16,.35); }
.letter-shell { position: relative; z-index: 2; animation: paperEnter 1.1s cubic-bezier(.2,.75,.2,1) both; }
@keyframes paperEnter { from { opacity: 0; transform: translateY(42px) scale(.965); } to { opacity: 1; transform: none; } }
.letter-paper { overflow: hidden; }
.letter-paper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.16) 50%, transparent 58%);
  transform: translateX(-130%);
  animation: paperShine 1.8s .55s ease-out both;
}
@keyframes paperShine { to { transform: translateX(130%); } }
.letter-close { color: #5a3040; border-bottom-color: rgba(90,48,64,.42); font-family: "Cormorant Garamond", serif; font-size: 18px; }
.letter-close::before { content: "♥ "; color: #8f5f6d; }

@media (max-width:600px) {
  .envelope-scene { gap: 20px; padding: 18px; }
  .envelope-wrap { gap: 30px; }
  .open-label { font-size: 12px; padding: 12px 21px; }
}