/* Los 40 de Elena. Muestra de MARËA Studio. Lo común está en ../receta/receta.css.
   Portada de revista y cena que acaba en baile. Las piezas son imágenes hechas con la IA de Canva
   y se publican tal como salen de Canva: sombras, tonos, recortes y las motas de luz van por CSS. */
:root{
  --suelo:#1E120B; --tinta:#2B1B12; --tinta-s:#4A3322; --oro:#432D0C; --papel:#F3E7D0; --linea:rgba(43,27,18,.3);
  --seda:#F3E7D0; --sombra:rgba(8,4,2,.62); --pulso:rgba(224,190,124,.8); --dorso:#3A2A1E; --seda-forro:#F3E7D0; --c-dentro:#C2A47A;
  --a-letra:#F2E6CF; --sobre-seda:#F3E7D0; --brillo:#E2C48C; --halo-letra:0 0 calc(9*var(--u)) rgba(14,7,3,.8);
  --cursiva:'Bodoni Moda',Georgia,serif;
  --serif:'Cormorant Garamond',Georgia,serif;
  --caps:'Jost','Inter',sans-serif;
  --flecha:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%232B1B12'/></svg>");
  /* geometría del sobre, medida sobre piezas/sobre.jpg */
  --s-bisagra:28.81%;
  --s-suelo:40%; /* un poco más que el borde medido: la carta no asoma por debajo del sobre */
  --s-hueco:polygon(9.53% 28.81%,90.25% 28.81%,87.92% 32.68%,73.09% 39.46%,55.51% 47.74%,50% 50.24%,44.28% 47.62%,27.33% 40%,11.44% 32.8%);
  --s-dorso:polygon(9.53% 28.81%,90.25% 28.81%,87.92% 24.94%,73.09% 18.15%,55.51% 9.88%,50% 7.38%,44.28% 10%,27.33% 17.62%,11.44% 24.82%);
  --s-forro:polygon(13.45% 28.81%,86.33% 28.81%,50% 9.52%);
  --s-frente:polygon(9.53% 60.3%,90.25% 60.3%,90.25% 28.81%,87.92% 32.68%,73.09% 39.46%,55.51% 47.74%,50% 50.24%,44.28% 47.62%,27.33% 40%,11.44% 32.8%,9.53% 28.81%);
  --s-solapa:polygon(9.53% 28.81%,90.25% 28.81%,87.92% 32.68%,73.09% 39.46%,55.61% 47.8%,55.4% 49.46%,54.45% 50.65%,52.75% 51.55%,50.42% 51.9%,48.2% 51.73%,46.08% 51.07%,44.6% 50.12%,43.96% 48.93%,44.07% 47.62%,27.33% 40%,11.44% 32.8%);
  --s-baja:490; --s-x:470; --s-y:820; --s-boton:1052;
  --parche-x:472; --parche-y:830; --parche-dx:150; --parche-dy:-70; --parche-r:72; --parche-r2:108;
  /* la tarjeta en blanco de piezas/portada.jpg y dónde va la letra.
     papel-v.png lleva márgenes transparentes: la caja es mayor que el papel que se ve */
  --c-x:-22; --c-y:290; --c-w:970; --c-h:1192;
  --l-x:150; --l-y:449; --l-w:644; --l-h:873;
}

.fondo{background-image:url(piezas/seda.jpg)}
/* la esquina de la vela es lo único claro de la seda: se templa aquí para que la letra clara se lea al pasar por ella */
.fondo::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 46% 26% at 0 0,rgba(22,11,5,.5),rgba(22,11,5,0))}
body{color:var(--a-letra)}

/* ---------- imágenes del sobre ---------- */
.a-hueco,.a-dorso::after{background-image:url(piezas/champan.jpg)}
.a-hueco{filter:brightness(.72)}
/* el dorso de la solapa es el mismo papel: se usa un trozo tranquilo de la parte baja del sobre, ampliado */
.a-dorso{background-image:url(piezas/sobre.jpg);background-size:300% 300%;background-position:calc(-510*var(--e)) calc(-2531*var(--e))}
.a-frente,.a-frente::after,.a-solapa{background-image:url(piezas/sobre.jpg)}
.a-papel{filter:brightness(.93) saturate(.98)}
.a-papel::before{inset:12% 16.5%}
.a-papel::after{background-image:url(piezas/papel-v.png)}
.monograma{top:calc(818*var(--e));font:500 calc(46*var(--e))/1 var(--cursiva);letter-spacing:-.01em;color:#33210A;text-shadow:0 calc(1.5*var(--e)) 0 rgba(255,226,170,.5)}
.a-muestra,.p-muestra{text-shadow:0 0 calc(6*var(--u)) rgba(12,6,3,.95),0 1px 2px rgba(12,6,3,.9)}
.a-boton{min-height:44px;font-size:max(11px,calc(12.5*var(--u)));text-shadow:0 0 calc(6*var(--u)) rgba(12,6,3,.9)}
.a-boton:focus-visible{outline-color:var(--brillo)}
.bajar{font-size:max(11px,calc(11.5*var(--u)));text-shadow:0 0 calc(6*var(--u)) rgba(12,6,3,.9)}

/* ---------- portada: tarjeta como portada de revista ---------- */
.letra{mix-blend-mode:multiply;color:var(--tinta)}
.l-titulo{display:block}
.l-sobre{display:block;font:italic 400 calc(70*var(--e))/1 var(--cursiva)}
.l-40{display:block;margin-top:calc(-6*var(--e));font:400 calc(560*var(--e))/.86 var(--cursiva);letter-spacing:-.035em;margin-left:-.035em}
.l-frase{margin-top:calc(4*var(--e));font:italic 400 calc(55*var(--e))/1.1 var(--cursiva)}
.l-frase span{display:block}
.l-fecha{margin-top:calc(18*var(--e));font:400 max(11px,calc(32*var(--e)))/1.2 var(--caps);letter-spacing:.05em}
.l-lugar{margin-top:calc(5*var(--e));font:italic 500 calc(46*var(--e))/1.15 var(--serif)}

/* ---------- común de la hoja ---------- */
.pieza{filter:drop-shadow(calc(4*var(--u)) calc(6*var(--u)) calc(8*var(--u)) var(--sombra))}
h2{font:italic 400 calc(34*var(--u))/1.04 var(--cursiva)}
.et{font-size:max(11px,calc(12*var(--u)))}
.papel{color:var(--tinta)}
/* papel: la imagen lleva márgenes transparentes, estos insets hacen que el papel que se ve coincida con la caja */
.papel::before{filter:brightness(1.12) saturate(.78) drop-shadow(calc(4*var(--u)) calc(6*var(--u)) calc(9*var(--u)) var(--sombra))}
.p-h::before{background-image:url(piezas/papel-h.png);inset:-19.3% -14.8% -21.8% -14.8%}
.p-v::before{background-image:url(piezas/papel-v.png);inset:-13.5% -20.1% -14.7% -20.5%}
.boton.lleno,.vienes input:checked+span{background-image:url(piezas/seda.jpg);border-color:#2B1B12}
.pie{text-shadow:var(--halo-letra)}

/* cuánto falta: los números son los fotogramas de la tira */
.b-cuenta{padding-top:calc(46*var(--u))}
.cu-titulo{position:relative;z-index:1;margin:0 0 0 calc(24*var(--u));font-size:calc(46*var(--u));color:var(--a-letra);text-shadow:var(--halo-letra)}
.tira{position:relative;width:calc(432*var(--u));height:calc(216*var(--u));margin:calc(-44*var(--u)) 0 0 calc(-22*var(--u));transform:rotate(-3.5deg)}
.t-img{position:absolute;left:0;top:0;width:100%;height:100%;filter:saturate(.8) brightness(.8) drop-shadow(calc(4*var(--u)) calc(6*var(--u)) calc(7*var(--u)) var(--sombra))}
.cuenta{position:absolute;left:5.2%;width:90.1%;top:32.8%;height:27.2%;margin:0}
.cuenta div{position:relative;display:flex;align-items:center;justify-content:center;padding:0;border:0}
.cuenta div:first-child{border:0}
.cuenta b{color:var(--a-letra);font:500 calc(40*var(--u))/1 var(--cursiva);font-variant-numeric:lining-nums tabular-nums;text-shadow:0 1px 3px rgba(40,14,0,.55)}
.cuenta small{position:absolute;left:0;right:0;top:calc(100% + 24*var(--u));text-align:center;color:var(--a-letra);font-size:max(11px,calc(11.5*var(--u)));text-shadow:var(--halo-letra)}

/* la noche: lo escrito en la servilleta */
.b-noche{margin-top:calc(-16*var(--u));height:calc(420*var(--u))}
.servilleta{position:absolute;left:calc(-55*var(--u));top:0;width:calc(450*var(--u));height:calc(450*var(--u));transform:rotate(-3deg)}
.s-img{width:100%;height:100%;filter:brightness(1.1) saturate(.72) drop-shadow(calc(5*var(--u)) calc(8*var(--u)) calc(11*var(--u)) var(--sombra))}
.s-txt{position:absolute;left:17%;top:29%;width:56%;color:var(--tinta)}
.s-txt h2{margin-top:calc(8*var(--u));font-size:calc(52*var(--u));line-height:.98}
.s-txt p{margin-top:calc(14*var(--u));font:400 calc(21*var(--u))/1.2 var(--serif);max-width:calc(190*var(--u))}

/* programa: carta alta con su clip, y el título en vertical sobre la seda. El doblez del papel separa la copa de la cena */
.b-prog{margin-top:calc(6*var(--u));height:calc(590*var(--u))}
.pr-titulo{position:absolute;left:calc(24*var(--u));top:calc(384*var(--u));margin:0;font:400 calc(70*var(--u))/1 var(--cursiva);color:var(--a-letra);white-space:nowrap;transform-origin:0 0;transform:rotate(-90deg);text-shadow:var(--halo-letra)}
.carta{position:absolute;left:calc(54*var(--u));top:0;width:calc(410*var(--u));height:calc(615*var(--u));transform:rotate(2.6deg)}
.c-img{position:absolute;left:0;top:0;width:100%;height:100%;filter:brightness(1.08) saturate(.78) drop-shadow(calc(5*var(--u)) calc(8*var(--u)) calc(10*var(--u)) var(--sombra))}
.prog{position:absolute;left:30%;width:40.6%;top:25.5%;margin:0;padding:0;list-style:none;display:grid;row-gap:calc(70*var(--u));color:var(--tinta);text-align:center}
.prog b{display:block;font:400 calc(46*var(--u))/1 var(--cursiva);font-variant-numeric:lining-nums;letter-spacing:-.01em}
.prog span{display:block;margin-top:calc(6*var(--u));font:italic 500 calc(21*var(--u))/1.08 var(--serif);text-wrap:balance}
.pr-cerezas{left:calc(-18*var(--u));top:calc(410*var(--u));width:calc(190*var(--u));transform:rotate(-16deg)}

/* la pista: la bola gira en apariencia y sus motas de luz recorren el bloque. Todo CSS, sin tocar la imagen.
   .pi-marca es un punto bajo la bola: receta.js le pone .in cuando entra en pantalla, y ahí se enciende la luz */
.b-pista{margin-top:calc(18*var(--u));height:calc(690*var(--u))}
.pi-marca{position:absolute;left:50%;top:calc(340*var(--u));width:2px;height:2px;pointer-events:none}
.pi-velo{position:absolute;left:50%;top:calc(-40*var(--u));bottom:calc(-40*var(--u));width:100vw;margin-left:-50vw;background:rgba(14,7,3,.5);-webkit-mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent);pointer-events:none}
.motas{position:absolute;left:50%;top:0;bottom:0;width:100vw;margin-left:-50vw;overflow:hidden;content-visibility:auto;pointer-events:none;transform-origin:calc(50% + 48*var(--u)) calc(208*var(--u))}
.js .motas{opacity:0;transform:scale(.72);transition:opacity 1.5s ease .15s,transform 2.4s cubic-bezier(.16,.8,.24,1) .15s}
.js .pi-marca.in~.motas{opacity:1;transform:none}
.motas i{position:absolute;left:0;top:var(--y);width:calc(var(--t)*.46*var(--u));height:calc(var(--t)*.36*var(--u));border-radius:28%;background:radial-gradient(closest-side,rgba(255,236,198,.92) 58%,rgba(255,214,150,.42));box-shadow:0 0 calc(var(--t)*.5*var(--u)) calc(var(--t)*.07*var(--u)) rgba(255,176,88,.32);transform:translate3d(calc(var(--x)*1vw),0,0) rotate(-9deg);animation:mota calc(var(--v)*1s) linear calc(var(--d)*1s) infinite,parpadeo calc(var(--v)*.13s) ease-in-out calc(var(--d)*.3s) infinite alternate}
@keyframes mota{from{transform:translate3d(108vw,0,0) rotate(-9deg)}to{transform:translate3d(-8vw,0,0) rotate(-9deg)}}
@keyframes parpadeo{from{opacity:1}to{opacity:.42}}
.bola{position:absolute;z-index:1;left:calc(8*var(--u));top:calc(-30*var(--u));width:calc(459*var(--u));height:calc(459*var(--u))}
.js .bola{transform:translateY(calc(-46*var(--u)));transition:transform 1.9s cubic-bezier(.2,1.35,.35,1)}
.js .pi-marca.in~.bola{transform:none}
.b-cuelga{position:absolute;inset:0;transform-origin:49.8% 0;animation:balanceo 6.5s ease-in-out infinite alternate}
@keyframes balanceo{from{transform:rotate(-1.1deg)}to{transform:rotate(1.1deg)}}
.b-img{position:absolute;left:0;top:0;width:100%;height:100%;-webkit-mask-image:linear-gradient(transparent,#000 9%);mask-image:linear-gradient(transparent,#000 9%);filter:drop-shadow(calc(6*var(--u)) calc(10*var(--u)) calc(14*var(--u)) rgba(6,3,1,.7))}
/* overlay solo aviva lo que ya brilla: la luz pasa por las teselas de la foto sin pintar nada encima */
.b-brillos{position:absolute;left:17.1%;top:19.4%;width:65.4%;height:65.4%;border-radius:50%;overflow:hidden;mix-blend-mode:overlay;-webkit-mask-image:radial-gradient(closest-side,#000 76%,transparent 99%);mask-image:radial-gradient(closest-side,#000 76%,transparent 99%)}
.b-brillos i{position:absolute;left:0;top:0;width:200%;height:100%;background:linear-gradient(96deg,rgba(255,236,204,0) 6%,rgba(255,236,204,.5) 20%,rgba(255,240,214,.82) 27%,rgba(255,236,204,.5) 34%,rgba(255,236,204,0) 48%,rgba(255,236,204,0) 56%,rgba(255,236,204,.4) 69%,rgba(255,240,214,.7) 75%,rgba(255,236,204,.4) 81%,rgba(255,236,204,0) 94%) 0 0/50% 100% repeat-x;animation:brillos 13s linear infinite reverse}
.b-brillos i+i{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><g fill='%23FFEBCB'><rect x='32' y='92' width='30' height='20' opacity='.9'/><rect x='118' y='62' width='26' height='16' opacity='.6'/><rect x='214' y='120' width='34' height='22' opacity='1'/><rect x='300' y='78' width='26' height='16' opacity='.7'/><rect x='66' y='150' width='34' height='24' opacity='.6'/><rect x='168' y='176' width='36' height='24' opacity='.95'/><rect x='262' y='160' width='32' height='22' opacity='.5'/><rect x='352' y='188' width='30' height='22' opacity='.85'/><rect x='18' y='216' width='30' height='24' opacity='.75'/><rect x='110' y='232' width='36' height='26' opacity='1'/><rect x='214' y='244' width='36' height='26' opacity='.65'/><rect x='308' y='226' width='34' height='24' opacity='.9'/><rect x='56' y='286' width='34' height='22' opacity='.55'/><rect x='160' y='300' width='36' height='22' opacity='.85'/><rect x='258' y='312' width='32' height='20' opacity='.7'/><rect x='346' y='284' width='30' height='20' opacity='.5'/><rect x='128' y='352' width='30' height='16' opacity='.6'/><rect x='236' y='360' width='26' height='16' opacity='.8'/></g></svg>") 0 0/50% 100% repeat-x;animation:brillos 21s linear infinite reverse}
@keyframes brillos{to{transform:translateX(-50%)}}
.b-halo{position:absolute;left:4%;top:7%;width:92%;height:92%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,186,104,.34),rgba(255,186,104,.12) 62%,rgba(255,186,104,0));animation:halo 5s ease-in-out infinite alternate}
@keyframes halo{from{opacity:.65}to{opacity:1}}
.b-destello{position:absolute;left:17.1%;top:19.4%;width:65.4%;height:65.4%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,240,205,.9),rgba(255,206,130,.4) 45%,rgba(255,206,130,0));opacity:0;pointer-events:none}
.pi-marca.in~.bola .b-destello{animation:destello 2.3s ease-out .2s both}
@keyframes destello{0%{opacity:0;transform:scale(.5)}22%{opacity:.9}100%{opacity:0;transform:scale(2.5)}}
.pi-txt{position:absolute;z-index:2;left:calc(26*var(--u));top:calc(374*var(--u));color:var(--a-letra);text-shadow:0 0 calc(12*var(--u)) rgba(10,5,2,.9),0 1px 3px rgba(10,5,2,.85)}
.pi-txt .et{color:var(--brillo)}
.pi-hora{margin-top:calc(6*var(--u));font:400 calc(92*var(--u))/.95 var(--cursiva);font-variant-numeric:lining-nums;letter-spacing:-.02em}
.pi-baile{margin-top:calc(2*var(--u));font:italic 400 calc(34*var(--u))/1 var(--cursiva)}
.casete{position:absolute;z-index:3;left:calc(58*var(--u));top:calc(470*var(--u));width:calc(400*var(--u));height:calc(266.5*var(--u));transform:rotate(-5deg)}
.ca-img{position:absolute;left:0;top:0;width:100%;height:100%;filter:brightness(1.08) drop-shadow(calc(5*var(--u)) calc(8*var(--u)) calc(10*var(--u)) rgba(6,3,1,.72))}
.ca-et{position:absolute;left:17%;right:17%;top:20.5%;height:12.5%;display:flex;align-items:center;justify-content:center;color:var(--tinta);font:italic 500 calc(25*var(--u))/1 var(--serif)}

/* dónde: la servilleta con el mapa, la caja de cerillas de la terraza y la nota, que crece si aparece el aviso */
.b-donde{margin-top:calc(30*var(--u));padding:calc(296*var(--u)) calc(16*var(--u)) calc(27*var(--u)) calc(30*var(--u))}
.do-et{position:absolute;z-index:1;left:calc(24*var(--u));top:calc(4*var(--u));color:var(--brillo);text-shadow:var(--halo-letra)}
.do-mapa{left:calc(42*var(--u));top:calc(-6*var(--u));width:calc(440*var(--u));transform:rotate(3deg);filter:brightness(1.12) saturate(.8) drop-shadow(calc(4*var(--u)) calc(6*var(--u)) calc(9*var(--u)) var(--sombra))}
.do-cerillas{position:absolute;z-index:3;left:calc(-44*var(--u));top:calc(20*var(--u));width:calc(380*var(--u));height:calc(285*var(--u));transform:rotate(-9deg)}
.do-caja{left:0;top:0;width:100%;filter:brightness(1.1) saturate(.82) drop-shadow(calc(4*var(--u)) calc(6*var(--u)) calc(8*var(--u)) var(--sombra))}
.do-nombre{position:absolute;left:29%;top:21%;width:44%;height:26%;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--tinta);font:italic 400 calc(27*var(--u))/1.02 var(--cursiva);transform:rotate(16.3deg) skewX(-7deg)}
.do-nombre span{display:block}
.do-nota{z-index:2;padding:calc(22*var(--u)) calc(20*var(--u)) calc(18*var(--u)) calc(24*var(--u));transform:rotate(1.2deg)}
.do-fecha{font:400 calc(20*var(--u))/1.18 var(--serif);font-variant-numeric:lining-nums;text-wrap:balance}
.do-nota .botones{margin-top:calc(12*var(--u))}

/* confirma */
.b-confirma{margin-top:calc(10*var(--u));padding:calc(58*var(--u)) 0 calc(50*var(--u))}
.co-carmin{z-index:2;left:calc(-44*var(--u));top:calc(-14*var(--u));width:calc(204*var(--u));transform:rotate(7deg);filter:brightness(1.02) drop-shadow(calc(4*var(--u)) calc(6*var(--u)) calc(7*var(--u)) var(--sombra))}
.b-confirma .papel{width:calc(326*var(--u));margin:0 auto;padding:calc(30*var(--u)) calc(26*var(--u)) calc(30*var(--u));text-align:center;transform:rotate(-1deg)}
.b-confirma .et{color:var(--oro)}
.b-confirma h2{font-size:calc(38*var(--u))}
.co-limite{font:italic 400 calc(19*var(--u))/1.2 var(--serif);font-variant-numeric:lining-nums;margin-top:calc(5*var(--u))}
.vienes{grid-template-columns:repeat(3,1fr);gap:calc(6*var(--u))}
.vienes span{font-size:calc(17.5*var(--u));line-height:1.02;padding:calc(3*var(--u)) calc(3*var(--u))}
.b-confirma .aviso{text-align:center}
.co-perlas{z-index:2;right:calc(-34*var(--u));top:calc(6*var(--u));width:calc(170*var(--u));transform:rotate(12deg)}

/* cierre */
.b-cierre{margin-top:calc(14*var(--u));height:calc(470*var(--u))}
.ci-frase{position:absolute;z-index:1;left:calc(24*var(--u));top:calc(10*var(--u));width:calc(320*var(--u));font:italic 400 calc(50*var(--u))/1.02 var(--cursiva);color:var(--a-letra);text-shadow:var(--halo-letra)}
.ci-frase span{display:block}
.ci-firma{position:absolute;z-index:1;left:calc(26*var(--u));top:calc(196*var(--u));font:400 max(11px,calc(13*var(--u)))/1.2 var(--caps);letter-spacing:.3em;text-transform:uppercase;color:var(--brillo);text-shadow:var(--halo-letra)}
.ci-sandalias{left:calc(10*var(--u));top:calc(196*var(--u));width:calc(420*var(--u));transform:rotate(-4deg);filter:brightness(1.04) drop-shadow(calc(5*var(--u)) calc(8*var(--u)) calc(10*var(--u)) rgba(6,3,1,.7))}

/* en tableta y ordenador, el sobre se ve con toda su seda alrededor y no pegado al borde de la columna.
   La escena es la misma, así que la carta sigue encajando con la portada */
@media (min-width:640px){
  .js .apertura{width:min(var(--w),100vw)}
}

@media (prefers-reduced-motion:reduce){
  .js .motas,.js .bola{opacity:1;transform:none;transition:none}
  .motas i,.b-cuelga,.b-brillos i,.b-brillos i+i,.b-halo{animation:none}
  .pi-marca.in~.bola .b-destello{animation:none}
}
.estatica .motas,.estatica .bola{opacity:1;transform:none;transition:none}
.estatica .motas i,.estatica .b-cuelga,.estatica .b-brillos i,.estatica .b-brillos i+i,.estatica .b-halo{animation:none}
.estatica .pi-marca.in~.bola .b-destello{animation:none}