/* LEAD WIN THRIVE — logo + parallax only */
:root{
  --ink:#070707;
  --gold:#c8983a;
  --steel:#2c3138;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--ink);overflow:hidden;}
img{display:block;max-width:100%;}

.stage{
  position:relative;
  height:100svh;
  min-height:520px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:radial-gradient(120% 90% at 50% 30%, #161310 0%, var(--ink) 60%);
  isolation:isolate;
}
.layer{position:absolute;inset:0;will-change:transform;}

/* blueprint grid */
.layer--grid{
  background-image:
    linear-gradient(rgba(200,152,58,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,152,58,.05) 1px, transparent 1px),
    linear-gradient(rgba(200,152,58,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,152,58,.025) 1px, transparent 1px);
  background-size:160px 160px,160px 160px,32px 32px,32px 32px;
  background-position:center;
  mask-image:radial-gradient(120% 100% at 50% 45%, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(120% 100% at 50% 45%, #000 30%, transparent 80%);
  transform:scale(1.1);
}

/* skyline line-art */
.layer--skyline{color:var(--steel);}
.skyline{position:absolute;bottom:0;left:50%;translate:-50% 0;width:118%;height:62%;opacity:.7;}
.skyline__draw path,.skyline__draw rect{stroke-dasharray:var(--len,1400);stroke-dashoffset:var(--len,1400);}

/* gold peak echoing the logo roof */
.layer--peak{display:grid;place-items:end center;}
.peak{position:absolute;bottom:-4%;width:min(92vw,1100px);height:66%;opacity:0;}
.peak__shape{
  fill:none;stroke:var(--gold);stroke-width:2;opacity:.30;
  filter:drop-shadow(0 0 26px rgba(200,152,58,.25));
  stroke-dasharray:2600;stroke-dashoffset:2600;
}
.peak__glow{
  position:absolute;bottom:-30%;left:50%;translate:-50% 0;
  width:70vw;height:55vh;
  background:radial-gradient(60% 70% at 50% 100%, rgba(200,152,58,.22), transparent 70%);
  filter:blur(8px);opacity:0;
}

/* the logo */
.layer--logo{display:grid;place-items:center;z-index:5;}
.layer--logo img{
  width:min(80vw,620px);
  opacity:0;transform:translateY(20px) scale(.97);
  filter:drop-shadow(0 18px 50px rgba(200,152,58,.14));
  animation:logo-in 1.1s var(--ease) .35s forwards;
}
@keyframes logo-in{to{opacity:1;transform:none;}}

/* foreground dust */
.layer--dust{
  background-image:
    radial-gradient(1.5px 1.5px at 18% 30%, rgba(232,200,117,.5), transparent),
    radial-gradient(1px 1px at 72% 22%, rgba(232,200,117,.45), transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, rgba(244,241,232,.35), transparent),
    radial-gradient(1px 1px at 86% 64%, rgba(200,152,58,.5), transparent),
    radial-gradient(1px 1px at 9% 80%, rgba(244,241,232,.3), transparent),
    radial-gradient(1.5px 1.5px at 60% 88%, rgba(232,200,117,.4), transparent);
  opacity:0;animation:dust-in 1.6s var(--ease) 1.4s forwards;
}
@keyframes dust-in{to{opacity:.6;}}

/* film grain */
.grain{
  position:absolute;inset:-50%;z-index:7;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;}
  .layer--logo img{opacity:1 !important;transform:none !important;}
  .layer--dust{opacity:.6 !important;}
  .peak,.peak__glow{opacity:.5 !important;}
  .peak__shape{stroke-dashoffset:0 !important;}
  .skyline__draw path,.skyline__draw rect{stroke-dashoffset:0 !important;}
}