/* ════════════════════════════════════════════════════════════════════
   LÁMINA DE LA VENDIMIA

   El efecto de plumilla no está en el color: está en que el trazo se
   dibuje. Cada línea lleva su propio guion y su desplazamiento, y lo que
   se anima es ese desplazamiento, de modo que la tinta parece salir de la
   pluma. Es una sola propiedad y va en el compositor.

   Fondo de papel, tinta sepia y un marco fino: la gramática del grabado
   de historia natural con la que ya están hechas las plumillas de la casa.
   ════════════════════════════════════════════════════════════════════ */

.pl-scrim {
    /* De estas cuatro variables cuelga toda la luz de la lámina. Las escribe
       el script a partir del tiempo: 1 es mediodía, 0 es noche cerrada. */
    --pl-luz: 1;
    --pl-lunar: 0;
    --pl-noche: 0;
    --pl-tinta: #5f5a4f;
    --pl-texto: #3f3a33;
    --pl-fecha: #6E1F25;
    /* el color del papel, que es lo que tapa la fase de la luna */
    --pl-papel: #F6F1E6;

    position: fixed;
    inset: 0;
    z-index: 11000;
    display: flex;
    /* Centrado con margin auto y no con align-items: si el contenido pasa de
       alto —y con la barra del tiempo pasa— align-items desborda por los dos
       lados y deja la lámina inalcanzable. Así se centra y se puede subir. */
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 3vh 0;
    /* El papel: dos manchas anchas muy tenues para que el fondo no sea un
       color plano de pantalla, y encima la noche, que no tapa la hoja sino
       que le quita la luz. */
    background:
        radial-gradient(120% 90% at 22% 12%, rgba(214, 200, 172, .30), transparent 60%),
        radial-gradient(100% 80% at 82% 88%, rgba(198, 186, 160, .26), transparent 62%),
        #F6F1E6;
    transition: filter .25s linear;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease, visibility 0s .5s;
}
.pl-scrim.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity .45s ease, visibility 0s 0s;
}

/* ── la hoja de papel ────────────────────────────────────────────── */
.pl-sheet {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    width: min(88vw, 540px);
    padding: 22px 28px 18px;
    border: 1px solid rgba(106, 100, 89, .3);
    outline: 1px solid rgba(106, 100, 89, .13);
    outline-offset: 7px;
    transform: scale(.985);
    transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
}
.pl-scrim.is-open .pl-sheet { transform: none; }

.pl-svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(48vh, 330px);
    /* recortado, no visible: lo que se salga del viewBox no debe pintarse
       fuera de la hoja, que es lo que hacía que el sol y la sombra se
       escaparan por los lados de la lámina */
    overflow: hidden;
}

/* ── el trazo que se dibuja ──────────────────────────────────────── */
/* el guion y el desplazamiento los mide el script para cada trazo: aqui
   solo se declara que empiezan sin dibujar */
.pl-draw { stroke-dashoffset: 9999; }
.pl-scrim.is-drawing .pl-draw {
    animation: pl-tinta 1.5s cubic-bezier(.55, .1, .3, 1) forwards;
}
@keyframes pl-tinta { to { stroke-dashoffset: 0; } }

/* las hojas entran después del sarmiento, y una detrás de la otra */
.pl-scrim.is-drawing .pl-leaf-0 { animation-delay: .75s; animation-duration: 1.35s; }
.pl-scrim.is-drawing .pl-leaf-1 { animation-delay: 1.2s;  animation-duration: 1.35s; }

/* el cielo aparece de un soplo, no se dibuja */
.pl-sky { opacity: 0; transition: opacity 1s ease .3s; }
.pl-scrim.is-drawing .pl-sky { opacity: .5; }

/* ── los granos: salen uno a uno y luego enveran ─────────────────── */
.pl-berry {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0);
    opacity: 0;
}
/* el envero tarda en pasar por cada grano, como en la cepa */
.pl-berry path { transition: fill 1.3s ease; }
.pl-scrim.is-drawing .pl-berry {
    animation: pl-grano .5s cubic-bezier(.22, 1, .36, 1) forwards;
    animation-delay: calc(1.75s + var(--i) * 22ms);
}
@keyframes pl-grano {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* ── el sol, cruzando el arco tantas veces como días quedan ──────── */
.pl-sun {
    opacity: 0;
    offset-path: path('M70 250 Q310 60 550 250');
    offset-distance: 0%;
    transition: opacity .6s ease;
}
.pl-scrim.is-drawing .pl-sun { opacity: .8; }
.pl-scrim.is-turning .pl-sun {
    animation: pl-dia var(--pl-dia, 800ms) linear 0s var(--pl-vueltas, 3) both;
}
@keyframes pl-dia {
    0%   { offset-distance: 0%;   opacity: 0; }
    12%  { opacity: .85; }
    88%  { opacity: .85; }
    100% { offset-distance: 100%; opacity: 0; }
}
/* si el navegador no conoce offset-path, el sol se queda quieto en el arco
   en lugar de aparecer en una esquina */
@supports not (offset-path: path('M0 0')) {
    .pl-sun { transform: translate(310px, 108px); }
    .pl-scrim.is-turning .pl-sun { animation: pl-dia-fallback var(--pl-dia, 800ms) linear var(--pl-vueltas, 3) both; }
    @keyframes pl-dia-fallback {
        0%, 100% { opacity: 0; }
        50%      { opacity: .85; }
    }
}

/* ── la cuenta ───────────────────────────────────────────────────── */
.pl-count {
    position: absolute;
    top: 34px;
    left: 34px;
    line-height: 1;
    opacity: 0;
    transition: opacity .7s ease .5s;
}
.pl-scrim.is-open .pl-count { opacity: 1; }
.pl-n {
    display: block;
    transition: color .3s linear;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 54px;
    color: var(--pl-texto);
    font-variant-numeric: tabular-nums;
}
/* la fecha del día que se está mirando: sin ella el avance hay que contarlo
   por los amaneceres, y cuarenta y cinco amaneceres no se cuentan */
.pl-day {
    display: block;
    margin-top: 9px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 17px;
    color: var(--pl-texto);
    opacity: 0;
    transition: opacity .6s ease;
}
.pl-scrim.is-done .pl-day { opacity: .62; }

.pl-u {
    display: block;
    margin-top: 4px;
    font-family: 'Quicksand', sans-serif;
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--pl-texto);
    opacity: .55;
}

/* la fecha espera callada y aparece cuando la cuenta llega a cero */
.pl-date {
    position: absolute;
    top: 36px;
    right: 34px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 28px;
    color: var(--pl-fecha);
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .9s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
}
.pl-scrim.is-done .pl-date { opacity: 1; transform: none; }

/* ── el pie de lámina ────────────────────────────────────────────── */
.pl-foot {
    margin-top: 14px;
    transition: opacity .8s ease, color .3s linear;
    padding-top: 13px;
    border-top: 1px solid rgba(106, 100, 89, .22);
    text-align: center;
    opacity: 0;
    transition: opacity .8s ease;
}
.pl-scrim.is-drawing .pl-foot { opacity: 1; transition-delay: 1.1s; }
.pl-fig {
    display: block;
    font-family: 'Quicksand', sans-serif;
    font-size: 8.5px;
    letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--pl-texto);
    opacity: .5;
}
.pl-name {
    display: block;
    margin-top: 5px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 26px;
    line-height: 1.1;
    color: var(--pl-texto);
}
.pl-sub {
    display: block;
    margin-top: 4px;
    font-family: 'Quicksand', sans-serif;
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--pl-texto);
    opacity: .55;
}

/* ── cómo salir ──────────────────────────────────────────────────── */
.pl-skip {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    margin: 0;
    font-family: 'Quicksand', sans-serif;
    font-size: 8.5px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(63, 58, 51, .32);
    opacity: 0;
    transition: opacity .8s ease 2.4s;
    white-space: nowrap;
}
.pl-scrim.is-open .pl-skip { opacity: 1; }





/* ── las dos hojas ───────────────────────────────────────────────────
   La cepa a la izquierda y la parcela a la derecha, como las dos planchas
   de una lámina doble. En pantallas estrechas se apilan, y entonces el
   croquis va debajo, que es su sitio natural en un cuaderno. */
.pl-stack {
    display: flex;
    /* stretch, para que las dos planchas midan lo mismo de alto: son las dos
       caras de una lámina doble y una más corta que la otra se ve mal */
    align-items: stretch;
    justify-content: center;
    gap: 20px;
    margin: auto;
    flex-wrap: nowrap;
}

.pl-sheet-plot {
    width: min(88vw, 360px);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-14px);
    transition: opacity .9s ease, transform .9s cubic-bezier(.22, 1, .36, 1),
                visibility 0s .9s;
}
.pl-scrim.is-plot .pl-sheet-plot {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .9s ease, transform .9s cubic-bezier(.22, 1, .36, 1),
                visibility 0s 0s;
}
/* el croquis crece para llenar el alto que le deja la hoja hermana */
.pl-sheet-plot .pl-plot-svg { flex: 1 1 auto; min-height: 0; }
.pl-plot-eyebrow {
    display: block;
    font-family: 'Quicksand', sans-serif;
    font-size: 8.5px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--pl-texto);
    opacity: .45;
    margin-bottom: 10px;
}
.pl-plot-svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 46vh;
    overflow: hidden;
    color: var(--pl-tinta);
}

/* la cuadrícula y la aguja llegan con el dibujo, sin dibujarse */
.pl-grid, .pl-north {
    opacity: 0;
    transition: opacity 1s ease .9s;
}
.pl-scrim.is-drawing .pl-grid { opacity: .12; }
.pl-scrim.is-drawing .pl-north { opacity: 1; }

/* ── la ficha ────────────────────────────────────────────────────────
   Ocho renglones, alineados como en un registro de campo: el rótulo a la
   izquierda en versalitas, el dato a la derecha. Nada de cajas. */
.pl-card {
    margin-top: auto;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0;
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px solid rgba(106, 100, 89, .2);
    opacity: 0;
    transition: opacity .9s ease;
}
.pl-scrim.is-plot .pl-card { opacity: 1; transition-delay: .35s; }

.pl-card dt {
    font-family: 'Quicksand', sans-serif;
    font-size: 8.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--pl-texto);
    opacity: .48;
    padding: 5px 14px 5px 0;
    white-space: nowrap;
    align-self: baseline;
}
.pl-card dd {
    margin: 0;
    padding: 5px 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 15px;
    line-height: 1.35;
    text-align: right;
    color: var(--pl-texto);
    border-bottom: 1px solid rgba(106, 100, 89, .09);
}
.pl-card dt { border-bottom: 1px solid rgba(106, 100, 89, .09); }
.pl-card dt:last-of-type, .pl-card dd:last-of-type { border-bottom: none; }

/* ── el croquis de la parcela ────────────────────────────────────────
   Entra el último, cuando la cepa ya está dibujada. Es la anotación al
   margen de una lámina, y las anotaciones se escriben al final. */
.pl-scrim.is-drawing .pl-plot .pl-draw,
.pl-scrim.is-drawing .pl-draw.pl-plot { animation-delay: 1.55s; }
.pl-north, .pl-plot text {
    opacity: 0;
    transition: opacity .9s ease 1.9s;
}
.pl-scrim.is-drawing .pl-north,
.pl-scrim.is-drawing .pl-plot text { opacity: 1; }

/* ── el paso del día ─────────────────────────────────────────────────
   No se oscurece nada. El sol cruza el cielo una vez y lo que cambia es la
   calidad de la luz: fría a primera hora, dorada al caer. El papel apenas
   se entibia; la hoja no se apaga nunca. */
.pl-sheet {
    box-shadow: 0 0 calc(70px * var(--pl-lunar)) rgba(200, 214, 234, calc(.16 * var(--pl-lunar)));
    transition: box-shadow .5s linear;
}
.pl-svg { color: var(--pl-tinta); }

/* los astros van por encima de la noche */
.pl-sun, .pl-moon {
    transition: opacity .25s linear;
}
.pl-moon { opacity: 0; }


/* ── la sombra y los astros ──────────────────────────────────────── */
.pl-sun, .pl-moon { transition: opacity .35s linear; }
.pl-moon { opacity: 0; }

/* ── lo que mira un enólogo ──────────────────────────────────────────
   El azúcar y la acidez, que es lo que de verdad decide el día. Se leen
   como dos apuntes al margen, no como un panel de instrumentos. */
.pl-must {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(106, 100, 89, .18);
    font-family: 'Quicksand', sans-serif;
    font-size: 9.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--pl-texto);
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease, visibility 0s .6s;
}
.pl-scrim.is-done .pl-must {
    opacity: .62;
    visibility: visible;
    transition: opacity .6s ease .1s, visibility 0s 0s;
}
.pl-must span { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── la barra del tiempo ──────────────────────────────────────────── */
.pl-time {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 6px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .6s ease, visibility 0s .6s;
}
.pl-scrim.is-done .pl-time {
    opacity: 1;
    visibility: visible;
    transition: opacity .6s ease .1s, visibility 0s 0s;
}
.pl-range {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    height: 20px;
    background: none;
    cursor: ew-resize;
}
.pl-range::-webkit-slider-runnable-track {
    height: 1px;
    background: rgba(106, 100, 89, .35);
}
.pl-range::-moz-range-track {
    height: 1px;
    background: rgba(106, 100, 89, .35);
}
.pl-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 11px; height: 11px;
    margin-top: -5px;
    border-radius: 50%;
    border: 1px solid rgba(106, 100, 89, .8);
    background: #F6F1E6;
    cursor: ew-resize;
}
.pl-range::-moz-range-thumb {
    width: 11px; height: 11px;
    border-radius: 50%;
    border: 1px solid rgba(106, 100, 89, .8);
    background: #F6F1E6;
    cursor: ew-resize;
}
.pl-range:focus-visible { outline: 1px solid rgba(184, 151, 96, .8); outline-offset: 4px; }

.pl-hour {
    min-width: 5ch;
    font-family: 'Quicksand', sans-serif;
    font-size: 8.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--pl-texto);
    opacity: .5;
}

/* ── lo que se puede hacer con la lámina terminada ───────────────── */
.pl-acts {
    display: flex;
    justify-content: center;
    gap: 26px;
    margin-top: 14px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1),
                visibility 0s .7s;
}
.pl-scrim.is-done .pl-acts {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .7s ease .25s, transform .7s cubic-bezier(.22, 1, .36, 1) .25s,
                visibility 0s 0s;
}
.pl-acts button {
    background: none;
    border: none;
    border-bottom: 1px solid transparent;
    padding: 3px 0;
    cursor: pointer;
    font-family: 'Quicksand', sans-serif;
    font-size: 9.5px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--pl-texto);
    opacity: .7;
    transition: color .3s ease, border-color .3s ease, opacity .3s ease;
}
.pl-acts button:hover { color: #3f3a33; border-bottom-color: rgba(106, 100, 89, .5); }
.pl-acts .pl-map:hover { color: #6E1F25; border-bottom-color: #6E1F25; }
/* la puerta de abajo: el corte de esta misma parcela */
.pl-acts .pl-soil:hover { color: #6b5a44; border-bottom-color: #6b5a44; }

/* la invitación a acabar el dibujo se retira cuando ya está acabado */
.pl-scrim.is-done .pl-skip { opacity: 0; }

/* ── pantallas estrechas ─────────────────────────────────────────── */
@media (max-width: 980px) {
    .pl-stack { flex-direction: column; align-items: center; flex-wrap: wrap; }
    .pl-sheet-plot { transform: translateY(-14px); }
    .pl-scrim.is-plot .pl-sheet-plot { transform: none; }
    .pl-sheet-plot { width: min(92vw, 540px); }
    .pl-plot-svg { max-height: 40vh; }
}
@media (max-width: 700px) {
    .pl-sheet { padding: 66px 18px 18px; width: 92vw; }
    .pl-count { top: 16px; left: 20px; }
    .pl-n { font-size: 38px; }
    .pl-date { top: 20px; right: 20px; font-size: 21px; }
    .pl-name { font-size: 21px; }
    .pl-svg { max-height: 52vh; }
}


/* ── pantallas bajas ─────────────────────────────────────────────────
   Portátiles pequeños y ventanas a media altura: la lámina se aprieta en
   lugar de salirse por abajo. */
@media (max-height: 660px) {
    .pl-sheet { padding: 14px 20px 12px; }
    .pl-svg { max-height: 40vh; }
    .pl-n { font-size: 34px; }
    .pl-date { font-size: 20px; }
    .pl-name { font-size: 20px; }
    .pl-foot { margin-top: 8px; padding-top: 8px; }
    .pl-must { margin-top: 8px; padding-top: 8px; font-size: 8.5px; }
    .pl-time { margin-top: 2px; }
    .pl-acts { margin-top: 8px; }
    .pl-skip { display: none; }
}

/* ── quien pide quietud no ve la lámina: el módulo ni la abre ────── */
@media (prefers-reduced-motion: reduce) {
    .pl-scrim { display: none; }
}