/* ============================================================
   GATHER, Ocean Grove
   Alternate landing page. One locked screen, nothing scrolls,
   the wordmark drifts across a field of people.
   ============================================================ */

@font-face {
  font-family: 'Jost';
  src: url('/assets/fonts/jost-var-latin.woff2') format('woff2');
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --green:#858b68;
  --green-deep:#5c6147;
  --green-900:#2f3324;
  --cream:#f4f9ee;
  --clay:#c1522e;
  --f:'Jost',ui-sans-serif,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --pad:clamp(14px,3.2vw,34px);
  --ease:cubic-bezier(.22,1,.36,1);
  --scrim:.14;              /* green wash over the photograph, not the edge darkening */
}

*,*::before,*::after{box-sizing:border-box}

html,body{
  height:100%;
  overflow:hidden;              /* one screen, never scrolls */
  overscroll-behavior:none;
}
body{
  margin:0;
  font-family:var(--f);
  color:var(--cream);
  background:
    radial-gradient(120% 95% at 50% 42%, #939977 0%, var(--green) 44%, #6f7557 100%);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h2,p,ul,ol{margin:0}
ul,ol{list-style:none;padding:0}

/* ============================================================
   BACKDROP
   The photograph. Painted unconditionally: if it fails to load
   there is simply nothing there and the green field below shows
   through, so there is no load state to get wrong.
   Tune --scrim if the cream type needs more or less contrast.
   ============================================================ */
.backdrop{position:fixed;inset:0;z-index:0}
.backdrop img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
/* Two jobs, kept separate on purpose.
   The edge gradients darken only the top and bottom strips, where the corner
   text and the keys sit, so those stay readable.
   The flat green wash underneath is just enough to tie the photograph to the
   brand. The middle of the frame stays clear so the cups actually read. */
.backdrop::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(180deg,
      rgba(24,26,18,.62) 0%,
      rgba(24,26,18,.22) 14%,
      rgba(24,26,18,0)   30%,
      rgba(24,26,18,0)   66%,
      rgba(24,26,18,.26) 86%,
      rgba(24,26,18,.66) 100%),
    linear-gradient(0deg,
      rgba(92,97,71,var(--scrim)),
      rgba(92,97,71,var(--scrim)));
}

/* paper grain so the flat green has some tooth */
body::after{
  content:'';position:fixed;inset:0;z-index:6;pointer-events:none;
  /* soft-light, not overlay: overlay lifts the shadows and flattens the photo */
  opacity:.16;mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

:focus-visible{outline:2px solid var(--cream);outline-offset:4px;border-radius:2px}

/* ============================================================
   THE FIELD, little people drifting about
   ============================================================ */
.field{position:fixed;inset:0;z-index:1;pointer-events:none}
.p{
  position:absolute;
  left:var(--x);top:var(--y);
  width:var(--s);aspect-ratio:32.25/27.85;
  opacity:var(--o);
  background:var(--cream);
  -webkit-mask:url('/assets/img/gather-person-cream.svg') center/contain no-repeat;
  mask:url('/assets/img/gather-person-cream.svg') center/contain no-repeat;
  animation:drift var(--d) ease-in-out infinite;
  animation-delay:var(--delay);
  will-change:transform;
}
@keyframes drift{
  0%   {transform:translate(0,0) rotate(0deg)}
  25%  {transform:translate(26px,-34px) rotate(6deg)}
  50%  {transform:translate(-18px,-56px) rotate(-5deg)}
  75%  {transform:translate(-38px,-22px) rotate(4deg)}
  100% {transform:translate(0,0) rotate(0deg)}
}

/* ============================================================
   THE FLOATING LOGO
   Travel radius lives in custom properties so the keyframes can
   stay one set and still behave on a phone.
   ============================================================ */
/* The badge is close to square (131.54 x 93.49), so it needs a smaller
   width and less vertical travel than the wordmark did to stay on screen. */
.floater{
  --tx:20vw;
  --ty:17vh;
  position:fixed;z-index:3;
  left:50%;top:50%;
  width:clamp(190px,33vw,420px);height:auto;
  pointer-events:none;
  /* The keyframe drift is the fallback. When home.js boots it adds .is-live,
     takes the animation off, and drives the transform itself so the mark can
     react to the pointer. Without JS the mark still wanders. */
  animation:fly 54s cubic-bezier(.45,0,.55,1) infinite;
  will-change:transform;
  /* the picture has a bright patch through the middle, so the mark needs its
     own separation rather than relying on the backdrop staying dark */
  filter:drop-shadow(0 10px 30px rgba(18,20,13,.55)) drop-shadow(0 2px 6px rgba(18,20,13,.35));
}
@keyframes fly{
  0%   {transform:translate(-50%,-50%) translate(calc(var(--tx) * -.75), calc(var(--ty) * -.62)) rotate(-6deg)}
  13%  {transform:translate(-50%,-50%) translate(calc(var(--tx) *  .58), calc(var(--ty) * -.88)) rotate(5deg)}
  27%  {transform:translate(-50%,-50%) translate(calc(var(--tx) *  .92), calc(var(--ty) *  .18)) rotate(-3deg)}
  41%  {transform:translate(-50%,-50%) translate(calc(var(--tx) *  .22), calc(var(--ty) *  .84)) rotate(7deg)}
  55%  {transform:translate(-50%,-50%) translate(calc(var(--tx) * -.68), calc(var(--ty) *  .52)) rotate(-5deg)}
  69%  {transform:translate(-50%,-50%) translate(calc(var(--tx) * -.94), calc(var(--ty) * -.16)) rotate(4deg)}
  83%  {transform:translate(-50%,-50%) translate(calc(var(--tx) * -.12), calc(var(--ty) * -.44)) rotate(-2deg)}
  100% {transform:translate(-50%,-50%) translate(calc(var(--tx) * -.75), calc(var(--ty) * -.62)) rotate(-6deg)}
}
.floater.is-live{animation:none}

@media (max-width:760px){
  .floater{--tx:11vw;--ty:15vh}
}

/* ============================================================
   EDGES
   ============================================================ */
.edge{
  position:fixed;z-index:5;
  font-size:clamp(10px,1.15vw,12px);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  max-width:min(42vw,320px);
}
.edge--tl{left:var(--pad);top:max(var(--pad),env(safe-area-inset-top))}
.edge--tr{right:var(--pad);top:max(var(--pad),env(safe-area-inset-top));text-align:right}
.tag{opacity:.9}

/* Read only, so no hover or pointer. It is a label, not a control. */
.status{
  display:inline-flex;align-items:center;gap:.55em;
  border:1px solid rgba(244,249,238,.4);
  border-radius:999px;padding:.5em .85em;white-space:nowrap;
}
.status__dot{width:6px;height:6px;border-radius:50%;background:rgba(244,249,238,.5);flex:none}
.status.is-open .status__dot{background:#c9e5a6;box-shadow:0 0 0 0 rgba(201,229,166,.6);animation:beat 2.6s infinite}
.status.is-closed .status__dot{background:var(--clay)}
@keyframes beat{
  0%{box-shadow:0 0 0 0 rgba(201,229,166,.55)}
  70%{box-shadow:0 0 0 7px rgba(201,229,166,0)}
  100%{box-shadow:0 0 0 0 rgba(201,229,166,0)}
}

/* ============================================================
   THE BAR
   Address and the real buttons, on the page rather than tucked
   behind a panel. Every key is a 44px touch target.
   ============================================================ */
.bar{
  position:fixed;z-index:5;
  left:var(--pad);right:var(--pad);
  bottom:max(var(--pad),env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;
  gap:clamp(12px,2vw,18px);
}
.keys{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(8px,1.2vw,12px)}

.key{
  font:inherit;
  font-size:clamp(11px,1.15vw,13px);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;                      /* comfortable thumb target */
  padding:0 clamp(16px,2vw,24px);
  color:var(--cream);text-decoration:none;
  background:rgba(20,22,15,.42);
  border:1px solid rgba(244,249,238,.55);
  border-radius:999px;
  cursor:pointer;
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
  backdrop-filter:blur(10px) saturate(1.1);
  box-shadow:0 6px 20px rgba(16,18,11,.28);
  transition:background .3s var(--ease),color .3s var(--ease),
             border-color .3s var(--ease),transform .18s var(--ease);
}
.key:hover{
  background:var(--cream);
  border-color:var(--cream);
  color:var(--green-900);
  transform:translateY(-2px);
}
.key:active{transform:translateY(0) scale(.97)}

@media (max-width:700px){
  .edge{max-width:none}
  /* narrow enough to wrap onto two lines and stay clear of the status pill */
  .edge--tl{max-width:38vw;line-height:1.5}
  .key{font-size:12px;letter-spacing:.12em;padding:0 12px}
  /* A two column grid rather than tuned wrapping, so the keys always sit two
     and two at equal width no matter how the labels are worded. */
  .keys{
    display:grid;grid-template-columns:1fr 1fr;
    width:100%;max-width:21rem;
  }
  .key{width:100%}
}

/* ============================================================
   PANELS
   ============================================================ */
.sheet{
  position:fixed;inset:0;z-index:8;
  background:var(--cream);color:var(--green-900);
  display:grid;place-items:center;
  padding:clamp(24px,7vw,80px);
  overflow-y:auto;
  opacity:0;
  transition:opacity .45s var(--ease);
}
.sheet[hidden]{display:none}
.sheet.is-on{opacity:1}
.sheet__inner{width:100%;max-width:640px}

.sheet__k{
  font-size:11px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--green-deep);margin-bottom:clamp(18px,3vw,28px);
}
.sheet__head{
  font-size:clamp(2rem,7vw,3.4rem);font-weight:300;line-height:1.03;
  letter-spacing:-.028em;color:var(--green-deep);
  margin-bottom:clamp(22px,4vw,38px);
}
.list li{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:1.5em;
  padding-block:clamp(12px,1.9vw,17px);
  border-top:1px solid rgba(133,139,104,.32);
}
.list li:last-child{border-bottom:1px solid rgba(133,139,104,.32)}
.list span{
  font-size:clamp(1.05rem,3.2vw,1.4rem);font-weight:400;
  letter-spacing:-.01em;color:var(--green-900);
}
.list em{
  font-style:normal;text-align:right;
  font-size:clamp(.8rem,2.2vw,.95rem);
  color:var(--green-deep);
  letter-spacing:.02em;
}
/* Matches their Instagram hours tile: no rules, wide tracked caps, day on the
   left and the time hard right, with room to breathe between the rows. */
.list--hours li{
  border:0;
  padding-block:clamp(9px,1.6vw,13px);
}
.list--hours li:last-child{border-bottom:0}
.list--hours span,
.list--hours em{
  font-size:clamp(.95rem,3vw,1.15rem);
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--green-deep);
}
.list--hours em{font-variant-numeric:tabular-nums;letter-spacing:.16em}
.list--hours .is-today span,
.list--hours .is-today em{color:var(--green-900)}
.day.is-today span{font-weight:500}
.day.is-today span::before{
  content:'';display:inline-block;vertical-align:middle;
  width:6px;height:6px;border-radius:50%;background:var(--clay);
  margin-right:.7em;margin-top:-2px;
}
.sheet__note{
  margin-top:clamp(20px,3.4vw,30px);
  font-size:.92rem;line-height:1.6;color:var(--green-deep);max-width:46ch;
}
.sheet__note a{border-bottom:1px solid rgba(92,97,71,.5);padding-bottom:1px}

.shut{
  position:fixed;z-index:9;
  right:var(--pad);top:max(var(--pad),env(safe-area-inset-top));
  font:inherit;
  font-size:clamp(10px,1.15vw,12px);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--green-900);
  background:transparent;
  border:1px solid rgba(47,51,36,.35);
  border-radius:999px;padding:.7em 1.15em;cursor:pointer;
  opacity:0;transition:opacity .45s var(--ease),background .35s var(--ease);
}
.shut[hidden]{display:none}
.shut.is-on{opacity:1}
.shut:hover{background:rgba(47,51,36,.08)}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .p,.status__dot{animation:none !important}
  .floater{
    animation:none;
    transform:translate(-50%,-50%);
  }
  *{transition-duration:.001ms !important}
}

/* very short screens: pull the logo down a touch so it clears the keys */
@media (max-height:560px){
  .floater{width:clamp(150px,24vw,260px);--ty:11vh}
}