/* ============================================================
   Ray Stage v3 — "the hero IS the sea" (Signal Lime system)
   No container at all: the whole hero section becomes the
   deep graphite-green sea; Ray swims directly on the page.
   ============================================================ */

/* --- full-bleed dark hero --- */
.hero--sea {
  width: 100%;
  max-width: none;
  padding-inline: max(48px, calc((100% - 1440px) / 2)) !important;
  background:
    radial-gradient(ellipse 72% 62% at 68% 46%, rgba(18, 103, 108, 0.32), rgba(3, 24, 27, 0) 72%),
    linear-gradient(180deg, #031216 0%, #062329 52%, #020f13 100%);
  color: #e8f2df;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.hero--sea::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(2,15,19,.84) 0%, rgba(2,15,19,.58) 34%, rgba(2,15,19,.12) 66%, transparent 100%);
}
.hero--sea .hero-instrument {
  position: static;
  min-height: 0;
  transform: none;
  display: block;
}
.hero--sea .ray-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* copy colors flipped for the sea */
.hero--sea h1 { color: #f7f9f4; }
.hero--sea h1 span {
  color: transparent;
  background: linear-gradient(105deg, #efffc0 0%, #b8f05a 34%, #a3e635 64%, #57ce52 100%);
  background-size: 180% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 10px rgba(163, 230, 53, .2));
  animation: hero-lime-gradient 5.6s ease-in-out infinite;
}
.hero--sea .hero-promise { color: #d6ded1; }
.hero--sea .hero-detail { color: rgba(232, 242, 223, 0.6); }
.hero--sea .hero-eyebrow { color: var(--signal-lime, #a3e635); }
.hero--sea .button--quiet {
  color: #f7f9f4;
  border-color: rgba(232, 242, 223, 0.28);
  background: transparent;
}
.hero--sea .button--quiet:hover { color: var(--signal-lime, #a3e635); }

/* faint drifting plankton across the sea */
.ray-stage::after {
  content: "";
  position: absolute;
  inset: -6% -4%;
  background-image:
    radial-gradient(circle 2px at 12% 78%, rgba(163, 230, 53, 0.26), transparent 100%),
    radial-gradient(circle 2px at 84% 22%, rgba(163, 230, 53, 0.22), transparent 100%),
    radial-gradient(circle 1.5px at 90% 80%, rgba(214, 222, 209, 0.18), transparent 100%),
    radial-gradient(circle 1.5px at 13% 20%, rgba(214, 222, 209, 0.14), transparent 100%),
    radial-gradient(circle 1.5px at 70% 88%, rgba(163, 230, 53, 0.18), transparent 100%);
}

/* --- rising bubbles --- */
.ray-stage__bubble {
  position: absolute;
  bottom: 8%;
  border-radius: 50%;
  border: 1.5px solid rgba(163, 230, 53, 0.38);
  background: rgba(163, 230, 53, 0.05);
  opacity: 0;
}
.ray-stage__bubble.b1 { left: 24%; width: 10px; height: 10px; }
.ray-stage__bubble.b2 { left: 58%; width: 6px; height: 6px; }
.ray-stage__bubble.b3 { left: 76%; width: 14px; height: 14px; }
.ray-stage__bubble.b4 { left: 38%; width: 5px; height: 5px; }
@media (prefers-reduced-motion: no-preference) {
  .ray-stage__bubble.b1 { animation: rayBubble 9s ease-in infinite; }
  .ray-stage__bubble.b2 { animation: rayBubble 7s 2.2s ease-in infinite; }
  .ray-stage__bubble.b3 { animation: rayBubble 11s 1.1s ease-in infinite; }
  .ray-stage__bubble.b4 { animation: rayBubble 8s 4.4s ease-in infinite; }
}

/* --- sonar arcs --- */
.ray-stage__sonar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ray-stage__video-bg {
  position: absolute;
  inset: -4%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 72%, rgba(0,0,0,.72) 92%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 72%, rgba(0,0,0,.72) 92%, transparent 100%);
}
.ray-stage__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  mix-blend-mode: normal;
  filter: saturate(1.08) contrast(1.05) brightness(1.12);
}
.ray-stage__pose { display: none; }
.ray-stage__chip, .ray-stage__dots, .ray-stage__tag, .ray-stage__sonar { z-index: 2; }
@media (prefers-reduced-motion: reduce) {
  .ray-stage__video { filter: saturate(1.04) contrast(1.03) brightness(1.08); }
}
.ray-stage__sonar path {
  fill: none;
  stroke: var(--signal-lime, #a3e635);
  stroke-width: 3;
  stroke-linecap: round;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
  .ray-stage__sonar path {
    animation: raySonar 3.2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  }
  .ray-stage__sonar .p2 { animation-delay: 0.4s; }
  .ray-stage__sonar .p3 { animation-delay: 0.8s; }
  .ray-stage[data-state="ringing"] .ray-stage__sonar path { animation-duration: 0.95s; stroke: #efffc0; }
  .ray-stage[data-state="speaking"] .ray-stage__sonar path { animation-duration: 1.7s; }
  .ray-stage[data-state="welcoming"] .ray-stage__sonar path { animation-duration: 5.5s; }
}

/* --- mascot: free swimmer on the sea --- */
.ray-stage__pose {
  position: absolute;
  left: 50%;
  top: 45%;
  height: min(58%, 360px);
  width: auto;
  max-width: 84%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
  pointer-events: none;
  filter: drop-shadow(0 30px 36px rgba(0, 0, 0, 0.45));
}
.ray-stage[data-state="gliding"]   .ray-stage__pose--glide,
.ray-stage[data-state="ringing"]   .ray-stage__pose--hover,
.ray-stage[data-state="speaking"]  .ray-stage__pose--listen,
.ray-stage[data-state="welcoming"] .ray-stage__pose--welcome {
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .ray-stage[data-state="gliding"]   .ray-stage__pose--glide,
  .ray-stage[data-state="ringing"]   .ray-stage__pose--hover,
  .ray-stage[data-state="speaking"]  .ray-stage__pose--listen {
    animation: rayFloat 3.8s ease-in-out infinite;
  }
  .ray-stage[data-state="welcoming"] .ray-stage__pose--welcome {
    animation: rayJoy 1.05s ease-in-out infinite;
  }
}

/* --- status chip + dots + tag --- */
.ray-stage__chip {
  position: absolute;
  top: 12%;
  left: 10%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 4px;
  background: rgba(163, 230, 53, 0.08);
  border: 1px solid rgba(163, 230, 53, 0.26);
  color: #e8f2df;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: auto;
  backdrop-filter: blur(6px);
}
.ray-stage__chip i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--signal-lime, #a3e635);
}
.ray-stage[data-state="ringing"] .ray-stage__chip i { background: #efffc0; }
.ray-stage[data-state="speaking"] .ray-stage__chip i { background: #d6ded1; }

.ray-stage__dots {
  position: absolute;
  top: 13%;
  right: 12%;
  display: flex;
  gap: 6px;
}
.ray-stage__dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(232, 242, 223, 0.2);
  transition: background 0.3s ease;
}
.ray-stage__dots span.on { background: var(--signal-lime, #a3e635); }
.ray-stage__tag {
  position: absolute;
  right: 12%;
  bottom: 12%;
  color: rgba(232, 242, 223, 0.5);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

@keyframes rayBubble {
  0% { transform: translateY(0) scale(0.7); opacity: 0; }
  12% { opacity: 0.85; }
  85% { opacity: 0.5; }
  100% { transform: translateY(-420px) scale(1.15); opacity: 0; }
}
@keyframes raySonar {
  0% { opacity: 0; transform: scaleX(0.78); }
  30% { opacity: 0.9; }
  100% { opacity: 0; transform: scaleX(1.08); }
}
@keyframes rayFloat {
  0%, 100% { transform: translate(-50%, -50%) translateY(0) rotate(0deg); }
  50% { transform: translate(-50%, -50%) translateY(-12px) rotate(-2deg); }
}
@keyframes rayJoy {
  0%, 100% { transform: translate(-50%, -50%) translateY(0) scale(1); }
  40% { transform: translate(-50%, -50%) translateY(-16px) scale(1.04); }
}

/* --- responsive tuning --- */
@media (max-width: 1024px) {
  .ray-stage__pose { height: min(56%, 380px); }
}
@media (max-width: 768px) {
  .hero--sea { min-height: 760px; }
  .ray-stage__pose { height: min(48%, 260px); top: 44%; }
  .ray-stage__chip { top: 8%; left: 7%; font-size: 11px; padding: 6px 11px; }
  .ray-stage__dots { top: 9%; right: 9%; }
  .ray-stage__tag { display: none; }
}