/* ════════════════════════════════════════════════════════════════════
   WOW LAYER — Valdecamellas · capa creativa global
   Cursor sumiller · revelados tipográficos · magnetismo · grano ·
   hilo de progreso · mapa pergamino · ceremonia de la botella.
   Vanilla CSS, compatible file://, respeta prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════════ */

:root {
    --wow-gold: #B89760;
    --wow-wine: #6E1F25;
    --wow-ink: #1a1a1a;
    --wow-ivory: #F8F5EB;
}

/* ── 1 · CURSOR SUMILLER ──────────────────────────────────────────── */
/* El cursor nativo solo se oculta cuando el cursor wow está ACTIVO
   (primer mousemove recibido), nunca antes. */
body.wow-cursor-active,
body.wow-cursor-active a,
body.wow-cursor-active button,
body.wow-cursor-active label,
body.wow-cursor-active [role="button"] {
    cursor: none;
}
/* Los campos de texto conservan el caret nativo */
body.wow-cursor-active input,
body.wow-cursor-active textarea,
body.wow-cursor-active select {
    cursor: auto;
}

.wow-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100010;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease;
}
body.wow-cursor-active .wow-cursor { opacity: 1; }

/* Tinta con filo blanco: contraste garantizado sobre CUALQUIER fondo
   (claro u oscuro), sin depender de mix-blend-mode. */
.wow-cursor-dot {
    position: fixed;
    top: -3.5px;
    left: -3.5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--wow-ink);
    box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .9);
    will-change: transform;
}

.wow-cursor-ring {
    position: fixed;
    top: -21px;
    left: -21px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid rgba(26, 26, 26, .6);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .65),
                inset 0 0 0 1px rgba(255, 255, 255, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
    transition: width .35s cubic-bezier(.22, 1, .36, 1),
                height .35s cubic-bezier(.22, 1, .36, 1),
                top .35s cubic-bezier(.22, 1, .36, 1),
                left .35s cubic-bezier(.22, 1, .36, 1),
                border-color .35s ease,
                background-color .35s ease;
}

/* Sobre elemento interactivo: el anillo respira y se dora */
body.wow-cursor-hover .wow-cursor-ring {
    width: 64px;
    height: 64px;
    top: -32px;
    left: -32px;
    border-color: var(--wow-gold);
    background: rgba(184, 151, 96, .14);
}
body.wow-cursor-hover .wow-cursor-dot {
    background: var(--wow-gold);
    box-shadow: 0 0 0 1.5px rgba(26, 26, 26, .35);
}

/* Con etiqueta contextual: cápsula legible */
.wow-cursor-label {
    font-family: 'Quicksand', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--wow-ink);
    opacity: 0;
    white-space: nowrap;
    transition: opacity .25s ease;
}
body.wow-cursor-label-on .wow-cursor-ring {
    width: 88px;
    height: 88px;
    top: -44px;
    left: -44px;
    border-color: var(--wow-gold);
    background: rgba(248, 245, 235, .94);
    box-shadow: 0 4px 18px rgba(26, 26, 26, .18);
    backdrop-filter: blur(2px);
}
body.wow-cursor-label-on .wow-cursor-label { opacity: 1; }
body.wow-cursor-label-on .wow-cursor-dot { opacity: 0; }

/* Pulsación */
body.wow-cursor-down .wow-cursor-ring { transform: scale(.82); }

/* ── 2 · REVELADOS TIPOGRÁFICOS ───────────────────────────────────── */
.wow-split { --wd: 0; }
.wow-w {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: .08em;
    margin-bottom: -.08em;
}
.wow-w > span {
    display: inline-block;
    transform: translateY(118%) rotate(.6deg);
    transition: transform 1.15s cubic-bezier(.22, 1, .22, 1);
    transition-delay: calc(var(--wd) * 60ms);
    will-change: transform;
}
.wow-in .wow-w > span { transform: translateY(0) rotate(0deg); }

.wow-fade {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .95s ease, transform 1.05s cubic-bezier(.22, 1, .22, 1);
    transition-delay: var(--wfd, 0ms);
    will-change: opacity, transform;
}
.wow-fade.wow-in {
    opacity: 1;
    transform: translateY(0);
}

/* ── 3 · GRANO DE PELÍCULA ────────────────────────────────────────── */
.wow-grain {
    position: fixed;
    inset: -100%;
    z-index: 99990;
    pointer-events: none;
    opacity: .038;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.74' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: wowGrain 1.4s steps(7) infinite;
}
@keyframes wowGrain {
    0%   { transform: translate(0, 0); }
    14%  { transform: translate(-3%, 2%); }
    28%  { transform: translate(2%, -4%); }
    42%  { transform: translate(-4%, -2%); }
    56%  { transform: translate(3%, 3%); }
    70%  { transform: translate(-2%, 4%); }
    84%  { transform: translate(4%, -3%); }
    100% { transform: translate(0, 0); }
}

/* ── 4 · HILO DE PROGRESO ─────────────────────────────────────────── */
.wow-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    z-index: 99995;
    pointer-events: none;
    background: linear-gradient(90deg, var(--wow-gold), var(--wow-wine));
    transform: scaleX(0);
    transform-origin: 0 50%;
    will-change: transform;
}

/* ── 5 · MAPA PERGAMINO (contacto · Leaflet) ──────────────────────── */
.leaflet-tile {
    filter: sepia(.30) saturate(.58) contrast(.92) brightness(1.05) !important;
}
.leaflet-container::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 500;
    box-shadow: inset 0 0 130px rgba(110, 31, 37, .16),
                inset 0 0 45px rgba(184, 151, 96, .22);
}

/* ── 6 · CEREMONIA DE LA BOTELLA (wines) ──────────────────────────── */
.wines-cards-row { perspective: 1400px; }

.wine-card.wow-card {
    opacity: 0;
    transform: translateY(46px);
    transition: opacity 1s ease, transform 1.15s cubic-bezier(.22, 1, .22, 1);
    transition-delay: calc(var(--wi, 0) * 110ms);
}
.wine-card.wow-card.wow-in {
    opacity: 1;
    transform: translateY(0);
}
/* Una vez dentro, el tilt JS toma el control del transform */
.wine-card.wow-card.wow-tilt-on {
    transition: opacity 1s ease, box-shadow .45s ease;
    transform-style: preserve-3d;
    will-change: transform;
}

.wine-card .wow-sheen {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    background: linear-gradient(105deg,
        transparent 38%,
        rgba(255, 255, 255, .30) 50%,
        rgba(255, 244, 214, .16) 56%,
        transparent 66%);
    transform: translateX(-130%);
    transition: opacity .4s ease;
    will-change: transform;
}
.wine-card:hover .wow-sheen { opacity: 1; }

.wine-card .wine-card-bottle img {
    transition: filter .5s ease;
}
.wine-card:hover .wine-card-bottle img {
    filter: drop-shadow(0 26px 22px rgba(26, 26, 26, .28));
}

/* ── 7 · MAGNETISMO ───────────────────────────────────────────────── */
.wow-magnetic {
    display: inline-block;
    will-change: transform;
}

/* ── 8 · CEREMONIA DE TINTA (popups) ──────────────────────────────── */

/* Salpicadura orgánica en el punto del clic */
.wow-ink-splash {
    position: fixed;
    z-index: 100020;
    width: 260px;
    height: 260px;
    margin: -130px 0 0 -130px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(closest-side,
        rgba(26, 26, 26, .50),
        rgba(110, 31, 37, .30) 52%,
        rgba(184, 151, 96, .18) 64%,
        transparent 72%);
    filter: url(#wowInkFilter);
    transform: scale(0);
    will-change: transform, opacity;
}

/* Con la ceremonia activa, el viejo slide de mitades queda anulado:
   la floración de tinta es quien revela el popup. */
body.wow-ceremony .popup_slide.popup-entering .popup-half-img,
body.wow-ceremony .popup_slide.popup-entering .popup-half-txt,
body.wow-ceremony .popup_slide.popup-visible .popup-half-img,
body.wow-ceremony .popup_slide.popup-visible .popup-half-txt,
body.wow-ceremony .popup_slide.popup-exiting .popup-half-img,
body.wow-ceremony .popup_slide.popup-exiting .popup-half-txt {
    transform: none !important;
    transition: none !important;
}
/* El contenedor de tarjetas tampoco se desliza en bloque:
   las tarjetas caen una a una vía JS (naipes). */
body.wow-ceremony #wineryCards { transition: none; }
body.wow-ceremony #wineryCards.cards-exit { transform: none; }

/* Ken Burns sobre la foto del popup mientras florece la tinta */
.popup_slide.wow-ink-open .popup-half-img img {
    animation: wowKenBurns 2.4s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes wowKenBurns {
    from { transform: scale(1.14); }
    to   { transform: scale(1); }
}

/* Overlay del viñedo: sin doble fundido mientras la tinta revela */
.fs-overlay.fs-active.wow-ink-open {
    transition: none;
    opacity: 1;
}

/* ── 9 · TARJETAS WINERY: iconos que se dibujan ───────────────────────
   (sin levantamiento de "card" ni sombras: Eduardo no quiere ver el
   marco del botón — el hover lo cuentan el icono y la acuarela) ── */

/* LOS BOTONES SON INMATABLES POR CONSTRUCCIÓN.
   Sin popup abierto (el motor pone .wow-popup-open en el body cuando
   lo hay), estas reglas !important ganan a cualquier escritura inline,
   bucle rAF o reemplazo de nodos. El fantasma puede escribir lo que
   quiera: la cascada lo ignora. */
body.wow-ceremony:not(.wow-popup-open) #wineryCards {
    display: flex !important;
    transform: none !important;
    opacity: 1 !important;
}
body.wow-ceremony:not(.wow-popup-open) #wineryCards .winery-card {
    opacity: 1 !important;
    transform: none !important;
}
body.wow-ceremony.wow-popup-open #wineryCards {
    display: none !important;
}

/* Los popups nunca muestran barra de scroll (el contenido entra
   animado y la barra parpadeaba); con rueda se puede desplazar igual */
body.wow-ceremony .popup_slide,
body.wow-ceremony .popup_slide * {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
body.wow-ceremony .popup_slide::-webkit-scrollbar,
body.wow-ceremony .popup_slide *::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}
.winery-card .card-icon path,
.winery-card .card-icon line,
.winery-card .card-icon circle {
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}
.winery-card:hover .card-icon path,
.winery-card:hover .card-icon line,
.winery-card:hover .card-icon circle {
    animation: wowSelfDraw 1s cubic-bezier(.5, 0, .3, 1) forwards;
}
.winery-card:hover .card-icon *:nth-child(2) { animation-delay: .12s; }
.winery-card:hover .card-icon *:nth-child(3) { animation-delay: .24s; }
.winery-card:hover .card-icon *:nth-child(4) { animation-delay: .36s; }
.winery-card:hover .card-icon *:nth-child(5) { animation-delay: .46s; }
.winery-card:hover .card-icon *:nth-child(6) { animation-delay: .56s; }
@keyframes wowSelfDraw {
    from { stroke-dashoffset: 1; }
    to   { stroke-dashoffset: 0; }
}
.winery-card .card-more .arr {
    display: inline-block;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.winery-card:hover .card-more .arr { transform: translateX(7px); }

/* ── 10 · TERROIR: polen dorado sobre el mapa ─────────────────────── */
.wow-pollen {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 30;
    mix-blend-mode: multiply;
}

/* ── 10b · (La Cata se retiró a petición de Eduardo: las botellas
       conservan su flujo original hacia la ficha de cada vino) ──────── */

/* ── 10c · HUEVO DE PASCUA: 1963 ──────────────────────────────────── */
.wow-egg {
    position: fixed;
    inset: 0;
    z-index: 100005;
    background: #F4EFDF;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5vh 6vw;
    opacity: 0;
    transition: opacity .7s ease;
    cursor: pointer;
    overflow-y: auto;
}
.wow-egg::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 180px rgba(90, 70, 40, .35);
}
.wow-egg.on { opacity: 1; }
.wow-egg-paper {
    max-width: 640px;
    text-align: center;
    position: relative;
}
.wow-egg-eyebrow {
    display: block;
    font-family: 'Quicksand', sans-serif;
    font-size: 10px;
    letter-spacing: .34em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--wow-gold);
    margin-bottom: 14px;
}
.wow-egg h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    font-size: clamp(30px, 4.6vw, 52px);
    line-height: 1.08;
    color: var(--wow-ink);
    margin: 0 0 14px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 1s ease .15s, transform 1.1s cubic-bezier(.22,1,.36,1) .15s;
}
.wow-egg.on h2 { opacity: 1; transform: translateY(0); }
.wow-egg-lead {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 17px;
    color: rgba(26, 26, 26, .7);
    margin: 0 0 34px;
    opacity: 0;
    transition: opacity 1s ease .45s;
}
.wow-egg.on .wow-egg-lead { opacity: 1; }
.wow-egg-sigs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 30px;
    margin-bottom: 38px;
}
.wow-egg-sigs span {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 21px;
    color: #2c2418;
    transform: rotate(var(--er, 0deg)) translateY(10px);
    opacity: 0;
    filter: blur(2px);
    transition: opacity 1.1s ease var(--ed, 0ms),
                transform 1.1s cubic-bezier(.22,1,.36,1) var(--ed, 0ms),
                filter 1.1s ease var(--ed, 0ms);
    border-bottom: 1px solid rgba(44, 36, 24, .35);
    padding-bottom: 2px;
}
.wow-egg.on .wow-egg-sigs span {
    opacity: 1;
    transform: rotate(var(--er, 0deg)) translateY(0);
    filter: blur(0);
}
.wow-egg-seal {
    width: 86px;
    height: 86px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #8a2c34, #5d161e 70%);
    color: #f2dfc8;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 22px;
    letter-spacing: .1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(60, 20, 24, .45),
                inset 0 0 0 4px rgba(242, 223, 200, .25);
    transform: scale(0) rotate(-12deg);
    transition: transform .7s cubic-bezier(.34, 1.56, .64, 1) 3.6s;
}
.wow-egg-seal small {
    font-size: 11px;
    letter-spacing: .28em;
}
.wow-egg.on .wow-egg-seal { transform: scale(1) rotate(-6deg); }
.wow-egg-hint {
    font-family: 'Quicksand', sans-serif;
    font-size: 9px;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: rgba(26, 26, 26, .45);
    opacity: 0;
    transition: opacity 1s ease 4.4s;
}
.wow-egg.on .wow-egg-hint { opacity: 1; }

/* ── 10d · LA CARTA A INÉS (concierge) ────────────────────────────── */
.ines-letter {
    position: relative;
    margin: 38px 0 30px;
    padding: 34px 38px 30px;
    background: #FBF7EC;
    border: 1px solid rgba(184, 151, 96, .45);
    box-shadow: 0 16px 44px rgba(26, 26, 26, .08),
                0 2px 8px rgba(26, 26, 26, .05);
    font-family: 'Cormorant Garamond', Georgia, serif;
    color: #2c2418;
    transform: rotate(-.4deg);
}
.ines-letter.il-waiting { opacity: 0; transform: rotate(-.4deg) translateY(26px); }
.ines-letter.il-on {
    opacity: 1;
    transform: rotate(-.4deg) translateY(0);
    transition: opacity 1s ease, transform 1.1s cubic-bezier(.22, 1, .36, 1);
}
.ines-letter .il-salutation {
    font-size: 24px;
    font-style: italic;
    margin: 0 0 12px;
}
.ines-letter .il-body {
    font-size: 18.5px;
    font-style: italic;
    line-height: 1.75;
    margin: 0 0 16px;
    max-width: 56ch;
}
.ines-letter .il-close {
    font-size: 16.5px;
    font-style: italic;
    margin: 0 0 4px;
    color: rgba(44, 36, 24, .8);
}
.ines-letter .il-sig {
    font-size: 21px;
    font-style: italic;
    margin: 0;
    min-height: 28px;
    color: #1a1a1a;
}
.ines-letter em {
    font-style: italic;
    color: rgba(110, 31, 37, .5);
    border-bottom: 1px dotted rgba(184, 151, 96, .8);
    padding: 0 2px;
    letter-spacing: .04em;
    transition: color .5s ease;
}
.ines-letter em.il-ink {
    color: #6E1F25;
    border-bottom-color: rgba(110, 31, 37, .45);
}
.ines-letter em.il-fresh {
    animation: ilInk 1s ease both;
}
@keyframes ilInk {
    from { filter: blur(2.5px); opacity: .2; }
    to   { filter: blur(0);     opacity: 1; }
}
.ines-letter .il-seal {
    position: absolute;
    top: -22px;
    right: 26px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #8a2c34, #5d161e 70%);
    color: #f2dfc8;
    font-size: 15px;
    letter-spacing: .08em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: rotate(8deg);
    box-shadow: 0 5px 14px rgba(60, 20, 24, .4),
                inset 0 0 0 3px rgba(242, 223, 200, .22);
}
.ines-letter .il-seal small {
    font-size: 8.5px;
    letter-spacing: .26em;
}
@media (max-width: 640px) {
    .ines-letter { padding: 26px 22px 24px; }
    .ines-letter .il-body { font-size: 16.5px; }
}

/* ── 10e · EL SILENCIO: barra espaciadora = solo el paisaje ───────── */
body.wow-silence header,
body.wow-silence nav,
body.wow-silence footer,
body.wow-silence .menu-container,
body.wow-silence .menu-mobile,
body.wow-silence .wow-progress,
body.wow-silence .wow-cursor,
body.wow-silence .tw-header,
body.wow-silence .tw-index,
body.wow-silence .tw-tour,
body.wow-silence .tw-sound,
body.wow-silence .tw-compass,
body.wow-silence .tw-weather,
body.wow-silence .tw-hint,
body.wow-silence .tw-panel,
body.wow-silence .tw-marker,
body.wow-silence .tw-town,
body.wow-silence main h1,
body.wow-silence main h2,
body.wow-silence main h3,
body.wow-silence main p,
body.wow-silence main a,
body.wow-silence main button {
    opacity: 0 !important;
    transition: opacity .8s ease !important;
    pointer-events: none !important;
}

/* ── 10f · VENDIMIA ─────────────────────────────────────────────────
   El chip de la cuenta de la vendimia ya no vive en la portada: se mudó al
   parte del viñedo, donde abre la hoja. Su estilo está en css/parte.css,
   con la clase .pa-harvest. Aquí solo queda el sitio. */

/* ── 10g · MARCAPÁGINAS del cuaderno ──────────────────────────────── */
.wow-ribbon {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-110%);
    z-index: 9500;
    background: var(--wow-wine);
    color: #F2DFC8;
    border: none;
    border-bottom: 2px solid var(--wow-gold);
    padding: 13px 26px 11px;
    font-family: 'Quicksand', sans-serif;
    font-size: 10px;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    transition: transform .8s cubic-bezier(.22, 1, .36, 1);
    box-shadow: 0 10px 26px rgba(26, 26, 26, .25);
}
.wow-ribbon em {
    font-style: normal;
    color: var(--wow-gold);
}
.wow-ribbon.on { transform: translateX(-50%) translateY(0); }

/* ── 10h · EX-LIBRIS en el huevo 1963 ─────────────────────────────── */
.wow-egg-sigs span.mine {
    color: #6E1F25;
    border-bottom-color: rgba(110, 31, 37, .7);
}
.wow-egg-mine {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 15px;
    color: rgba(110, 31, 37, .85);
    margin: 0 0 10px;
    opacity: 0;
    transition: opacity 1s ease 4s;
}
.wow-egg.on .wow-egg-mine { opacity: 1; }

/* ── 10i · DETALLES DE REVIEW ─────────────────────────────────────── */
::selection {
    background: rgba(110, 31, 37, .9);
    color: #F8F5EB;
}
:focus-visible {
    outline: 2px solid var(--wow-gold);
    outline-offset: 3px;
}

/* ── 11 · ACCESIBILIDAD ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .wow-grain { animation: none; }
    .wow-w > span,
    .wow-fade,
    .wine-card.wow-card {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════
   HUEVO DE PASCUA · EL VÍDEO DE MARIANO
   Se teclea "mariano" en cualquier página. Vídeo a pantalla completa,
   en bucle, con el rótulo entrando después de que la imagen se asiente.
   ═══════════════════════════════════════════════════════════════════ */
.wow-egg-film{position:fixed;inset:0;z-index:100000;background:#000;
  display:block;opacity:0;visibility:hidden;cursor:pointer;
  transition:opacity 1.1s cubic-bezier(.22,1,.36,1),visibility 0s 1.1s}
.wow-egg-film.on{opacity:1;visibility:visible;transition:opacity 1.4s cubic-bezier(.22,1,.36,1),visibility 0s 0s}

.wef-stage{position:absolute;inset:0;overflow:hidden}
.wef-video{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.06);opacity:.001;
  transition:transform 2.6s cubic-bezier(.22,1,.36,1),opacity 1.6s ease}
.wow-egg-film.on .wef-video{transform:scale(1);opacity:1}

.wef-vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,transparent 38%,rgba(0,0,0,.42) 78%,rgba(0,0,0,.82) 100%)}
/* El margen era -120%: la capa salia a 14,6 megapixeles en una pantalla
   de 1400x900 —once veces y media— y con mix-blend-mode encima, que
   obliga a mezclarla con el video en cada fotograma. De ahi los golpes.
   La animacion solo la mueve un 5%, asi que con un 8% sobra. */
.wef-grain{position:absolute;inset:-8%;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  will-change:transform;backface-visibility:hidden;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:wefGrain 1.05s steps(3) infinite}
@keyframes wefGrain{0%{transform:translate(0,0)}25%{transform:translate(-5%,3%)}
  50%{transform:translate(4%,-5%)}75%{transform:translate(-3%,-3%)}100%{transform:translate(0,0)}}

.wef-caption{position:absolute;left:0;right:0;bottom:11vh;text-align:center;color:#fff;
  pointer-events:none;padding:0 6vw}
.wef-eyebrow{display:block;font-family:'Quicksand',sans-serif;font-size:10px;letter-spacing:.42em;
  text-transform:uppercase;color:rgba(255,255,255,.62);
  opacity:0;transform:translateY(12px);transition:opacity 1s ease 1.2s,transform 1s cubic-bezier(.22,1,.36,1) 1.2s}
.wef-name{font-family:bigmoore,'Cormorant Garamond',Georgia,serif;font-weight:400;
  font-size:clamp(44px,7vw,96px);line-height:1;margin:.16em 0 0;letter-spacing:.02em;
  opacity:0;transform:translateY(22px);transition:opacity 1.2s ease 1.45s,transform 1.2s cubic-bezier(.22,1,.36,1) 1.45s}
.wef-line{margin:1.1em auto 0;max-width:32ch;font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic;font-size:clamp(14px,1.5vw,19px);line-height:1.7;color:rgba(255,255,255,.86);
  opacity:0;transform:translateY(14px);transition:opacity 1.2s ease 1.9s,transform 1.2s cubic-bezier(.22,1,.36,1) 1.9s}
.wow-egg-film.on .wef-eyebrow,
.wow-egg-film.on .wef-name,
.wow-egg-film.on .wef-line{opacity:1;transform:none}


.wef-hint{position:absolute!important;left:0;right:0;bottom:30px;text-align:center;
  font-family:'Quicksand',sans-serif;font-size:9px;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(255,255,255,.4);opacity:0;transition:opacity 1s ease 2.6s}
.wow-egg-film.on .wef-hint{opacity:1}

@media (max-width:700px){
  .wef-caption{bottom:14vh}
}
@media (prefers-reduced-motion:reduce){
  .wef-grain{display:none}
  .wef-video{transform:none!important}
}