/* 15 · Olivo y Lavanda · colección Jardín.
   Un campo provenzal: lavanda, verde olivo y piedra.
   Tipografía: Gilda Display (nombres y títulos), Allura (el «&» y los acentos), Manrope (texto).
   Gesto propio: la lavanda se mece por capas con el scroll. Tres filas de espigas a distinta profundidad: cada una sube
   a su ritmo (paralaje) y se inclina según el avance; si se baja rápido, el viento las mece más fuerte (olivo.js).
   Planos: el campo al atardecer en la portada · la acuarela de olivo y lavanda detrás de los actos claros ·
   bandas de olivo y de lavanda profunda · orillas de lomas. */

.ol {
	--claro: #F4EFE4;
	--claro-2: #E8DFCD;
	--acc: #5B4C84;
	--script-c: #6E5C99;
	--banda-1: #3F4630;
	--banda-1b: #2B3021;
	--banda-2: #4D4468;
	--banda-2b: #352F4B;
	--banda-txt: #F7F3EA;
	--acc-banda: #D3C8EE;
	--banda-1-img: var(--f3);
	--banda-1-img-m: var(--f3m);
	--banda-2-img: var(--f2);
	--banda-2-img-m: var(--f2m);
	--fondo-claro: var(--f2);
	--fondo-claro-m: var(--f2m);
	--orilla-a: #B7A9D6;
	--orilla-b: #9AA66E;
	--mota: rgb(236 228 252);
	--sobre-papel: #F3EEE3;
	--sobre-solapa: #ECE5D6;
	--sello-1: #6E5C99;
	--sello-2: #3E3360;
	--forro: var(--f3);
	--velo-a: 64%;
	--velo-b: 44%;
}
.ol .jd-y, .ol .jd-titulo-sec i { font-size: 1.3em; }

/* ---------- Las espigas: tres capas que se mecen ---------- */
.ol-campo { position: absolute; left: 0; right: 0; bottom: 0; height: 44svh; z-index: 2; pointer-events: none; overflow: hidden; --inclina: .4; }
.jd-portada .ol-campo { --inclina: var(--e, 0); }
.ol-capa { position: absolute; inset: 0; will-change: transform; }
.ol-capa-3 { --flor: #C3B9E0; --flor-2: #A99BD0; --tallo: #A9B286; opacity: .7; filter: blur(.6px); translate: 0 calc(var(--inclina) * -4svh); }
.ol-capa-2 { --flor: #9D8CCB; --flor-2: #7F6CB4; --tallo: #84925A; translate: 0 calc(var(--inclina) * -9svh); }
.ol-capa-1 { --flor: #7966B0; --flor-2: #5A4790; --tallo: #5D6A38; translate: 0 calc(var(--inclina) * -16svh); }
.ol-espiga-i { position: absolute; left: var(--x); bottom: -4%; height: var(--h); width: calc(var(--h) / 3); overflow: visible; transform-origin: 50% 100%;
	rotate: calc(var(--viento, 0) * var(--g) * 2.6 + (var(--inclina) - .35) * 9deg);
	animation: ol-mece var(--d) cubic-bezier(.45, 0, .55, 1) var(--t) infinite alternate; }
.ol-capa-1 .ol-espiga-i { bottom: -10%; filter: drop-shadow(0 6px 8px rgb(40 30 60 / .18)); }
@keyframes ol-mece { from { transform: rotate(calc(var(--g) * -1)); } to { transform: rotate(var(--g)); } }
/* La portada: el campo pintado detrás y las espigas al frente; el texto queda arriba, en el cielo. */
.ol .jd-portada-pintura i { background-position: 50% 62%; }
.ol .jd-portada-pintura::after { background: linear-gradient(180deg, color-mix(in oklab, var(--claro) 40%, transparent), color-mix(in oklab, var(--claro) 58%, transparent) 30%, color-mix(in oklab, var(--claro) 30%, transparent) 60%, transparent); }
.ol .jd-escena { grid-template-rows: auto minmax(0, .5fr) auto auto minmax(0, 1.4fr); }
.ol .jd-baja { display: none; }
.ol-campo-cierre { --inclina: var(--sc-p, .4); height: 28svh; z-index: 1; }
.ol-campo-cierre .ol-capa-3 { --flor: #6F6596; --flor-2: #5E5585; --tallo: #59633F; opacity: .45; }
.ol-campo-cierre .ol-capa-2 { --flor: #8B7BBC; --flor-2: #7262A8; --tallo: #6E7B45; opacity: .5; }
.ol-campo-cierre .ol-capa-1 { --flor: #A898D8; --flor-2: #8C7AC4; --tallo: #7F8C55; opacity: .7; }
.ol .jd-cierre { padding-bottom: clamp(9rem, 22vh, 12rem); }

/* ---------- Fecha: el ramo se mece al bajar ---------- */
.ol .jd-fecha {
	--a: clamp(0, calc((var(--sc-p, 0) - 0.05) / 0.6), 1);
	--m: calc(var(--a) * var(--a) * (3 - 2 * var(--a)));
}
.ol-ramo { position: absolute; inset: 0; }
.ol-acuarela { transform-origin: 52% 88%; rotate: calc(sin(var(--m) * 3.1416 * 2) * 7deg + var(--viento, 0) * 6deg); scale: calc(.86 + var(--m) * .14); filter: drop-shadow(0 22px 26px rgb(50 40 70 / .2)); }
.ol .jd-fecha-texto .jd-dia { position: static; justify-items: start; gap: .3rem; margin-bottom: .6rem; }
.ol .jd-fecha-texto .jd-dia-sem { font-size: .74rem; }
.ol .jd-fecha-texto .jd-dia-n { font-size: clamp(6rem, 3.8rem + 7.6vw, 10.4rem); line-height: .9; }
.ol .jd-mes i { color: var(--script-c); }
.ol .jd-dia-n, .ol .jd-momento-hora, .ol .jd-faltan strong { font-variant-numeric: lining-nums; }

/* ---------- Celular ---------- */
@media (max-width: 760px) {
	.ol-campo { height: 36svh; }
	.ol .jd-fecha-texto .jd-dia { justify-items: center; margin-bottom: .4rem; }
	.ol .jd-fecha-texto .jd-dia-n { font-size: clamp(4.6rem, 3rem + 10vw, 6rem); }
	.ol .jd-fecha-figura { width: min(66vw, 32svh); }
	.ol-campo-cierre { height: 18svh; }
}

/* ---------- Movimiento reducido: el campo queda quieto y a la vista ---------- */
.quieto .ol-espiga-i { animation: none; rotate: 0deg; }
.quieto .ol-capa { translate: none; }
.quieto .ol .jd-fecha { --m: 0; }