/* Grey Ocean — Intro (Schneesturm Interactive) */
:root{
  --bg:#000;
  --fg:#eaeaea;
}

*{box-sizing:border-box}
html,body{height:100%}
body.intro{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  display:grid;
  place-items:center;
}

.intro-wrap{
  width:min(920px, 92vw);
  padding:24px;
  display:grid;
  place-items:center;
}

.intro-panel{
  width:100%;
  display:grid;
  gap:22px;
  place-items:center;
}

.intro-media{
  width:100%;
  display:grid;
  place-items:center;
  padding:18px 8px;
}

.intro-logo{
  width: 352px;
  height: 214px;
  max-width: 352px;
  max-height: 214px;
  flex: 0 0 352px; /* falls in Flex-Container */
  object-fit: contain; /* falls es ein img ist */

  filter: drop-shadow(0 10px 25px rgba(0,0,0,0.85));
  animation: introHold 5s linear infinite;
  opacity: 0.92;
}

/* leichtes „Atmen“, damit es lebendig ist (bis Video da ist) */
@keyframes introHold{
  0%{ transform:scale(1.0); opacity:0.90; }
  50%{ transform:scale(1.01); opacity:0.98; }
  100%{ transform:scale(1.0); opacity:0.90; }
}

.btn-enter{
  appearance:none;
  border:1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.06);
  color: var(--fg);
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 15px;
  letter-spacing: 0.5px;
  cursor:pointer;
  transition: transform .08s ease, background .2s ease, border-color .2s ease;
}

.btn-enter:hover{ background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.35); }
.btn-enter:active{ transform: translateY(1px); }
.btn-enter:focus-visible{ outline:2px solid rgba(180,220,255,0.55); outline-offset:3px; }