/* Holding page for letsgodogging.com while the platform is built. Same night car park and logo as the
   marketing landing (public/css/lgd.css). Static, no third-party requests. */
@font-face{font-family:'Barlow';font-weight:400;font-display:swap;src:url('/fonts/barlow-400.woff2') format('woff2')}
@font-face{font-family:'Barlow';font-weight:600;font-display:swap;src:url('/fonts/barlow-600.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:600;font-display:swap;src:url('/fonts/barlow-condensed-600.woff2') format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:700;font-display:swap;src:url('/fonts/barlow-condensed-700.woff2') format('woff2')}
@font-face{font-family:'Syncopate';font-weight:700;font-display:swap;src:url('/fonts/syncopate-700.woff2') format('woff2')}

:root{
  --tarmac:#0d0f13;--line:#2a313b;--ink:#eef0f3;--muted:#97a1ad;
  --plate:#f6cd18;--plate-ink:#0b0b0b;--sodium:#ffad3f;
  --f-plate:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--tarmac);color:var(--ink);font-family:var(--f-body);line-height:1.5;
  -webkit-font-smoothing:antialiased;display:flex;flex-direction:column;min-height:100svh}
.wrap{max-width:68rem;margin:0 auto;padding-inline:clamp(16px,5vw,48px);width:100%}

/* streetlight pool + parking bays */
.scene{position:relative;overflow:hidden;isolation:isolate;flex:1;display:flex;flex-direction:column;justify-content:center}
.scene::before{content:"";position:absolute;inset:-20% -10% auto;height:110%;z-index:-2;
  background:radial-gradient(ellipse 60% 45% at 50% 14%, color-mix(in srgb,var(--sodium) 24%,transparent), transparent 70%)}
.scene::after{content:"";position:absolute;left:0;right:0;bottom:0;height:35%;z-index:-2;
  background:repeating-linear-gradient(90deg, transparent 0 9rem, color-mix(in srgb,var(--ink) 7%,transparent) 9rem 9.25rem);
  mask-image:linear-gradient(to top,#000,transparent);-webkit-mask-image:linear-gradient(to top,#000,transparent)}

header.top{position:absolute;top:clamp(10px,2vh,18px);right:clamp(16px,4vw,32px)}
.badge18{font-family:var(--f-plate);font-weight:700;letter-spacing:.08em;font-size:.8rem;border:1.5px solid var(--muted);color:var(--muted);border-radius:999px;padding:.1rem .55rem}

/* one screen: everything sized off the viewport height as well as width */
main{display:grid;justify-items:center;align-items:center;gap:clamp(.9rem,3.2vh,2.2rem);padding-block:clamp(2.2rem,5vh,3rem) clamp(.75rem,2vh,1.5rem)}
@media (min-width:860px) and (min-aspect-ratio:4/3){
  main{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,5vw,4.5rem);justify-items:stretch}
  main .copy{text-align:left}
  main .perks{justify-content:flex-start}
  main .cta{justify-self:start}
  .logo{width:min(100%,30rem,52vh)}
}

/* the logo, as on the landing page */
.logo{container-type:inline-size;width:min(100%,26rem,46vh);justify-self:center;cursor:pointer;--red:#ff2a2a;--red-core:#ffe2e2}
.tailgate{display:grid}
.panel{width:100%;display:grid;gap:2.6cqw}
.panel svg{display:block;width:100%;height:auto;filter:drop-shadow(0 2cqw 4cqw rgba(0,0,0,.55))}
.lamp{display:grid;gap:1.6cqw;filter:brightness(.62) saturate(1.05);transition:filter .45s ease-out}
.logo.brake .lamp{filter:brightness(1.22) saturate(1.1);transition:filter .07s ease-in}
.lightbar{height:1.1cqw;border-radius:1cqw;position:relative;
  background:linear-gradient(90deg,transparent,var(--red) 6%,var(--red) 94%,transparent);
  box-shadow:0 0 1.2cqw var(--red),0 0 4cqw color-mix(in srgb,var(--red) 55%,transparent),0 0 10cqw color-mix(in srgb,var(--red) 22%,transparent)}
.lightbar::after{content:"";position:absolute;left:12%;right:12%;top:35%;height:30%;border-radius:1cqw;background:var(--red-core);opacity:.85}
.badge{font-family:"Syncopate","Arial Black",sans-serif;font-weight:700;text-transform:uppercase;font-size:7.4cqw;letter-spacing:.1em;padding-left:.1em;
  text-align:center;white-space:nowrap;line-height:1;color:var(--red-core);
  text-shadow:0 0 .04em #fff,0 0 .12em var(--red),0 0 .3em var(--red),0 0 .7em color-mix(in srgb,var(--red) 55%,transparent)}
.logo.sweep .lightbar{animation:grow .8s cubic-bezier(.2,.7,.2,1) both}
.logo.sweep .badge{animation:on .5s ease-out .7s both}
@keyframes grow{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
@keyframes on{0%{opacity:0}30%{opacity:.9}45%{opacity:.25}100%{opacity:1}}

/* copy */
.copy{text-align:center;max-width:34rem;display:grid;gap:clamp(.45rem,1.4vh,.9rem);justify-items:inherit}
.copy > *{margin:0}
.kicker{font-family:var(--f-plate);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:clamp(.78rem,1.8vh,.95rem);color:var(--plate)}
h1{font-family:var(--f-plate);font-weight:700;text-transform:uppercase;letter-spacing:.01em;line-height:1;
  font-size:clamp(1.65rem,min(8vw,5.6vh),3.4rem);text-wrap:balance}
.lede{font-size:clamp(.9rem,2.05vh,1.05rem);line-height:1.45;text-wrap:pretty}
.perks{list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem}
.perks li{font-size:clamp(.76rem,1.75vh,.88rem);font-weight:600;color:var(--ink);border:1px solid color-mix(in srgb,var(--plate) 55%,transparent);
  background:color-mix(in srgb,var(--plate) 9%,transparent);border-radius:999px;padding:.2rem .7rem}
.sign{font-weight:600;font-size:clamp(.88rem,2vh,1rem)}
.cta{justify-self:center;font-family:var(--f-plate);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:clamp(1rem,2.3vh,1.15rem);
  color:var(--plate-ink);background:var(--plate);border:0;border-radius:10px;padding:clamp(.5rem,1.4vh,.7rem) 1.5rem;cursor:pointer}
.cta:hover{filter:brightness(1.06)}
.cta:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.flashed{color:var(--muted);font-size:.9rem}

footer{border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent);color:var(--muted);font-size:.8rem;padding-block:clamp(.5rem,1.4vh,.9rem);text-align:center}

@media (prefers-reduced-motion:reduce){.logo.sweep .lightbar,.logo.sweep .badge{animation:none}.lamp,.logo.brake .lamp{transition:none}}
[hidden]{display:none!important}