/* ════════════════════════════════════════════════════════════════════
   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;
}

/* Por encima de todo: también de la puerta de edad (2147483000). Si una
   capa lo tapa, el visitante se queda sin ratón, porque el nativo ya
   está oculto. */
.wow-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2147483647;
    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) ──────────────────────────── */
/* Sin `perspective` en la fila: un solo punto de fuga para tres fichas
   hacia que la de la derecha, lejos del centro, se desplazara al girar
   en vez de inclinarse. Ahora cada ficha lleva su propia perspectiva
   dentro de su `transform`, en js/wow.js. */

.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;
}

/* La mascara existe solo para recortar el barrido: suelto, se salia
   468 px por la derecha y hacia desplazable la fila de fichas. */
.wine-card .wow-sheen-mask {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 5;
}
.wine-card .wow-sheen {
    position: absolute;
    inset: 0;
    pointer-events: none;
    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}
}