/* House Vandiver: dark forest construction page */
:root{
  --bg: #0c1110;
  --ink: #d8e3df;
  --pine: #0f3a2e;
  --pine-2: #145040;
  --pine-3: #1b6b55;
  --wolf: #b8c3c1;
  --accent: #88c9a1;
  --shadow: rgba(0,0,0,0.5);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: radial-gradient(1200px 700px at 70% -10%, #12231f 0%, var(--bg) 60%) fixed;
  color:var(--ink);
  font-family: ui-sans-serif, system-ui, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji;
  overflow-x:hidden;
}

/* Parallax background layers */
#bg{position:fixed; inset:0; overflow:hidden; z-index:-1}
.layer{
  position:absolute; inset:0;
  background-repeat:repeat-x;
  background-position:bottom center;
  will-change: transform, opacity;
}
.mountains{
  background-image:
    radial-gradient(100% 120% at 50% 120%, transparent 40%, rgba(0,0,0,.6) 100%),
    linear-gradient(to top, #0c1513 40%, #0e1b17 100%);
  transform: translateY(10px);
}
.trees.far{
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="200" viewBox="0 0 800 200"><g fill="%23145040" opacity=".35"><path d="M0 200h90l-24-40 18 0-30-50 20 0-34-60-34 60h20l-30 50h18zM90 200h120l-30-50 22 0-40-70-42 70h24zM210 200h150l-40-65 25 0-55-90-58 90h28z" /></g></svg>');
  animation: drift 60s linear infinite;
  opacity:.8;
}
.trees.near{
  background-image:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="800" height="220" viewBox="0 0 800 220"><g fill="%231b6b55" opacity=".6"><path d="M0 220h120l-28-48 24 0-42-70 26 0-46-78-46 78h26l-42 70h24zM120 220h150l-36-60 28 0-58-96-60 96h30zM270 220h180l-42-70 34 0-70-116-74 116h34z" /></g></svg>');
  animation: drift 45s linear infinite reverse;
  opacity:.95;
}
.fog{
  background: radial-gradient(1000px 200px at 50% 80%, rgba(255,255,255,0.05), transparent 60%),
              radial-gradient(600px 140px at 20% 70%, rgba(255,255,255,0.06), transparent 60%),
              radial-gradient(600px 140px at 80% 78%, rgba(255,255,255,0.04), transparent 60%);
  animation: breathe 12s ease-in-out infinite;
}

/* Header / Crest */
.site-title{
  text-align:center;
  padding-top: clamp(48px, 8vh, 96px);
}
.crest{
  width:min(220px, 40vw);
  filter: drop-shadow(0 10px 30px var(--shadow));
  animation: crestRise 1.8s ease-out both;
}
.banner img{
  width:min(640px, 90vw);
  margin-top: 12px;
  filter: drop-shadow(0 6px 18px var(--shadow));
  animation: bannerIn 1s ease-out .5s both;
}
.motto{
  margin:8px auto 0;
  opacity:.8;
  letter-spacing:.4px;
  animation: fadeIn .8s ease-out .9s both;
}

/* Card */
.content{display:grid; place-items:center; padding:32px}
.card{
  width:min(720px, 92vw);
  background: rgba(10,18,16,0.55);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  padding: clamp(20px, 3vw, 32px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  text-align:center;
  animation: slideUp .9s ease-out .6s both;
}
.card h2{
  margin:0 0 6px 0;
  font-weight:700;
  letter-spacing:.5px;
}
.progress{
  margin:18px auto 8px;
  width: 80%;
  height: 10px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow:hidden;
  position:relative;
}
.progress .bar{
  position:absolute; left:0; top:0; bottom:0;
  width:30%;
  background: linear-gradient(90deg, var(--pine-3), var(--accent));
  animation: loading 2.6s ease-in-out infinite;
}

.cta{margin-top:18px}
.btn{
  display:inline-block;
  padding:10px 16px;
  border-radius:999px;
  text-decoration:none;
  color:#0b1412;
  background: var(--accent);
  font-weight:600;
  box-shadow: 0 6px 18px rgba(136, 201, 161, 0.35);
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(136, 201, 161, 0.45); }
.btn:active{ transform: translateY(0); opacity:.9}

/* Fireflies */
.fireflies{
  position:relative;
  height: 0; /* container purely for absolutely positioned dots */
}
.fireflies::before,
.fireflies::after{
  content:"";
  position:absolute; left:50%; top:-40px;
  width:4px; height:4px; border-radius:50%;
  background: #dfffd1;
  box-shadow:
    -200px 14px 0 0 rgba(223,255,209,0.8),
    -120px -6px 0 0 rgba(223,255,209,0.6),
    -20px 20px 0 0 rgba(223,255,209,0.9),
    80px -10px 0 0 rgba(223,255,209,0.7),
    180px 6px 0 0 rgba(223,255,209,0.85),
    260px -16px 0 0 rgba(223,255,209,0.7);
  filter: blur(0.4px);
  animation: twinkle 3.4s ease-in-out infinite;
}
.fireflies::after{
  top:-10px;
  animation-duration: 4.1s;
  animation-delay: .8s;
}

/* Footer */
.footer{
  text-align:center;
  padding:26px 0 40px;
  opacity:.65;
}

/* Keyframes */
@keyframes drift{
  from{ background-position: 0 bottom; }
  to{ background-position: -800px bottom; }
}
@keyframes breathe{
  0%,100%{opacity:.35; transform: translateY(0)}
  50%{opacity:.55; transform: translateY(-6px)}
}
@keyframes crestRise{
  from{ transform: translateY(8px) scale(.98); opacity:0 }
  to{ transform: translateY(0) scale(1); opacity:1 }
}
@keyframes bannerIn{
  from{ transform: translateY(8px); opacity:0 }
  to{ transform: translateY(0); opacity:1 }
}
@keyframes fadeIn{
  from{opacity:0} to{opacity:.9}
}
@keyframes slideUp{
  from{ transform: translateY(10px); opacity:0 }
  to{ transform: translateY(0); opacity:1 }
}
@keyframes loading{
  0%{ transform: translateX(-40%) scaleX(.8) }
  50%{ transform: translateX(80%) scaleX(1.1) }
  100%{ transform: translateX(-40%) scaleX(.8) }
}
@keyframes twinkle{
  0%,100%{opacity:.5; filter: blur(0.8px)}
  50%{opacity:1; filter: blur(0.2px)}
}

/* Small screens */
@media (max-width: 560px){
  .motto{font-size:.95rem}
}