/* The loading screen: a rolling mall security gate pulled down over the shop (js/gate.js).
   Painted entirely in CSS so it shows before any script runs. Layers, back to front: the dark
   "after hours" veil over the shop, the grille in its side rails, the hood it rolls into, and the
   fascia with the sign that lights letter by letter as things load. */
.gate {
  --hood: clamp(84px, 15vh, 128px);
  --metal-hi: #E9EEF0; --metal: #A9B3B8; --metal-lo: #5D676C;
  position: fixed; inset: 0; z-index: 35; overflow: hidden; pointer-events: auto;
  font-family: var(--display); color: #F2F5F1; touch-action: none;
}
.gate-dark {
  position: absolute; inset: 0; background:
    radial-gradient(120% 70% at 50% 110%, rgba(255, 214, 150, .10), transparent 60%),
    linear-gradient(180deg, #050908, #0B1410 55%, #101a15);
  opacity: .96; transition: opacity .9s ease;
}
.gate.is-lit .gate-dark { animation: gate-tubes 1s steps(1, end) forwards; }
@keyframes gate-tubes { 0% { opacity: .96; } 12% { opacity: .55; } 20% { opacity: .9; } 34% { opacity: .35; } 42% { opacity: .7; } 60% { opacity: .12; } 100% { opacity: 0; } }

/* the shop fascia: painted board with the sign, then the brushed-metal hood the grille rolls into */
.gate-head { position: absolute; left: 0; right: 0; top: 0; height: var(--hood); z-index: 3; display: grid; grid-template-rows: 1fr 22px; }
.gate-fascia {
  position: relative; display: grid; place-items: center; padding: calc(6px + env(safe-area-inset-top)) 16px 4px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #24604A, #1D5C44 60%, #164835);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .08);
}
.gate-sign {
  display: flex; flex-wrap: nowrap; justify-content: center; max-width: 100%;
  font-weight: 700; font-size: clamp(22px, 7.4vw, 46px); letter-spacing: .02em; line-height: 1; white-space: nowrap;
}
.gate-sign i {
  font-style: normal; color: #42564C; text-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 -1px 0 rgba(0, 0, 0, .5);
  transition: color .25s, text-shadow .25s;
}
.gate-sign i.sp { width: .3em; }
.gate-sign i.on { color: #FFF6DE; text-shadow: 0 0 6px #FFE3A0, 0 0 18px rgba(255, 210, 120, .75), 0 0 36px rgba(255, 190, 90, .35); animation: gate-flick .42s steps(1, end); }
@keyframes gate-flick { 0% { opacity: 1; } 15% { opacity: .2; } 30% { opacity: 1; } 45% { opacity: .35; } 60%, 100% { opacity: 1; } }
.gate.is-closed .gate-sign i.on { color: #6E7F76; text-shadow: none; animation: none; }
.gate.flash .gate-sign i.on { animation: gate-flick .5s steps(1, end); animation-delay: calc(var(--k) * 40ms); }
.gate-hood {
  position: relative;
  background: linear-gradient(180deg, #F3F6F7 0%, #B8C1C5 30%, #8C969B 62%, #5A6368 100%);
  box-shadow: 0 6px 10px -4px rgba(0, 0, 0, .55);
}
.gate-hood::before { /* brushed lines and two bolts */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18px 50%, #6B7479 0 3px, #DDE3E6 3.5px 4.5px, transparent 5px),
    radial-gradient(circle at calc(100% - 18px) 50%, #6B7479 0 3px, #DDE3E6 3.5px 4.5px, transparent 5px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 3px, rgba(0, 0, 0, .05) 3px 4px);
}

/* the grille: rods and staggered links (an SVG tile), in a curtain that rolls up into the hood */
.gate-well { position: absolute; left: 0; right: 0; top: calc(var(--hood) - 4px); bottom: 0; z-index: 2; }
.gate-curtain {
  position: absolute; left: 10px; right: 10px; top: 0; bottom: 0;
  transform: translateY(0); transition: transform 1.55s cubic-bezier(.55, .02, .3, 1);
  will-change: transform;
}
.gate-mesh {
  position: absolute; inset: 0 0 34px;
  background-image:
    linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 18%, transparent 82%, rgba(0, 0, 0, .25)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cdefs%3E%3ClinearGradient id='r' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23F4F7F8'/%3E%3Cstop offset='.45' stop-color='%23AEB8BD'/%3E%3Cstop offset='1' stop-color='%234E585D'/%3E%3C/linearGradient%3E%3ClinearGradient id='l'%3E%3Cstop offset='0' stop-color='%23606A6F'/%3E%3Cstop offset='.4' stop-color='%23E6ECEE'/%3E%3Cstop offset='1' stop-color='%23737D82'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='url(%23l)'%3E%3Crect x='5' y='11' width='6' height='26' rx='3'/%3E%3Crect x='29' y='11' width='6' height='26' rx='3'/%3E%3Crect x='17' y='35' width='6' height='26' rx='3'/%3E%3Crect x='41' y='35' width='6' height='26' rx='3'/%3E%3Crect x='17' y='-13' width='6' height='26' rx='3'/%3E%3Crect x='41' y='-13' width='6' height='26' rx='3'/%3E%3C/g%3E%3Cg fill='url(%23r)'%3E%3Crect y='9' width='48' height='5' rx='2.5'/%3E%3Crect y='33' width='48' height='5' rx='2.5'/%3E%3C/g%3E%3Cg fill='%23000' opacity='.28'%3E%3Crect y='14' width='48' height='2'/%3E%3Crect y='38' width='48' height='2'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%, 54px 54px;
  background-position: 0 0, center bottom;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .55));
}
/* a slow sheen across the metal so the grille reads as a surface, not a pattern */
.gate-mesh::after {
  content: ""; position: absolute; inset: 0; mix-blend-mode: soft-light; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 45%, transparent 60%);
  background-size: 260% 100%; animation: gate-sheen 5.5s ease-in-out infinite;
}
@keyframes gate-sheen { from { background-position: 120% 0; } to { background-position: -40% 0; } }
.gate-bar {
  position: absolute; left: -4px; right: -4px; bottom: 0; height: 36px; border-radius: 4px 4px 2px 2px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #F7F9FA 0%, #C3CBCF 22%, #96A0A5 55%, #6A7378 82%, #3E464A 100%);
  box-shadow: 0 8px 14px -6px rgba(0, 0, 0, .7), inset 0 1px 0 #fff;
}
.gate-bar::after { /* rubber seal */ content: ""; position: absolute; left: 6px; right: 6px; bottom: -5px; height: 6px; border-radius: 0 0 3px 3px; background: #1B1F21; }
.gate-handle {
  position: absolute; top: 9px; width: 54px; height: 15px; border-radius: 8px;
  background: linear-gradient(180deg, #5A6368, #2E3437); box-shadow: inset 0 2px 2px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .7);
}
.gate-handle.a { left: 18%; } .gate-handle.b { right: 18%; }
.gate-lock {
  position: absolute; left: 50%; top: 5px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #FFF7D6, #D4AF37 45%, #8A6E1C 100%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .6), inset 0 -2px 2px rgba(0, 0, 0, .3);
}
.gate-lock::before { content: ""; position: absolute; left: 11px; top: 6px; width: 4px; height: 12px; border-radius: 2px; background: #3A2E08; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.gate-lock::after { /* status lamp */ content: ""; position: absolute; left: 34px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: #E04A3C; box-shadow: 0 0 8px #FF5A44; }
.gate.is-unlocked .gate-lock::before { transform: rotate(90deg); }
.gate.is-unlocked .gate-lock::after { background: #4FE08F; box-shadow: 0 0 10px #4FE08F; }

/* side rails the grille runs in */
.gate-rail {
  position: absolute; top: calc(var(--hood) - 4px); bottom: 0; width: 14px; z-index: 3;
  background: linear-gradient(90deg, #3E464A, #B9C2C6 35%, #F0F3F4 50%, #8E989D 70%, #3E464A);
  box-shadow: 0 0 8px rgba(0, 0, 0, .6);
}
.gate-rail.l { left: 0; } .gate-rail.r { right: 0; }

/* the Closed tag hung on the grille while the shop isn't open yet */
.gate-tag {
  position: absolute; left: 50%; top: 32%; transform-origin: 50% -34px; transform: translateX(-50%) rotate(-4deg);
  padding: 12px 22px 10px; border-radius: 10px; background: #FFF4D6; color: #3B2A12;
  font: 700 clamp(22px, 6vw, 30px)/1 var(--display); letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 10px 18px -8px rgba(0, 0, 0, .8), inset 0 0 0 3px #C9A877, inset 0 0 0 5px #FFF4D6, inset 0 0 0 6px #C9A877;
  animation: gate-swing 3.2s ease-in-out infinite;
}
.gate-tag::before, .gate-tag::after { content: ""; position: absolute; top: -34px; width: 2px; height: 38px; background: linear-gradient(#cfd5d8, #7e878b); }
.gate-tag::before { left: 26%; transform: rotate(18deg); transform-origin: bottom; }
.gate-tag::after { right: 26%; transform: rotate(-18deg); transform-origin: bottom; }
@keyframes gate-swing { 50% { transform: translateX(-50%) rotate(3deg); } }

.gate-msg { position: absolute; left: 16px; right: 16px; bottom: calc(64px + env(safe-area-inset-bottom)); margin: 0; z-index: 4; text-align: center; font: 600 15px/1.35 var(--body); color: #D8E4DE; text-shadow: 0 1px 2px #000; }
.gate-msg:empty { display: none; }

/* opening: a small drop as the lock releases, a rattle while it rolls, then the frame falls away */
.gate.is-unlocked .gate-curtain { transform: translateY(5px); transition-duration: .18s; }
.gate.is-up .gate-curtain { transform: translateY(calc(-100% - 6px)); transition: transform 1.55s cubic-bezier(.55, .02, .3, 1); }
.gate.is-up .gate-mesh { animation: gate-rattle .09s linear infinite; }
@keyframes gate-rattle { 50% { transform: translate(.6px, -.8px); } }
.gate.is-up .gate-tag { opacity: 0; transition: opacity .2s; }
.gate.is-gone { opacity: 0; transform: scale(1.06); transition: opacity .5s ease, transform .6s ease; pointer-events: none; }
.gate.is-up .gate-dark { opacity: 0; }

/* first-visit lines and launch cards play over the gate, so they keep it visible behind them */
.cinema.over-gate { background: linear-gradient(180deg, transparent 0 30%, rgba(5, 10, 8, .6) 55%, rgba(5, 10, 8, .92)); align-items: end; padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
.cinema.over-gate.launch { background: rgba(5, 10, 8, .78); align-items: center; padding-bottom: 24px; }
.cinema.over-gate::after { display: none; }
.cinema.fade-out { animation: fadeout .45s forwards; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .gate-mesh::after, .gate-tag { animation: none; }
}