/* 163 · Sakura al viento — cumpleaños poético en papel washi.
   Apertura: un sobre de origami con cordón bermellón; al tocarlo se abre y sale una ráfaga de pétalos.
   Portada: papel washi rosa que el viento mueve (WebGL, modo viento), una rama de cerezo cruza arriba,
   el nombre en Shippori Mincho y la edad en pincel bermellón. Pétalos caen toda la tarde y, cada tanto,
   una ráfaga los cruza de lado a lado. Fecha: el abanico se abre y los pétalos se juntan alrededor del día.
   Lugares: farolitos de papel. Cierre: cae la noche, sale la luna y los farolitos flotan. */
.c-sk { --display-peso: 800; --nombre-color: #2B2540; --titulo-letra: "Shippori Mincho"; --titulo-peso: 800; --titulo-espacio: .01em;
	--dia-letra: "Shippori Mincho"; --dia-color: #2B2540; --edad-letra: "Kaushan Script"; --edad-color: #D9485F; --radio: 22px;
	--sombra: 0 24px 50px -28px rgb(90 40 60 / .45); --nombre-tam: clamp(4.2rem, 13vw, 10rem);
	--washi: url("img/fondo-celular.webp"); --vj: 38px; }
.c-sk .xv-cielo { display: none; }
.c-sk main > .xv-sec:not(#portada):not(#cierre) { background: transparent; }
.c-sk main { background: linear-gradient(#FBEFF0, #FFF6EE 40%, #FBEFF0 75%, #F8E1E6); }
.c-sk .v-velo { background: radial-gradient(46% 38% at 50% 52%, rgb(255 250 246 / .55), transparent 78%); }

/* ---------------------------------------------------------------- ráfaga de pétalos (toda la página) */
.sk-viento { position: fixed; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 1.2s ease; }
html.e-abierto .sk-viento { opacity: 1; }
.sk-v { position: absolute; left: -12vw; width: var(--w, 34px); height: auto; opacity: 0; filter: drop-shadow(0 6px 8px rgb(140 60 80 / .18));
	animation: sk-rafaga var(--d, 9s) cubic-bezier(.45, .05, .55, .95) var(--r, 0s) infinite; }
.sk-v1 { top: 12%; --w: 30px; --d: 9s; --r: 0s; }   .sk-v2 { top: 26%; --w: 22px; --d: 11s; --r: .6s; }
.sk-v3 { top: 40%; --w: 38px; --d: 8.5s; --r: 1.1s; } .sk-v4 { top: 18%; --w: 26px; --d: 10s; --r: 1.6s; }
.sk-v5 { top: 58%; --w: 34px; --d: 9.5s; --r: 2.2s; } .sk-v6 { top: 70%; --w: 20px; --d: 12s; --r: 2.6s; }
.sk-v7 { top: 34%; --w: 28px; --d: 10.5s; --r: 3.1s; } .sk-v8 { top: 8%; --w: 24px; --d: 11.5s; --r: 3.6s; }
.sk-v9 { top: 50%; --w: 32px; --d: 9s; --r: 4.2s; }   .sk-v10 { top: 82%; --w: 26px; --d: 10s; --r: 4.8s; }
.sk-v11 { top: 64%; --w: 36px; --d: 8.8s; --r: 5.2s; } .sk-v12 { top: 22%; --w: 20px; --d: 12.5s; --r: 5.8s; }
/* la ráfaga dura un tramo del ciclo y luego hay calma: el viento va y viene */
@keyframes sk-rafaga {
	0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
	4% { opacity: .95; }
	30% { transform: translate(60vw, 8vh) rotate(260deg); }
	52% { transform: translate(124vw, -4vh) rotate(520deg); opacity: .9; }
	56%, 100% { transform: translate(130vw, -6vh) rotate(540deg); opacity: 0; }
}

/* pétalos que salen al abrir el sobre (los crea concepto.js) */
.sk-estallido { position: fixed; z-index: 10000; width: 30px; height: auto; pointer-events: none; will-change: transform, opacity; }

/* ---------------------------------------------------------------- apertura: el sobre de origami */
.c-sk .ap-titulo small { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: #5A4F6E; }
.c-sk .ap-titulo strong { font-family: "Shippori Mincho", serif; font-weight: 800; color: #2B2540; }
.c-sk .ap-titulo em { font-family: "Kaushan Script", cursive; font-style: normal; color: #D9485F; letter-spacing: 0; }
.c-sk .so-toque, .c-sk .so-para { font-family: "Zen Kaku Gothic New", sans-serif; color: #5A4F6E; }
.c-sk .ap-cosa .ap-pieza { filter: drop-shadow(0 24px 30px rgb(140 60 80 / .25)); }
.c-sk .ap-destello { background: radial-gradient(closest-side, rgb(255 230 236 / .95), rgb(246 184 198 / .35) 50%, transparent 72%); }

/* ---------------------------------------------------------------- portada */
.c-sk .e-evento { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; font-size: clamp(.8rem, 1.8vw, 1rem); letter-spacing: .34em; text-transform: uppercase; color: #5A4F6E; }
.c-sk .e-nombre { font-family: "Shippori Mincho", serif; font-weight: 800; color: #2B2540; letter-spacing: .01em; text-shadow: 0 2px 0 rgb(255 250 246 / .8), 0 18px 40px rgb(217 72 95 / .18); }
.c-sk .e-edad { align-items: center; gap: .15em; margin-top: 4px; }
.c-sk .e-edad-n { font-family: "Kaushan Script", cursive; font-weight: 400; font-size: clamp(4.6rem, 13vw, 8.4rem); line-height: .9; color: #D9485F; rotate: -6deg; text-shadow: 0 10px 24px rgb(217 72 95 / .25); }
.c-sk .e-edad-t { font-family: "Kaushan Script", cursive; font-size: clamp(1.8rem, 4.4vw, 2.6rem); color: #2B2540; rotate: -6deg; translate: 0 .3em; }
.c-sk .e-fecha { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; font-size: clamp(.72rem, 1.6vw, .88rem); color: #2B2540;
	padding: .75em 1.5em; border-radius: 999px; background: rgb(255 250 246 / .78); box-shadow: 0 0 0 1px rgb(217 72 95 / .3), 0 14px 30px -18px rgb(140 60 80 / .5); backdrop-filter: blur(6px); }
.c-sk .e-nombre:focus { outline: none; }
.c-sk .e-pista { color: #5A4F6E; }
/* la rama cruza arriba y se mece con el viento */
.sk-rama { --w: min(92vw, 1100px); left: -6vw; top: -3vh; --dy: -6vh; --ex: -30vw; --ey: -6vh; --ed: .1s; --fd: 5.5s; --fa: 5px; --fr: 1.4deg; transform-origin: 0% 60%; }
.sk-rama .e-img { filter: drop-shadow(0 22px 26px rgb(90 40 60 / .22)); }
.sk-flor { --w: min(9vmin, 84px); --ex: 0px; --ey: 12vh; --fd: 3.8s; --fa: 7px; --fr: 12deg; }
.sk-f1 { right: 9vw; top: 56vh; --ed: .9s; } .sk-f2 { left: 8vw; top: 66vh; --ed: 1.1s; --w: min(7vmin, 64px); } .sk-f3 { right: 22vw; top: 76vh; --ed: 1.3s; --w: min(5vmin, 44px); }
@media (min-width: 761px) { .c-sk .e-fecha { white-space: nowrap; } }

/* ---------------------------------------------------------------- secciones: tarjetas de papel washi */
.c-sk main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { position: relative; border-radius: 26px; padding: clamp(46px, 6vw, 76px) clamp(24px, 6vw, 72px);
	background: rgb(255 250 246 / .9); box-shadow: 0 0 0 1px rgb(217 72 95 / .14), 0 40px 70px -46px rgb(140 60 80 / .55); backdrop-filter: blur(4px); }
/* tarjetas alternas en índigo tinta, como un farolito de noche */
.c-sk #lugares > .xv-ancho, .c-sk #regalos > .xv-ancho {
	--tinta: #FFF6EE; --tinta-2: #E9D7E0; --acento: #F6B8C6; --linea: rgba(255,246,238,.18); --papel: #362F4D; --suave: #3B3454;
	--boton: #F6B8C6; --boton-tinta: #2B2540; color: #FFF6EE; background: radial-gradient(120% 90% at 50% 0%, #3B3454, #2B2540 70%) !important; }
.c-sk .xv-kicker { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; font-size: .74rem; color: var(--acento); }
.c-sk .xv-titulo { font-family: "Shippori Mincho", serif; font-weight: 800; color: var(--tinta); font-size: clamp(2.2rem, 6vw, 3.8rem); line-height: 1.05; }
.c-sk .xv-titulo .xv-script { font-family: "Kaushan Script", cursive; font-weight: 400; color: var(--acento); font-size: 1em; display: inline-block; rotate: -4deg; }
.c-sk .xv-texto-grande { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 500; line-height: 1.6; }
.c-sk .e-firma { font-family: "Kaushan Script", cursive; color: #D9485F; }
.c-sk .xv-superficie { border-radius: 18px; }
.c-sk #lugares .xv-superficie { background: rgb(255 255 255 / .05); border: 1px solid rgb(255 246 238 / .2); }
.c-sk .xv-lugar-hora { font-family: "Shippori Mincho", serif; font-weight: 800; font-size: clamp(2.6rem, 6vw, 3.6rem); color: #F6B8C6; }
.c-sk .xv-lugar h3 { font-family: "Shippori Mincho", serif; font-weight: 700; }
.c-sk .xv-momento time { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; letter-spacing: .12em; color: #D9485F; }
.c-sk .xv-boton { border-radius: 999px; letter-spacing: .12em; text-transform: uppercase; font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; font-size: .8rem; }
.c-sk .xv-pildora { background: #D9485F; color: #FFFFFF; border-radius: 999px; }
/* farolitos colgando en la tarjeta de lugares */
.c-sk #lugares > .xv-ancho::before { content: ""; position: absolute; right: clamp(18px, 5vw, 56px); bottom: calc(100% - 44px); width: clamp(44px, 6vw, 62px); aspect-ratio: 300 / 659;
	background: url("img/farol-1.webp") bottom / contain no-repeat; filter: drop-shadow(0 0 22px rgb(255 190 150 / .6)); animation: sk-mece 4.2s ease-in-out infinite alternate; transform-origin: 50% 0; pointer-events: none; }
@keyframes sk-mece { from { rotate: -3deg; } to { rotate: 3deg; } }

/* bienvenida: los farolitos se mecen */
.c-sk .e-ornamento { width: min(70%, 230px); }
.sk-orn-farolitos { animation: sk-mece 4.6s ease-in-out infinite alternate !important; transform-origin: 50% 0; filter: drop-shadow(0 0 30px rgb(255 190 150 / .5)); }

/* vestimenta */
.c-sk #vestimenta .xv-vestimenta-codigo { font-family: "Kaushan Script", cursive; font-weight: 400; color: #D9485F; font-size: clamp(2.6rem, 7vw, 4.2rem); }

/* ---------------------------------------------------------------- fecha: el abanico se abre y los pétalos se juntan */
.c-sk .e-fecha-k { font-family: "Kaushan Script", cursive; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: 0; text-transform: none; color: #D9485F; rotate: -4deg; }
.sk-m-abanico { left: 14%; width: 72%; top: -4%; transform-origin: 50% 94%; opacity: clamp(0, calc(var(--t1) * 2.2), 1);
	transform: scaleX(calc(.06 + var(--t1) * .94)) scaleY(calc(.7 + var(--t1) * .3)); filter: drop-shadow(0 26px 30px rgb(140 60 80 / .25)); }
.sk-m-p { width: 11%; opacity: calc(.15 + var(--t2) * .85); transition: none; }
.sk-m-p1 { left: calc(44% - (1 - var(--t2)) * 60%); top: calc(8% - (1 - var(--t2)) * 30%); transform: rotate(calc(var(--t2) * 200deg)); }
.sk-m-p2 { left: calc(70% + (1 - var(--t2)) * 50%); top: calc(14% - (1 - var(--t2)) * 20%); transform: rotate(calc(var(--t2) * -160deg)); }
.sk-m-p3 { left: calc(82% + (1 - var(--t2)) * 40%); top: calc(48% + (1 - var(--t2)) * 10%); transform: rotate(calc(var(--t2) * 240deg)); }
.sk-m-p4 { left: calc(62% + (1 - var(--t2)) * 30%); top: calc(80% + (1 - var(--t2)) * 30%); transform: rotate(calc(var(--t2) * -220deg)); }
.sk-m-p5 { left: calc(18% - (1 - var(--t2)) * 40%); top: calc(76% + (1 - var(--t2)) * 30%); transform: rotate(calc(var(--t2) * 180deg)); }
.sk-m-p6 { left: calc(6% - (1 - var(--t2)) * 50%); top: calc(38% + (1 - var(--t2)) * 10%); transform: rotate(calc(var(--t2) * -200deg)); }
.sk-m-brillo { left: 76%; top: 2%; width: 12%; opacity: var(--t2); transform: scale(calc(.4 + var(--t2) * .6)); filter: drop-shadow(0 0 16px rgb(255 214 224 / .9)); }
.c-sk .e-dia { font-family: "Shippori Mincho", serif; font-weight: 800; color: #2B2540; font-size: clamp(4.8rem, 14vw, 8rem); text-shadow: 0 0 2px #FFFAF6, 0 0 14px #FFFAF6, 0 0 30px #FFFAF6, 0 0 50px rgb(255 250 246 / .9); }
.c-sk .e-mes { font-family: "Kaushan Script", cursive; color: #D9485F; font-size: clamp(2rem, 5vw, 3rem); rotate: -4deg; text-shadow: 0 0 3px #FFFAF6, 0 0 12px #FFFAF6, 0 0 26px #FFFAF6; }
.c-sk .e-anio, .c-sk .e-sem { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; color: #5A4F6E; letter-spacing: .34em; text-shadow: 0 0 12px rgb(255 250 246 / .9); }

/* ---------------------------------------------------------------- cierre: la noche de cerezos */
.c-sk #cierre { background: #0C1F52 url("img/noche.webp") center bottom / cover no-repeat; }
@media (min-width: 761px) {
	/* en pantalla ancha la imagen vertical va a la derecha y el cielo se extiende hacia la izquierda */
	.c-sk #cierre { background: url("img/noche.webp") right bottom / auto 100% no-repeat, linear-gradient(180deg, #0C1F52 0%, #12265F 55%, #3A4486 100%); }
	.c-sk .e-cierre { text-align: left; align-items: flex-start; padding-left: max(7vw, calc(50% - 560px)); padding-right: 48vw; }
	.c-sk .e-cierre .e-cierre-nombre { justify-content: flex-start; }
	.sk-cf1 { left: auto; right: 52%; }
}
.c-sk #cierre::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 40% at 50% 30%, rgb(12 31 82 / .55), transparent 70%), linear-gradient(transparent 60%, rgb(12 20 50 / .4)); pointer-events: none; }
.c-sk #cierre > * { position: relative; }
.c-sk .e-cierre { color: #FFF6EE; padding-top: clamp(160px, 26vh, 240px); padding-bottom: clamp(260px, 44vh, 420px); }
.c-sk .e-cierre .xv-kicker { color: #F6B8C6; }
.c-sk .e-nombre-fin { font-family: "Shippori Mincho", serif; font-weight: 800; color: #FFF6EE; text-shadow: 0 0 30px rgb(255 214 224 / .4); }
.c-sk .e-cierre .xv-texto-grande { font-family: "Kaushan Script", cursive; font-size: clamp(1.9rem, 5vw, 2.8rem); color: #F6B8C6; rotate: -3deg; }
.c-sk .xv-firma, .c-sk .xv-firma a { color: #E9D7E0; }
.sk-cf { position: absolute; height: auto; pointer-events: none; filter: drop-shadow(0 0 30px rgb(255 190 140 / .55)); animation: sk-flota var(--d, 7s) ease-in-out var(--r, 0s) infinite alternate; }
.sk-cf1 { left: 8%; top: 12%; width: clamp(54px, 9vw, 96px); --d: 7s; }
.sk-cf2 { right: 9%; top: 6%; width: clamp(44px, 7vw, 76px); --d: 8.5s; --r: -2s; }
.sk-cf3 { right: 22%; top: 26%; width: clamp(34px, 5vw, 58px); --d: 6.5s; --r: -4s; opacity: .85; }
@keyframes sk-flota { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-26px) rotate(3deg); } }

@media (max-width: 760px) {
	.c-sk { --nombre-tam: clamp(3.6rem, 18vw, 6rem); }
	.sk-rama { --w: 150vw; left: -30vw; top: -1vh; }
	.sk-f1 { right: 4vw; top: 62vh; } .sk-f2 { left: 4vw; top: 72vh; } .sk-f3 { right: 14vw; top: 82vh; }
	.c-sk main > .xv-sec:not(#portada):not(#fecha):not(#cierre) > .xv-ancho { padding: 46px 22px; }
	.c-sk .e-fecha { letter-spacing: .16em; }
	.sk-cf1 { left: 4%; } .sk-cf2 { right: 4%; }
}
@media (prefers-reduced-motion: reduce) {
	.sk-viento, .sk-estallido { display: none; }
	.sk-cf, .sk-orn-farolitos, .c-sk #lugares > .xv-ancho::before { animation: none !important; }
}