/* ===== Walter's Luxury — capa de movimiento ===== */

/* transición entre páginas */
#app.page-in{animation:pageIn .6s cubic-bezier(.2,.7,.2,1)}
@keyframes pageIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* ---------- HERO dinámico ---------- */
.hero.dyn img{display:none}
.hero-slides{position:absolute;inset:0;z-index:0}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease}
.hero-slide.on{opacity:1}
.hero-slide img{display:block!important;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6;animation:none;transform:scale(1.12)}
.hero-slide.on img{animation:kenburns 7.5s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.12) translate3d(1.5%,1%,0)}to{transform:scale(1) translate3d(0,0,0)}}
.hero.dyn::after{z-index:1}
.hero.dyn .hero-inner{z-index:2}

.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em}
.hero h1 .w>span{display:inline-block;transform:translateY(105%);animation:wordUp .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes wordUp{to{transform:none}}
.hero .fade-up{opacity:0;transform:translateY(18px);animation:fadeUp .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes fadeUp{to{opacity:1;transform:none}}

.rotator{display:inline-grid;vertical-align:bottom;overflow:hidden;color:var(--gold);font-style:italic}
.rotator span{grid-area:1/1;transform:translateY(110%);opacity:0;transition:transform .8s cubic-bezier(.2,.8,.2,1),opacity .8s}
.rotator span.on{transform:none;opacity:1}
.rotator span.out{transform:translateY(-110%);opacity:0}

.hero-caption{position:absolute;right:32px;bottom:88px;z-index:3;color:var(--bone);text-align:right;max-width:280px}
.hero-caption a{display:block;padding:16px 20px;border:1px solid rgba(244,239,231,.25);background:rgba(22,18,15,.35);backdrop-filter:blur(6px);transition:border-color .3s,background .3s}
.hero-caption a:hover{border-color:var(--gold);background:rgba(22,18,15,.6)}
.hero-caption small{display:block;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.hero-caption b{display:block;font-family:var(--serif);font-weight:500;font-size:24px;margin:2px 0}
.hero-caption span{font-size:13px;color:#d9cfc1}
.hero-caption .cap{transition:opacity .5s,transform .5s}
.hero-caption .cap.swap{opacity:0;transform:translateY(8px)}
.hero-dots{position:absolute;left:32px;bottom:34px;z-index:3;display:flex;gap:10px}
.hero-dots button{width:46px;height:2px;background:rgba(244,239,231,.25);position:relative;overflow:hidden;padding:0}
.hero-dots button i{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left}
.hero-dots button.on i{animation:progress var(--dur,6.5s) linear forwards}
.hero-dots button.done i{transform:scaleX(1)}
@keyframes progress{to{transform:scaleX(1)}}
.scroll-cue{position:absolute;right:32px;bottom:34px;z-index:3;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--sand);display:flex;align-items:center;gap:10px}
.scroll-cue::after{content:"";width:1px;height:34px;background:linear-gradient(var(--gold),transparent);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- cinta animada ---------- */
.marquee{background:var(--cognac);color:#fff;overflow:hidden;white-space:nowrap;padding:14px 0;border-block:1px solid #7f4823}
.marquee-track{display:inline-flex;animation:marquee 32s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee span{font-family:var(--serif);font-size:22px;font-style:italic;padding:0 22px}
.marquee span.dot{font-style:normal;color:var(--gold);padding:0}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- aparición al hacer scroll ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}
.reveal-img{clip-path:inset(12% 0 12% 0);transition:clip-path 1.2s cubic-bezier(.2,.8,.2,1),opacity .9s;transition-delay:var(--d,0s)}
.reveal-img.in{clip-path:inset(0 0 0 0)}
.split .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em}
.split .w>span{display:inline-block;transform:translateY(105%);transition:transform .9s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i,0) * 60ms)}
.split.in .w>span{transform:none}

/* tarjetas: botón que sube al pasar el cursor */
.card-media::after{content:"Ver pieza  →";position:absolute;left:12px;right:12px;bottom:12px;z-index:3;background:rgba(250,247,242,.94);color:var(--ink);text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:13px;transform:translateY(130%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.card:hover .card-media::after{transform:none}
.card-info h3{background:linear-gradient(var(--cognac),var(--cognac)) 0 100%/0 1px no-repeat;transition:background-size .5s;display:inline}
.card:hover .card-info h3{background-size:100% 1px}

/* categorías: texto que se desliza */
.cat-label h3{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.cat-label h3::after{content:"→";display:inline-block;margin-left:10px;font-size:22px;opacity:0;transform:translateX(-10px);transition:all .5s}
.cat:hover .cat-label h3{transform:translateY(-6px)}
.cat:hover .cat-label h3::after{opacity:1;transform:none}

/* historia: parallax */
.story-media img{will-change:transform;transform:scale(1.15)}

/* números del oficio */
.steps b{transition:color .4s}
.steps div:hover b{color:var(--bone)}

/* producto: zoom con el cursor y cambio suave de foto */
.main-img{position:relative}
.main-img img{animation:imgIn .55s ease;transition:transform .25s ease-out}
@keyframes imgIn{from{opacity:0;transform:scale(1.03)}to{opacity:1;transform:none}}
.main-img.zooming img{transform:scale(1.9)}
.zoom-hint{position:absolute;right:14px;bottom:14px;z-index:2;font-size:10px;letter-spacing:.2em;text-transform:uppercase;background:rgba(250,247,242,.9);padding:8px 12px;pointer-events:none;transition:opacity .3s}
.main-img.zooming .zoom-hint{opacity:0}
.swatch{transition:transform .2s}
.swatch:hover{transform:scale(1.12)}

/* bolsa: rebote del contador */
.cart-count.bump{animation:bump .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes bump{0%{transform:scale(.4)}60%{transform:scale(1.35)}100%{transform:scale(1)}}
.line{animation:fadeUp .5s ease both}

/* botón WhatsApp con pulso */
.wa-float::before{content:"";position:absolute;inset:0;border-radius:50%;background:#25d366;z-index:-1;animation:pulse 2.4s ease-out infinite}
@keyframes pulse{from{transform:scale(1);opacity:.55}to{transform:scale(1.7);opacity:0}}

/* barra de progreso de lectura */
.read-bar{position:fixed;top:0;left:0;height:2px;background:var(--gold);z-index:100;transform-origin:left;transform:scaleX(0)}

@media (max-width:820px){
  .hero-caption{left:16px;right:16px;bottom:auto;top:24px;max-width:none;text-align:left}
  .hero-caption a{padding:12px 14px}
  .hero-caption b{font-size:20px}
  .hero-dots{left:16px}
  .scroll-cue{display:none}
  .card-media::after{display:none}
  .marquee span{font-size:18px}
}
@media (prefers-reduced-motion:reduce){
  .reveal,.reveal-img,.split .w>span{opacity:1!important;transform:none!important;clip-path:none!important}
}