/* CANDADO LEGAL · capa FX #2 · fx_extra.css · 9-oct-2026
   Se apoya en tokens de v2.css (--navy --navy-2 --oro --oro-2 --oro-3 --papel --mono) y en cl-motion.css (--e-out, --e-io, --e-press, @keyframes wave).
   TODO lo animado cuelga de html.mo (la puerta existente). Sin .mo: la cinta es una lista estática y nada más.
   Sólo transform/opacity/clip. Apagar un efecto: <html data-fx-off="lantern ring tick door sello glint rip"> (ver fx_extra.js). */

/* ===== 1 · CINTA + PUERTA DE BÓVEDA (.fx-vault) ===== */
.fx-vault{position:relative;background:var(--navy-2);border-block:1px solid rgba(189,154,69,.55);padding:16px clamp(20px,4vw,48px);overflow:hidden}
.fx-tk{list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0;max-width:1100px;
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;line-height:1.4;color:var(--oro-3)}
.fx-tk li{white-space:nowrap}
.fx-tk li+li::before,.fx-tk li.cp::before{content:"\25C6";color:var(--oro-2);font-size:8px;vertical-align:2px;margin:0 clamp(14px,2vw,26px)}
.mo .fx-vault{height:clamp(60px,5.6vw,76px);padding:0;display:flex;align-items:center}
.mo .fx-tk{flex-wrap:nowrap;justify-content:flex-start;gap:0;margin:0;max-width:none;width:max-content;
  animation:fxTk var(--tkd,60s) linear infinite;animation-play-state:paused;will-change:transform}
.mo .fx-vault.on .fx-tk{animation-play-state:running}
.mo .fx-vault:hover .fx-tk{animation-play-state:paused}
.mo .fx-tk li:first-child::before{content:"\25C6";color:var(--oro-2);font-size:8px;vertical-align:2px;margin:0 clamp(14px,2vw,26px)}
@keyframes fxTk{to{transform:translate3d(calc(var(--tkw,1000px)*-1),0,0)}}
/* hojas de la puerta (las crea el JS) */
.fx-door,.fx-dial{display:none}
.mo .fx-door{display:block;position:absolute;top:0;bottom:0;width:50.2%;z-index:2;pointer-events:none;will-change:transform;
  background:repeating-linear-gradient(90deg,rgba(189,154,69,.09) 0 1px,transparent 1px 8px),linear-gradient(180deg,#183A60,#122C49 60%,#0F2A47)}
.mo .fx-door.l{left:0;transform:translate3d(calc(var(--v,0)*-101%),0,0);box-shadow:inset -2px 0 0 var(--oro-2)}
.mo .fx-door.r{right:0;transform:translate3d(calc(var(--v,0)*101%),0,0);box-shadow:inset 2px 0 0 var(--oro-2)}
.mo .fx-door::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--oro-2);opacity:.9}
.mo .fx-door.l::after{right:14px}.mo .fx-door.r::after{left:14px}
.mo .fx-dial{display:block;position:absolute;left:50%;top:50%;width:clamp(48px,4.6vw,60px);height:clamp(48px,4.6vw,60px);margin:calc(clamp(48px,4.6vw,60px)/-2) 0 0 calc(clamp(48px,4.6vw,60px)/-2);z-index:3;pointer-events:none;
  opacity:clamp(0,calc(1 - (var(--v,0) - .55)*3),1);transform:scale(calc(1 + var(--v,0)*.25));filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.fx-dial svg{display:block;width:100%;height:100%;overflow:visible}
.fx-dial .rot{transform-origin:30px 30px;transform:rotate(calc(var(--v,0)*320deg))}

/* ===== 2 · LINTERNA DEL GUILLOCHÉ (.fx-lantern) ===== */
.fx-lantern{display:none}
@media(hover:hover) and (pointer:fine){
  .mo .fx-lantern{display:block;position:absolute;left:-280px;top:-280px;width:560px;height:560px;z-index:-1;pointer-events:none;overflow:hidden;opacity:0;transition:opacity 500ms var(--e-out);will-change:transform;
    -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 18%,rgba(0,0,0,.55) 42%,transparent 70%);mask-image:radial-gradient(circle at 50% 50%,#000 18%,rgba(0,0,0,.55) 42%,transparent 70%)}
  .mo .hero.lit .fx-lantern{opacity:1}
  .fx-lantern .in{position:absolute;left:0;top:0;width:var(--hw,1440px);height:var(--hh,900px);will-change:transform}
  .fx-lantern .in::before{content:"";position:absolute;inset:0;background:radial-gradient(circle 280px at var(--lx,50%) var(--ly,50%),rgba(217,192,138,.22),transparent 70%)}
  .fx-lantern svg{position:absolute;inset:0;width:100%;height:100%;opacity:.6}
  .fx-lantern svg.b{transform:rotate(5deg) scale(1.02);opacity:.45}
  .fx-lantern svg *{stroke:#A07E2F;stroke-width:.9}
  .fx-lantern svg.b *{stroke:#BD9A45}
}

/* ===== 3 · CURSOR DE ORO (.fx-ring) ===== */
.fx-ring{display:none}
@media(hover:hover) and (pointer:fine){
  .mo .fx-ring{display:block;position:fixed;left:0;top:0;width:36px;height:36px;margin:-18px 0 0 -18px;z-index:9999;pointer-events:none;opacity:0;transition:opacity 240ms;will-change:transform}
  .mo .fx-ring.vis{opacity:1}
  .fx-ring i{display:block;width:100%;height:100%;border-radius:50%;border:1.5px solid var(--oro-2);background:rgba(189,154,69,0);
    transition:transform 280ms var(--e-out),background 280ms,border-color 280ms}
  .fx-ring.hov i{transform:scale(1.7);background:rgba(189,154,69,.14)}
  .fx-ring.dn i{transform:scale(.75);background:rgba(189,154,69,.28)}
  .fx-ring.hov.dn i{transform:scale(1.35)}
  .fx-ring.txt{opacity:0!important}
}

/* ===== 4 · BRILLO EN LA LLAVE (.fx-glint): una franja de luz cruza el latón cada 9 s ===== */
.fx-glint{display:none}
.mo .fx-glint{display:block;position:absolute;left:38%;top:50%;width:48%;height:42%;overflow:hidden;pointer-events:none;z-index:1;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent);mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent)}
.fx-glint i{position:absolute;top:0;bottom:0;left:0;width:30%;mix-blend-mode:screen;will-change:transform,opacity;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(255,236,190,.5) 38%,rgba(255,250,235,.95) 50%,rgba(255,236,190,.5) 62%,transparent);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent);mask-image:linear-gradient(180deg,transparent,#000 28%,#000 72%,transparent);
  transform:translate3d(-140%,0,0) skewX(-22deg);
  animation:fxGlintT 9s cubic-bezier(.45,0,.35,1) 3.4s infinite,fxGlintO 9s linear 3.4s infinite}
@keyframes fxGlintT{0%{transform:translate3d(-140%,0,0) skewX(-22deg)}13%,100%{transform:translate3d(380%,0,0) skewX(-22deg)}}
@keyframes fxGlintO{0%{opacity:0}3%{opacity:1}10%{opacity:1}13%,100%{opacity:0}}
.mo .hero.paused .fx-glint i{animation-play-state:paused}
@media(max-width:759px){.mo .fx-glint{left:44%;top:58%;width:36%;height:42%}}

/* ===== 5 · SELLO DEL CTA (.fx-s2): el anillo gira con el scroll y late una vez ===== */
.fx-s2{display:none}
.mo .fx-s2{display:block;position:absolute;right:clamp(20px,4vw,48px);top:0;width:clamp(116px,11vw,150px);pointer-events:none;z-index:1;opacity:0;transform:translate3d(0,18px,0) rotate(-8deg);transition:opacity 500ms var(--e-out),transform 700ms var(--e-out)}
.mo .cta-final.vis .fx-s2{opacity:1;transform:none}
.fx-s2 .cl-sello{filter:drop-shadow(0 12px 22px rgba(0,0,0,.45))}
.fx-s2 *{animation:none!important}
.fx-s2 .s-wave{opacity:0}
.fx-s2 .s-ring{transform:rotate(calc(var(--p,0)*540deg))}
.fx-s2.beat .s-in{transform-box:fill-box;transform-origin:center;animation:fxBeat 560ms var(--e-press)!important}
.fx-s2.beat .s-wave{animation:wave 900ms var(--e-out) 120ms!important}
.fx-s2.beat .s-arco{animation:arco 400ms var(--e-drop)!important}
@keyframes fxBeat{0%{transform:none}35%{transform:scale(.9)}70%{transform:scale(1.04)}100%{transform:none}}
.mo .cta-final .wrap{position:relative}
@media(max-width:759px){.mo .fx-s2{top:-62px;width:70px}}

/* ===== 6 · ONDA DORADA EN PLACAS (.fx-rip) ===== */
.fx-rip{position:absolute;border-radius:50%;pointer-events:none;z-index:0;transform:scale(0);opacity:0;
  background:radial-gradient(circle,rgba(217,192,138,.34) 0,rgba(189,154,69,.16) 45%,transparent 70%);box-shadow:0 0 0 1px rgba(189,154,69,.4);animation:fxRip 760ms var(--e-out) forwards}
@keyframes fxRip{0%{transform:scale(0);opacity:1}100%{transform:scale(1);opacity:0}}

@media(prefers-reduced-motion:reduce){.fx-ring,.fx-lantern,.fx-glint,.fx-door,.fx-dial,.fx-rip{display:none!important}}

/* linterna con CANDADOS: se encienden bajo el cursor (reemplaza la rosetón moiré) */
.fx-lantern svg.b{display:none}
.fx-lantern svg{opacity:1}
.fx-lantern svg g{stroke-opacity:.85}
.fx-lantern svg *{stroke:#BD9A45;stroke-width:1.5}