:root{
  --bg-1:#0e1014;        /* noche */
  --bg-2:#12151b;
  --paper:#fffaf3;       /* papel cálido */
  --ink:#1c1c1c;
  --accent:#8aa0ff;      /* azul tenue */
  --muted:#7b7b7b;
  --shadow:rgba(0,0,0,.35);
  --edge:#cfd7ff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color:#f6f7fb;
  background: radial-gradient(1200px 800px at 60% -10%, var(--bg-2), var(--bg-1));
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

.stage{min-height:100vh; display:grid; place-items:center; position:relative; overflow:hidden}

/* Cielo, estrellas y luz de luna */
.sky { position:absolute; inset:0; z-index:0; pointer-events:none; }
#stars { position:absolute; inset:0; width:100%; height:100%; display:block; }
.sky::before{
  content:""; position:absolute; width:70vmax; height:70vmax; border-radius:50%;
  background:radial-gradient(closest-side, rgba(200,220,255,.16), rgba(200,220,255,0));
  left: -20vmax; top: -10vmax; filter: blur(2px);
  animation: moon-drift 36s linear infinite;
  opacity:.7;
}
@keyframes moon-drift{
  0%{ transform: translate3d(0,0,0); }
  50%{ transform: translate3d(12vmax, 6vmax, 0); }
  100%{ transform: translate3d(0,0,0); }
}
.grain{
  position:absolute; inset:0; mix-blend-mode:overlay; opacity:.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
}

/* Contenido */
.card-wrap{position:relative; z-index:1; display:grid; place-items:center; gap:1rem; padding:2rem}

.open-btn{
  appearance:none; border:none; cursor:pointer;
  background:linear-gradient(180deg,#ffffff,#f0f3ff);
  color:#1a1f36; font-weight:600; padding:.9rem 1.1rem; border-radius:12px;
  box-shadow:0 8px 24px var(--shadow);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
  position: relative;             /* iOS: asegurar capa superior */
  z-index: 3;                     /* iOS: por encima de cualquier overlay */
  pointer-events: auto;
}
.open-btn:hover{transform:translateY(-1px); box-shadow:0 12px 28px var(--shadow)}
.open-btn:active{transform:translateY(0)}
.hint{color:#cfd6ff; opacity:.7; font-size:.95rem; text-align:center}

/* SOBRE (sobre real con pliegues y sello) */
.envelope{
  position:relative; width:min(92vw,680px); height:420px;
  perspective:1200px;
  will-change: transform;
  transition: transform .12s ease-out;
  transform-style: preserve-3d;
}
.pocket, .flap{
  position:absolute; inset:0; border-radius:14px; backface-visibility:hidden;
}

/* base del sobre */
.pocket{
  background:linear-gradient(180deg,#e9edff 0%, #dfe5ff 100%);
  box-shadow:0 18px 50px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.12);
}

/* pliegues laterales */
.pocket::before, .pocket::after{
  content:""; position:absolute; top:22%; bottom:6%;
  width:55%; background:linear-gradient(180deg,#e2e8ff,#d7defc);
  filter: brightness(0.98);
}
.pocket::before{
  left:0; clip-path: polygon(0 0, 100% 50%, 0 100%);
  box-shadow: inset -1px 0 0 rgba(0,0,0,.06);
}
.pocket::after{
  right:0; clip-path: polygon(100% 0, 0 50%, 100% 100%);
  box-shadow: inset 1px 0 0 rgba(0,0,0,.06);
}

/* aleta superior */
.flap{
  transform-origin:top center;
  transform:rotateX(0deg);
  background:linear-gradient(180deg,#dfe5ff,#c9d4ff);
  clip-path:polygon(0 0, 100% 0, 50% 62%);
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}

/* sello circular */
.seal{
  position:absolute; left:50%; top:38%;
  transform: translate(-50%, -50%);
  width:64px; height:64px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, #e6ecff);
  box-shadow: 0 2px 8px rgba(0,0,0,.15), inset 0 0 0 1px rgba(0,0,0,.1);
  z-index:2;
  animation: seal-pulse 2.8s ease-in-out infinite;
  pointer-events: none;           /* iOS: no bloquea toques */
}
@keyframes seal-pulse{
  0%,100%{ transform: translate(-50%,-50%) scale(1); box-shadow: 0 2px 8px rgba(0,0,0,.15), 0 0 0 0 rgba(138,160,255,.0); }
  50%{ transform: translate(-50%,-50%) scale(1.03); box-shadow: 0 2px 8px rgba(0,0,0,.15), 0 0 18px 8px rgba(138,160,255,.18); }
}
.envelope.open .seal{ opacity:0; transition: opacity .35s ease; }

/* Hoja de carta */
.letter{
  position:absolute; left:50%; top:58%;
  transform:translate(-50%,-50%) translateY(120px) rotateX(2deg);
  width:min(88vw,600px); max-height:360px; overflow:auto;
  background:var(--paper); color:var(--ink);
  border-radius:12px; padding:28px 26px;
  box-shadow:0 30px 60px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.06);
  opacity:0; transition:opacity .5s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
.letter:focus{outline:2px dashed #8aa0ff; outline-offset:4px}
.letter__header h1{
  font-family: Cardo, Georgia, serif;
  font-weight:400; margin:0 0 .25rem 0; color:#0f1220;
}
.muted{color:var(--muted); margin:0 0 1rem 0; font-size:.95rem}
.letter__body{line-height:1.7; font-size:1.05rem; white-space:pre-wrap; position:relative}
.whisper{ opacity:0; margin-top:14px; font-style:italic; color:#555; transition: opacity .6s ease; }

/* Estado abierto + halo */
.envelope.open .flap{ transform:rotateX(-165deg) }
.envelope.open .letter{
  opacity:1; transform:translate(-50%,-50%) translateY(-30px) rotateX(0deg);
}
.envelope.open .pocket{
  box-shadow:0 18px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.08), 0 0 0 0 rgba(138,160,255,0.0);
  animation: env-glow 800ms ease-out 1;
}
@keyframes env-glow{
  0%{ box-shadow:0 18px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.08), 0 0 0 0 rgba(138,160,255,0.0); }
  40%{ box-shadow:0 18px 60px rgba(0,0,0,.55), 0 0 60px 10px rgba(138,160,255,.18); }
  100%{ box-shadow:0 18px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.08), 0 0 0 0 rgba(138,160,255,0.0); }
}

/* Controles */
.controls{display:flex; gap:.5rem; flex-wrap:wrap}
.ghost-btn{
  appearance:none; cursor:pointer; border:1px solid #d7d7d7; background:#fff; color:#111;
  padding:.55rem .75rem; border-radius:10px; font-size:.95rem;
  transition:background .15s ease, transform .1s ease, border-color .15s ease;
}
.ghost-btn:hover{background:#f7f7f7}
.ghost-btn:active{transform:translateY(1px)}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .envelope{ transition:none !important; transform:none !important; }
  .flap{ transition:none !important; }
  .letter{ transition:none !important; }
  .sky::before{ animation:none !important; }
}