/* ─── “Next” call-to-action – Game-like button variant ───────── */
.next-btn {
  margin: 10px auto 40px; /* Centered with breathing room */
  padding: 12px 24px; /* Increased padding for larger buttons */
  border-radius: 20px; /* Slightly more rounded corners for a smoother look */
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  /* Color theme: hero cyan-blue */
  background: linear-gradient(45deg, hsl(198 100% 48%), hsl(198 100% 34%));
  border: 2px solid hsl(198 100% 52%);
  color: #fff;
  font-size: 1.2rem; /* Increase font size for better visibility */
  text-transform: uppercase;
  text-decoration: none;
  /* Smooth color change and transform on hover */
  transition: 
    background 0.3s ease-in-out, 
    transform 0.15s ease, 
    box-shadow 0.3s ease-in-out, 
    filter 0.2s ease-in-out;

  /* Game-like glowing effect */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2),
              0 0 18px hsl(198 100% 50% / 0.55);
  filter: brightness(1.2); /* Brighten the button slightly */
  z-index: 3;
  pointer-events: auto;   /* Enable interaction */
  opacity: 1;              /* Full opacity when enabled */
}

/* Hover / Focus states */
.next-btn:hover,
.next-btn:focus {
  background: linear-gradient(45deg, hsl(198 100% 58%), hsl(198 100% 40%)); /* Lighten when hovered */
  transform: translateY(-5px); /* Slight upward lift */
  box-shadow:
    0 6px 12px rgb(0 0 0 / 0.3),
    0 0 26px hsl(198 100% 62% / 0.9),
    0 0 44px hsl(188 100% 66% / 0.55);
  filter: brightness(1.3); /* Further brighten on hover */
  cursor: pointer;
}

/* Active (clicked) state */
.next-btn:active {
  background: hsl(198 100% 30%); /* Darker when pressed */
  transform: translateY(2px); /* Slight "press" effect */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3) inset,
              0 0 18px hsl(198 100% 62% / 0.85); /* Inner shadow effect when pressed */
  filter: brightness(1.1); /* Slightly dimmed when pressed */
}

/* Optional: Add a subtle pulse effect on hover to make it more dynamic */
.next-btn:hover {
  animation: pulse 1.5s ease-out infinite; /* Subtle pulse animation */
}
/* Disabled state for the links */
.next-btn[disabled] {
  pointer-events: none;  /* Prevent interaction */
  opacity: 0.5;           /* Visually indicate it's disabled */
}

/* Pulse animation */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* optional: keyboard-only focus ring for accessibility */
.next-btn:focus-visible{
  outline: 3px solid hsl(198 100% 68% / 0.9);
  outline-offset: 3px;
}

.btn{
  padding:14px 30px; font-size:1.2rem;
  background:#f04e31; color:#fff; border-radius:8px;
  text-decoration:none; transition:background .3s;
}
.btn:hover{ background:#d13f27; }
.btn-secondary{ background:transparent; border:2px solid #fff; }
.btn-secondary:hover{ background:#fff; color:#1e1e1e; }