/* =============================
   Enderpearl Responsive Styles
   ============================= */
/* Font-Faces */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; src: url('fonts/Poppins-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; src: url('fonts/Poppins-Medium.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; src: url('fonts/Poppins-SemiBold.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; src: url('fonts/Poppins-Bold.ttf') format('truetype'); font-display: swap; }

:root {
  --clr-bg: #0b0b12;
  --clr-accent: #178522;
  --clr-accent-dark: #116819;
  --clr-text: #ffffff;
  --clr-text-muted: #d9d9d9;
  --clr-border-glow: #2ec74c;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --ease-standard: 0.25s ease;
}

/* Reset & Base */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
html { overflow-x:hidden; }
body {
  font-family: 'Poppins', sans-serif;
  background: var(--clr-bg);
  color: var(--clr-text);
  /* Verbesserte Viewport-Höhe: zuerst Small Viewport (iOS Safari), dann Dynamic */
  min-height: 100svh; /* Safari/iOS neue Einheit */
  min-height: 100dvh; /* Dynamic viewport für moderne Browser */
  display: flex;
  flex-direction: column;
  position: relative;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

/* Layering */
#bg-canvas { position: absolute; inset:0; width:100%; height:100%; z-index:0; }
.glow { position: fixed; width: 400px; height: 400px; border-radius: 50%; pointer-events: none; z-index: 1; animation: float 14s ease-in-out infinite; filter: blur(0px); }
.glow::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(23,133,34,0.6) 0%, rgba(23,133,34,0.0) 70%); transform: scale(0.97); opacity: 0.55; filter: blur(2px) brightness(1); animation: orbPulse 6.8s ease-in-out infinite; will-change: transform, opacity, filter; }
.glow.top-left { top: -100px; left: -100px; animation-delay: -2s; }
.glow.bottom-right { bottom: -100px; right: -100px; animation-delay: -7s; }

.page { position: relative; z-index: 2; flex:1; display:flex; flex-direction:column; height:100%; }
.site-main { flex:1; display:flex; align-items:center; justify-content:center; padding: clamp(2rem,5vh,4rem) 1rem 2.5rem; min-height:0; }

/* Hero Container */
.container {
  max-width: 640px;
  width:100%;
  text-align:center;
  margin-inline:auto;
  padding: 0 0.5rem;
  opacity:0;
  transform: translateY(10px) scale(0.98);
  animation: fadeUp 700ms ease-out 150ms forwards;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

/* Heading */
h1 { font-size: clamp(2.05rem, 6vw, 2.9rem); font-weight:700; line-height:1.15; margin:0 0 1rem; }
h1 .highlight { color: var(--clr-accent); position: relative; display:inline-block; }
h1 .highlight::after { content:""; position:absolute; left:8%; right:8%; bottom:-6px; height:2px; background: linear-gradient(90deg, transparent, var(--clr-accent), transparent); filter: blur(1px); animation: underlineGlow 2.4s ease-in-out infinite; }

.subtitle { margin-top:0; font-size:1.05rem; font-weight:400; color: var(--clr-text-muted); }

/* IP Block */
.ip-block { margin-top:1.4rem; display:flex; align-items:center; gap:0.75rem; background: rgba(255,255,255,0.05); padding: 0.85rem 1.1rem; border-radius: var(--radius-lg); position:relative; backdrop-filter: blur(4px); flex-wrap:wrap; justify-content:center; }
.ip-block code { font-family:'Poppins', monospace; font-weight:600; font-size:1.05rem; letter-spacing:0.5px; color: var(--clr-text); }

.copy-btn { cursor:pointer; background: var(--clr-accent); color: var(--clr-text); border:none; font:inherit; font-weight:600; padding:0.55rem 1rem; border-radius: var(--radius-md); display:inline-flex; align-items:center; gap:6px; transition: background var(--ease-standard), transform var(--ease-standard), box-shadow var(--ease-standard); position:relative; }
.copy-btn:hover { background: var(--clr-accent-dark); transform: translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,0.35); }
.copy-btn:active { transform: translateY(0); }
.copy-btn:focus-visible { outline:2px solid var(--clr-border-glow); outline-offset:3px; }
.copy-btn .icon-clip { width:16px; height:16px; display:flex; align-items:center; justify-content:center; font-size:16px; line-height:1; vertical-align:middle; transform: translateY(1px); }
.copy-feedback { position:absolute; left:50%; transform:translateX(-50%); top:100%; margin-top:6px; font-size:0.75rem; font-weight:600; color:#2ec74c; opacity:0; transition: opacity .35s ease, transform .35s ease; pointer-events:none; }
.copy-feedback.visible { opacity:1; transform:translate(-50%, -2px); }

/* Action Buttons */
.actions { margin-top: 1.6rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; }
.btn { display:inline-block; padding:0.75rem 1.6rem; border-radius: var(--radius-md); font-size:1rem; font-weight:600; color: var(--clr-text); position:relative; overflow:hidden; will-change: transform, box-shadow; transition: transform .2s ease, box-shadow .2s ease, background .3s ease; }
.btn::before { content:""; position:absolute; top:0; left:-150%; width:120%; height:100%; transform:skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent); transition:left 0.6s ease; pointer-events:none; }
.btn:hover::before { left:130%; }
.btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,0.35); }
.btn.discord { background:#5662f6; }
.btn.discord:hover { background:#3e49c5; }
.btn.apply { background:#1a6425; }
.btn.apply:hover { background:#145018; }
.btn.wiki { background:#d88700; }
.btn.wiki:hover { background:#a86400; }

/* Footer */
footer { width:100%; text-align:center; font-size:0.875rem; color:#aaa; opacity:0; animation: fadeIn 900ms ease 350ms forwards; margin-top:auto; padding:1rem 0 1.2rem; }

/* Icon */
.icon { width: clamp(110px, 28vw, 170px); height:auto; margin:0 auto 20px; display:block; filter: drop-shadow(0 0 0px rgba(23,133,34,0.0)); animation: bob 4.5s ease-in-out infinite, glowPulse 3s ease-in-out infinite; will-change: transform, filter; }

/* Media Queries */
@media (min-width: 1024px) { .glow { width:600px; height:600px; } .glow.top-left { top:-200px; left:-200px; } .glow.bottom-right { bottom:-200px; right:-200px; } }
@media (max-width:520px) { .ip-block { flex-direction:column; align-items:stretch; } .ip-block code { text-align:center; } }
@media (max-width:480px) { .icon { width: clamp(100px, 32vw, 150px); } }

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) { .icon, .glow, .glow::before, .container, footer { animation:none !important; } .btn, .copy-btn { transition:none !important; } }

/* Keyframes */
@keyframes fadeUp { to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes fadeIn { to { opacity:1; } }
@keyframes bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
@keyframes glowPulse { 0%,100% { filter: drop-shadow(0 0 0px rgba(23,133,34,0.0)); } 50% { filter: drop-shadow(0 0 10px rgba(23,133,34,0.35)); } }
@keyframes underlineGlow { 0%,100% { opacity:0.6; transform:scaleX(0.95); } 50% { opacity:1; transform:scaleX(1); } }
@keyframes float { 0%,100% { transform:translate(0,0); } 50% { transform:translate(12px, -10px); } }
@keyframes orbPulse { 0%, 100% { transform:scale(0.96); opacity:0.50; filter:blur(2px) brightness(1); } 50% { transform:scale(1.03); opacity:0.72; filter:blur(2.5px) brightness(1.18); } }