/* Juicy Joes — the door: the first-visit 18+ check.
   A sign board on two brass rods drops in from the top of the screen, the neon 18+ ring flickers on, the gorilla looks
   over the top edge. Transform and opacity only, so the drop stays smooth while the page behind is still starting up.

   It is called "door" everywhere, never "age gate" / "age verification": annoyance filter lists hide or block anything
   with those names, and a half-blocked gate (scrim shown, panel hidden) locks a customer out.

   Needs tokens.css and the .btn classes from components.css. Nothing here changes the page's layout or scroll. */

.jj-door {
  --kong-w: 140px;                 /* mascot width */
  --kong-rise: 112px;              /* how much of the head shows above the sign board: cap, eyes and the grin */
  position: fixed; inset: 0; z-index: var(--z-door, 110);
  display: grid; place-items: center; padding: 16px; overflow: hidden;
  touch-action: pinch-zoom; overscroll-behavior: contain; -webkit-tap-highlight-color: transparent;
}
.jj-door[hidden] { display: none; }

/* ---- the dark ---- */
.jj-door-scrim { position: absolute; inset: 0; background: rgba(7, 5, 6, .92); opacity: 0; transition: opacity .35s ease; }
.jj-door-scrim::after {            /* red bloom that comes up with the sign */
  content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease;
  background: radial-gradient(60% 46% at 50% 44%, rgba(255, 45, 63, .2), transparent 72%);
}
.jj-door.is-dim .jj-door-scrim { opacity: 1; }
.jj-door.is-lit .jj-door-scrim::after { opacity: 1; }
@media (min-width: 900px) and (hover: hover) {   /* blur is a desktop luxury; phones get a plain, slightly darker scrim */
  .jj-door-scrim { background: rgba(7, 5, 6, .8); -webkit-backdrop-filter: blur(7px) saturate(.8); backdrop-filter: blur(7px) saturate(.8); }
}

/* ---- the hanging part: rods + mascot + board move as one ---- */
.jj-door-hang {
  position: relative; width: min(100%, 430px); padding-top: var(--kong-rise);
  transform: translate3d(0, -130vh, 0); transform-origin: 50% -40vh; will-change: transform;
}
.jj-door.is-in .jj-door-hang { transform: none; animation: jj-door-drop 1.15s both; }
.jj-door.is-in.is-nudge .jj-door-hang { animation: jj-door-nudge .55s ease-in-out; }
.jj-door.is-out .jj-door-hang { animation: jj-door-hoist .62s cubic-bezier(.5, 0, .8, .2) forwards; }
.jj-door.is-out .jj-door-scrim { opacity: 0; transition: opacity .5s ease .18s; }

/* rod with a mounting foot, one pseudo-element each */
.jj-door-hang::before, .jj-door-hang::after {
  content: ''; position: absolute; bottom: calc(100% - var(--kong-rise) - 8px); width: 24px; height: 140vh; z-index: 2; pointer-events: none;
  background:
    linear-gradient(180deg, #E8C591, var(--brass) 40%, var(--brass-2)) bottom / 100% 14px no-repeat,
    linear-gradient(90deg, #6B4E2D, var(--brass) 42%, #E8C591 55%, var(--brass-2)) center / 5px 100% no-repeat;
  border-radius: 0 0 3px 3px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6));
}
.jj-door-hang::before { left: 13%; }
.jj-door-hang::after { right: 13%; }

.jj-door-kong {
  position: absolute; top: 0; left: 50%; z-index: 0; width: var(--kong-w); height: auto; margin-left: calc(var(--kong-w) / -2);
  pointer-events: none; -webkit-user-select: none; user-select: none;
}

/* ---- the board ---- */
.jj-door-card {
  position: relative; z-index: 1; text-align: center; padding: 26px 24px 18px; border-radius: var(--r-xl, 12px);
  border: 1px solid var(--brass-2); color: var(--cream); outline: none;
  background:
    radial-gradient(circle at 13px 13px, #E8C591 0 2px, #5C4226 2.6px 3.8px, transparent 4.4px),
    radial-gradient(circle at calc(100% - 13px) 13px, #E8C591 0 2px, #5C4226 2.6px 3.8px, transparent 4.4px),
    radial-gradient(circle at 13px calc(100% - 13px), #E8C591 0 2px, #5C4226 2.6px 3.8px, transparent 4.4px),
    radial-gradient(circle at calc(100% - 13px) calc(100% - 13px), #E8C591 0 2px, #5C4226 2.6px 3.8px, transparent 4.4px),
    radial-gradient(120% 60% at 50% 0%, rgba(255, 45, 63, .11), transparent 62%),
    linear-gradient(180deg, var(--glass), var(--wall));
  box-shadow: 0 40px 90px rgba(0, 0, 0, .78), 0 0 0 1px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .05);
  max-height: calc(100vh - 32px - var(--kong-rise)); overflow: auto; overscroll-behavior: contain; touch-action: pan-y pinch-zoom;
}
@supports (height: 100svh) { .jj-door-card { max-height: calc(100svh - 32px - var(--kong-rise)); } }

/* ---- the neon 18+ ring: a dim glass tube underneath, a lit copy on top that only ever animates opacity ---- */
.jj-door-sign {
  --d: clamp(96px, 27vw, 124px);
  position: relative; width: var(--d); height: var(--d); margin: 2px auto 16px; border-radius: 50%;
  display: grid; place-items: center; border: 4px solid var(--unlit); color: var(--unlit);
  font: 400 calc(var(--d) * .4)/1 var(--sign); letter-spacing: .01em;
}
.jj-door-sign i {
  position: absolute; inset: -4px; border-radius: 50%; display: grid; place-items: center; font-style: normal; opacity: 0;
  border: 4px solid var(--core); color: var(--core); text-shadow: var(--glow-s);
  box-shadow: 0 0 5px rgba(255, 255, 255, .85), 0 0 16px var(--neon), 0 0 46px rgba(255, 45, 63, .6),
    inset 0 0 5px rgba(255, 255, 255, .6), inset 0 0 16px var(--neon), inset 0 0 38px rgba(255, 45, 63, .35);
}
.jj-door.is-lit .jj-door-sign i { opacity: 1; animation: jj-door-boot .9s steps(1, end), jj-door-buzz 6s 1s infinite; }
.jj-door.is-out.is-lit .jj-door-sign i { animation: none; }
.jj-door.is-dark .jj-door-sign i { opacity: 0; animation: jj-door-cut .45s steps(1, end); }

/* ---- words ---- */
.jj-door-kicker { margin: 0 0 8px; font: 600 var(--fs-xs)/1 var(--body); letter-spacing: .24em; text-transform: uppercase; color: var(--brass); }
.jj-door-card h2 { margin: 0 0 10px; font-size: clamp(1.75rem, 7vw, 2.3rem); color: var(--cream); }
.jj-door-text { margin: 0 auto 18px; max-width: 34ch; font-size: var(--fs-sm); line-height: 1.5; color: var(--cream-2); text-wrap: balance; }
.jj-door-actions { display: grid; gap: 10px; }
.jj-door-actions .btn { width: 100%; min-height: 52px; white-space: normal; line-height: 1.15; padding-top: 8px; padding-bottom: 8px; }
.jj-door-plaque {
  margin: 18px 0 0; padding-top: 13px; border-top: 1px solid var(--line-2);
  font: 600 var(--fs-xs)/1.4 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--brass);
}
.jj-door-note { margin: 6px 0 0; font-size: .72rem; line-height: 1.4; color: var(--muted); }
.jj-door-view[hidden] { display: none; }
.jj-door.is-dark .jj-door-note { visibility: hidden; }   /* a no is never remembered, so do not say it is */

/* ---- screen height decides how much mascot there is room for: the board must never need to scroll on a normal phone ---- */
@media (max-height: 760px) { .jj-door { --kong-w: 124px; --kong-rise: 88px; } }   /* eyes and nose over the edge */
@media (max-height: 640px) {
  .jj-door { --kong-rise: 0px; }
  .jj-door-kong { display: none; }
  .jj-door-hang::before, .jj-door-hang::after { bottom: calc(100% - 8px); }
  .jj-door-sign { --d: 84px; margin-bottom: 12px; }
  .jj-door-card { padding: 20px 20px 14px; }
  .jj-door-text { margin-bottom: 14px; }
  .jj-door-actions .btn { min-height: 46px; }
  .jj-door-plaque { margin-top: 14px; padding-top: 10px; }
}
@media (max-width: 380px) { .jj-door-card { padding-left: 18px; padding-right: 18px; } }
/* a phone on its side: ring on the left, words on the right, so the board still fits without scrolling */
@media (max-height: 480px) and (min-width: 560px) {
  .jj-door { padding: 10px 16px; }
  .jj-door-hang { width: min(100%, 680px); }
  .jj-door-card { display: grid; grid-template-columns: auto 1fr; column-gap: 24px; align-items: center; text-align: left; padding: 16px 24px 10px; max-height: calc(100vh - 20px); }
  .jj-door-sign { margin: 0; }
  .jj-door-view { grid-column: 2; }
  .jj-door-card h2 { font-size: 1.7rem; margin-bottom: 6px; }
  .jj-door-text { margin: 0 0 12px; max-width: none; }
  .jj-door-actions { grid-template-columns: 1fr 1fr; }
  .jj-door-plaque, .jj-door-note { grid-column: 1 / -1; text-align: center; }
  .jj-door-plaque { margin-top: 10px; padding-top: 8px; }
  .jj-door-note { margin-top: 2px; }
}
@supports (height: 100svh) { @media (max-height: 480px) and (min-width: 560px) { .jj-door-card { max-height: calc(100svh - 20px); } } }

/* ---- motion ---- */
@keyframes jj-door-drop {
  0%   { transform: translate3d(0, -130vh, 0) rotate(0deg); animation-timing-function: cubic-bezier(.45, 0, .9, .55); }
  50%  { transform: translate3d(0, 18px, 0) rotate(0deg); animation-timing-function: cubic-bezier(.2, .7, .4, 1); }
  66%  { transform: translate3d(0, -8px, 0) rotate(.7deg); animation-timing-function: ease-in-out; }
  80%  { transform: translate3d(0, 4px, 0) rotate(-.4deg); animation-timing-function: ease-in-out; }
  91%  { transform: translate3d(0, -1px, 0) rotate(.16deg); animation-timing-function: ease-in-out; }
  100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}
@keyframes jj-door-hoist {
  0%   { transform: translate3d(0, 0, 0); }
  24%  { transform: translate3d(0, 14px, 0); }
  100% { transform: translate3d(0, -130vh, 0); }
}
@keyframes jj-door-nudge {
  0%, 100% { transform: rotate(0deg); } 22% { transform: rotate(1deg); } 55% { transform: rotate(-.65deg); } 82% { transform: rotate(.25deg); }
}
@keyframes jj-door-boot { 0% { opacity: 1 } 3% { opacity: .15 } 8% { opacity: 1 } 12% { opacity: .2 } 20% { opacity: 1 } 28% { opacity: .4 } 34% { opacity: 1 } 100% { opacity: 1 } }
@keyframes jj-door-buzz { 0%, 100% { opacity: 1 } 91% { opacity: 1 } 92% { opacity: .84 } 93% { opacity: 1 } 96% { opacity: .93 } 97% { opacity: 1 } }
@keyframes jj-door-cut { 0% { opacity: 1 } 18% { opacity: .2 } 30% { opacity: .8 } 46% { opacity: .1 } 60% { opacity: .45 } 100% { opacity: 0 } }

@media (prefers-reduced-motion: reduce) {
  .jj-door-hang, .jj-door.is-in .jj-door-hang, .jj-door.is-in.is-nudge .jj-door-hang, .jj-door.is-out .jj-door-hang { animation: none; transform: none; }
  .jj-door-hang { opacity: 0; transition: opacity .2s ease; }
  .jj-door.is-in .jj-door-hang { opacity: 1; }
  .jj-door.is-out .jj-door-hang { opacity: 0; }
  .jj-door.is-lit .jj-door-sign i, .jj-door.is-dark .jj-door-sign i { animation: none; }
  .jj-door-scrim, .jj-door.is-out .jj-door-scrim { transition-duration: .2s; transition-delay: 0s; }
}
@media print { .jj-door { display: none !important; } }