/* Hollow Nebula Interactive — minimal studio site */

:root {
  color-scheme: dark;
  --void: #05050c;
  --void-2: #0a0a16;
  --text: #eef1ff;
  --muted: #8b93b8;
  --line: rgba(255, 255, 255, 0.08);
  --glass: rgba(255, 255, 255, 0.04);
  --glass-hover: rgba(255, 255, 255, 0.07);
  --purple: #7c5cff;
  --cyan: #3dd6d0;
  --pink: #e879a8;
  --reef: #5ec8e8;
  --amber: #ff9d4d;
  --terra: #e8915e;
  --radius: 20px;
  --font: "Outfit", system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--void);
  -webkit-font-smoothing: antialiased;
}

/* ── Ambient background ── */
.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--void);
}

.bg__mesh {
  position: absolute;
  inset: -40%;
  background:
    radial-gradient(ellipse 50% 40% at 20% 20%, rgba(124, 92, 255, 0.22), transparent 60%),
    radial-gradient(ellipse 45% 35% at 80% 15%, rgba(61, 214, 208, 0.14), transparent 55%),
    radial-gradient(ellipse 40% 50% at 60% 80%, rgba(232, 121, 168, 0.1), transparent 60%),
    radial-gradient(ellipse 60% 40% at 10% 90%, rgba(94, 200, 232, 0.08), transparent 50%);
  animation: drift 28s var(--ease) infinite alternate;
}

.bg__grain {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 180px;
  pointer-events: none;
}

.bg__stars {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1px 1px at 40% 70%, rgba(255, 255, 255, 0.35), transparent),
    radial-gradient(1.5px 1.5px at 60% 20%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 80% 50%, rgba(255, 255, 255, 0.3), transparent),
    radial-gradient(1px 1px at 10% 80%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1.5px 1.5px at 90% 15%, rgba(200, 230, 255, 0.55), transparent),
    radial-gradient(1px 1px at 50% 90%, rgba(255, 255, 255, 0.25), transparent),
    radial-gradient(1px 1px at 70% 40%, rgba(255, 255, 255, 0.35), transparent);
  background-size: 550px 550px;
  animation: twinkle 8s ease-in-out infinite alternate;
  opacity: 0.7;
}

@keyframes twinkle {
  from { opacity: 0.45; transform: scale(1); }
  to   { opacity: 0.85; transform: scale(1.02); }
}

@keyframes drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(2%, -1.5%) scale(1.04); }
}

/* ── Layout ── */
.shell {
  width: min(1080px, calc(100% - 2.5rem));
  margin: 0 auto;
}

/* ── Nav ── */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 1.1rem 0;
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}

.nav.is-scrolled {
  background: rgba(5, 5, 12, 0.72);
  border-bottom-color: var(--line);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
  letter-spacing: -0.02em;
}

.logo__mark {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 35%, var(--cyan), transparent 55%),
    radial-gradient(circle at 65% 65%, var(--purple), transparent 50%),
    var(--void-2);
  box-shadow: 0 0 24px rgba(124, 92, 255, 0.35);
  animation: logo-glow 4s ease-in-out infinite alternate;
}

@keyframes logo-glow {
  from { box-shadow: 0 0 20px rgba(124, 92, 255, 0.3), 0 0 40px rgba(61, 214, 208, 0.1); }
  to   { box-shadow: 0 0 28px rgba(124, 92, 255, 0.5), 0 0 50px rgba(61, 214, 208, 0.2); }
}

.logo__text span {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.92rem;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  transition: color 0.25s, background 0.25s;
}

.nav__links a:hover {
  color: var(--text);
  background: var(--glass-hover);
}

/* ── Hero ── */
.hero {
  padding: clamp(4rem, 12vw, 8rem) 0 clamp(3rem, 8vw, 5rem);
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 0.35rem 0.9rem 0.35rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--glass);
  font-size: 0.82rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.eyebrow__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}

.hero h1 {
  margin: 0 0 1.25rem;
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.hero h1 em {
  font-style: normal;
  font-weight: 500;
  background: linear-gradient(120deg, var(--text) 0%, var(--cyan) 45%, var(--purple) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s ease-in-out infinite alternate;
}

@keyframes shimmer {
  from { background-position: 0% center; }
  to   { background-position: 100% center; }
}

.hero__lead {
  max-width: 34rem;
  margin: 0 auto 2.5rem;
  color: var(--muted);
  font-size: clamp(1.05rem, 2.2vw, 1.2rem);
  font-weight: 300;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.35rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s, background 0.25s, border-color 0.25s;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn--primary {
  color: var(--void);
  background: linear-gradient(135deg, var(--cyan), #7ee8e4);
  box-shadow: 0 8px 32px rgba(61, 214, 208, 0.25);
  position: relative;
  overflow: hidden;
}

.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 0.6s var(--ease);
}

.btn--primary:hover::after {
  transform: translateX(120%);
}

.btn--primary:hover {
  box-shadow: 0 12px 40px rgba(61, 214, 208, 0.35);
}

.btn--ghost {
  color: var(--text);
  background: var(--glass);
  border-color: var(--line);
}

.btn--ghost:hover {
  background: var(--glass-hover);
  border-color: rgba(255, 255, 255, 0.14);
}

/* Disabled "coming soon" state — looks like a button, but inert */
.btn--soon,
.btn--soon:hover {
  color: var(--muted);
  background: var(--glass);
  border-color: var(--line);
  box-shadow: none;
  transform: none;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}

.btn--soon::after {
  display: none;
}

.btn--soon::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--reef);
  box-shadow: 0 0 8px var(--reef);
  animation: pulse 2.4s ease-in-out infinite;
}

/* ── Sections ── */
.section {
  padding: clamp(3rem, 8vw, 5.5rem) 0;
}

.section__label {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
}

.section h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 400;
  letter-spacing: -0.03em;
}

.section__intro {
  max-width: 32rem;
  margin: 0 0 2.5rem;
  color: var(--muted);
  font-weight: 300;
}

/* ── Game card ── */
.game-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  overflow: hidden;
  background: linear-gradient(160deg, rgba(94, 200, 232, 0.06), rgba(124, 92, 255, 0.04));
  backdrop-filter: blur(12px);
  transition: border-color 0.4s, box-shadow 0.4s;
}

.game-card:hover {
  border-color: rgba(94, 200, 232, 0.22);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45), 0 0 60px rgba(94, 200, 232, 0.06);
}

@media (min-width: 768px) {
  .game-card {
    grid-template-columns: 1.1fr 1fr;
  }
}

.game-card__visual {
  position: relative;
  min-height: 320px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(94, 200, 232, 0.3), transparent),
    radial-gradient(ellipse 50% 40% at 30% 30%, rgba(61, 214, 208, 0.15), transparent),
    linear-gradient(180deg, #0c1a24 0%, #061018 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  overflow: hidden;
}

/* ── Aquarium scene ── */
.aquarium {
  width: min(300px, 88%);
  aspect-ratio: 380 / 280;
  border-radius: 14px 14px 6px 6px;
  border: 2px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(94, 200, 232, 0.2) 0%, rgba(4, 14, 22, 0.95) 55%, rgba(8, 20, 28, 1) 100%);
  box-shadow:
    inset 0 0 60px rgba(94, 200, 232, 0.12),
    inset 0 -20px 40px rgba(0, 0, 0, 0.4),
    0 24px 70px rgba(0, 0, 0, 0.55),
    0 0 80px rgba(94, 200, 232, 0.08);
  position: relative;
  overflow: hidden;
  transform: perspective(800px) rotateX(2deg);
  transition: transform 0.5s var(--ease);
}

.game-card:hover .aquarium {
  transform: perspective(800px) rotateX(0deg) scale(1.02);
}

.aquarium__glow {
  position: absolute;
  inset: -20%;
  background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(94, 200, 232, 0.25), transparent 70%);
  pointer-events: none;
}

.aquarium__rays {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.07) 0%,
    transparent 35%,
    transparent 100%
  );
  pointer-events: none;
}

.aquarium__caustics {
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 14px,
      rgba(94, 200, 232, 0.04) 14px,
      rgba(94, 200, 232, 0.04) 15px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 22px,
      rgba(61, 214, 208, 0.03) 22px,
      rgba(61, 214, 208, 0.03) 23px
    );
  animation: caustics-drift 10s linear infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}

@keyframes caustics-drift {
  from { transform: translate(0, 0); }
  to   { transform: translate(8px, 15px); }
}

.aquarium__sand {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18%;
  background: linear-gradient(180deg, transparent, rgba(194, 168, 120, 0.15) 40%, rgba(120, 95, 70, 0.35) 100%);
  border-radius: 0 0 4px 4px;
  pointer-events: none;
}

.aquarium__sand::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 40% at 30% 0%, rgba(255, 220, 160, 0.08), transparent);
}

.seaweed {
  position: absolute;
  bottom: 14%;
  width: 8px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg, rgba(60, 180, 120, 0.5), rgba(30, 100, 70, 0.3));
  transform-origin: bottom center;
  filter: blur(0.3px);
  pointer-events: none;
}

.seaweed--1 {
  left: 12%;
  height: 28%;
  animation: sway 4.5s ease-in-out infinite;
}

.seaweed--2 {
  left: 22%;
  height: 20%;
  width: 6px;
  animation: sway 3.8s ease-in-out infinite reverse;
  animation-delay: -1s;
}

.seaweed--3 {
  right: 15%;
  height: 24%;
  width: 7px;
  background: linear-gradient(180deg, rgba(80, 200, 140, 0.45), rgba(40, 120, 80, 0.25));
  animation: sway 5.2s ease-in-out infinite;
  animation-delay: -2s;
}

@keyframes sway {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(6deg); }
}

.bubbles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.bubble {
  position: absolute;
  bottom: -10px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.5), rgba(94, 200, 232, 0.15));
  border: 1px solid rgba(255, 255, 255, 0.2);
  animation: rise linear infinite;
  opacity: 0;
}

@keyframes rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.4; }
  100% { transform: translateY(-280px) translateX(var(--drift, 8px)); opacity: 0; }
}

.fish-school {
  position: absolute;
  inset: 0;
}

.fish {
  position: absolute;
  font-size: 1.35rem;
  line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
  will-change: transform;
}

.fish--1 {
  top: 22%;
  animation: swim-right 18s ease-in-out infinite;
  font-size: 1.5rem;
}

.fish--2 {
  top: 42%;
  animation: swim-left 14s ease-in-out infinite;
  animation-delay: -3s;
  font-size: 1.15rem;
}

.fish--3 {
  top: 58%;
  animation: swim-right 20s ease-in-out infinite;
  animation-delay: -7s;
  font-size: 1.25rem;
}

.fish--4 {
  top: 35%;
  animation: swim-left 16s ease-in-out infinite;
  animation-delay: -5s;
  font-size: 1rem;
  opacity: 0.85;
}

.fish--5 {
  top: 68%;
  animation: swim-right 15s ease-in-out infinite;
  animation-delay: -2s;
  font-size: 0.95rem;
  opacity: 0.75;
}

/* Emoji fish face LEFT by default, so flip (scaleX -1) to face RIGHT
   when travelling rightward, and leave unflipped when travelling left. */
@keyframes swim-right {
  0%   { left: -12%; transform: scaleX(-1) translateY(0); }
  25%  { transform: scaleX(-1) translateY(-5px); }
  50%  { left: 88%; transform: scaleX(-1) translateY(3px); }
  50.1% { left: 88%; transform: scaleX(1) translateY(3px); }
  75%  { transform: scaleX(1) translateY(-4px); }
  100% { left: -12%; transform: scaleX(1) translateY(0); }
}

@keyframes swim-left {
  0%   { left: 92%; transform: scaleX(1) translateY(0); }
  25%  { transform: scaleX(1) translateY(4px); }
  50%  { left: -8%; transform: scaleX(1) translateY(-3px); }
  50.1% { left: -8%; transform: scaleX(-1) translateY(-3px); }
  75%  { transform: scaleX(-1) translateY(5px); }
  100% { left: 92%; transform: scaleX(-1) translateY(0); }
}

/* ── Seafloor critters ── */
.critters {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.critter {
  position: absolute;
  bottom: 13%;
  font-size: 0.95rem;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.45));
  will-change: transform, left;
}

.critter--crab {
  animation: scuttle 18s ease-in-out infinite;
}

.critter--snail {
  bottom: 12.5%;
  font-size: 0.82rem;
  opacity: 0.9;
  /* emoji snail faces left by default; flip so it faces its rightward travel */
  transform: scaleX(-1);
  animation: crawl 26s linear infinite;
}

@keyframes scuttle {
  0%, 100% { left: 16%; transform: scaleX(1); }
  8%       { transform: scaleX(1) translateY(-2px); }
  46%      { left: 58%; transform: scaleX(1); }
  50%      { left: 60%; transform: scaleX(-1); }
  58%      { transform: scaleX(-1) translateY(-2px); }
  96%      { left: 18%; transform: scaleX(-1); }
}

@keyframes crawl {
  0%   { left: -8%; }
  100% { left: 100%; }
}

.aquarium__glass {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  pointer-events: none;
}

.aquarium__shine {
  position: absolute;
  top: 0;
  left: 8%;
  width: 28%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent);
  border-radius: inherit;
  pointer-events: none;
}

.game-card__body {
  padding: clamp(1.75rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.game-card__tag {
  display: inline-block;
  width: fit-content;
  margin-bottom: 0.75rem;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--reef);
  background: rgba(94, 200, 232, 0.1);
  border: 1px solid rgba(94, 200, 232, 0.2);
}

.game-card h3 {
  margin: 0 0 0.25rem;
  font-size: 1.65rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.game-card__title {
  margin: 0 0 0.5rem;
  line-height: 0;
}

.game-card__logo {
  display: block;
  width: clamp(220px, 78%, 360px);
  height: auto;
  margin-left: -0.1rem;
  filter: drop-shadow(0 4px 18px rgba(94, 200, 232, 0.28));
}

.game-card__subtitle {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--reef);
  letter-spacing: 0.01em;
}

.game-card p {
  margin: 0 0 1.5rem;
  color: var(--muted);
  font-weight: 300;
}

/* ── Game details (below card) ── */
.game-details {
  margin-top: 2rem;
}

.game-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.game-stat {
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(145deg, rgba(94, 200, 232, 0.06), var(--glass));
  text-align: center;
}

.game-stat__value {
  display: block;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.02em;
  margin-bottom: 0.25rem;
}

.game-stat__label {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 300;
  letter-spacing: 0.02em;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.feature-card {
  padding: 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--glass), rgba(124, 92, 255, 0.03));
  transition: border-color 0.3s, transform 0.3s var(--ease), box-shadow 0.3s;
}

.feature-card:hover {
  border-color: rgba(94, 200, 232, 0.2);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}

.feature-card__icon {
  display: block;
  font-size: 1.35rem;
  margin-bottom: 0.65rem;
  filter: drop-shadow(0 0 12px rgba(94, 200, 232, 0.3));
}

.feature-card h4 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
}

.feature-card p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.6;
}

.game-details__closing {
  margin: 2rem 0 0;
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius);
  border: 1px solid rgba(94, 200, 232, 0.15);
  background: linear-gradient(135deg, rgba(94, 200, 232, 0.08), rgba(124, 92, 255, 0.05));
  text-align: center;
  font-size: 1.05rem;
  font-weight: 300;
  color: var(--muted);
  font-style: italic;
}

.game-card__features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
  list-style: none;
  padding: 0;
}

.game-card__features li {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--muted);
  background: var(--glass);
  border: 1px solid var(--line);
}

.game-card__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}

.game-card__cta-note {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--muted);
  font-weight: 300;
  opacity: 0.85;
}

/* ── Teaser card (What's next) — warm desert terrarium ── */
.teaser {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  overflow: hidden;
  background: linear-gradient(160deg, rgba(255, 157, 77, 0.06), rgba(232, 145, 94, 0.04));
  backdrop-filter: blur(12px);
  transition: border-color 0.4s, box-shadow 0.4s;
}

.teaser:hover {
  border-color: rgba(255, 157, 77, 0.24);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45), 0 0 60px rgba(255, 157, 77, 0.08);
}

@media (min-width: 768px) {
  .teaser {
    grid-template-columns: 1fr 1.05fr;
  }
  /* Mirror Reefling's card: text on the left, the glass on the right */
  .teaser__visual { order: 2; }
  .teaser__body { order: 1; }
}

.teaser__visual {
  position: relative;
  min-height: 320px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 157, 77, 0.28), transparent),
    radial-gradient(ellipse 50% 40% at 70% 25%, rgba(255, 200, 120, 0.15), transparent),
    linear-gradient(180deg, #241406 0%, #160c04 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  overflow: hidden;
}

/* ── Terrarium scene ── */
.terrarium {
  width: min(300px, 88%);
  aspect-ratio: 380 / 280;
  border-radius: 14px 14px 6px 6px;
  border: 2px solid rgba(255, 255, 255, 0.14);
  background: linear-gradient(180deg, rgba(255, 190, 120, 0.16) 0%, rgba(40, 22, 10, 0.95) 55%, rgba(28, 16, 8, 1) 100%);
  box-shadow:
    inset 0 0 60px rgba(255, 157, 77, 0.12),
    inset 0 -20px 40px rgba(0, 0, 0, 0.45),
    0 24px 70px rgba(0, 0, 0, 0.55),
    0 0 80px rgba(255, 157, 77, 0.08);
  position: relative;
  overflow: hidden;
  transform: perspective(800px) rotateX(2deg);
  transition: transform 0.5s var(--ease);
}

.teaser:hover .terrarium {
  transform: perspective(800px) rotateX(0deg) scale(1.02);
}

.terrarium__backlight {
  position: absolute;
  inset: -20%;
  background: radial-gradient(ellipse 55% 50% at 72% 0%, rgba(255, 157, 77, 0.3), transparent 70%);
  pointer-events: none;
}

/* Heat lamp — drawn cord + reflector hood + glowing bulb */
.terrarium__lamp {
  position: absolute;
  top: -1px;
  right: 16%;
  width: 46px;
  height: 42px;
  z-index: 4;
  pointer-events: none;
}

.lamp__cord {
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 10px;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.22);
}

.lamp__hood {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 40px;
  height: 22px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #5a5048, #2c2622);
  border-radius: 50% 50% 12px 12px / 75% 75% 30% 30%;
  box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.5), 0 2px 5px rgba(0, 0, 0, 0.4);
}

.lamp__bulb {
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 14px;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fff3d6, #ff9d4d 55%, #d2641f);
  animation: lamp-pulse 4.5s ease-in-out infinite;
}

@keyframes lamp-pulse {
  0%, 100% { box-shadow: 0 0 12px 3px rgba(255, 157, 77, 0.7), 0 0 26px 6px rgba(255, 120, 40, 0.3); opacity: 0.95; }
  50%      { box-shadow: 0 0 18px 6px rgba(255, 180, 90, 0.95), 0 0 42px 12px rgba(255, 120, 40, 0.5); opacity: 1; }
}

/* Cone of warm light falling onto the basking slate */
.terrarium__beam {
  position: absolute;
  top: 26px;
  right: 6%;
  width: 60%;
  height: 76%;
  background: linear-gradient(180deg, rgba(255, 180, 90, 0.22), rgba(255, 150, 70, 0.05) 70%, transparent);
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  filter: blur(2px);
  mix-blend-mode: screen;
  animation: beam-flicker 5s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}

@keyframes beam-flicker {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; }
}

/* Heat haze rising off the warm sand */
.terrarium__shimmer {
  position: absolute;
  right: 10%;
  bottom: 16%;
  width: 42%;
  height: 40%;
  background: repeating-linear-gradient(90deg, transparent, transparent 6px, rgba(255, 200, 140, 0.05) 6px, rgba(255, 200, 140, 0.05) 7px);
  filter: blur(1px);
  mix-blend-mode: screen;
  animation: shimmer-rise 3.6s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}

@keyframes shimmer-rise {
  0%   { transform: translateY(4px) skewX(0deg); opacity: 0.3; }
  50%  { transform: translateY(-2px) skewX(3deg); opacity: 0.6; }
  100% { transform: translateY(4px) skewX(0deg); opacity: 0.3; }
}

/* Dust motes drifting in the lamp light (populated by JS) */
.motes {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}

.mote {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255, 220, 160, 0.85);
  box-shadow: 0 0 4px rgba(255, 200, 140, 0.6);
  opacity: 0;
  animation: mote-float linear infinite;
}

@keyframes mote-float {
  0%   { transform: translateY(8px) translateX(0); opacity: 0; }
  15%  { opacity: 0.7; }
  85%  { opacity: 0.45; }
  100% { transform: translateY(-92px) translateX(var(--mdrift, 6px)); opacity: 0; }
}

/* Sand: a back dune layer + a stippled substrate floor */
.dunes {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14%;
  height: 22%;
  background:
    radial-gradient(ellipse 60% 100% at 28% 100%, rgba(190, 140, 80, 0.5), transparent 70%),
    radial-gradient(ellipse 55% 100% at 82% 100%, rgba(170, 120, 70, 0.45), transparent 70%);
  z-index: 1;
  pointer-events: none;
}

.terrarium__sand {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 18%;
  background: linear-gradient(180deg, transparent, rgba(214, 168, 108, 0.35) 35%, rgba(150, 105, 60, 0.6) 100%);
  border-radius: 0 0 4px 4px;
  z-index: 1;
  pointer-events: none;
}

.terrarium__sand::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(90, 60, 30, 0.4) 0.5px, transparent 0.6px);
  background-size: 7px 7px;
  opacity: 0.5;
}

/* Desert plants */
.plant {
  position: absolute;
  bottom: 15%;
  transform-origin: bottom center;
  z-index: 2;
  pointer-events: none;
}

.plant--1 {
  left: 45%;
  width: 26px;
  height: 22%;
  background: linear-gradient(to top, rgba(120, 150, 70, 0.9), rgba(150, 190, 90, 0.7));
  clip-path: polygon(0 100%, 10% 30%, 18% 100%, 28% 4%, 38% 100%, 50% 24%, 62% 100%, 72% 6%, 82% 100%, 92% 32%, 100% 100%);
  filter: drop-shadow(0 0 4px rgba(150, 190, 90, 0.2));
  animation: sway 5s ease-in-out infinite;
}

.plant--2 {
  left: 6%;
  width: 15px;
  height: 11%;
  background: radial-gradient(ellipse 50% 80% at 50% 100%, rgba(110, 160, 90, 0.95), rgba(80, 120, 70, 0.7));
  border-radius: 50% 50% 40% 40% / 75% 75% 30% 30%;
}

/* Rock hide with a dark entrance */
.rock--hide {
  position: absolute;
  left: 13%;
  bottom: 15%;
  width: 30%;
  height: 24%;
  background: radial-gradient(ellipse 70% 90% at 40% 25%, #7a6a5a, #463a30 70%);
  border-radius: 50% 50% 18% 22% / 70% 75% 30% 30%;
  box-shadow:
    inset -6px -4px 10px rgba(0, 0, 0, 0.5),
    inset 4px 3px 6px rgba(255, 220, 180, 0.12),
    0 4px 8px rgba(0, 0, 0, 0.4);
  z-index: 3;
}

.rock--hide::after {
  content: "";
  position: absolute;
  left: 30%;
  bottom: 0;
  width: 40%;
  height: 46%;
  background: radial-gradient(ellipse 100% 100% at 50% 100%, #0a0704, transparent 75%);
  border-radius: 50% 50% 0 0;
}

/* Basking slate, lit warm on top by the lamp */
.slate {
  position: absolute;
  right: 13%;
  bottom: 15%;
  width: 30%;
  height: 8%;
  background: linear-gradient(180deg, #8a7a64, #4f4336);
  border-radius: 6px;
  box-shadow: inset 0 2px 3px rgba(255, 230, 190, 0.18), 0 3px 6px rgba(0, 0, 0, 0.45);
  z-index: 2;
}

.slate::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 6px;
  background: radial-gradient(ellipse 80% 130% at 50% -25%, rgba(255, 180, 90, 0.35), transparent 70%);
}

/* Lizard + mealworm */
.terra-critters {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.lizard {
  position: absolute;
  bottom: 15.5%;
  font-size: 1.5rem;
  line-height: 1;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5));
  will-change: transform, left;
  animation: lizard-pace 22s ease-in-out infinite;
}

/* Saunter from the hide to the basking slate, hold to bask, turn, return.
   Emoji gecko faces left by default — scaleX(-1) faces it rightward. */
@keyframes lizard-pace {
  0%   { left: 18%; transform: scaleX(-1) translateY(0); }
  10%  { transform: scaleX(-1) translateY(-1.5px); }
  20%  { transform: scaleX(-1) translateY(0); }
  30%  { transform: scaleX(-1) translateY(-1.5px); }
  40%  { left: 60%; transform: scaleX(-1) translateY(0); }
  /* bask: hold on the slate, slow warm breathing */
  50%  { left: 60%; transform: scaleX(-1) translateY(0) scale(1.04); }
  62%  { left: 60%; transform: scaleX(-1) translateY(0) scale(1); }
  64%  { left: 60%; transform: scaleX(1) translateY(0); }
  74%  { transform: scaleX(1) translateY(-1.5px); }
  84%  { transform: scaleX(1) translateY(0); }
  94%  { transform: scaleX(1) translateY(-1.5px); }
  100% { left: 18%; transform: scaleX(1) translateY(0); }
}

.mealworm {
  position: absolute;
  bottom: 14.5%;
  left: 39%;
  font-size: 0.8rem;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  transform-origin: center;
  animation: meal-wiggle 2.2s ease-in-out infinite;
}

@keyframes meal-wiggle {
  0%, 100% { transform: rotate(-8deg) translateX(0); }
  50%      { transform: rotate(8deg) translateX(2px); }
}

.terrarium__glass {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  z-index: 5;
  pointer-events: none;
}

.terrarium__shine {
  position: absolute;
  top: 0;
  left: 8%;
  width: 26%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent);
  border-radius: inherit;
  z-index: 5;
  pointer-events: none;
}

/* ── Teaser body ── */
.teaser__body {
  padding: clamp(1.75rem, 4vw, 2.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.teaser__tag {
  display: inline-block;
  width: fit-content;
  margin-bottom: 0.75rem;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber);
  background: rgba(255, 157, 77, 0.1);
  border: 1px solid rgba(255, 157, 77, 0.22);
}

.teaser__tag--soon::before {
  content: "";
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.4rem;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber);
  vertical-align: middle;
  animation: pulse 2.4s ease-in-out infinite;
}

.teaser__title {
  margin: 0 0 0.25rem;
  font-size: 1.65rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.redacted {
  font-family: "Outfit", ui-monospace, monospace;
  letter-spacing: 0.14em;
  color: var(--amber);
  background: linear-gradient(180deg, rgba(255, 157, 77, 0.18), rgba(255, 157, 77, 0.08));
  border: 1px solid rgba(255, 157, 77, 0.25);
  border-radius: 6px;
  padding: 0.05em 0.45em;
  cursor: help;
  outline: none;
  white-space: nowrap;
  user-select: none;
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s, color 0.25s;
}

.redacted:hover,
.redacted:focus-visible {
  color: var(--text);
  background: linear-gradient(180deg, rgba(255, 157, 77, 0.28), rgba(255, 157, 77, 0.12));
  border-color: rgba(255, 157, 77, 0.45);
  box-shadow: 0 0 18px rgba(255, 157, 77, 0.3);
}

.teaser__subtitle {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--amber);
  letter-spacing: 0.01em;
}

.teaser p {
  margin: 0 0 1.5rem;
  color: var(--muted);
  font-weight: 300;
}

.teaser__hints {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  list-style: none;
  padding: 0;
}

.teaser__hints li {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.82rem;
  color: var(--text);
  background: rgba(255, 157, 77, 0.07);
  border: 1px solid rgba(255, 157, 77, 0.16);
}

.teaser__whisper {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
  font-weight: 300;
  font-style: italic;
  opacity: 0.9;
}

/* ── About strip ── */
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.about-card {
  padding: 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(145deg, var(--glass), rgba(255, 255, 255, 0.02));
  transition: background 0.3s, border-color 0.3s, transform 0.3s var(--ease), box-shadow 0.3s;
}

.about-card:hover {
  background: var(--glass-hover);
  border-color: rgba(124, 92, 255, 0.2);
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25), 0 0 40px rgba(124, 92, 255, 0.06);
}

.about-card h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 500;
}

.about-card p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--muted);
  font-weight: 300;
}

/* ── Support page ── */
.page-header {
  padding: clamp(3rem, 10vw, 6rem) 0 2rem;
}

.page-header h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.03em;
}

.page-header p {
  margin: 0;
  color: var(--muted);
  font-weight: 300;
  max-width: 32rem;
}

.support-grid {
  display: grid;
  gap: 1rem;
  padding-bottom: 4rem;
}

.support-card {
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(145deg, var(--glass), rgba(94, 200, 232, 0.03));
  transition: border-color 0.3s, box-shadow 0.3s;
}

.support-card:hover {
  border-color: rgba(94, 200, 232, 0.18);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.support-card h2 {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--cyan);
}

.support-card p,
.support-card ul {
  margin: 0;
  color: var(--muted);
  font-weight: 300;
  font-size: 0.95rem;
}

.support-card ul {
  padding-left: 1.2rem;
}

.support-card li + li {
  margin-top: 0.4rem;
}

.support-card a {
  color: var(--reef);
  text-decoration: none;
  font-weight: 500;
}

.support-card a:hover {
  text-decoration: underline;
}

.support-email {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text);
}

.support-card code {
  font-size: 0.85em;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.3);
  color: var(--reef);
}

/* ── Footer ── */
.footer {
  padding: 2.5rem 0 3rem;
  border-top: 1px solid var(--line);
  text-align: center;
}

.footer p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
  font-weight: 300;
}

.footer a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
}

.footer a:hover {
  color: var(--text);
}

/* ── Reveal on scroll ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 600px) {
  .nav__links a:not(.btn) {
    display: none;
  }

  .brand {
    width: min(440px, 100%);
  }
}

/* ── Reduced motion ──
   Respect the spirit of prefers-reduced-motion without going fully static.
   The slow, contained ambient life (fish swimming, bubbles, the lizard, gentle
   glows) stays alive so the page still feels warm. What we cut is the motion
   that actually bothers people with vestibular sensitivity: full-viewport
   background drift, cursor-driven parallax (disabled in JS), content that
   slides in on scroll, and smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* No sweeping full-screen background movement */
  .bg__mesh {
    animation: none;
  }

  /* Content simply appears in place instead of sliding up */
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Tanks rest flat — the cursor-tilt parallax is also disabled in main.js */
  .aquarium,
  .terrarium {
    transition: none;
  }
}