/* MOVIMIENTO Y ACABADOS DE LUJO
   Todo se activa solo con la clase .motion en <html> (la añade un script en <head>),
   así la web sigue completa y visible sin JavaScript o con "reducir movimiento". */

:root{--ease-lux:cubic-bezier(.22,.61,.24,1);--ease-out:cubic-bezier(.16,1,.3,1)}

/* TRANSICIÓN SUAVE ENTRE PÁGINAS (navegadores compatibles) */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s;animation-timing-function:var(--ease-lux)}

/* HERO: MOVIMIENTO DE CÁMARA CONTINUO
   La copia del fondo entra con un zoom y después deriva sin fin, como un plano de vídeo lento.
   El contenido queda por encima. */
.motion .home-page .hero,.motion .service-document .hero{overflow:hidden}
.motion .home-page .hero::before{content:'';position:absolute;inset:0;z-index:0;background:inherit;transform-origin:62% 45%;animation:oe-hero-zoom 3.2s var(--ease-out) both,oe-hero-drift 32s ease-in-out 3.2s infinite alternate;will-change:transform}
.motion .home-page .hero-content,.motion .home-page .hero-bottom{z-index:1}
.motion .service-document .hero::after{content:'';position:absolute;inset:0;z-index:0;background:var(--hero-image) center/cover;transform-origin:60% 45%;animation:oe-hero-zoom 3.2s var(--ease-out) both,oe-hero-drift 32s ease-in-out 3.2s infinite alternate;will-change:transform}
.motion .service-document .hero::before{z-index:1}
.motion .service-document .hero-content{z-index:2}
.motion .service-document .hero-foot{z-index:3}
@keyframes oe-hero-zoom{from{transform:scale(1.09)}to{transform:scale(1)}}
@keyframes oe-hero-drift{0%{transform:scale(1)}50%{transform:scale(1.07) translate3d(-1.2%,-.6%,0)}100%{transform:scale(1.12) translate3d(-2.2%,.4%,0)}}

/* HERO: VÍDEO EN BUCLE (solo si existe assets/video/hero.mp4)
   El clip se reproduce una vez y frena hasta quedarse en su último fotograma (motion.js);
   el degradado vuelve encima con ::after. */
.hero-video{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}
.motion .home-page .hero.video-on .hero-video.is-active{opacity:1}
/* Con vídeo en escritorio: abajo el primer fotograma quieto (::before), en medio el vídeo y arriba un único
   degradado fijo (::after). El vídeo aparece sin fundido, parado en ese mismo fotograma, y solo después arranca. */
@media(min-width:701px){
  .motion .home-page .hero.has-video::before{animation:none;background:url('../video/hero-poster.jpg') center/cover}
  .motion .home-page .hero.has-video::after{content:'';position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(8,10,9,.62) 0%,rgba(12,14,13,.38) 48%,rgba(30,32,29,.10) 100%),linear-gradient(0deg,rgba(8,9,8,.30),rgba(8,9,8,.08) 60%)}
}

/* HERO: ENTRADA ESCALONADA DEL TEXTO */
.motion .hero-content>*,.motion .hero h1 span,.motion .hero-bottom,.motion .hero-foot{animation:oe-rise 1.3s var(--ease-out) both}
.motion .hero h1{animation:none}
.motion .hero-content>.eyebrow,.motion .hero-kicker{animation-delay:.35s}
.motion .hero h1 span:nth-child(1){animation-delay:.5s}
.motion .hero h1 span:nth-child(2){animation-delay:.64s}
.motion .quote{animation-delay:.85s}
.motion .hero-copy{animation-delay:.98s}
.motion .hero-actions{animation-delay:1.12s}
.motion .hero-bottom,.motion .hero-foot{animation-name:oe-fade;animation-duration:1.6s;animation-delay:1.35s}
@keyframes oe-rise{from{opacity:0;transform:translateY(22px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes oe-fade{from{opacity:0}to{opacity:1}}

/* NAVEGACIÓN: DESCIENDE AL CARGAR */
.motion .nav{animation:oe-nav-in 1.1s var(--ease-out) .15s both}
@keyframes oe-nav-in{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}

/* REVELADO AL HACER SCROLL (motion.js marca los elementos con data-reveal) */
.motion [data-reveal]{transition:opacity 1.1s var(--ease-lux),transform 1.1s var(--ease-lux);transition-delay:var(--reveal-delay,0s)}
.motion [data-reveal]:not(.is-in){opacity:0;transform:translateY(26px)}

/* FOTOS: CORTINA QUE SE ABRE + LIGERO AJUSTE DE ESCALA */
.motion [data-reveal=curtain]{transition:clip-path 1.6s var(--ease-out),background-size 2.4s var(--ease-out);transition-delay:var(--reveal-delay,0s)}
.motion [data-reveal=curtain]:not(.is-in){opacity:1;transform:none;clip-path:inset(100% 0 0 0)}
.motion [data-reveal=curtain].is-in{clip-path:inset(0 0 0 0)}

/* LÍNEAS FINAS QUE SE DIBUJAN */
.motion .list li{border-bottom-color:transparent;background:linear-gradient(var(--line),var(--line)) left bottom/0 1px no-repeat;transition:opacity 1.1s var(--ease-lux),transform 1.1s var(--ease-lux),background-size 1.4s var(--ease-lux) .2s;transition-delay:var(--reveal-delay,0s)}
.motion .list li.is-in{background-size:100% 1px}
@media(min-width:701px){
  .motion #approach .pillar+.pillar{border-left-color:transparent;background:linear-gradient(#bcbab3,#bcbab3) left top/1px 0 no-repeat;transition:opacity 1.1s var(--ease-lux),transform 1.1s var(--ease-lux),background-size 1.6s var(--ease-lux) .3s;transition-delay:var(--reveal-delay,0s)}
  .motion #approach .pillar+.pillar.is-in{background-size:1px 100%}
}

/* BOTONES: RELLENO QUE ENTRA DESDE LA IZQUIERDA */
.button{--fill:var(--ink);--fill-text:#fff;background-image:linear-gradient(var(--fill),var(--fill));background-repeat:no-repeat;background-position:left center;background-size:0 100%;transition:background-size .55s var(--ease-lux),color .4s var(--ease-lux),border-color .4s var(--ease-lux)}
.button:hover,.button:focus-visible{background-size:100% 100%;color:var(--fill-text)}
.form .button{--fill:#fff;--fill-text:var(--ink)}
.form .button:hover{border-color:var(--ink)}
.service-document .nav .nav-cta:hover{background-color:#fff}

/* ENLACES: SUBRAYADO FINO ANIMADO */
.text-link,.navlinks>a,#lifestyle .inline-list a{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:right bottom;background-size:0 1px;padding-bottom:3px;transition:background-size .5s var(--ease-lux),opacity .2s}
.text-link:hover,.navlinks>a:hover,#lifestyle .inline-list a:hover{background-position:left bottom;background-size:100% 1px}
#lifestyle .inline-list a:hover{text-decoration:none}
.text-link{background-size:100% 1px;background-position:left bottom}
.text-link:hover{animation:oe-underline .8s var(--ease-lux)}
@keyframes oe-underline{0%{background-size:100% 1px;background-position:right bottom}45%{background-size:0 1px;background-position:right bottom}46%{background-position:left bottom}100%{background-size:100% 1px;background-position:left bottom}}

/* RESPETA "REDUCIR MOVIMIENTO" DEL SISTEMA */
@media(prefers-reduced-motion:reduce){
  .motion *,.motion *::before,.motion *::after{animation:none!important;transition:none!important}
  .motion [data-reveal]:not(.is-in){opacity:1;transform:none;clip-path:none}
  @view-transition{navigation:none}
}