/* ============================================================
   SailingDevs · Emblema 3D del hero y control de sonido
   ============================================================ */

.emblem {
  --size: clamp(160px, 17vw, 268px);
  width: var(--size);
  margin-inline: auto;
  /* el volumen se construye en 2D: nada rota en 3D, así los bordes no se dentan */
  filter: drop-shadow(0 16px 22px rgba(10, 20, 50, .16));
}

.emblem__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 408 / 574;
  animation: emFloat 9s var(--ease-soft) infinite;
}

.em__edge,
.em__face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  shape-rendering: geometricPrecision;
}

/* --- el canto: la silueta sólida, apenas desplazada bajo la cara --- */
.em__edge {
  translate: calc(var(--i) * -1.1px) calc(var(--i) * 1px);
  fill: color-mix(in srgb, var(--blue-700) calc(26% + var(--i) * 20%), var(--ink));
  opacity: calc(1 - var(--i) * .2);
}

.em__face { fill: url(#emCara); }
.em__face .em__water { fill: var(--blue-600); }

/* --- circuito eléctrico: los nodos del logo laten y un pulso los recorre --- */
.em__circuit { pointer-events: none; }

.em__node {
  fill: none;
  stroke: var(--blue-500);
  stroke-width: 3;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: emNode 3.4s var(--ease-soft) infinite;
  animation-delay: var(--d);
}

@keyframes emNode {
  0%   { opacity: 0; scale: .5; }
  18%  { opacity: .95; }
  60%  { opacity: 0; scale: 1.8; }
  100% { opacity: 0; scale: 1.8; }
}

.em__pulse {
  fill: none;
  stroke: var(--blue-400);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-dasharray: 8 200;
  animation: emPulse 3.4s var(--ease-soft) infinite;
}

@keyframes emPulse {
  0%   { stroke-dashoffset: 8; opacity: 0; }
  12%  { opacity: 1; }
  55%  { stroke-dashoffset: -120; opacity: .9; }
  70%, 100% { opacity: 0; stroke-dashoffset: -120; }
}

/* --- destello que cruza el emblema, como luz sobre metal pulido --- */
.emblem__sheen {
  position: absolute;
  inset: -8%;
  background: linear-gradient(104deg, transparent 40%, rgba(255, 255, 255, .8) 50%, transparent 60%);
  mix-blend-mode: overlay;
  opacity: 0;
  animation: emSheen 8s var(--ease-soft) infinite;
  pointer-events: none;
}

@keyframes emFloat {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -13px; }
}

@keyframes emSheen {
  0%, 64%  { opacity: 0; translate: -38% 0; }
  72%      { opacity: .55; }
  88%, 100% { opacity: 0; translate: 38% 0; }
}

/* ============================================================
   Entrada: el barco llega navegando y el agua se levanta
   ============================================================ */
.js .emblem__stage { opacity: 0; }

.js .emblem.is-sailing .emblem__stage {
  opacity: 1;
  animation: emFloat 9s var(--ease-soft) infinite 2.2s, emSail 2.2s var(--ease-out) both;
}

@keyframes emSail {
  0%   { opacity: 0; translate: -62% 22px; rotate: -7deg; }
  55%  { opacity: 1; }
  74%  { rotate: 2.5deg; }
  100% { opacity: 1; translate: 0 0; rotate: 0deg; }
}

/* el agua aparece después, como si el barco la levantara */
.js .emblem .em__water { opacity: 0; }
.js .emblem.is-sailing .em__water { animation: emWake 1.2s var(--ease-out) 1.2s both; }

@keyframes emWake {
  0%   { opacity: 0; scale: .84 1; }
  100% { opacity: 1; scale: 1 1; }
}

@media (prefers-reduced-motion: reduce) {
  .js .emblem__stage,
  .js .emblem .em__water { opacity: 1; animation: none; }
  .emblem__stage { animation: none; }
  .emblem__sheen, .em__circuit { display: none; }
}

@media (max-width: 900px) {
  .emblem { --size: min(48vw, 240px); }
}

/* ============================================================
   Botón flotante de música
   ============================================================ */
.sound {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 18px 0 14px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .8);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--gray-200);
  box-shadow: var(--shadow-2);
  color: var(--ink);
  font-size: .86rem;
  font-weight: 600;
  opacity: 0;
  translate: 0 14px;
  transition: opacity .6s var(--ease-out), translate .6s var(--ease-out),
              box-shadow .3s, background .3s;
}

.sound.is-ready { opacity: 1; translate: 0; }
.sound:hover { background: var(--white); box-shadow: var(--shadow-3); }

/* las barras del ecualizador bailan solo mientras suena */
.sound__bars {
  display: flex;
  align-items: flex-end;
  gap: 2.5px;
  width: 18px;
  height: 16px;
}

.sound__bars i {
  flex: 1;
  height: 100%;
  border-radius: 1px;
  background: var(--blue-600);
  transform: scaleY(.3);
  transform-origin: bottom;
  transition: transform .3s var(--ease-out), background .3s;
}

.sound[aria-pressed="true"] .sound__bars i { animation: eq .9s var(--ease-soft) infinite; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(2) { animation-delay: .18s; }
.sound[aria-pressed="true"] .sound__bars i:nth-child(3) { animation-delay: .36s; }

@keyframes eq {
  0%, 100% { transform: scaleY(.28); }
  50%      { transform: scaleY(1); }
}

.sound[aria-pressed="false"] .sound__bars i { transform: scaleY(.22); background: var(--gray-300); }

@media (max-width: 560px) {
  .sound { padding: 0 14px 0 12px; font-size: .8rem; height: 42px; }
}