/* soon.html: the stall with its shutter down */

.front {
  position: relative;
  padding: 96px clamp(26px, 5vw, 70px) 0;
  margin-top: 6px;
}
.post {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(22px, 4vw, 48px);
  background: linear-gradient(90deg, var(--oak-dark), var(--oak) 40%, var(--oak-dark));
  border: var(--line) solid var(--ink);
  border-radius: 8px;
  box-shadow: 0 10px 0 rgba(0, 0, 0, .25);
  z-index: 2;
}
.post--l { left: 0; }
.post--r { right: 0; }

.shutter {
  position: relative;
  border: var(--line) solid var(--ink);
  border-top-width: 10px;
  border-radius: 6px 6px 0 0;
  padding: clamp(110px, 12vw, 150px) clamp(16px, 4vw, 54px) 46px;
  /* corrugated, slightly dented, painted goblin-green */
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .16) 0 3px, transparent 3px 14px, rgba(0, 0, 0, .22) 14px 17px, transparent 17px 22px),
    radial-gradient(240px 90px at 18% 72%, rgba(0, 0, 0, .12), transparent 70%),
    radial-gradient(180px 70px at 82% 30%, rgba(255, 255, 255, .08), transparent 70%),
    linear-gradient(#5c8f60, #3f6f48);
  box-shadow: inset 0 14px 18px -10px rgba(0, 0, 0, .55);
  overflow: hidden;
  isolation: isolate;
}
.shutter.rattle { animation: rattle .5s cubic-bezier(.36, .07, .19, .97); }
@keyframes rattle {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(3px, -1px, 0); }
  30%, 50%, 70% { transform: translate3d(-5px, 1px, 0); }
  40%, 60% { transform: translate3d(5px, 0, 0); }
}

/* Gribble hides behind the shutter and peeks over its top edge when knocked */
.peeker {
  position: absolute;
  top: 96px;
  left: calc(clamp(26px, 5vw, 70px) + clamp(20px, 4vw, 54px));
  width: clamp(90px, 9vw, 120px);
  z-index: 0;
  transition: transform .45s var(--ease-spring);
  pointer-events: none;
}
.peeker img { width: 100%; height: auto; }
.front.knocked .peeker { transform: translateY(-62%) rotate(-6deg); }
.shutter { z-index: 1; }

.hanger { position: absolute; top: 0; left: 50%; translate: -50% 0; width: min(540px, 54%); z-index: 1; transform-origin: 50% 0; animation: sway 4.2s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-2.4deg); } 50% { transform: rotate(1.8deg); } }
.hanger__strings { height: 34px; margin: 0 22%; border-inline: 4px solid var(--ink); }
.soonsign {
  background: linear-gradient(var(--cream), var(--cream-2));
  border: var(--line) solid var(--ink);
  border-radius: 16px;
  box-shadow: inset 0 -6px 0 rgba(192, 122, 62, .35), 0 8px 0 var(--ink), 0 22px 30px -10px rgba(0, 0, 0, .55);
  text-align: center;
  padding: 16px 20px 18px;
}
.soonsign__title {
  font-size: clamp(3rem, 9vw, 6rem);
  color: var(--ink);
  line-height: .95;
}
.soonsign__title span { color: var(--red-dark); display: inline-block; transform: rotate(-4deg); }
.soonsign__title sup { font-size: .32em; vertical-align: top; position: relative; top: .3em; color: var(--ink-soft); }
.soonsign__sub { margin: 8px 0 0; font-weight: 900; color: var(--ink-soft); letter-spacing: .02em; }

.shutter__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(20px, 3vw, 44px);
  align-items: center;
  margin-top: clamp(96px, 10vw, 130px);
}
.shutter__row--low { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); margin-top: 44px; align-items: end; }

.note {
  background: #ffe873;
  color: var(--ink);
  border: var(--line) solid var(--ink);
  border-radius: 3px;
  padding: 22px 22px 18px;
  transform: rotate(-4deg);
  box-shadow: 0 6px 0 var(--ink), 0 18px 24px -10px rgba(0, 0, 0, .5);
  position: relative;
}
.note::before { /* tape */
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 90px;
  height: 26px;
  margin-left: -45px;
  background: rgba(255, 250, 240, .75);
  border: 2px solid rgba(59, 35, 20, .35);
  transform: rotate(3deg);
}
.note__text { margin: 0; font: 400 clamp(1.3rem, 2.2vw, 1.7rem)/1.15 "Lilita One", sans-serif; }
.note__sig { margin: 12px 0 0; text-align: right; font: 400 1.2rem/1 "Lilita One", sans-serif; color: #22591a; transform: rotate(-3deg); }
.note__sig::before { content: "— "; }

.slot { margin: 0; }
.slot__hole {
  aspect-ratio: 16 / 6;
  border: var(--line) solid var(--ink);
  border-radius: 12px;
  overflow: hidden;
  background: #081312;
  box-shadow: inset 0 10px 18px rgba(0, 0, 0, .8), 0 0 0 8px #2f5737, 0 0 0 11px var(--ink), 0 12px 0 11px rgba(0, 0, 0, .25);
  position: relative;
}
.slot__hole::after { /* the dark edges of a slot */
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 18px 22px -8px rgba(0, 0, 0, .85), inset 0 -10px 16px -8px rgba(0, 0, 0, .6);
  pointer-events: none;
}
.slot video { width: 100%; height: 100%; object-fit: cover; }
.slot figcaption { margin-top: 24px; width: fit-content; font-weight: 900; color: var(--cream); background: var(--ink); padding: .35em .8em; border-radius: 99px; font-size: .92rem; }

.slip { transform: rotate(1.4deg); }

.meter { padding: 14px 18px 16px; transform: rotate(-2deg); text-align: center; }
.meter__title { margin: 0 0 4px; font: 400 1.35rem/1 "Lilita One", sans-serif; color: var(--ink); }
.meter__dial { width: 100%; max-width: 240px; height: auto; margin: 0 auto; overflow: visible; }
.meter__needle { transform-origin: 100px 104px; animation: needle 2.6s ease-in-out infinite; }
@keyframes needle {
  0%, 100% { transform: rotate(48deg); }
  40% { transform: rotate(30deg); }
  55% { transform: rotate(58deg); }
  70% { transform: rotate(40deg); }
}
.meter__scale { display: flex; justify-content: space-between; font: 400 .9rem/1 "Lilita One", sans-serif; color: var(--ink); margin-top: 2px; }
.meter__scale span:nth-child(1) { color: #1d5f6c; }
.meter__scale span:nth-child(3) { color: var(--red-dark); text-align: right; }

.knock { position: absolute; left: clamp(16px, 4vw, 54px); top: clamp(26px, 3vw, 40px); z-index: 2; font-size: 1.05rem; }
.knock__out {
  position: absolute;
  left: clamp(16px, 4vw, 54px);
  top: calc(clamp(26px, 3vw, 40px) + 72px);
  max-width: min(300px, 23%);
  font-size: .95rem;
  margin: 0;
  z-index: 3;
  animation: pop .45s var(--ease-spring);
}
.knock__out::after { left: 34px; bottom: auto; top: -13px; transform: rotate(-135deg); }

.sill {
  height: 34px;
  margin: 0 -10px;
  border: var(--line) solid var(--ink);
  border-radius: 10px;
  background: linear-gradient(var(--oak), var(--oak-dark));
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, .25), 0 8px 0 var(--ink), var(--drop);
  position: relative;
  z-index: 3;
}

@media (max-width: 860px) {
  .shutter__row, .shutter__row--low { grid-template-columns: 1fr; }
  .shutter__row { margin-top: 120px; }
  .note { max-width: 360px; }
  .meter { max-width: 300px; justify-self: center; }
  .knock { position: relative; left: auto; top: auto; margin-top: 34px; width: 100%; }
  .knock__out { position: relative; left: auto; right: auto; top: auto; max-width: none; margin-top: 18px; }
  .knock__out::after { display: none; }
  .hanger { width: 92%; }
  .front { padding-top: 64px; }
  .peeker { top: 64px; }
  /* phones: the slip comes first, right under the sign */
  .shutter { display: flex; flex-direction: column; gap: 34px; }
  .shutter__row, .shutter__row--low { display: contents; }
  .slip { order: 1; margin-top: 120px; }
  .slot { order: 2; }
  .note { order: 3; }
  .meter { order: 4; }
  .knock { order: 5; margin-top: 0; }
  .knock__out { order: 6; margin-top: 0; }
  .peeker { left: 50%; margin-left: -50px; }
}

/* ---------- ticker ---------- */
.ticker { margin-top: 64px; background: var(--ink); overflow: hidden; transform: rotate(1deg); box-shadow: 0 8px 0 rgba(0, 0, 0, .25); }
.ticker__track { display: flex; width: max-content; animation: tick 34s linear infinite; }
.ticker span { font: 400 1.3rem/1 "Lilita One", sans-serif; letter-spacing: .04em; color: var(--gold); padding: .7em 1.2em; white-space: nowrap; }
.ticker span::after { content: ""; display: inline-block; width: 11px; height: 11px; margin-left: 2.4em; vertical-align: .15em; background: var(--red); border: 2px solid var(--gold); transform: rotate(45deg); box-shadow: 0 0 0 2px var(--ink); }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---------- leaks ---------- */
.leaks { padding: 90px 0 110px; }
.leaks__title { font-size: clamp(2.3rem, 5vw, 4.2rem); }
.leaks__sub { margin: 12px 0 44px; color: #f4e6c8; max-width: 52ch; }
.polaroids { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 34px); }
.polaroid {
  background: var(--paper);
  border: var(--line) solid var(--ink);
  border-radius: 4px;
  padding: 12px 12px 6px;
  transform: rotate(var(--rot, 0deg));
  box-shadow: 0 6px 0 var(--ink), 0 18px 26px -10px rgba(0, 0, 0, .55);
  transition: transform .4s var(--ease-spring);
}
.polaroid:hover { transform: rotate(0deg) scale(1.06); position: relative; z-index: 2; }
.polaroid video { width: 100%; aspect-ratio: 1; object-fit: cover; border: 2px solid var(--ink); background: #0b1a19; }
.polaroid p { margin: 10px 2px 8px; font: 400 1.1rem/1.15 "Lilita One", sans-serif; color: var(--ink); }
@media (max-width: 860px) { .polaroids { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.foot { border-top: var(--line) solid var(--ink); background: var(--night-2); padding: 26px 0 34px; }
.foot__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; color: #cfe0d6; font-size: .92rem; }
.foot__inner img { width: 84px; height: auto; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.45)); }
.foot__inner p { margin: 0; }

/* ---------- the shutter slams down when the page opens ---------- */
.shutter.dropping { animation: shutter-drop .7s cubic-bezier(.55, 0, .75, .3) both; }
@keyframes shutter-drop {
  0% { clip-path: inset(0 0 100% 0); }
  80% { clip-path: inset(0 0 0 0); }
  88% { clip-path: inset(0 0 0 0); transform: translateY(-6px); }
  100% { clip-path: inset(0 0 0 0); transform: none; }
}
.shutter.dropping .hanger { animation: sway 4.2s ease-in-out infinite, sign-drop .9s .55s var(--ease-spring) both; }
@keyframes sign-drop { from { translate: 0 -140%; } to { translate: 0 0; } }

/* ---------- Soon-o-meter reacts ---------- */
.meter__needle { transition: transform .5s var(--ease-spring); }
.meter.typing .meter__needle { animation: needle-type .18s ease-in-out infinite alternate; }
@keyframes needle-type { from { transform: rotate(52deg); } to { transform: rotate(64deg); } }
.meter.maxed .meter__needle { animation: none; transform: rotate(78deg); }
.meter.maxed { animation: meter-shake .4s steps(4) 2; }
@keyframes meter-shake { 0%, 100% { translate: 0 0; } 33% { translate: -3px 1px; } 66% { translate: 3px -1px; } }

/* ---------- the delivery parade ---------- */
.parade { position: relative; height: 190px; margin-top: 40px; overflow: hidden; border-bottom: var(--line) solid var(--ink); background: linear-gradient(transparent 70%, rgba(192, 122, 62, .25)); }
.parade__crew {
  position: absolute;
  bottom: 6px;
  left: 0;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  animation: haul 26s linear infinite;
}
@keyframes haul { from { transform: translateX(100vw); } to { transform: translateX(calc(-100% - 40px)); } }
.hauler { height: 120px; width: auto; transform: scaleX(-1); filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .35)); animation: haul-hop .3s ease-in-out infinite alternate; }
.h2 { animation-delay: -.1s; }
.h3 { height: 132px; animation-delay: -.2s; }
.slacker { height: 112px; margin-left: 46px; animation-duration: .6s; }
@keyframes haul-hop { from { translate: 0 0; rotate: 4deg; } to { translate: 0 -8px; rotate: -4deg; } }
.crate {
  display: grid;
  place-content: center;
  text-align: center;
  width: 210px;
  height: 120px;
  margin: 0 -26px 40px;
  position: relative;
  z-index: 1;
  background:
    linear-gradient(45deg, transparent 47%, rgba(59, 35, 20, .5) 47% 53%, transparent 53%),
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(59, 35, 20, .35) 38px 41px),
    linear-gradient(var(--oak), var(--oak-dark));
  border: var(--line) solid var(--ink);
  border-radius: 6px;
  box-shadow: 0 6px 0 var(--ink);
  animation: wobble 1.2s ease-in-out infinite;
}
.crate span { font: 400 1.6rem/1 "Lilita One", sans-serif; color: var(--cream); background: var(--ink); padding: .15em .4em; border-radius: 4px; transform: rotate(-3deg); }
.crate small { margin-top: 6px; font: 800 .72rem/1 "Nunito", sans-serif; color: var(--cream); background: var(--ink); padding: .25em .5em; border-radius: 4px; }
@keyframes wobble { 0%, 100% { rotate: -2.5deg; } 50% { rotate: 2.5deg; translate: 0 -4px; } }
@media (max-width: 860px) { .parade { height: 140px; } .hauler { height: 84px; } .h3 { height: 92px; } .slacker { height: 80px; } .crate { width: 150px; height: 86px; margin-bottom: 28px; } .crate span { font-size: 1.15rem; } }
@media (prefers-reduced-motion: reduce) { .parade__crew { animation: none; left: 50%; translate: -50% 0; } }