/* ═══════════════════════════════════════
   LAYOUT.CSS — Ocean BG, Navbar, Sections, Footer
═══════════════════════════════════════ */

/* ── OCEAN BACKGROUND ── */
#ocean-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
}
.ocean-base{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 140% 70% at 50% -10%, rgba(13,155,138,0.12) 0%, transparent 55%),
    radial-gradient(ellipse 100% 60% at 0% 50%, rgba(192,39,45,0.05) 0%, transparent 50%),
    radial-gradient(ellipse 80% 80% at 100% 80%, rgba(201,168,76,0.04) 0%, transparent 50%),
    linear-gradient(180deg, #04080F 0%, #060C18 30%, #070D1A 60%, #04080F 100%);
}
.ocean-shimmer{
  position:absolute;inset:0;
  background:repeating-linear-gradient(
    -45deg,
    transparent 0px, transparent 60px,
    rgba(13,155,138,0.018) 60px, rgba(13,155,138,0.018) 61px
  );
  animation:shimmer-drift 20s linear infinite;
}

/* Caustic light — dappled underwater light patterns */
.ocean-caustics{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 25% 12% at 20% 15%, rgba(13,155,138,0.07) 0%, transparent 100%),
    radial-gradient(ellipse 18% 8%  at 70% 25%, rgba(13,155,138,0.05) 0%, transparent 100%),
    radial-gradient(ellipse 30% 10% at 50% 55%, rgba(13,155,138,0.04) 0%, transparent 100%),
    radial-gradient(ellipse 15% 6%  at 85% 70%, rgba(13,155,138,0.06) 0%, transparent 100%),
    radial-gradient(ellipse 22% 9%  at 10% 80%, rgba(13,155,138,0.04) 0%, transparent 100%);
  animation:caustic-shift 18s ease-in-out infinite alternate;
}

/* Ripple bands — horizontal light distortion like surface refraction */
.ocean-ripples{
  position:absolute;inset:0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px, transparent 120px,
      rgba(13,155,138,0.025) 120px, rgba(13,155,138,0.025) 121px,
      transparent 121px, transparent 200px,
      rgba(20,196,175,0.015) 200px, rgba(20,196,175,0.015) 201px
    );
  animation:ripple-drift 12s ease-in-out infinite alternate;
}

.wave-layer{
  position:absolute;bottom:0;left:0;width:200%;
  will-change:transform;
}
.wave1{ height:180px;opacity:0.09;animation:wave-move 14s ease-in-out infinite alternate; }
.wave2{ height:140px;opacity:0.06;bottom:20px;animation:wave-move 19s ease-in-out infinite alternate-reverse; }
.wave3{ height:100px;opacity:0.04;bottom:40px;animation:wave-move 24s ease-in-out infinite alternate; }

/* ── NAVBAR ── */
#navbar{
  position:fixed;top:0;left:0;right:0;z-index:500;
  background:rgba(4,8,15,0.85);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(201,168,76,0.15);
  transition:all 0.3s;
}
.nav-inner{
  max-width:1280px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 2rem;height:64px;
}
.nav-logo{
  display:flex;align-items:center;gap:0.75rem;
  font-family:var(--font-display);font-size:1.1rem;color:var(--gold2);
  letter-spacing:1px;cursor:none;
}
.nav-logo .skull{
  font-size:1.4rem;
  filter:drop-shadow(0 0 8px rgba(192,39,45,0.8));
  animation:skull-pulse 3s ease-in-out infinite;
}
.nav-links{
  display:flex;align-items:center;gap:0.25rem;
  flex-wrap:wrap;
}
.nav-links button{
  background:none;border:none;border-bottom:2px solid transparent;
  color:rgba(200,169,110,0.7);
  font-family:var(--font-heading);font-size:0.65rem;letter-spacing:2.5px;
  text-transform:uppercase;padding:0.5rem 0.875rem;cursor:none;
  border-radius:2px;transition:all 0.2s;position:relative;
}
.nav-links button::after{
  content:'';position:absolute;bottom:-2px;left:50%;right:50%;
  height:2px;background:var(--gold);
  transition:left 0.2s,right 0.2s;
}
.nav-links button:hover{ color:var(--gold2) }
.nav-links button:hover::after,
.nav-links button.active::after{ left:0;right:0 }
.nav-links button.active{ color:var(--gold2) }
.nav-discord{
  font-family:var(--font-heading)!important;font-size:0.65rem!important;letter-spacing:2px!important;
  text-transform:uppercase!important;padding:8px 20px!important;
  background:linear-gradient(135deg,var(--red),#8B0000)!important;
  color:var(--cream)!important;border:none!important;border-radius:2px!important;cursor:none!important;
  box-shadow:0 0 15px rgba(192,39,45,0.4),inset 0 1px 0 rgba(255,255,255,0.1)!important;
  transition:all 0.3s!important;
  animation:btn-breathe 3s ease-in-out infinite!important;
}
.nav-discord:hover{
  box-shadow:0 0 30px rgba(232,52,59,0.8),0 0 60px rgba(192,39,45,0.4),inset 0 1px 0 rgba(255,255,255,0.2)!important;
  transform:translateY(-1px)!important;
}

/* ── SECTIONS WRAPPER ── */
#sections-wrapper{
  position:relative;z-index:10;
}
.page-section{
  display:none;
  max-width:1200px;margin:0 auto;
  padding:7rem 2rem 5rem;
  animation:section-in 0.5s ease-out both;
}
.page-section.active{ display:block }
#hero.page-section{
  min-height:100vh;max-width:100%;
  display:none;flex-direction:column;
  align-items:center;justify-content:center;
  text-align:center;padding:8rem 2rem 6rem;
  position:relative;overflow:hidden;
}
#hero.page-section.active{ display:flex }

/* Section header helpers */
.section-eyebrow{
  font-family:var(--font-heading);font-size:0.65rem;letter-spacing:6px;
  text-transform:uppercase;color:var(--teal2);
  margin-bottom:0.5rem;display:flex;align-items:center;gap:0.75rem;
}
.section-eyebrow::after{content:'';flex:0 0 40px;height:1px;background:var(--teal2);opacity:0.5}
.section-title{
  font-family:var(--font-display);font-size:clamp(2rem,5vw,3.5rem);line-height:1;
  background:linear-gradient(135deg,var(--gold3) 0%,var(--gold2) 50%,var(--gold) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  margin-bottom:0.75rem;
}
.section-rule{
  width:80px;height:2px;
  background:linear-gradient(90deg,var(--red),var(--gold),transparent);
  margin-bottom:3rem;
}
.ornament-divider{
  text-align:center;margin:3rem 0;
  display:flex;align-items:center;gap:1.5rem;
  font-family:var(--font-heading);font-size:0.6rem;letter-spacing:4px;
  text-transform:uppercase;color:var(--gold-dark);
}
.ornament-divider::before,
.ornament-divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.2))}
.ornament-divider::after{background:linear-gradient(90deg,rgba(201,168,76,0.2),transparent)}

/* Grid helpers */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.three-col{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;margin-bottom:1.5rem}
@media(max-width:680px){
  .two-col,.three-col{grid-template-columns:1fr}
}

/* ── FOOTER ── */
footer{
  position:relative;z-index:10;
  border-top:1px solid rgba(201,168,76,0.1);
  padding:3rem 2rem 2rem;text-align:center;
  background:linear-gradient(0deg,rgba(4,8,15,1) 0%,transparent 100%);
}
footer::before{
  content:'';display:block;
  width:120px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-dark),transparent);
  margin:0 auto 2rem;
}
.footer-skull{
  font-size:2rem;display:block;margin-bottom:0.75rem;
  filter:drop-shadow(0 0 10px rgba(192,39,45,0.5));
}
.footer-name{font-family:var(--font-display);font-size:1.25rem;color:var(--gold2);margin-bottom:0.35rem}
.footer-meta{font-family:var(--font-heading);font-size:0.6rem;letter-spacing:3px;text-transform:uppercase;color:var(--cream3);margin-bottom:1.75rem}
.footer-links{display:flex;justify-content:center;flex-wrap:wrap;gap:0.75rem;margin-bottom:1.5rem}
.footer-links .btn{font-size:0.6rem;padding:8px 20px}
.footer-copy{font-size:0.78rem;color:var(--cream4)}

@media(max-width:768px){
  .nav-inner{padding:0 1rem}
  .nav-links{gap:0}
  .nav-links button{padding:0.4rem 0.6rem;font-size:0.58rem}
  .page-section{padding:5rem 1.25rem 4rem}
}