/* Europa CSS Poster (hidden page) */
:root {
  --ink: #0a0f13;
  --deep: #0b1e2a;
  --blue-1: #0e2d47;
  --blue-2: #154d77;
  --blue-3: #2a6aa2;
  --blue-4: #5aa2d8;
  --glow: #7fe6ff;
  --ice: #9ac7ff;
}

.europa-page {
  margin: 0;
  background: var(--ink);
  color: #cfe6ff;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.europa-stage {
  width: min(1000px, 92vw);
  aspect-ratio: 3/4;
  display: grid;
  place-items: center;
}

.europa-poster {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto auto;
  gap: 14px;
}

.portal {
  position: relative;
  isolation: isolate;
  border-radius: 54% 46% 46% 54% / 60% 60% 40% 40%;
  background:
    radial-gradient(60% 60% at 50% 30%, rgba(255,255,255,0.06), rgba(255,255,255,0) 60%),
    radial-gradient(120% 120% at 30% 10%, var(--blue-4), transparent 60%),
    radial-gradient(100% 100% at 70% 0%, var(--blue-3), transparent 55%),
    radial-gradient(120% 150% at 50% 80%, var(--blue-1), var(--deep));
  box-shadow: 0 0 0 12px #7aa9ff1a, 0 0 0 24px #7aa9ff10;
  border: 4px solid var(--ice);
  overflow: hidden;
}

/* Subtle cracked ice texture */
.portal .ice { position:absolute; inset:0; background:
  radial-gradient(120% 140% at 70% -20%, rgba(255,255,255,0.06), transparent 60%),
  conic-gradient(from 10deg at 30% 20%, rgba(255,255,255,0.08) 0 4deg, transparent 4deg 12deg) repeat;
  background-size: cover, 80px 80px;
  mix-blend-mode: overlay; opacity: .45; z-index: 0; }

/* Tentacles via conic gradients and transforms */
.portal::before,
.portal::after {
  content: "";
  position: absolute;
  inset: -10% -20% 0 -20%;
  background:
    radial-gradient(60px 60px at 55% 20%, var(--glow), transparent 60%),
    repeating-conic-gradient(from 0deg, var(--blue-2) 0 15deg, var(--blue-3) 15deg 30deg);
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
  transform: rotate(8deg) skewX(-6deg);
  opacity: 0.9;
  mix-blend-mode: screen;
  z-index: 0;
}

.portal::after {
  inset: -15% -15% 0 -25%;
  transform: rotate(-14deg) skewX(8deg) scaleX(-1);
  opacity: 0.85;
}

/* Ringed hub in the center */
.portal .hub { position:absolute; inset:15% 25% 35% 25%; border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%, var(--glow) 0 6%, transparent 7%),
    radial-gradient(circle at 50% 50%, #0b2f4f 0 25%, transparent 26%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 4px, rgba(255,255,255,0.28) 4px 6px),
    radial-gradient(circle at 50% 50%, var(--blue-2) 0 55%, transparent 56%);
  box-shadow: 0 0 30px 6px #7fe6ff30 inset;
  z-index: 1; }

/* Physical tentacle layers for more depth */
.tent { position:absolute; inset:-10% -10% 0 -10%; z-index: 1; opacity:.9; }
.tent::before { content:""; position:absolute; inset:0; background:
  radial-gradient(40px 40px at 60% 10%, var(--glow), transparent 60%),
  radial-gradient(30px 40px at 40% 25%, rgba(255,255,255,0.55), transparent 60%),
  repeating-conic-gradient(from 0deg, var(--blue-2) 0 12deg, var(--blue-3) 12deg 24deg);
  filter: drop-shadow(0 14px 18px rgba(0,0,0,0.55));
}
.t1 { transform: rotate(12deg) skewX(-6deg); }
.t2 { transform: rotate(-10deg) skewX(8deg) scaleX(-1); }
.t3 { transform: rotate(4deg) translateY(-10px) }

/* Grounded viewer silhouettes */
.silhouette { position:absolute; left:0; right:0; bottom:22%; height:26%; z-index:2; background:
  radial-gradient(60% 160% at 40% 120%, rgba(0,0,0,0.96), transparent 70%),
  radial-gradient(50% 150% at 60% 120%, rgba(0,0,0,0.96), transparent 70%),
  radial-gradient(45% 120% at 80% 120%, rgba(0,0,0,0.96), transparent 70%);
}

.title {
  font-family: 'Bebas Neue', 'Inter', system-ui, sans-serif;
  letter-spacing: 0.4rem;
  font-size: clamp(28px, 8vw, 80px);
  text-align: center;
  margin: 0;
  color: #cfe6ff;
  text-shadow: 0 0 12px #7aa9ff30;
}

.tag {
  text-align: center;
  margin: 0;
  letter-spacing: 0.2rem;
  font-weight: 400;
  color: #9fc7ff;
  opacity: 0.85;
}
.tag .plaque { display:inline-block; margin-left: 12px; font-size: .7em; letter-spacing: .15rem; padding: 4px 8px; border:1px solid #88b8ff66; border-radius:6px; opacity:.7; }

/* Small floating diver silhouette */
.portal::selection { background: transparent; }
.portal .diver { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .portal::before { animation: drift 22s ease-in-out infinite alternate; }
  .portal::after  { animation: drift2 26s ease-in-out infinite alternate; }
  .t1::before { animation: flow 18s ease-in-out infinite alternate; }
  .t2::before { animation: flow 22s ease-in-out infinite alternate; }
  .t3::before { animation: flow 24s ease-in-out infinite alternate; }
}

@keyframes drift {
  from { transform: rotate(6deg) translateY(0) skewX(-6deg); }
  to   { transform: rotate(14deg) translateY(-10px) skewX(-4deg); }
}

@keyframes drift2 {
  from { transform: rotate(-16deg) translateY(0) skewX(8deg) scaleX(-1); }
  to   { transform: rotate(-10deg) translateY(-12px) skewX(6deg) scaleX(-1); }
}

@keyframes flow {
  from { filter: drop-shadow(0 12px 16px rgba(0,0,0,0.4)); }
  to   { filter: drop-shadow(0 18px 22px rgba(0,0,0,0.55)); }
}


