/* ═══ OCEAN BG ═══ */
.ocean {
  position:relative;
  width:100%; 
  height:80vh;
  background: linear-gradient(
    180deg,
    #001a2e 0%,
    #002a45 18%,
    #003d5c 38%,
    #004d6e 55%,
    #005577 70%,
    #003d5c 100%
  );
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background-image: url('/welcome/assets/img/banner/banner_bg.jpg');
}

/* ─── LIGHT RAYS ─── */
.rays {
  position:absolute; inset:0;
  background:
    repeating-conic-gradient(
      from 270deg at 50% -20%,
      rgba(0,180,255,.06) 0deg,
      transparent 4deg,
      transparent 12deg,
      rgba(0,180,255,.04) 14deg,
      transparent 18deg
    );
  animation: ray-drift 14s ease-in-out infinite alternate;
  transform-origin: 50% 0;
}
@keyframes ray-drift {
  from { transform: scaleX(1) rotate(-3deg); opacity:.6; }
  to   { transform: scaleX(1.08) rotate(3deg); opacity:1; }
}

/* ─── CAUSTICS (light ripples on floor) ─── */
.caustics {
  position:absolute; bottom:0; left:0; right:0; height:45%;
  background:
    radial-gradient(ellipse 80px 40px at 20% 80%, rgba(0,200,255,.07) 0%, transparent 70%),
    radial-gradient(ellipse 60px 30px at 55% 90%, rgba(0,200,255,.06) 0%, transparent 70%),
    radial-gradient(ellipse 100px 50px at 78% 75%, rgba(0,200,255,.05) 0%, transparent 70%),
    radial-gradient(ellipse 50px 25px at 40% 85%, rgba(0,200,255,.07) 0%, transparent 70%);
  animation: caustic-shift 6s ease-in-out infinite alternate;
}
@keyframes caustic-shift {
  from { transform: translateX(-20px) scaleX(.95); opacity:.6; }
  to   { transform: translateX(20px)  scaleX(1.05); opacity:1; }
}

/* ─── DEPTH GRADIENT VIGNETTE ─── */
.vignette {
  position:absolute; inset:0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,10,20,.55) 100%);
  pointer-events:none;
}

/* ─── BUBBLES ─── */
.bubbles { position:absolute; inset:0; pointer-events:none; }
.bubble {
  position:absolute;
  border-radius:50%;
  border: 1px solid rgba(150,220,255,.3);
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.15), transparent 70%);
  animation: rise linear infinite;
}
@keyframes rise {
  0%   { transform: translateY(0)   translateX(0)   scale(1);   opacity:0; }
  10%  { opacity:.8; }
  90%  { opacity:.4; }
  100% { transform: translateY(-110vh) translateX(var(--dx)) scale(.6); opacity:0; }
}

/* ─── SEAWEED ─── */
.seaweeds { position:absolute; bottom:0; left:0; right:0; height:120px; pointer-events:none; }
.seaweed {
  position:absolute; bottom:0;
  width:18px; border-radius:50% 50% 0 0;
  transform-origin: bottom center;
  animation: sway ease-in-out infinite alternate;
}
@keyframes sway {
  from { transform: rotate(-12deg) scaleX(.95); }
  to   { transform: rotate(12deg)  scaleX(1.05); }
}

/* ─── SAND FLOOR ─── */
.floor {
  position:absolute; bottom:0; left:0; right:0; height:60px;
  background: linear-gradient(180deg, transparent, rgba(0,60,90,.5) 40%, rgba(0,40,65,.8) 100%);
  border-top: 1px solid rgba(0,180,255,.1);
}

/* ════════ FISH ════════ */
.fish-layer { position:absolute; inset:0; pointer-events:none; }

/* Every fish swims on its own lane using CSS custom props */
.fish {
  position:absolute;
  display:flex; align-items:center;
  animation: swim-right linear infinite;
  will-change: transform;
}
.fish.left {
  animation-name: swim-left;
  transform: scaleX(-1);
}

@keyframes swim-right {
  0%   { left:-260px; }
  100% { left:calc(100vw + 260px); }
}
@keyframes swim-left {
  0%   { left:calc(100vw + 260px); }
  100% { left:-260px; }
}

/* Body wobble */
.fish-body {
  display:flex; align-items:center; position:relative;
  animation: wobble ease-in-out infinite alternate;
}
@keyframes wobble {
  from { transform: translateY(-4px) rotate(-2deg); }
  to   { transform: translateY(4px)  rotate(2deg); }
}

/* ═══ SVG fish shapes ═══ */
svg.fish-svg { overflow:visible; }

/* Tail fin flap */
.tail { transform-origin: right center; animation: tail-flap ease-in-out infinite alternate; }
@keyframes tail-flap {
  from { transform: skewY(-10deg) scaleX(.85); }
  to   { transform: skewY(10deg)  scaleX(1.15); }
}

/* Pec fin */
.pec { transform-origin: top left; animation: pec-flap ease-in-out infinite alternate; }
@keyframes pec-flap {
  from { transform: rotate(-15deg); }
  to   { transform: rotate(15deg); }
}

/* ════ HERO CONTENT ════ */
.hero-content {
  position:relative; z-index:10;
  text-align:center;
  padding:0 20px;
  animation: content-in .9s cubic-bezier(.16,1,.3,1) both;
}
@keyframes content-in {
  from { opacity:0; transform:translateY(30px); }
  to   { opacity:1; transform:translateY(0); }
}

.badge {
  display:inline-flex; align-items:center; gap:6px;
  background: rgba(0,180,255,.12);
  border: 1px solid rgba(0,180,255,.3);
  border-radius:30px;
  padding:6px 18px;
  font-family:'Jost',sans-serif;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:rgba(120,220,255,.9);
  margin-bottom:1.6rem;
  backdrop-filter:blur(8px);
}
.badge-dot { width:6px; height:6px; border-radius:50%; background:#00e5ff; box-shadow:0 0 8px #00e5ff; animation:blink 1.4s ease infinite; }
@keyframes blink { 50%{opacity:.2;} }

h1 em {
  font-style:italic;
  color:#5de0ff;
  text-shadow: 0 0 40px rgba(0,220,255,.6), 0 4px 40px rgba(0,150,255,.4);
}

.sub {
  font-family:'Jost',sans-serif;
  font-size:clamp(.95rem,2vw,1.15rem);
  font-weight:300;
  color:rgba(180,230,255,.75);
  max-width:520px;
  margin:0 auto 2.4rem;
  line-height:1.75;
  letter-spacing:.3px;
}

/* Scroll indicator */
.scroll-hint {
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-family:'Jost',sans-serif;
  font-size:.6rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:rgba(100,200,255,.4);
  z-index:10;
  animation:float-hint 2.5s ease-in-out infinite;
}
@keyframes float-hint {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50%      { transform:translateX(-50%) translateY(6px); }
}
.scroll-arrow {
  width:18px; height:28px;
  border:1.5px solid rgba(0,180,255,.25);
  border-radius:10px;
  position:relative;
}
.scroll-arrow::after {
  content:'';
  position:absolute; top:5px; left:50%; transform:translateX(-50%);
  width:3px; height:6px;
  background:rgba(0,200,255,.5);
  border-radius:2px;
  animation:scroll-dot 2.5s ease-in-out infinite;
}
@keyframes scroll-dot {
  0%   { top:5px; opacity:1; }
  100% { top:14px; opacity:0; }
}