/* ============================================
   NWK-BSAC Design System v2 — Effects
   Bubbles, god rays, fish, kelp, waves,
   shipwrecks, water surface
   ============================================ */

/* === Hero Section === */
.nwk-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 180px 20px 80px;
  margin-top: -130px;
  overflow: hidden;
  background: var(--abyss);
}

.nwk-hero--short {
  min-height: 60vh;
  padding: 200px 20px 60px;
  margin-top: -130px;
}

/* Dark gradient overlay */
.nwk-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(7, 25, 50, 0.3) 0%,
    rgba(11, 37, 69, 0.6) 50%,
    rgba(7, 25, 50, 0.85) 100%
  );
  z-index: 1;
}

.nwk-hero__content {
  position: relative;
  z-index: 10;
  max-width: 860px;
}

.nwk-hero__badge {
  display: inline-block;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--aqua);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  padding: 8px 24px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-lg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.nwk-hero .nwk-hero__content h1 {
  color: var(--white);
  margin-bottom: 24px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.nwk-hero .nwk-hero__content h1 .accent {
  color: var(--aqua);
}

.nwk-hero__sub {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-lg);
  max-width: 700px;
  margin: 0 auto 40px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  line-height: 1.6;
}

.nwk-hero__actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}

/* Scroll indicator */
.nwk-hero__scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: var(--white);
  animation: hero-bounce 2s var(--ease-out) infinite;
  text-decoration: none;
  opacity: 0.5;
  transition: opacity var(--duration-base);
}

.nwk-hero__scroll:hover {
  opacity: 1;
  color: var(--aqua);
}

@keyframes hero-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(10px); }
}

@media (max-width: 767px) {
  .nwk-hero {
    min-height: 85vh;
    padding: 140px 20px 60px;
  }
  .nwk-hero--short {
    min-height: 40vh;
  }
}


/* ===============================
   LAYER 1: Water Surface Caustics
   =============================== */
.nwk-hero__surface {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  z-index: 2;
  overflow: hidden;
  opacity: 0.15;
}

.nwk-hero__surface svg {
  position: absolute;
  top: -20px;
  width: 200%;
  height: 100%;
  animation: surface-drift 8s ease-in-out infinite alternate;
}

@keyframes surface-drift {
  0% { transform: translateX(0); }
  100% { transform: translateX(-25%); }
}


/* ========================
   LAYER 2: Bubble Animation
   ======================== */
.nwk-hero__bubbles {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.nwk-bubble {
  position: absolute;
  bottom: -20px;
  border-radius: var(--radius-circle);
  background: radial-gradient(
    ellipse at 30% 30%,
    rgba(255, 255, 255, 0.4),
    rgba(69, 200, 209, 0.15) 40%,
    rgba(69, 200, 209, 0.05) 70%,
    transparent
  );
  border: 1px solid rgba(255, 255, 255, 0.15);
  animation: bubble-rise linear infinite;
  will-change: transform, opacity;
}

/* 18 bubbles with varied sizes, positions, speeds */
.nwk-bubble:nth-child(1)  { width: 12px; height: 12px; left: 5%;   animation-duration: 9s;  animation-delay: 0s;   opacity: 0.3; }
.nwk-bubble:nth-child(2)  { width: 8px;  height: 8px;  left: 12%;  animation-duration: 11s; animation-delay: 2s;   opacity: 0.2; }
.nwk-bubble:nth-child(3)  { width: 20px; height: 20px; left: 18%;  animation-duration: 8s;  animation-delay: 1s;   opacity: 0.25; }
.nwk-bubble:nth-child(4)  { width: 14px; height: 14px; left: 25%;  animation-duration: 13s; animation-delay: 4s;   opacity: 0.35; }
.nwk-bubble:nth-child(5)  { width: 10px; height: 10px; left: 32%;  animation-duration: 10s; animation-delay: 0.5s; opacity: 0.2; }
.nwk-bubble:nth-child(6)  { width: 36px; height: 36px; left: 38%;  animation-duration: 7s;  animation-delay: 3s;   opacity: 0.15; }
.nwk-bubble:nth-child(7)  { width: 6px;  height: 6px;  left: 42%;  animation-duration: 14s; animation-delay: 6s;   opacity: 0.3; }
.nwk-bubble:nth-child(8)  { width: 16px; height: 16px; left: 48%;  animation-duration: 9s;  animation-delay: 1.5s; opacity: 0.2; }
.nwk-bubble:nth-child(9)  { width: 24px; height: 24px; left: 55%;  animation-duration: 11s; animation-delay: 5s;   opacity: 0.25; }
.nwk-bubble:nth-child(10) { width: 10px; height: 10px; left: 60%;  animation-duration: 12s; animation-delay: 2.5s; opacity: 0.3; }
.nwk-bubble:nth-child(11) { width: 40px; height: 40px; left: 65%;  animation-duration: 8s;  animation-delay: 0.8s; opacity: 0.1; }
.nwk-bubble:nth-child(12) { width: 8px;  height: 8px;  left: 72%;  animation-duration: 15s; animation-delay: 7s;   opacity: 0.25; }
.nwk-bubble:nth-child(13) { width: 18px; height: 18px; left: 78%;  animation-duration: 10s; animation-delay: 3.5s; opacity: 0.2; }
.nwk-bubble:nth-child(14) { width: 12px; height: 12px; left: 83%;  animation-duration: 13s; animation-delay: 1s;   opacity: 0.35; }
.nwk-bubble:nth-child(15) { width: 28px; height: 28px; left: 88%;  animation-duration: 9s;  animation-delay: 4.5s; opacity: 0.15; }
.nwk-bubble:nth-child(16) { width: 6px;  height: 6px;  left: 92%;  animation-duration: 11s; animation-delay: 2s;   opacity: 0.3; }
.nwk-bubble:nth-child(17) { width: 14px; height: 14px; left: 96%;  animation-duration: 12s; animation-delay: 6.5s; opacity: 0.2; }
.nwk-bubble:nth-child(18) { width: 10px; height: 10px; left: 50%;  animation-duration: 10s; animation-delay: 8s;   opacity: 0.25; }

@keyframes bubble-rise {
  0% {
    transform: translateY(0) translateX(0) scale(0.4);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    transform: translateY(-50vh) translateX(20px) scale(0.7);
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateY(-110vh) translateX(-15px) scale(1);
    opacity: 0;
  }
}


/* =======================
   LAYER 3: God Rays / Light Beams
   ======================= */
.nwk-hero__rays {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.nwk-hero__rays::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 120%;
  height: 200%;
  background: conic-gradient(
    from 200deg at 80% 0%,
    rgba(255, 255, 255, 0.04) 0deg,
    transparent 15deg,
    rgba(255, 255, 255, 0.06) 30deg,
    transparent 50deg,
    rgba(255, 255, 255, 0.03) 65deg,
    transparent 80deg,
    rgba(255, 255, 255, 0.05) 95deg,
    transparent 115deg,
    rgba(255, 255, 255, 0.04) 130deg,
    transparent 150deg,
    transparent 360deg
  );
  animation: rays-rotate 60s linear infinite;
  will-change: transform;
}

@keyframes rays-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* ================================
   LAYER 4: Shipwreck Silhouettes
   ================================ */
.nwk-hero__wreck {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.06;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.nwk-hero__wreck svg {
  width: 80%;
  max-width: 900px;
  height: auto;
}


/* ========================
   LAYER 5: Fish Silhouettes
   ======================== */
.nwk-hero__fish {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.nwk-fish {
  position: absolute;
  opacity: 0.07;
  animation: fish-swim linear infinite;
  will-change: transform;
}

.nwk-fish--1 {
  top: 25%;
  left: -60px;
  animation-duration: 25s;
  animation-delay: 0s;
}

.nwk-fish--2 {
  top: 55%;
  right: -80px;
  animation-duration: 30s;
  animation-delay: 8s;
  animation-name: fish-swim-reverse;
}

.nwk-fish--3 {
  top: 40%;
  left: -50px;
  animation-duration: 22s;
  animation-delay: 15s;
  transform: scale(0.7);
}

@keyframes fish-swim {
  0% {
    transform: translateX(-80px) translateY(0);
  }
  25% {
    transform: translateX(25vw) translateY(-15px);
  }
  50% {
    transform: translateX(50vw) translateY(10px);
  }
  75% {
    transform: translateX(75vw) translateY(-8px);
  }
  100% {
    transform: translateX(calc(100vw + 80px)) translateY(5px);
  }
}

@keyframes fish-swim-reverse {
  0% {
    transform: translateX(80px) scaleX(-1) translateY(0);
  }
  25% {
    transform: translateX(-25vw) scaleX(-1) translateY(12px);
  }
  50% {
    transform: translateX(-50vw) scaleX(-1) translateY(-8px);
  }
  75% {
    transform: translateX(-75vw) scaleX(-1) translateY(15px);
  }
  100% {
    transform: translateX(calc(-100vw - 80px)) scaleX(-1) translateY(-5px);
  }
}


/* =========================
   LAYER 6: Kelp / Seaweed
   ========================= */
.nwk-hero__kelp {
  position: absolute;
  bottom: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.1;
}

.nwk-hero__kelp--left {
  left: 0;
  transform-origin: bottom center;
  animation: kelp-sway 10s ease-in-out infinite;
}

.nwk-hero__kelp--right {
  right: 0;
  transform-origin: bottom center;
  animation: kelp-sway 12s ease-in-out infinite reverse;
}

.nwk-hero__kelp svg {
  height: 300px;
  width: auto;
}

@keyframes kelp-sway {
  0%, 100% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(3deg);
  }
}


/* =============================
   LAYER 7: SVG Wave Dividers
   ============================= */
.nwk-wave-top,
.nwk-wave-bottom {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  pointer-events: none;
}

.nwk-wave-top {
  top: -1px;
}

.nwk-wave-bottom {
  bottom: -1px;
}

.nwk-wave-top svg,
.nwk-wave-bottom svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Colour fill classes — set via inline style or class */
.nwk-wave--white svg { fill: var(--white); }
.nwk-wave--pale svg { fill: var(--pale); }
.nwk-wave--sand svg { fill: var(--sand); }
.nwk-wave--deep svg { fill: var(--deep); }
.nwk-wave--abyss svg { fill: var(--abyss); }

/* Animated wave — gentle horizontal movement */
.nwk-wave--animated svg {
  animation: wave-drift 12s ease-in-out infinite alternate;
  width: 200%;
  min-width: 200%;
}

@keyframes wave-drift {
  0% { transform: translateX(0); }
  100% { transform: translateX(-25%); }
}


/* ===========================
   Particle Overlay (subtle)
   =========================== */
.nwk-particles {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.nwk-particle {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: var(--radius-circle);
  background: rgba(255, 255, 255, 0.3);
  animation: particle-float linear infinite;
  will-change: transform;
}

.nwk-particle:nth-child(1)  { top: 20%; left: 10%; animation-duration: 20s; animation-delay: 0s; }
.nwk-particle:nth-child(2)  { top: 40%; left: 30%; animation-duration: 25s; animation-delay: 5s; width: 3px; height: 3px; }
.nwk-particle:nth-child(3)  { top: 60%; left: 50%; animation-duration: 18s; animation-delay: 2s; }
.nwk-particle:nth-child(4)  { top: 30%; left: 70%; animation-duration: 22s; animation-delay: 8s; }
.nwk-particle:nth-child(5)  { top: 80%; left: 85%; animation-duration: 28s; animation-delay: 3s; width: 3px; height: 3px; }
.nwk-particle:nth-child(6)  { top: 15%; left: 45%; animation-duration: 24s; animation-delay: 10s; }
.nwk-particle:nth-child(7)  { top: 70%; left: 20%; animation-duration: 19s; animation-delay: 7s; }
.nwk-particle:nth-child(8)  { top: 50%; left: 90%; animation-duration: 26s; animation-delay: 1s; }

@keyframes particle-float {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.5;
  }
  50% {
    transform: translateY(-30px) translateX(15px);
    opacity: 0.3;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
}


/* ===================================
   Dive Torch Effect (interactive)
   =================================== */

/* Enable animation of --torch-radius for pulse mode */
@property --torch-radius {
  syntax: '<length>';
  inherits: false;
  initial-value: 250px;
}

/* CSS custom properties — set by JS on .nwk-hero */
.nwk-hero--torch {
  --torch-x: -1000px;
  --torch-y: -1000px;
  --torch-active: 0;
  --torch-radius: 250px;
  --torch-glow: 0;
  cursor: crosshair;
}

/* Hide the normal ::before gradient — torch overlay replaces it */
.nwk-hero--torch::before {
  display: none;
}

/* Dark overlay — radial-gradient punches a torch hole to reveal bg image */
.nwk-hero__torch-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    circle var(--torch-radius) at var(--torch-x) var(--torch-y),
    transparent 0%,
    rgba(7, 25, 50, 0.4) 40%,
    rgba(7, 25, 50, 0.85) 70%,
    #071932 100%
  );
}

/* When torch is active, wreck transitions smoothly */
.nwk-hero--torch .nwk-hero__wreck {
  transition: opacity 0.15s ease-out;
}

/* Subtle aqua text glow near the torch beam */
.nwk-hero--torch .nwk-hero__content {
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.3),
    0 0 calc(20px * var(--torch-glow)) rgba(69, 200, 209, calc(0.4 * var(--torch-glow)));
}

/* Mobile pulse mode — fixed torch position with breathing animation */
.nwk-hero--torch-pulse .nwk-hero__torch-overlay {
  --torch-x: 70%;
  --torch-y: 60%;
  animation: torch-pulse 4s ease-in-out infinite;
}

.nwk-hero--torch-pulse {
  cursor: default;
}

@keyframes torch-pulse {
  0%, 100% { --torch-radius: 200px; }
  50% { --torch-radius: 300px; }
}


/* ===================================
   Reduced Motion: Disable Everything
   =================================== */
@media (prefers-reduced-motion: reduce) {
  .nwk-hero__surface svg,
  .nwk-bubble,
  .nwk-hero__rays::before,
  .nwk-fish,
  .nwk-hero__kelp--left,
  .nwk-hero__kelp--right,
  .nwk-wave--animated svg,
  .nwk-particle,
  .nwk-hero__scroll {
    animation: none !important;
  }

  .nwk-hero__bubbles,
  .nwk-hero__fish,
  .nwk-particles {
    display: none;
  }

  .nwk-hero__rays::before {
    transform: none;
  }

  .nwk-hero__kelp--left,
  .nwk-hero__kelp--right {
    transform: none;
  }

  /* Disable torch effect — restore normal gradient overlay */
  .nwk-hero__torch-overlay {
    display: none;
  }

  .nwk-hero--torch::before {
    display: block;
  }

  .nwk-hero--torch .nwk-hero__content {
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
  }
}