/* ══ 14/11 · serviço 02: as cápsulas do site antigo (gondola-capsula.css), trazidas para a cena dos serviços.
   cinco cápsulas com o filme do mascote dentro do vidro, cabos até um botão menor e mais discreto que o antigo.
   repouso: tremem de leve; mouse no botão: tremem mais; clique: os filmes rodam e um pulso dourado corre nos cabos.
   a camada aparece quando o 3D chega na formação 2 (swarm.js → GOND.vis) ══ */
.gond { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; visibility: hidden; }
.gond.vis { visibility: visible; }
.gond.on .gond-btn { pointer-events: auto; }
.gond-group { position: absolute; left: 62%; top: 47%; transform: translate(-50%, -50%) scale(calc(.94 + var(--g2, 0) * .06)); display: flex; flex-direction: column; align-items: center; }
.gond-row { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: clamp(14px, 1.8vw, 30px); }
.gond .gbox { position: relative; flex: none; width: clamp(84px, 8.2vw, 132px); aspect-ratio: 560 / 1297;
  translate: 0 calc((1 - var(--g2, 0)) * (14px + var(--i) * 5px)); }
/* o vidro: medido na imagem (1,4% / 16,4% / 97,1% / 69%) */
.gond .gbox-body { position: absolute; left: 1.4%; top: 16.4%; width: 97.1%; height: 69%; border-radius: 4px; overflow: hidden; background: #0a1224; }
.gond .gbox-body video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; display: block; }
.gond .gbox-body::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(170, 210, 255, .12), transparent 22%, transparent 78%, rgba(170, 210, 255, .09)); }
.gond .gcap-shell { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; user-select: none; -webkit-user-drag: none;
  filter: drop-shadow(0 16px 20px rgba(2, 5, 14, .55)); transition: filter .6s ease; }
/* quem está preso empurra o vidro */
.gond .gbox.ph-1 { animation: gd-trem1 .55s linear calc(var(--i) * -.13s) infinite; }
.gond .gbox.ph-2 { animation: gd-trem2 .16s linear calc(var(--i) * -.05s) infinite; }
.gond .gbox.ph-3 { animation: gd-settle .55s cubic-bezier(.3, 1.6, .5, 1) 1; }
.gond .gbox.ph-3 .gcap-shell { filter: drop-shadow(0 16px 20px rgba(2, 5, 14, .55)) drop-shadow(0 0 18px rgba(255, 214, 140, .28)); }
@keyframes gd-trem1 { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-1px, .6px) rotate(-.5deg); } 50% { transform: translate(1px, -.5px) rotate(.45deg); } 75% { transform: translate(-.6px, .9px) rotate(.35deg); } }
@keyframes gd-trem2 { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-2.2px, 1.2px) rotate(-1.2deg); } 50% { transform: translate(2px, -1.1px) rotate(1.1deg); } 75% { transform: translate(-1.3px, 1.8px) rotate(.8deg); } }
@keyframes gd-settle { 0% { transform: scale(.96); } 55% { transform: scale(1.03); } 100% { transform: scale(1); } }

/* os cabos (gond.js desenha) */
.gond-cables { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.gond-cables .cb { fill: none; stroke: #070b16; stroke-width: 4; stroke-linecap: round; }
.gond-cables .cb-hi { fill: none; stroke: rgba(226, 204, 160, .14); stroke-width: 1.1; stroke-linecap: round; transform: translate(-1px, -1px); }
.gond-cables .cb-pulse { fill: none; stroke: #ffe3a6; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: .14 1.2; stroke-dashoffset: -1; opacity: 0; filter: drop-shadow(0 0 5px rgba(255, 214, 140, .9)); }
.gond-cables.is-pulsing .cb-pulse { animation: gd-pulse .85s cubic-bezier(.4, 0, .6, 1) both; }
@keyframes gd-pulse { 0% { stroke-dashoffset: -1; opacity: 1; } 90% { opacity: 1; } 100% { stroke-dashoffset: .16; opacity: 0; } }
.gond-cables .cb-plug { fill: #141a26; stroke: #b8935a; stroke-width: 1.2; }

/* o botão: menor que o antigo e sem o brilho vermelho; anéis finos dourados no lugar do sonar vermelho */
.gond-det { position: relative; z-index: 2; margin-top: clamp(30px, 4.4vh, 48px); display: grid; place-items: center; }
.gond-det .det-ring { position: absolute; top: 10%; width: 60%; aspect-ratio: 1; border: 1px solid rgba(232, 204, 150, .55); border-radius: 50%; opacity: 0; pointer-events: none; animation: gd-sonar 3s ease-out infinite; }
.gond-det .det-ring-2 { animation-delay: 1.5s; }
@keyframes gd-sonar { 0% { transform: scale(.75); opacity: 0; } 20% { opacity: .45; } 100% { transform: scale(1.6); opacity: 0; } }
.gond-btn { position: relative; width: clamp(72px, 6.6vw, 104px); padding: 0; border: 0; background: none; cursor: pointer; pointer-events: none;
  filter: drop-shadow(0 8px 14px rgba(2, 5, 14, .5)); transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), filter .25s ease; }
.gond-btn .gb-float { display: grid; place-items: center; animation: gd-float 3.6s ease-in-out infinite; }
.gond-btn .gb-float img { grid-area: 1 / 1; width: 100%; height: auto; display: block; pointer-events: none; transition: opacity .07s linear; }
.gond-btn .gb-down { opacity: 0; }
@keyframes gd-float { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-4px) rotate(1deg); } }
.gond-btn:hover { transform: scale(1.06); filter: drop-shadow(0 8px 14px rgba(2, 5, 14, .5)) drop-shadow(0 0 16px rgba(255, 120, 90, .28)); }
.gond-btn:hover .gb-float { animation-play-state: paused; }
.gond-btn:active { transform: scale(.95) translateY(3px); }
.gond-btn:focus-visible { outline: 1px solid rgba(232, 204, 150, .8); outline-offset: 6px; border-radius: 8px; }
.gond-det.is-down .gond-btn { transform: translateY(3px); pointer-events: none; }
.gond-det.is-down .gb-float { animation: none; }
.gond-det.is-down .gb-up { opacity: 0; }
.gond-det.is-down .gb-down { opacity: 1; }
.gond-det.is-down .det-ring { animation: none; opacity: 0; }
.gond .det-label { margin: .55rem 0 0; display: grid; place-items: center; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(226, 204, 160, .7); }
.gond .det-label > span { grid-area: 1 / 1; white-space: nowrap; transition: opacity .15s; }
.gond .dl-b, .gond .dl-c { opacity: 0; }
.gond-det:has(.gond-btn:hover):not(.is-again):not(.is-down) .dl-a { opacity: 0; }
.gond-det:has(.gond-btn:hover):not(.is-again):not(.is-down) .dl-b { opacity: 1; color: #f3ecdc; }
.gond-det.is-down .dl-a, .gond-det.is-again .dl-a { opacity: 0; }
.gond-det.is-again:not(.is-down) .dl-c { opacity: 1; }

/* celular: as cinco numa fileira no alto da área livre, o botão logo abaixo, tudo acima da legenda */
@media (max-width: 760px) {
  .gond-group { left: 50%; top: max(60px, 10svh); transform: translateX(-50%) scale(calc(.94 + var(--g2, 0) * .06)); transform-origin: 50% 0; }
  .gond-row { gap: 7px; }
  .gond .gbox { width: min(17.6vw, 78px); }
  .gond-det { margin-top: 26px; }
  .gond-btn { width: 66px; }
  .gond-cables .cb { stroke-width: 3; }
  .gond .det-label { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .gond .gbox, .gond-btn .gb-float, .gond-det .det-ring { animation: none !important; }
  .gond-cables.is-pulsing .cb-pulse { animation: none; }
}