/* Landing page - Lightning Bay Condo Association.
   Loaded only on the landing page. */

body{
  background:var(--navy-deep);
  height:100vh;
  overflow:hidden;
}

.stage{position:fixed; inset:0; background:var(--navy-deep);}

.slide{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0;
  animation:fade 15s infinite;
  will-change:opacity,transform;
}
.slide:nth-child(1){animation-delay:0s;}
.slide:nth-child(2){animation-delay:-5s;}
.slide:nth-child(3){animation-delay:-10s;}

.scrim{
  position:fixed; inset:0; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(13,24,40,.5) 0%, rgba(13,24,40,0) 26%,
    rgba(13,24,40,0) 64%, rgba(13,24,40,.55) 100%);
}

.header{
  position:fixed; top:0; left:0; right:0; z-index:5;
  filter:drop-shadow(0 16px 26px rgba(13,24,40,.5));
  opacity:0;
  animation:drop .85s .05s cubic-bezier(.2,.7,.2,1) forwards;
}
.header svg.shape{display:block; width:100%; height:210px;}

.topbar{
  position:fixed; top:0; left:0; right:0; z-index:6; height:118px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(22px,5vw,70px);
}

.brand{opacity:0; animation:rise .75s .3s cubic-bezier(.2,.7,.2,1) forwards;}
.brand h1{
  font-family:'Fraunces',serif; font-optical-sizing:auto; font-weight:600;
  color:var(--ink); font-size:clamp(24px,3vw,38px);
  letter-spacing:-.015em; line-height:.95;
}
.brand .sub{
  display:flex; align-items:center; gap:10px; margin-top:10px;
  font-size:11px; font-weight:600; letter-spacing:.32em;
  text-transform:uppercase; color:var(--muted);
}
.brand .sub::before{
  content:""; width:26px; height:2px;
  background:var(--gold); border-radius:2px;
}

.cta{
  opacity:0; animation:rise .75s .44s cubic-bezier(.2,.7,.2,1) forwards;
  font-family:'Hanken Grotesk',sans-serif; font-weight:600;
  font-size:14.5px; letter-spacing:.01em; color:var(--navy-deep);
  background:linear-gradient(180deg,var(--gold-2),var(--gold));
  padding:15px 25px; border-radius:100px; text-decoration:none;
  display:inline-flex; align-items:center; gap:9px;
  box-shadow:0 12px 26px -10px rgba(224,162,63,.75),
             0 1px 0 rgba(255,255,255,.4) inset;
  transition:transform .18s ease, box-shadow .18s ease;
  white-space:nowrap;
}
.cta:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 34px -10px rgba(224,162,63,.85),
             0 1px 0 rgba(255,255,255,.4) inset;
}
.cta:active{transform:translateY(0);}
.cta:focus-visible{outline:3px solid #fff; outline-offset:3px;}
.cta svg{width:17px; height:17px;}

@keyframes fade{
  0%{opacity:0; transform:scale(1.09);}
  6%{opacity:1;}
  33%{opacity:1;}
  40%{opacity:0;}
  100%{opacity:0; transform:scale(1.0);}
}
@keyframes rise{
  from{opacity:0; transform:translateY(14px);}
  to{opacity:1; transform:translateY(0);}
}
@keyframes drop{
  from{opacity:0; transform:translateY(-26px);}
  to{opacity:1; transform:translateY(0);}
}

@media (max-width:560px){
  .topbar{height:104px;}
  .header svg.shape{height:188px;}
}

@media (prefers-reduced-motion:reduce){
  .slide{animation:none;}
  .slide:nth-child(1){opacity:1;}
  .header,.brand,.cta{animation:none; opacity:1; transform:none;}
}