/* accionArte · encendido del inicio
   Los dos aros del logotipo entran rodando hacia el centro, encajan, cae la barra y suena el «clic» de encendido. */

.boot{display:none}
html.is-boot{overflow:hidden}
html.is-boot .boot{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;flex-direction:column;
  background:var(--grad);color:#fff;overflow:hidden;cursor:pointer;
  animation:bootOut .6s cubic-bezier(.6,0,.4,1) 3.05s forwards}
html.is-skip .boot{animation:bootOut .4s ease forwards!important}
.boot::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 46%,rgba(255,255,255,.18),transparent 70%)}
.boot::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;animation:bootFlash .55s ease-out 1.9s}

.boot-em{position:relative;width:240px;height:240px;animation:bootPress .5s cubic-bezier(.3,0,.3,1) 1.82s both}
.boot-em>div{position:absolute;inset:0}
.boot-em svg{width:100%;height:100%;overflow:visible;display:block}
.boot-em svg *{transition:none}
.boot-a{animation:rollA 1.45s cubic-bezier(.18,.72,.26,1) both}
.boot-b{animation:rollB 1.45s cubic-bezier(.18,.72,.26,1) .12s both}
.boot-s{animation:slashDrop .5s cubic-bezier(.3,1.35,.55,1) 1.32s both}
.boot-a svg,.boot-b svg,.boot-s svg{opacity:.62;animation:lit .25s ease-out 1.92s forwards}
.boot-wave{position:absolute;inset:6px;border-radius:50%;border:2px solid #fff;opacity:0;animation:wave 1s cubic-bezier(.1,.6,.3,1) 1.95s}
.boot-wave.w2{animation-delay:2.12s;border-width:1px}

.boot-word{margin-top:30px;text-align:center;line-height:1;opacity:0;animation:wordIn .7s cubic-bezier(.2,.8,.2,1) 2.2s forwards}
.boot-word b{display:block;font-size:clamp(34px,5vw,48px);font-weight:300;letter-spacing:-.02em;color:#fff}
.boot-word b span{font-weight:700}
.boot-word small{display:block;margin-top:10px;font-size:15px;font-weight:400;letter-spacing:.12em;color:rgba(255,255,255,.9)}
.boot-skip{position:absolute;right:22px;bottom:20px;font-size:13px;letter-spacing:.08em;color:rgba(255,255,255,.8);padding:8px 14px;border:1px solid rgba(255,255,255,.45);border-radius:999px;opacity:0;animation:wordIn .4s ease .5s forwards}

@keyframes rollA{
  0%{transform:translateX(-72vw) rotate(-1080deg);opacity:0}
  10%{opacity:1}
  78%{transform:translateX(12px) rotate(16deg)}
  90%{transform:translateX(-4px) rotate(-5deg)}
  100%{transform:none;opacity:1}}
@keyframes rollB{
  0%{transform:translateX(72vw) rotate(1080deg);opacity:0}
  10%{opacity:1}
  78%{transform:translateX(-10px) rotate(-14deg)}
  90%{transform:translateX(3px) rotate(4deg)}
  100%{transform:none;opacity:1}}
@keyframes slashDrop{0%{transform:translateY(-62vh);opacity:0}25%{opacity:1}100%{transform:none;opacity:1}}
@keyframes bootPress{
  0%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(255,255,255,0))}
  30%{transform:scale(.86);filter:drop-shadow(0 0 0 rgba(255,255,255,0))}
  62%{transform:scale(1.07);filter:drop-shadow(0 0 26px rgba(255,255,255,1))}
  100%{transform:scale(1);filter:drop-shadow(0 0 14px rgba(255,255,255,.75))}}
@keyframes lit{to{opacity:1}}
@keyframes wave{0%{transform:scale(.92);opacity:.95}100%{transform:scale(2.7);opacity:0}}
@keyframes bootFlash{0%{opacity:0}25%{opacity:.3}100%{opacity:0}}
@keyframes wordIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes bootOut{to{opacity:0;visibility:hidden;pointer-events:none}}

/* aros del hero: entran rodando y hacen «clic» al encajar */
.js .hero .ring,.js .hero .slash{opacity:0}
.go .hero .ring-1{opacity:1;animation:heroRollR 1.7s cubic-bezier(.16,.8,.3,1) both,spin 90s linear 1.7s infinite,ringClick 1s ease-out 1.55s}
.go .hero .ring-2{opacity:.6;animation:heroRollL 1.7s cubic-bezier(.16,.8,.3,1) .1s both,spin 70s linear 1.8s infinite reverse,ringClick 1s ease-out 1.65s}
.go .hero .slash{opacity:.85;animation:heroSlash .6s cubic-bezier(.3,1.4,.5,1) 1.25s both,float 9s ease-in-out 1.85s infinite}
@keyframes heroRollR{0%{transform:translateX(75%) rotate(560deg);opacity:0}15%{opacity:1}80%{transform:translateX(-2%) rotate(-12deg)}100%{transform:none}}
@keyframes heroRollL{0%{transform:translateX(-130%) rotate(-560deg);opacity:0}15%{opacity:.6}80%{transform:translateX(4%) rotate(12deg)}100%{transform:none}}
@keyframes heroSlash{0%{transform:rotate(36deg) translateY(-320px);opacity:0}100%{transform:rotate(36deg);opacity:.85}}
@keyframes ringClick{0%{filter:none}25%{filter:drop-shadow(0 0 16px rgba(255,255,255,.95))}100%{filter:none}}

@media (max-width:560px){.boot-em{width:150px;height:150px}.boot-skip{left:0;right:0;margin:0 auto;width:max-content}}
@media (prefers-reduced-motion:reduce){html.is-boot{overflow:auto}html.is-boot .boot{display:none}.js .hero .ring,.js .hero .slash{opacity:1}.js .hero .ring-2{opacity:.6}.js .hero .slash{opacity:.85}}
.go .hero .power .ring-1{opacity:1;animation:heroRollR 1.7s cubic-bezier(.16,.8,.3,1) both,ringClick 1s ease-out 1.55s}
.go .hero .power .slash{opacity:.85;animation:powerSlash .6s cubic-bezier(.3,1.4,.5,1) 1.25s both,floatP 9s ease-in-out 1.85s infinite}
@keyframes powerSlash{0%{transform:rotate(26deg) translateY(-320px);opacity:0}100%{transform:rotate(26deg);opacity:.85}}