/* ══════════════════════════════════════════════════════════════════════════
   Portada de «Edita tus videos con Claude» — con la identidad de Claude.

   La ráfaga de Anthropic (su logotipo oficial) gira despacio en el centro, en
   su naranja de barro, y a su alrededor orbitan las pistas de montaje. El
   azul del Club se queda de fondo: la casa es el Club, el invitado es Claude.
   ══════════════════════════════════════════════════════════════════════════ */

:root{ --claude:#D97757; --claude-claro:#F0A68C; --claude-crema:#F0EEE6 }

.ed-esc{position:relative;width:100%;height:100%;overflow:hidden;border-radius:13px;
  perspective:820px;perspective-origin:50% 46%;
  background:
    radial-gradient(460px 300px at 50% 44%,rgba(217,119,87,.3),rgba(217,119,87,0) 66%),
    radial-gradient(380px 280px at 86% 84%,rgba(30,92,232,.34),rgba(30,92,232,0) 64%),
    radial-gradient(300px 220px at 12% 16%,rgba(232,192,96,.14),rgba(232,192,96,0) 66%),
    linear-gradient(140deg,#0a1530,#111d3a)}
/* el barrido de luz, como en el resto del dominio */
.ed-esc::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:8;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.07) 47%,transparent 60%);
  transform:translateX(-100%);animation:edBarrido 5.2s ease-in-out infinite}
@keyframes edBarrido{0%,64%{transform:translateX(-100%)}90%,100%{transform:translateX(100%)}}

.ed-mundo{position:absolute;inset:0;display:grid;place-items:center;transform-style:preserve-3d}

/* ── la ráfaga de Claude ── */
.ed-claude{position:relative;width:84px;height:84px;transform-style:preserve-3d;
  animation:edFlota 9s ease-in-out infinite;z-index:4}
.ed-claude svg{width:100%;height:100%;display:block;fill:var(--claude);
  filter:drop-shadow(0 0 26px rgba(217,119,87,.55)) drop-shadow(0 10px 22px rgba(0,0,0,.45));
  animation:edGira 26s linear infinite}
/* el halo que respira detrás */
.ed-claude::before{content:"";position:absolute;inset:-46%;border-radius:50%;
  background:radial-gradient(circle,rgba(217,119,87,.34),rgba(217,119,87,0) 62%);
  animation:edPulso 4.4s ease-in-out infinite}
@keyframes edGira{to{transform:rotate(360deg)}}
@keyframes edPulso{0%,100%{transform:scale(.9);opacity:.75}50%{transform:scale(1.08);opacity:1}}
@keyframes edFlota{0%,100%{transform:translateY(-4px) rotateX(6deg) rotateY(-5deg)}
                   50%{transform:translateY(6px) rotateX(-4deg) rotateY(5deg)}}

/* ── las pistas de montaje, orbitando ── */
.ed-orbita{position:absolute;inset:0;display:grid;place-items:center;transform-style:preserve-3d}
.ed-pista{position:absolute;left:50%;top:50%;display:flex;gap:5px;align-items:center;
  padding:5px 7px;border-radius:10px;transform-style:preserve-3d;
  background:rgba(11,19,40,.6);border:1px solid rgba(160,190,255,.16);
  box-shadow:0 10px 24px rgba(0,0,0,.4);backdrop-filter:blur(3px)}
.ed-pista.p1{width:182px;transform:translate(-50%,-50%) translate3d(-118px,-42px,70px) rotateY(20deg) rotateX(10deg);
  animation:edP1 11s ease-in-out infinite}
.ed-pista.p2{width:150px;transform:translate(-50%,-50%) translate3d(120px,-6px,30px) rotateY(-22deg) rotateX(-7deg);
  animation:edP2 13s ease-in-out infinite}
.ed-pista.p3{width:168px;transform:translate(-50%,-50%) translate3d(-14px,58px,-40px) rotateY(12deg) rotateX(-12deg);
  animation:edP3 12s ease-in-out infinite}
@keyframes edP1{0%,100%{transform:translate(-50%,-50%) translate3d(-118px,-42px,70px) rotateY(20deg) rotateX(10deg)}
                50%{transform:translate(-50%,-50%) translate3d(-110px,-48px,90px) rotateY(15deg) rotateX(7deg)}}
@keyframes edP2{0%,100%{transform:translate(-50%,-50%) translate3d(120px,-6px,30px) rotateY(-22deg) rotateX(-7deg)}
                50%{transform:translate(-50%,-50%) translate3d(112px,2px,52px) rotateY(-17deg) rotateX(-4deg)}}
@keyframes edP3{0%,100%{transform:translate(-50%,-50%) translate3d(-14px,58px,-40px) rotateY(12deg) rotateX(-12deg)}
                50%{transform:translate(-50%,-50%) translate3d(-6px,52px,-20px) rotateY(8deg) rotateX(-9deg)}}

.ed-clip{display:block;height:13px;border-radius:4px;flex:none}
.ed-clip.a{width:40px;background:linear-gradient(90deg,#2f6bff,#5c96ff)}
.ed-clip.b{width:26px;background:linear-gradient(90deg,var(--claude),var(--claude-claro))}
.ed-clip.c{width:46px;background:linear-gradient(90deg,#2fb07a,#5fd3a2)}
.ed-clip.d{width:22px;background:linear-gradient(90deg,#8b5cf6,#b39bff)}
.ed-clip.e{width:58px;background:linear-gradient(90deg,var(--claude),#e9a07f)}
.ed-clip.f{width:40px;background:linear-gradient(90deg,#c9a040,#e8c46a)}
/* la pista de audio */
.ed-onda{display:flex;gap:2.5px;align-items:center;height:15px}
.ed-onda i{display:block;width:3px;border-radius:2px;background:rgba(240,238,230,.6);
  animation:edOnda 1.25s ease-in-out infinite;animation-delay:var(--d)}
@keyframes edOnda{0%,100%{height:4px}50%{height:14px}}

/* el cabezal que recorre el montaje */
.ed-cab{position:absolute;left:50%;top:50%;width:2px;height:112px;border-radius:2px;
  transform:translate(-50%,-50%) translateZ(96px);z-index:6;
  background:linear-gradient(180deg,transparent,var(--claude-crema),transparent);
  box-shadow:0 0 14px rgba(240,238,230,.75);
  animation:edCabeza 5.4s ease-in-out infinite}
@keyframes edCabeza{0%,100%{transform:translate(-50%,-50%) translate3d(-116px,0,96px)}
                    50%{transform:translate(-50%,-50%) translate3d(116px,0,96px)}}

/* el polvo dorado del dominio */
.ed-polvo{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:radial-gradient(1.6px 1.6px at 16% 26%,rgba(232,192,96,.6),rgba(232,192,96,0)),
             radial-gradient(1.4px 1.4px at 78% 18%,rgba(217,119,87,.55),rgba(217,119,87,0)),
             radial-gradient(1.5px 1.5px at 30% 82%,rgba(232,192,96,.4),rgba(232,192,96,0)),
             radial-gradient(1.3px 1.3px at 88% 70%,rgba(120,170,255,.45),rgba(120,170,255,0)),
             radial-gradient(1.2px 1.2px at 56% 12%,rgba(240,238,230,.4),rgba(240,238,230,0))}

@media(max-width:700px){
  .ed-claude{width:74px;height:74px}
  .ed-pista.p1{width:140px}.ed-pista.p2{width:116px}.ed-pista.p3{width:128px}
}