/* =====================================================
   SECTION SWITCHING TABS – Abstract Flow Style
   (cinema | music | research …)
   ===================================================== */

/* ----------  Animations  ---------- */
@keyframes gentleFlow {
  0%   { transform:translate(0,0)       rotate(0deg) scale(1);    opacity:.6 }
  100% { transform:translate(15px,-10px) rotate(5deg) scale(1.05);opacity:.8 }
}

@keyframes colorFlow {
  0%   { filter:hue-rotate(0deg)  saturate(1.1) brightness(1.08) }
  20%  { filter:hue-rotate(8deg) saturate(1.2) brightness(1.12) }
  40%  { filter:hue-rotate(-6deg) saturate(1.15) brightness(1.15) }
  60%  { filter:hue-rotate(6deg) saturate(1.25) brightness(1.1) }
  80%  { filter:hue-rotate(-8deg) saturate(1.18) brightness(1.13) }
  100% { filter:hue-rotate(0deg)  saturate(1.1) brightness(1.08) }
}

@keyframes shadowGlow {
  /* CHANGED: Removed inset shadow for a flatter, softer look */
  0%,100%{
    box-shadow:0 0 8px hsla(180,60%,50%,.4),
               0 6px 24px rgba(0,0,0,.2);
  }
  33%{
    box-shadow:0 0 12px hsla(210,70%,60%,.5),
               0 6px 24px rgba(0,0,0,.25);
  }
  66%{
    box-shadow:0 0 10px hsla(200,65%,55%,.45),
               0 6px 24px rgba(0,0,0,.2);
  }
}

@keyframes flowingGradient {
  0%   { background-position: 0% 50% }
  50%  { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}

/* ----------  Nav Bar  ---------- */
.nav-section{
  display:flex; justify-content:center; align-items:center;
  gap:0; padding:1rem 0; position:relative;

  width:clamp(280px, 90vw, 500px);
  height:40px; margin:0 auto;

  /* CHANGED: Removed hard border and softened shadow for a sky-like feel */
  border:none;
  border-radius:2px;
  box-shadow:0 8px 32px rgba(0,0,0,.2);
  backdrop-filter:blur(12px);
  overflow:hidden;

  background:linear-gradient(135deg,
    hsla(180,45%,85%,.2) 0%,
    hsla(190,50%,80%,.15) 25%,
    hsla(200,40%,90%,.2) 50%,
    hsla(210,55%,75%,.18) 75%,
    hsla(220,35%,85%,.15) 100%);
  background-size: 200% 200%;
  animation:shadowGlow 8s ease-in-out infinite, flowingGradient 12s ease-in-out infinite;
}

.nav-section::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 20% 80%, rgba(0,170,255,.15) 0%, transparent 70%),
    radial-gradient(ellipse at 80% 20%, rgba(100,200,255,.12) 0%, transparent 65%),
    radial-gradient(ellipse at 40% 60%, rgba(150,225,255,.1) 0%, transparent 60%),
    linear-gradient(45deg, rgba(0,150,200,.08) 0%, rgba(100,150,255,.06) 100%);
  animation:gentleFlow 15s ease-in-out infinite alternate;
  pointer-events:none; z-index:0;
}

/* ----------  Nav Items  ---------- */
.nav-item{
  position:relative; z-index:1; flex:1;

  display:flex; align-items:center; justify-content:center;
  height:40px; padding:0; margin:0;

  font: bold 12px "Segoe UI", Tahoma, sans-serif;
  color:hsl(200,70%,25%); text-decoration:none; white-space:nowrap;

  /* CHANGED: Removed all bevel-creating borders */
  border:none;
  /* ADDED: Subtle separator for clarity */
  border-right: 1px solid hsla(200, 50%, 80%, 0.4);

  background:linear-gradient(135deg,
    hsl(180,40%,82%) 0%,
    hsl(190,45%,85%) 20%,
    hsl(200,35%,88%) 40%,
    hsl(210,50%,80%) 60%,
    hsl(220,30%,86%) 80%,
    hsl(190,42%,83%) 100%);
  background-size: 300% 300%;

  /* CHANGED: Replaced hard text-shadow with a soft glow */
  text-shadow:0 0 8px hsla(200, 50%, 95%, 0.7);
  animation:colorFlow 10s ease-in-out infinite, flowingGradient 8s ease-in-out infinite;
  transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-item:last-child{ border-right:none; }

/* Hover (hot) */
.nav-item:hover{
  color:hsl(200,80%,15%);
  background:linear-gradient(135deg,
    hsl(180,60%,70%) 0%,
    hsl(190,65%,73%) 15%,
    hsl(200,55%,76%) 30%,
    hsl(180,70%,68%) 45%,
    hsl(185,50%,74%) 60%,
    hsl(190,62%,71%) 75%,
    hsl(180,58%,69%) 90%,
    hsl(195,45%,72%) 100%);
  background-size: 400% 400%;
  
  /* CHANGED: Removed borders, softened shadows and text glow */
  border:none;
  border-right: 1px solid hsla(200, 50%, 80%, 0.4);
  text-shadow:0 0 12px hsla(190, 90%, 95%, 1);
  box-shadow:0 0 16px hsla(185, 70%, 70%, 0.7);
  transform:translateY(-1px);
}
.nav-item:hover:last-child { border-right: none; }

/* Active (current page) */
.nav-item.highlight{
  color:hsl(200,90%,20%);
  background:linear-gradient(135deg,
    hsl(180,65%,58%) 0%,
    hsl(185,70%,60%) 12%,
    hsl(190,60%,62%) 25%,
    hsl(180,75%,56%) 37%,
    hsl(195,55%,64%) 50%,
    hsl(185,68%,59%) 62%,
    hsl(188,63%,57%) 75%,
    hsl(192,50%,61%) 87%,
    hsl(182,62%,55%) 100%);
  background-size: 350% 350%;
  
  /* CHANGED: Removed borders and inset shadow, softened glow */
  border:none;
  border-right: 1px solid hsla(200, 50%, 80%, 0.4);
  text-shadow:0 0 10px hsla(185, 95%, 90%, 1);
  box-shadow:0 0 12px hsla(180, 70%, 60%, 0.8);
}
.nav-item.highlight:last-child { border-right: none; }

/* Pressed – smoother, less abrupt */
.nav-item:active{
  transform:scale(.98) translateY(1px);
  filter:brightness(.95) saturate(1.1);
  box-shadow:none; /* CHANGED: Removed shadow on press for a cleaner effect */
}
.nav-item.highlight:active{ 
  transform:scale(.98) translateY(1px);
  filter:brightness(.9) saturate(1.2);
}