@font-face{font-family:"Barlow Condensed";src:url("/fonts/barlow-condensed-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("/fonts/atkinson-hyperlegible-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("/fonts/atkinson-hyperlegible-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@property --ambient-color{syntax:"<color>";inherits:true;initial-value:rgba(42,105,255,.22)}

:root{
  color-scheme:dark;
  --night:#040e13;
  --frost:#fbfeff;
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:"Atkinson Hyperlegible","Avenir Next","Segoe UI",sans-serif;
  --ambient-color:rgba(42,105,255,.22);
  --edge:rgba(251,254,255,.14);
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
html{background:var(--night);scroll-behavior:smooth}
body{
  min-width:320px;
  min-height:100svh;
  margin:0;
  overflow-x:hidden;
  color:var(--frost);
  font-family:var(--body);
  background:
    radial-gradient(circle at 50% -20%,rgba(42,105,255,.18),transparent 42%),
    linear-gradient(145deg,#02070a 0%,#071722 56%,#03090d 100%);
  transition:--ambient-color .35s ease,background-color .3s ease;
}
body::before,body::after{position:fixed;inset:0;pointer-events:none;content:""}
body::before{
  z-index:0;
  background:radial-gradient(46rem circle at 50% 44%,var(--ambient-color),transparent 66%);
  opacity:.7;
  transition:opacity .35s ease;
}
body::after{
  z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(circle at 50% 45%,#000,transparent 76%);
  mask-image:radial-gradient(circle at 50% 45%,#000,transparent 76%);
  opacity:.45;
}
body[data-active="food_truck"]{--ambient-color:rgba(42,105,255,.26)}
body[data-active="coffee_shop"]{--ambient-color:rgba(216,154,82,.24)}
body[data-active="bowling_alley"]{--ambient-color:rgba(255,97,111,.22)}

.skip-link{
  position:fixed;
  z-index:20;
  top:1rem;
  left:1rem;
  padding:.7rem 1rem;
  border-radius:.7rem;
  color:#071722;
  background:var(--frost);
  font-weight:700;
  transform:translateY(-180%);
  transition:transform .2s ease;
}
.skip-link:focus{transform:none}

.selector-shell{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-rows:auto auto auto;
  align-content:center;
  gap:clamp(.85rem,2vh,1.35rem);
  width:min(1180px,calc(100% - clamp(1.5rem,6vw,6rem)));
  min-height:100svh;
  margin:auto;
  padding:max(1.5rem,env(safe-area-inset-top)) 0 max(1rem,env(safe-area-inset-bottom));
}

.intro{text-align:center;animation:reveal .62s var(--ease) both}
.brand-plate{
  width:clamp(10.5rem,19vw,14.5rem);
  margin:0 auto clamp(.9rem,2vh,1.3rem);
  overflow:hidden;
  border-radius:clamp(.6rem,.8vw,.75rem);
  box-shadow:0 0 0 1px rgba(255,255,255,.72),0 0 0 2px rgba(42,105,255,.18),0 0 3.5rem rgba(42,105,255,.26),0 1.2rem 3rem rgba(0,0,0,.4);
}
.brand-plate img{display:block;width:100%;height:auto;border-radius:inherit}
h1{margin:0;font:700 clamp(2.25rem,5vw,4rem)/.9 var(--display);letter-spacing:-.025em;text-wrap:balance}
.intro__copy{width:min(100%,44rem);margin:.75rem auto 0;color:rgba(251,254,255,.72);font-size:clamp(.9rem,1.4vw,1.05rem);line-height:1.45;text-wrap:balance}

.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-self:center;width:100%;height:clamp(20rem,40svh,26rem);gap:clamp(.7rem,1.4vw,1.15rem)}
.choice{
  --accent-rgb:42,105,255;
  --wash-rgb:42,105,255;
  --delay:.08s;
  position:relative;
  isolation:isolate;
  display:flex;
  min-height:100%;
  flex-direction:column;
  justify-content:space-between;
  gap:2rem;
  padding:clamp(1.25rem,2.7vw,2.25rem);
  overflow:hidden;
  border:1px solid var(--edge);
  border-radius:clamp(1.3rem,2.4vw,2rem);
  color:var(--frost);
  text-decoration:none;
  background:
    linear-gradient(150deg,rgba(var(--wash-rgb),.2),transparent 48%),
    rgba(7,19,30,.8);
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 1.4rem 3.6rem rgba(0,0,0,.22);
  transform:translateY(1.1rem);
  opacity:0;
  animation:reveal .68s var(--ease) var(--delay) forwards;
  transition:transform .28s var(--ease),border-color .24s ease,box-shadow .28s ease,opacity .2s ease;
}
.choice::before{
  position:absolute;
  z-index:-1;
  inset:0;
  background:radial-gradient(24rem circle at var(--pointer-x,50%) var(--pointer-y,28%),rgba(var(--accent-rgb),.3),transparent 58%);
  content:"";
  opacity:.42;
  transition:opacity .25s ease;
}
.choice::after{
  position:absolute;
  z-index:-1;
  inset:auto -20% -42% 18%;
  aspect-ratio:1;
  border-radius:50%;
  background:rgba(var(--wash-rgb),.15);
  filter:blur(2.7rem);
  content:"";
}
.choice--coffee{--accent-rgb:216,154,82;--wash-rgb:111,47,22;--delay:.15s}
.choice--bowling{--accent-rgb:255,97,111;--wash-rgb:140,38,51;--delay:.22s}
.choice:hover,.choice:focus-visible{
  border-color:rgba(var(--accent-rgb),.7);
  box-shadow:inset 0 1px rgba(255,255,255,.1),0 1.8rem 4.5rem rgba(var(--wash-rgb),.2);
  transform:translateY(-.4rem);
}
.choice:hover::before,.choice:focus-visible::before{opacity:1}
.choice:focus-visible{outline:3px solid var(--frost);outline-offset:4px}

.choice__icon{
  width:clamp(3.6rem,6vw,5.4rem);
  height:auto;
  color:rgb(var(--accent-rgb));
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:180;
  stroke-dashoffset:180;
  filter:drop-shadow(0 0 1rem rgba(var(--accent-rgb),.28));
  animation:draw .8s var(--ease) calc(var(--delay) + .18s) forwards;
  transition:transform .3s var(--ease);
}
.choice__icon.choice__icon--illustrated{
  width:clamp(4.2rem,7vw,5.8rem);
  stroke-dasharray:none;
  stroke-dashoffset:0;
  filter:drop-shadow(0 .55rem 1rem rgba(var(--wash-rgb),.38));
  animation:illustration-reveal .7s var(--ease) calc(var(--delay) + .18s) both;
}
.choice:hover .choice__icon,.choice:focus-visible .choice__icon{transform:translateY(-.25rem) scale(1.04)}
.choice__body{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}
.choice__label{max-width:8ch;font:700 clamp(2.45rem,4.5vw,4.6rem)/.84 var(--display);letter-spacing:-.018em;text-wrap:balance}
.choice__arrow{
  display:grid;
  width:clamp(2.6rem,4vw,3.4rem);
  aspect-ratio:1;
  flex:0 0 auto;
  place-items:center;
  border:1px solid rgba(var(--accent-rgb),.55);
  border-radius:50%;
  color:rgb(var(--accent-rgb));
  font-size:clamp(1.35rem,2vw,1.8rem);
  transition:color .2s ease,background .2s ease,transform .3s var(--ease);
}
.choice:hover .choice__arrow,.choice:focus-visible .choice__arrow{color:#07131e;background:rgb(var(--accent-rgb));transform:translateX(.2rem)}
footer{color:rgba(251,254,255,.56);font-size:.78rem;letter-spacing:.14em;text-align:center;animation:reveal .6s var(--ease) .28s both}

body.is-leaving .choice:not(.is-selected){opacity:.2;transform:scale(.98)}
body.is-leaving .choice.is-selected{border-color:rgba(var(--accent-rgb),.9);box-shadow:0 0 5rem rgba(var(--wash-rgb),.35);transform:scale(1.018)}

@keyframes reveal{from{opacity:0;transform:translateY(.8rem) scale(.99)}to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes illustration-reveal{from{opacity:0;transform:translateY(.45rem) scale(.9)}}

@media (max-width:720px),(min-width:721px) and (max-width:1100px) and (orientation:portrait){
  .selector-shell{grid-template-rows:auto auto auto;gap:.85rem;width:min(100% - 1.25rem,36rem);padding:max(.9rem,env(safe-area-inset-top)) 0 max(.75rem,env(safe-area-inset-bottom))}
  .brand-plate{width:clamp(9.2rem,42vw,11rem);margin-bottom:.7rem}
  h1{font-size:clamp(2rem,10vw,3rem)}
  .choices{grid-template-columns:1fr;align-self:center;height:auto;gap:.65rem}
  .choice{min-height:clamp(6rem,15svh,7rem);flex-direction:row;align-items:center;gap:1rem;padding:clamp(1rem,4.5vw,1.35rem) clamp(1rem,5vw,1.5rem)}
  .choice__icon{width:clamp(2.8rem,12vw,3.7rem);flex:0 0 auto}
  .choice__body{min-width:0;flex:1;align-items:center}
  .choice__label{max-width:none;font-size:clamp(2rem,10vw,3.15rem);line-height:.9}
  .choice__arrow{width:2.65rem}
  footer{font-size:.7rem}
}

@media (min-width:721px) and (max-height:700px){
  .selector-shell{gap:.8rem;padding:1rem 0 .7rem}
  .brand-plate{width:9.5rem;margin-bottom:.5rem}
  h1{font-size:2.5rem}
  .intro__copy{margin-top:.35rem;font-size:.82rem}
  .choices{height:min(50svh,19rem)}
  .choice{min-height:10rem;padding:1.35rem}
  .choice__icon{width:3.5rem}
  .choice__label{font-size:clamp(2.4rem,4vw,3.5rem)}
}

@media (hover:none){.choice:hover{transform:none}.choice::before{opacity:.3}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .choice,.choice:hover,.choice:focus-visible,.choice__icon,.choice__arrow{transform:none}
}