/* SECCIÓN «Bienvenida»: sobre antiguo de papel verjurado color marfil, a pantalla completa,
   cerrado con un sello de lacre M/K. Al tocar el sello: el sello salta, la solapa se abre,
   sube la tarjeta y aparece la web.
   Capas, de atrás adelante: forro del sobre (fondo) → tarjeta → bolsillo (laterales + solapa de abajo)
   → solapa de arriba → sello y textos. */

.welcome{
  --tinta:#2f3c46; --oro:#8a6d2a; --oro-texto:#735a20; --forro:#26323b;
  /* Papel antiguo: fibras, líneas del verjurado, manchas de óxido y bordes envejecidos */
  --env-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .26 0 0 0 0 .12 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  --env-blot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='4' seed='9'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .15 0 0 0 .55 -.2'/%3E%3C/filter%3E%3Crect width='900' height='900' filter='url(%23b)'/%3E%3C/svg%3E");
  --verjurado:repeating-linear-gradient(0deg,rgba(110,85,40,.04) 0 1px,transparent 1px 5px),
              repeating-linear-gradient(90deg,rgba(110,85,40,.035) 0 1px,transparent 1px 64px);
  --oxido:radial-gradient(circle at 14% 82%,rgba(140,100,45,.12) 0 .6%,transparent 2.2%),
          radial-gradient(circle at 88% 18%,rgba(140,100,45,.10) 0 .5%,transparent 1.8%),
          radial-gradient(circle at 71% 90%,rgba(140,100,45,.08) 0 .4%,transparent 1.5%);
  --papel:var(--env-noise),var(--verjurado),var(--oxido),var(--env-blot) center/cover,
          radial-gradient(ellipse 80% 75% at 50% 45%,#f4ecda 0%,#ecdfc4 55%,#d9c49c 100%);
  position:fixed;inset:0;z-index:100;overflow:hidden;perspective:1600px;
  /* forro interior: gris pizarra con un grabado fino dorado (solo se ve al abrir) */
  background:radial-gradient(ellipse at 50% 30%,transparent 30%,rgba(0,0,0,.35)),
    repeating-linear-gradient(45deg,rgba(201,167,96,.09) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(-45deg,rgba(201,167,96,.09) 0 1px,transparent 1px 7px),var(--forro);
  transition:opacity 1.1s var(--ease,ease),transform 1.4s var(--ease,ease),filter 1.1s ease,visibility 1.4s}
.welcome.out{opacity:0;visibility:hidden;transform:scale(1.06);filter:blur(6px)}

/* ---------- Tarjeta que sale del sobre (cartulina gruesa con doble filete) ---------- */
.env-card{position:absolute;left:50%;top:30%;z-index:1;width:min(86vw,520px);height:40vh;min-height:260px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(26px,5vh,48px) 20px;text-align:center;
  background:var(--env-noise),#fdfaf3;color:var(--tinta);border-radius:2px;box-shadow:0 1px 0 #fff inset,0 18px 40px rgba(0,0,0,.35);
  transition:transform 1.3s cubic-bezier(.2,.7,.2,1) 1s}
.env-card::before,.env-card::after{content:"";position:absolute;pointer-events:none;border:1px solid rgba(138,109,42,.5)}
.env-card::before{inset:10px}
.env-card::after{inset:14px;border-color:rgba(138,109,42,.25)}
.env-card p{margin:0;max-width:none}
.env-card-eyebrow{font-family:var(--caps);font-size:11.5px;font-weight:500;letter-spacing:.36em;text-transform:uppercase;color:var(--oro-texto)}
.env-card-names{font-family:var(--script);font-size:clamp(46px,12vw,72px);line-height:1.1;margin:6px 0 4px!important}
.env-card-names span{color:var(--oro);font-size:.7em}
.env-card-date{font-family:var(--display);font-size:18px;letter-spacing:.2em}
.env-card-sep{width:min(220px,70%);height:16px;margin:14px 0;background:var(--sep) center/contain no-repeat}
.env-card-place{margin-top:6px!important;font-family:var(--caps);font-size:11.5px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:#4e5a63}

/* ---------- Bolsillo: laterales (con la V arriba) y solapa de abajo ---------- */
.env-pocket{position:absolute;inset:0;z-index:2;clip-path:polygon(0 14%,50% 48%,100% 14%,100% 100%,0 100%);
  background:linear-gradient(90deg,rgba(90,62,25,.10),transparent 18%,transparent 82%,rgba(90,62,25,.10)),var(--papel)}
/* solapa de abajo: un poco más clara, con su sombra sobre los laterales */
.env-bottom-w{position:absolute;inset:0;filter:drop-shadow(0 -2px 3px rgba(80,55,20,.22))}
.env-bottom{position:absolute;inset:0;clip-path:polygon(0 100%,0 99%,50% 60%,100% 99%,100% 100%);
  background:linear-gradient(to top,rgba(255,250,235,.18),transparent 60%),var(--papel)}

/* ---------- Solapa de arriba: se abre girando hacia arriba ---------- */
.env-flap-w{position:absolute;left:0;right:0;top:0;height:56%;z-index:3;transform-origin:top center;
  filter:drop-shadow(0 6px 5px rgba(60,38,10,.28)) drop-shadow(0 14px 18px rgba(60,38,10,.18));
  transition:transform 1.1s cubic-bezier(.45,.05,.3,1) .35s,z-index 0s .9s}
.env-flap{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,100% 34%,50% 100%,0 34%);
  background:linear-gradient(to bottom,rgba(255,250,235,.15),rgba(90,62,25,.08)),var(--papel)}
/* matasellos antiguo en la esquina, medio borrado */
.env-flap::before{content:"";position:absolute;top:7%;right:7%;width:clamp(72px,18vw,118px);aspect-ratio:1;
  background:var(--postmark) center/contain no-repeat;opacity:.45;transform:rotate(-14deg);mix-blend-mode:multiply}

/* ---------- Sello de lacre ---------- */
.env-seal{position:absolute;left:50%;top:56%;z-index:4;width:clamp(128px,34vw,184px);aspect-ratio:1;transform:translate(-50%,-50%);
  padding:0;border:0;background:none;cursor:pointer;border-radius:50%;
  filter:drop-shadow(0 2px 1px rgba(30,20,5,.35)) drop-shadow(0 10px 14px rgba(40,25,5,.35));
  transition:transform .6s cubic-bezier(.5,-.4,.6,1),opacity .5s ease .1s}
.env-seal::after{content:"";position:absolute;inset:-12px;border-radius:50%;border:1px solid rgba(138,109,42,.6);opacity:0} /* aro que invita a tocar */
.seal-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.env-seal:hover{transform:translate(-50%,-50%) scale(1.03)}
.env-seal:focus-visible{outline:2px solid var(--oro);outline-offset:10px}

/* ---------- Idiomas y textos (escritos en tinta sobre el papel) ---------- */
.welcome-langs{position:absolute;top:max(14px,env(safe-area-inset-top,0px));left:14px;z-index:5}
.welcome .welcome-langs button{color:var(--tinta)}
.welcome .welcome-langs button[aria-pressed="true"]{border-color:var(--oro);color:var(--oro-texto)}
.welcome-text{position:absolute;left:0;right:0;bottom:max(5vh,calc(env(safe-area-inset-bottom,0px) + 28px));z-index:4;padding:0 20px;
  text-align:center;color:var(--tinta);transition:opacity .6s}
.welcome-text p{max-width:none;margin-inline:auto}
.welcome-big{margin:0 0 12px;font-family:var(--display);font-weight:400;font-size:clamp(28px,8vw,52px);line-height:1;letter-spacing:.14em;text-transform:uppercase}
.welcome-sub{margin:0;font-family:var(--caps);font-size:11.5px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:#4e5a63}
.welcome-names{display:block;margin-top:6px;font-family:var(--script);font-size:clamp(42px,11vw,60px);font-weight:400;line-height:1.2;letter-spacing:0;text-transform:none;color:var(--tinta)}
.welcome-hint{margin:12px 0 0;font-family:var(--body);font-style:italic;font-size:17px;color:var(--oro-texto)}

/* Entrada: los textos aparecen poco a poco y el aro del sello late */
@media (prefers-reduced-motion:no-preference){
  .welcome-text p,.env-seal{animation:aparece 1.6s cubic-bezier(.22,.61,.36,1) both}
  .env-seal{animation-name:aparece-sello;animation-delay:.2s}
  .welcome-big{animation-delay:.5s}
  .welcome-sub{animation-delay:.8s}
  .welcome-hint{animation-delay:1.4s}
  .env-seal::after{animation:latido 2.8s ease-out 2s infinite}
}
@keyframes aparece{from{opacity:0;transform:translateY(14px);filter:blur(6px)}}
@keyframes aparece-sello{from{opacity:0;transform:translate(-50%,-50%) scale(.85)}}
@keyframes latido{0%{opacity:.8;transform:scale(.94)}100%{opacity:0;transform:scale(1.22)}}

/* ---------- Al abrir ---------- */
.welcome.open .env-seal{opacity:0;transform:translate(-50%,-30%) scale(.6) rotate(-25deg);animation:none;pointer-events:none}
.welcome.open .env-seal::after{animation:none}
/* El sello, ya invisible, se quita del todo (lo hace bienvenida.js): ver el comentario allí. */
.welcome.sin-sello .env-seal{display:none}
.welcome.open .env-flap-w{transform:rotateX(180deg);z-index:0} /* a mitad del giro pasa detrás de la tarjeta */
/* La tarjeta sube hasta salir del bolsillo (su borde de abajo queda por encima de los laterales)
   y después baja por delante del sobre. Si no saliera del todo, se vería cortada y daría un salto. */
.welcome.open .env-card{transform:translateX(-50%) translateY(-52vh)}
.welcome.sacar .env-card{z-index:6;transform:translateX(-50%) translateY(-6vh) scale(1.04);transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
.welcome.open .welcome-text,.welcome.open .welcome-langs{opacity:0}

/* ---------- Pantallas apaisadas (ordenador) ---------- */
@media (min-aspect-ratio:1/1){
  .env-flap-w{height:52%}
  .env-pocket{clip-path:polygon(0 12%,50% 44%,100% 12%,100% 100%,0 100%)}
  .env-bottom{clip-path:polygon(0 100%,0 98%,50% 58%,100% 98%,100% 100%)}
  .env-seal{top:52%;width:clamp(128px,22vh,210px)}
  /* tarjeta apaisada, como una invitación de verdad, que crece con la pantalla */
  .env-card{top:24%;height:44vh;width:min(70vw,calc(44vh * 1.45),680px)}
  .welcome.open .env-card{transform:translateX(-50%) translateY(-41vh)}
  .welcome.sacar .env-card{transform:translateX(-50%) translateY(-2vh) scale(1.04)}
  .welcome-text{bottom:5vh}
}
/* Móvil girado (poca altura): todo más compacto para que quepa sin taparse */
@media (max-height:560px){
  .welcome-names{display:inline;font-size:clamp(24px,8vh,30px)}
  .welcome-big{font-size:clamp(22px,8vh,34px);margin-bottom:6px}
  .welcome-hint{margin-top:4px;font-size:14px}
  .welcome-text{bottom:max(3vh,calc(env(safe-area-inset-bottom,0px) + 8px))}
  .env-seal{top:40%;width:clamp(80px,25vh,120px)}
  .env-flap::before{width:clamp(56px,18vh,90px)}
  .env-card{top:14%;height:72vh;min-height:0;width:min(80vw,calc(72vh * 1.6));padding:12px 20px}
  .env-card-names{font-size:clamp(32px,12vh,54px)}
  .env-card-sep{margin:6px 0}
  .welcome.open .env-card{transform:translateX(-50%) translateY(-61vh)}
  .welcome.sacar .env-card{transform:translateX(-50%) translateY(0) scale(1)}
}
@media (prefers-reduced-motion:reduce){.welcome,.env-flap-w,.env-seal,.env-card{transition-duration:.01s;transition-delay:0s}}
body.welcome-on{overflow:hidden}