/* Featherland — Anime Fantasy Under Construction */
:root{
  --bg-1:#0b1020;          /* deep night */
  --bg-2:#1a1f3a;          /* twilight */
  --ink:#e9f0ff;           /* moon ink */
  --muted:#b7c2e6;
  --accent:#7cc9ff;        /* cerulean */
  --accent-2:#ffb7e6;      /* sakura glow */
  --glow: 0 0 20px #9fd6ff80, 0 0 40px #9fd6ff40;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: radial-gradient(1200px 700px at 70% -10%, #2a347080 0%, transparent 60%),
              radial-gradient(800px 500px at 10% 0%, #18204d66 0%, transparent 60%),
              linear-gradient(180deg, var(--bg-1), var(--bg-2));
  overflow-x:hidden;
}
html{ scroll-behavior:smooth }

/* Parallax scene layers */
#scene{position:fixed; inset:0; overflow:hidden; z-index:-1}
.layer{position:absolute; inset: -10% -10% 0 -10%; pointer-events:none}

.stars{
  background:
    radial-gradient(1px 1px at 10% 20%, #fff, #ffffff00 60%),
    radial-gradient(1px 1px at 30% 80%, #fff, #ffffff00 60%),
    radial-gradient(1px 1px at 70% 30%, #fff, #ffffff00 60%),
    radial-gradient(1px 1px at 90% 60%, #fff, #ffffff00 60%),
    radial-gradient(1px 1px at 50% 50%, #fff, #ffffff00 60%);
  opacity:.7;
  animation: twinkle 6s ease-in-out infinite alternate;
}

.nebulas{
  background:
    radial-gradient(400px 200px at 20% 30%, #7cc9ff0f 0%, #ffffff00 70%),
    radial-gradient(500px 300px at 80% 20%, #ffb7e610 0%, #ffffff00 70%),
    radial-gradient(600px 350px at 60% 60%, #a1ffe50e 0%, #ffffff00 70%);
  filter: blur(22px) saturate(120%);
  mix-blend-mode: screen;
}

.moon{
  background:
    radial-gradient(circle at 78% 18%, #fff 0%, #e9f0ff 10%, #c5d6ff 40%, #c5d6ff00 42%),
    radial-gradient(120px 60px at 78% 18%, #ffffff22 0%, #ffffff00 70%);
  transform: translateZ(0);
}

.clouds{
  background:
    radial-gradient(200px 60px at 20% 25%, #ffffff14 0%, #ffffff00 70%),
    radial-gradient(260px 70px at 60% 30%, #ffffff10 0%, #ffffff00 70%),
    radial-gradient(220px 70px at 80% 40%, #ffffff12 0%, #ffffff00 70%);
  animation: drift 60s linear infinite;
}

.feathers{
  background:
    radial-gradient(2px 6px at 30% 10%, #cfeaffaa 0%, #ffffff00 60%),
    radial-gradient(1.5px 5px at 55% 0%, #ffdff7aa 0%, #ffffff00 60%),
    radial-gradient(2px 6px at 80% 15%, #cfeaffaa 0%, #ffffff00 60%);
  transform: translateZ(0);
  animation: fall 18s ease-in-out infinite;
  opacity:.4;
}

/* Container and layout */
.container{
  min-height:100dvh;
  max-width: 980px;
  margin:0 auto;
  padding: clamp(24px, 4vw, 48px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 32px;
}

.brand{ text-align:center; }
.logo{ font-size: 42px; filter: drop-shadow(0 0 10px #ffffff60)}
.title{
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 800;
  letter-spacing:.5px;
  margin: 8px 0 2px;
  font-size: clamp(40px, 6vw, 68px);
  text-shadow: 0 6px 30px #0006;
}
.tagline{ color:var(--muted); margin:0; font-weight:300 }

/* Top nav */
.nav{
  display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
  background: #0f153166; border:1px solid #8acbff22;
  padding:10px 14px; border-radius:12px; box-shadow: 0 10px 30px #0006;
}
.nav a{
  color: var(--ink); text-decoration:none; font-weight:600; opacity:.9;
  padding:8px 10px; border-radius:8px; transition: background .2s ease, color .2s ease;
}
.nav a:hover{ background:#ffffff12; color:#fff }

.card{
  width: min(780px, 100%);
  background: linear-gradient(180deg, #0f1531cc, #0f1531a6);
  border: 1px solid #8acbff33;
  border-radius: 18px;
  box-shadow: 0 20px 60px #0008, inset 0 0 80px #ffffff08;
  padding: clamp(20px, 4vw, 36px);
  backdrop-filter: blur(10px) saturate(120%);
}

.status{
  margin:0 0 6px;
  font-size: clamp(22px, 3.2vw, 30px);
}
.desc{ color:#d6defa; line-height:1.7; margin: 0 0 20px; }

/* Subscribe form */
.subscribe{ display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center }
.subscribe input{
  width:100%; padding: 12px 14px; border-radius: 12px; border:1px solid #8acbff33;
  background:#0d1330; color:var(--ink); outline:none;
}
.subscribe input:focus{ border-color:#9fd6ff88; box-shadow: 0 0 0 3px #9fd6ff22 }
.subscribe .form-hint{ grid-column:1 / -1; margin:4px 0 0; color:#b7c2e6; font-size:.9rem }
.subscribe .form-msg{ grid-column:1 / -1; margin:4px 0 0; min-height:1.2em }
.subscribe .form-msg.ok{ color:#a7f3d0 } /* minty green */
.subscribe .form-msg.err{ color:#fecaca } /* soft red */

/* Sections */
.section{ width:min(900px,100%); background:#0f15314d; border:1px solid #8acbff1f; border-radius:16px; padding:22px 22px; box-shadow: 0 14px 40px #0007 }
.section + .section{ margin-top: 8px }
.section-title{ margin:0 0 10px; font-size: clamp(18px, 2.8vw, 24px) }
.grid{ display:grid; gap:14px }
.features-grid{ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) }
.feature{ background:#0d1330; border:1px solid #8acbff22; border-radius:12px; padding:14px }

.roadmap{ margin:0; padding-left: 18px }
.roadmap li{ margin: 6px 0 }

details{ background:#0d1330; border:1px solid #8acbff22; border-radius:12px; padding:10px 12px }
details + details{ margin-top:8px }
summary{ cursor:pointer; font-weight:600 }

.hero{ position:relative }

/* A11y helpers */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

.actions{ display:flex; gap:12px; flex-wrap:wrap }
.btn{ cursor:pointer; user-select:none; }
.btn{ 
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 18px; border-radius: 12px; border:1px solid transparent;
  font-weight:600; letter-spacing:.2px; text-decoration:none; color:var(--ink);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn.primary{ background: linear-gradient(180deg, #6ec7ff, #4aa6f3); box-shadow: var(--glow) }
.btn.primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px #78caff50, var(--glow) }
.btn.ghost{ background:#ffffff12; border-color:#ffffff20 }
.btn.ghost[aria-disabled="true"]{ opacity:.6; pointer-events:none }

.note{ color:#b7c2e6; opacity:.8; margin: 10px 0 0; font-size:.95rem }

.footer{ opacity:.8; text-align:center; }

/* Crest */
.crest{ position: fixed; left: 4%; bottom: 6%; width: 160px; height:auto; opacity:.4; filter: drop-shadow(0 0 12px #ffffff1a); animation: shimmer 6s ease-in-out infinite }

/* Motion */
@keyframes drift{
  from{ transform: translateX(0) }
  to{ transform: translateX(-20%) }
}
@keyframes fall{
  0%{ transform: translateY(-3%) rotate(0deg) }
  50%{ transform: translateY(3%) rotate(0.5deg) }
  100%{ transform: translateY(-3%) rotate(0deg) }
}
@keyframes twinkle{
  0%{ opacity:.6; filter:brightness(1) }
  100%{ opacity:.9; filter:brightness(1.3) }
}
@keyframes shimmer{
  0%{ opacity:.25 }
  50%{ opacity:.5 }
  100%{ opacity:.25 }
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .stars, .clouds, .feathers, .crest{ animation: none !important }
  .btn{ transition:none }
}

/* Responsive tweaks */
@media (max-width: 560px){
  .actions{ justify-content:center }
  .crest{ display:none }
}