/* ===================================================
   hibiki.moe — Living Reef Design
   Colors: #0D1B2A #1B4F6B #2EC4B6 #F7B731 #FF6B35 #FFE0C2 #A8DADC #FF9F43
   Fonts: Nunito (700, 800, 400) · Fredoka (500, 600) · Space Grotesk (400)
   =================================================== */

/* ─── Reset & Base ─── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --ocean-ink:     #0D1B2A;
  --midnight-teal: #1B4F6B;
  --sea-glass:     #2EC4B6;
  --golden-amber:  #F7B731;
  --coral:         #FF6B35;
  --warm-pearl:    #FFE0C2;
  --soft-aqua:     #A8DADC;
  --warm-mango:    #FF9F43;
  --deep-dark:     #060F18;

  --hex-w: 200px;
  --hex-h: 173px; /* 200 * sin(60°) */
  --hex-clip: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

  --font-heading: 'Nunito', sans-serif;
  --font-label:   'Fredoka', sans-serif;
  --font-meta:    'Space Grotesk', monospace;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  background: var(--ocean-ink);
  color: var(--warm-pearl);
  font-family: var(--font-heading);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

/* ─── Ocean Background ─── */
.ocean-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.biolum-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 40%, #1B4F6B 0%, transparent 70%);
  animation: biolum-pulse 8s ease-in-out infinite;
}

@keyframes biolum-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%       { opacity: 0.75; transform: scale(1.08); }
}

.noise-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ─── Reef Grid (main) ─── */
.reef-grid {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 80px;
  padding: 40px 20px 120px;
  perspective: 800px;
  transform-style: preserve-3d;
}

/* Subtle isometric viewer angle on the grid */
.reef-grid {
  transform: perspective(800px) rotateX(2deg);
  transform-origin: top center;
}

/* ─── Reef Islands ─── */
.reef-island {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  position: relative;
  /* Horizontal scroll on desktop handled by wrapping */
}

/* Honeycomb offset: odd-child rows shift right by 50% of hex width */
.reef-island {
  --col: var(--hex-w);
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--hex-w));
  /* Negative row gap for vertical overlap like honeycomb */
  row-gap: calc(var(--hex-h) * -0.25);
  column-gap: 0;
  justify-content: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 40px;
}

/* ─── Hex Cells ─── */
.hex-cell {
  position: relative;
  width: var(--hex-w);
  height: var(--hex-h);
  clip-path: var(--hex-clip);
  background: var(--midnight-teal);
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 0.35s ease;
  /* Isometric tile depth: highlight top-left, shadow bottom-right */
  filter: drop-shadow(3px 3px 0 rgba(0,0,0,0.35))
          drop-shadow(-2px -2px 0 rgba(255,255,255,0.12));
  /* Stagger transform for offset row effect */
  transform-origin: center center;
  will-change: transform;
}

/* Alternating offset for honeycomb: every other hex in a row shifts up */
.hex-cell:nth-child(odd) {
  margin-top: calc(var(--hex-h) * -0.13);
}

.hex-cell:hover {
  transform: translateY(-6px) scale(1.04);
  filter: drop-shadow(4px 8px 6px rgba(0,0,0,0.5))
          drop-shadow(-2px -2px 0 rgba(255,255,255,0.2));
  z-index: 10;
}

.hex-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ─── Hex Fish Cells ─── */
.hex-fish .hex-inner {
  background: linear-gradient(135deg, var(--midnight-teal) 0%, var(--ocean-ink) 100%);
}

.fish-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  /* Fish swim animation applied via JS class */
}

.fish-svg {
  transition: transform 0.3s ease;
  /* Default: fish face right (positive x direction) */
  transform: scaleX(1);
}

/* Fish swim animation keyframes */
@keyframes fish-swim-right {
  0%   { transform: translateX(-12px) translateY(0px) rotate(-3deg) scaleX(1); }
  25%  { transform: translateX(6px) translateY(-8px) rotate(2deg) scaleX(1); }
  50%  { transform: translateX(14px) translateY(0px) rotate(-2deg) scaleX(1); }
  75%  { transform: translateX(6px) translateY(8px) rotate(1deg) scaleX(1); }
  100% { transform: translateX(-12px) translateY(0px) rotate(-3deg) scaleX(1); }
}

@keyframes fish-swim-left {
  0%   { transform: translateX(12px) translateY(0px) rotate(3deg) scaleX(-1); }
  25%  { transform: translateX(-6px) translateY(-8px) rotate(-2deg) scaleX(-1); }
  50%  { transform: translateX(-14px) translateY(0px) rotate(2deg) scaleX(-1); }
  75%  { transform: translateX(-6px) translateY(8px) rotate(-1deg) scaleX(-1); }
  100% { transform: translateX(12px) translateY(0px) rotate(3deg) scaleX(-1); }
}

/* Awakening states added by JS */
.hex-fish.dormant .fish-svg {
  animation: none;
  opacity: 0.5;
}

.hex-fish.awakening .fish-svg {
  animation: fish-swim-right 5s ease-in-out infinite;
  opacity: 0.8;
}

.hex-fish.swimming .fish-svg {
  animation: fish-swim-right 4s ease-in-out infinite;
  opacity: 1;
}

.hex-fish.swimming-left .fish-svg {
  animation: fish-swim-left 4.5s ease-in-out infinite;
  opacity: 1;
}

/* ─── Hex Color Cells ─── */
.hex-inner-color {
  background: var(--cell-color, var(--midnight-teal));
  position: relative;
  overflow: hidden;
}

/* Hex Logo (hero center) */
.hex-logo {
  width: calc(var(--hex-w) * 1.5);
  height: calc(var(--hex-h) * 1.5);
  background: linear-gradient(135deg, #1B4F6B 0%, #0D1B2A 100%);
  z-index: 5;
  border: 2px solid rgba(46, 196, 182, 0.35);
  filter: drop-shadow(0 0 18px rgba(46,196,182,0.4))
          drop-shadow(3px 3px 0 rgba(0,0,0,0.5));
}

.logo-content {
  text-align: center;
  animation: logo-breathe 3s ease-in-out infinite;
}

@keyframes logo-breathe {
  0%, 100% { transform: scale(1.0); }
  50%       { transform: scale(1.04); }
}

.logo-mark {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 800;
  color: var(--sea-glass);
  line-height: 1;
  text-shadow: 0 0 20px rgba(46,196,182,0.6);
}

.logo-text {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
  color: var(--warm-pearl);
  letter-spacing: 0.05em;
  margin-top: 6px;
}

.logo-sub {
  font-family: var(--font-label);
  font-size: 13px;
  font-weight: 500;
  color: var(--soft-aqua);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* ─── Hex Text Cells ─── */
.hex-text {
  background: linear-gradient(135deg, #1B4F6B 0%, #0D1B2A 100%);
}

.hex-text-content {
  text-align: center;
  padding: 12px 20px;
  width: 100%;
}

.hex-text-content.small {
  padding: 8px 16px;
}

.hex-heading {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 800;
  color: var(--warm-pearl);
  line-height: 1.2;
  margin-bottom: 6px;
}

.hex-body {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 400;
  color: var(--soft-aqua);
  line-height: 1.5;
}

.hex-meta {
  font-family: var(--font-meta);
  font-size: 11px;
  font-weight: 400;
  color: var(--soft-aqua);
  line-height: 1.6;
}

/* ─── Hex Work Cards ─── */
.hex-work-card {
  background: linear-gradient(135deg, #1B4F6B 0%, #0D1B2A 100%);
}

.work-icon {
  margin-bottom: 8px;
}

.work-title {
  display: block;
  font-family: var(--font-label);
  font-size: 15px;
  font-weight: 600;
  color: var(--warm-pearl);
}

.work-sub {
  display: block;
  font-family: var(--font-meta);
  font-size: 11px;
  font-weight: 400;
  color: var(--soft-aqua);
  margin-top: 3px;
}

/* ─── Hex Gallery Items ─── */
.hex-gallery-item {
  overflow: hidden;
}

.gallery-pattern {
  position: absolute;
  inset: 0;
}

.pattern-1 {
  background: conic-gradient(from 0deg at 50% 50%,
    #2EC4B6 0deg, #F7B731 60deg, #FF6B35 120deg,
    #FF9F43 180deg, #2EC4B6 240deg, #A8DADC 300deg, #2EC4B6 360deg);
  opacity: 0.6;
  animation: pattern-spin 12s linear infinite;
}

.pattern-2 {
  background: repeating-linear-gradient(
    60deg,
    #FF6B35 0px, #FF6B35 4px,
    transparent 4px, transparent 20px
  ),
  repeating-linear-gradient(
    -60deg,
    #F7B731 0px, #F7B731 4px,
    transparent 4px, transparent 20px
  );
  opacity: 0.5;
}

.pattern-3 {
  background: radial-gradient(circle at 30% 40%, #F7B731 0%, transparent 40%),
              radial-gradient(circle at 70% 60%, #FF9F43 0%, transparent 40%),
              radial-gradient(circle at 50% 50%, #2EC4B6 0%, transparent 60%);
  opacity: 0.65;
  animation: pattern-breathe 6s ease-in-out infinite;
}

@keyframes pattern-spin {
  from { transform: rotate(0deg) scale(1.5); }
  to   { transform: rotate(360deg) scale(1.5); }
}

@keyframes pattern-breathe {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%       { opacity: 0.75; transform: scale(1.1); }
}

/* ─── Hex Contact CTA ─── */
.hex-contact-cta {
  background: linear-gradient(135deg, #FF6B35 0%, #C44E1A 100%);
}

.contact-icon {
  margin-bottom: 8px;
}

.contact-label {
  font-family: var(--font-meta);
  font-size: 11px;
  font-weight: 400;
  color: var(--warm-pearl);
  letter-spacing: 0.04em;
  word-break: break-all;
}

/* ─── Hex Nav ─── */
.hex-nav {
  position: fixed;
  z-index: 100;
  display: flex;
  gap: 0;
  /* Bottom dock on mobile */
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  flex-direction: row;
  background: rgba(13, 27, 42, 0.85);
  backdrop-filter: blur(8px);
  border-radius: 60px;
  padding: 6px 10px;
  border: 1px solid rgba(46,196,182,0.2);
}

.hex-nav-item {
  width: 70px;
  height: 60px;
  background: transparent;
  filter: none;
  clip-path: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: transform 0.25s ease, background 0.25s ease;
  border-radius: 12px;
  margin: 0 2px;
}

.hex-nav-item .hex-inner {
  position: static;
  flex-direction: column;
  gap: 4px;
  background: transparent;
}

.hex-nav-item:hover {
  transform: translateY(-4px);
  background: rgba(46,196,182,0.12);
}

.hex-nav-item.active {
  background: rgba(46,196,182,0.2);
}

.hex-nav-item .ripple-el {
  display: none;
}

.nav-label {
  font-family: var(--font-label);
  font-size: 10px;
  font-weight: 500;
  color: var(--soft-aqua);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 2px;
}

/* ─── Ripple System ─── */
.ripple-el {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  clip-path: var(--hex-clip);
}

@keyframes ripple-out {
  0%   { box-shadow: 0 0 0 0px currentColor; opacity: 0.8; }
  60%  { box-shadow: 0 0 0 30px transparent; opacity: 0.3; }
  100% { box-shadow: 0 0 0 50px transparent; opacity: 0; }
}

@keyframes ripple-ghost {
  0%   { box-shadow: 0 0 0 0px currentColor; opacity: 0.4; }
  100% { box-shadow: 0 0 0 40px transparent; opacity: 0; }
}

.hex-cell.rippling .ripple-el {
  animation: ripple-out 0.6s ease-out forwards;
}

.hex-cell.rippling-ghost .ripple-el {
  animation: ripple-ghost 0.8s ease-out forwards;
}

/* Color the ripple from the hex accent (set via JS CSS var) */
.hex-cell {
  color: var(--cell-accent, var(--sea-glass));
}

/* ─── Bubble animations (color hex cells) ─── */
.bubble {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  animation: bubble-rise linear infinite;
}

.bubble-1 {
  width: 8px; height: 8px;
  left: 35%; bottom: 10%;
  animation-duration: 4s;
  animation-delay: 0s;
}

.bubble-2 {
  width: 5px; height: 5px;
  left: 58%; bottom: 15%;
  animation-duration: 3.2s;
  animation-delay: 1.2s;
}

.bubble-3 {
  width: 6px; height: 6px;
  left: 48%; bottom: 8%;
  animation-duration: 5s;
  animation-delay: 2.5s;
}

@keyframes bubble-rise {
  0%   { transform: translateY(0) scale(1); opacity: 0.7; }
  50%  { transform: translateY(-40px) scale(0.9); opacity: 0.5; }
  100% { transform: translateY(-80px) scale(0.7); opacity: 0; }
}

/* ─── Large Fish Hex (depth finale) ─── */
.hex-fish-large {
  width: calc(var(--hex-w) * 1.5);
  height: calc(var(--hex-h) * 1.5);
  filter: drop-shadow(0 0 24px rgba(46,196,182,0.5))
          drop-shadow(3px 3px 0 rgba(0,0,0,0.5));
}

/* ─── Depth Section ─── */
.reef-depth {
  padding-top: 60px;
  padding-bottom: 60px;
}

.hex-depth-text {
  background: linear-gradient(135deg, #1B4F6B 0%, #060F18 100%);
}

.depth-label {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
  color: var(--sea-glass);
  text-shadow: 0 0 16px rgba(46,196,182,0.5);
}

.depth-sub {
  font-family: var(--font-label);
  font-size: 14px;
  font-weight: 500;
  color: var(--soft-aqua);
  letter-spacing: 0.1em;
  margin-top: 6px;
}

.hex-depth-color {
  background: var(--deep-dark) !important;
}

.hex-depth-color .hex-inner-color {
  background: var(--deep-dark);
}

/* ─── Scroll-state transitions ─── */
body[data-scroll-state="entry"] .reef-grid {
  --glow-opacity: 0.4;
}

body[data-scroll-state="awakening"] .reef-grid {
  --glow-opacity: 0.55;
}

body[data-scroll-state="immersion"] .reef-grid {
  --glow-opacity: 0.7;
}

body[data-scroll-state="depth"] {
  background: var(--deep-dark);
  transition: background 1.5s ease;
}

body[data-scroll-state="depth"] .biolum-glow {
  opacity: 0.9;
  background: radial-gradient(ellipse 70% 60% at 50% 50%,
    #1B4F6B 0%, #2EC4B6 15%, transparent 70%);
}

/* ─── Active nav section indicator ─── */
.hex-nav-item.active .nav-label {
  color: var(--sea-glass);
}

/* ─── Parallax layer classes (applied by JS) ─── */
.reef-island {
  transition: transform 0.1s linear;
}

/* ─── Hero zone special layout ─── */
#island-hero {
  min-height: 100vh;
  align-items: center;
  align-content: center;
  margin-top: -40px;
}

#island-hero .hex-logo {
  /* Place logo hex in center via grid spanning */
  grid-column: 2 / 4;
}

/* ─── Desktop nav sidebar ─── */
@media (min-width: 900px) {
  .hex-nav {
    left: 16px;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    border-radius: 40px;
    padding: 10px 6px;
  }

  .hex-nav-item {
    width: 64px;
    height: 64px;
    margin: 2px 0;
  }

  .reef-grid {
    padding: 60px 20px 140px 100px;
  }
}

/* ─── Mobile layout ─── */
@media (max-width: 480px) {
  :root {
    --hex-w: 130px;
    --hex-h: 113px;
  }

  .hex-logo {
    width: calc(var(--hex-w) * 1.4);
    height: calc(var(--hex-h) * 1.4);
  }

  .logo-mark { font-size: 32px; }
  .logo-text { font-size: 16px; }

  .hex-nav {
    bottom: 6px;
    padding: 4px 6px;
  }

  .hex-nav-item {
    width: 56px;
    height: 48px;
  }

  .reef-grid {
    padding: 30px 10px 100px;
  }
}

/* ─── Tablet layout ─── */
@media (min-width: 481px) and (max-width: 899px) {
  :root {
    --hex-w: 160px;
    --hex-h: 139px;
  }

  .hex-logo {
    width: calc(var(--hex-w) * 1.4);
    height: calc(var(--hex-h) * 1.4);
  }

  .reef-grid {
    padding: 40px 20px 110px;
  }
}

/* ─── Hex cell border glow on hover matching accent ─── */
.hex-cell::after {
  content: '';
  position: absolute;
  inset: 2px;
  clip-path: var(--hex-clip);
  background: transparent;
  border: 2px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  pointer-events: none;
}

.hex-cell:hover::after {
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 0 12px rgba(46, 196, 182, 0.2);
}

/* ─── Scroll indicator ─── */
.scroll-hint {
  position: fixed;
  bottom: 90px;
  right: 24px;
  font-family: var(--font-meta);
  font-size: 11px;
  color: var(--soft-aqua);
  opacity: 0.6;
  writing-mode: vertical-rl;
  letter-spacing: 0.12em;
  animation: hint-fade 2s ease-in-out 2s forwards;
  z-index: 50;
}

@keyframes hint-fade {
  0%   { opacity: 0.6; }
  100% { opacity: 0; pointer-events: none; }
}

/* ─── Ripple propagation color ─── */
[data-accent="#2EC4B6"] { --cell-accent: #2EC4B6; }
[data-accent="#FF6B35"] { --cell-accent: #FF6B35; }
[data-accent="#F7B731"] { --cell-accent: #F7B731; }
[data-accent="#FF9F43"] { --cell-accent: #FF9F43; }
[data-accent="#A8DADC"] { --cell-accent: #A8DADC; }
[data-accent="#1B4F6B"] { --cell-accent: #1B4F6B; }