/* ===========================================================================
   AUSMart — the world

   Australia → city → shopping centre → wing → storefront.

   Everything here is transform and opacity on layered SVG. No WebGL, no
   canvas, no 3D library: the entire environment gzips to a few kilobytes and
   runs on a five-year-old phone, which matters because most of the customers
   are on one.

   Depth is faked with scale differences between .w-far, .w-mid and .w-near.
   During the arrival zoom the layers move at different rates, which reads as
   real parallax without any per-frame JavaScript maths.
   =========================================================================== */

.w-scene{ width:100%; height:100%; display:block; }
.w-sky{ fill:var(--mist); }
.w-ground{ fill:var(--mist-2); }
.w-sun{ fill:var(--gold); opacity:.42; }
.w-land{ fill:var(--ink); }

.w-label{
  font-family:var(--font); font-size:19px; font-weight:600;
  fill:var(--ink-deep);
}
.w-dot{ fill:var(--brand); }
.w-city-hero .w-dot{ fill:var(--brand); }
.w-city-hero .w-label{ font-size:23px; font-weight:700; }

/* The pulse marks Brisbane — where Mon Freight actually is. */
.w-ping{
  fill:var(--brand); opacity:.35;
  animation:wPing 2.6s ease-out infinite;
  transform-origin:center;
}
@keyframes wPing{
  0%   { transform:scale(.6); opacity:.5; }
  70%  { transform:scale(2.6); opacity:0; }
  100% { transform:scale(2.6); opacity:0; }
}

.w-wing-letter{
  font-family:var(--font); font-size:34px; font-weight:800; fill:var(--gold);
}
.w-wing-label{
  font-family:var(--font); font-size:22px; font-weight:600; fill:#FFFFFF;
}

/* ===========================================================================
   ARRIVAL SEQUENCE
   =========================================================================== */
.arrival{
  position:fixed; inset:0; z-index:400;
  background:var(--mist);
  overflow:hidden;
  opacity:1;
  transition:opacity 620ms var(--ease);
}
.arrival[hidden]{ display:none; }
.arrival.leaving{ opacity:0; pointer-events:none; }

.arrival-stage{ position:absolute; inset:0; }

.arrival-layer{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transform:scale(1);
  transition:opacity 900ms var(--ease-out), transform 1500ms var(--ease-out), visibility 900ms;
  will-change:transform, opacity;
}
.arrival-layer.on{ opacity:1; visibility:visible; }

/* Each stage pushes toward the viewer as the next one arrives, so the cut
   reads as continuing to travel rather than as a slide change. */
.arrival-layer.past{ opacity:0; visibility:hidden; }

.arrival-layer[data-stage="0"]{ transform:scale(1); }
.arrival-layer[data-stage="0"].on{ transform:scale(1.06); }
.arrival-layer[data-stage="0"].past{ transform:scale(3.4); }

.arrival-layer[data-stage="1"]{ transform:scale(.5); }
.arrival-layer[data-stage="1"].on{ transform:scale(1.04); }
.arrival-layer[data-stage="1"].past{ transform:scale(2.6); }

.arrival-layer[data-stage="2"]{ transform:scale(.62); }
.arrival-layer[data-stage="2"].on{ transform:scale(1); }
.arrival-layer[data-stage="2"].past{ transform:scale(1.5); }

/* Inner layers drift at their own rate — this is where the depth comes from. */
.arrival-layer .w-far{ transition:transform 1500ms var(--ease-out); }
.arrival-layer .w-mid{ transition:transform 1500ms var(--ease-out); }
.arrival-layer .w-near{ transition:transform 1500ms var(--ease-out); }
.arrival-layer.on .w-far{ transform:scale(1.02); }
.arrival-layer.on .w-mid{ transform:scale(1.05); }
.arrival-layer.on .w-near{ transform:scale(1.09); }

.arrival-copy{
  position:absolute; left:0; right:0; bottom:clamp(72px, 12vh, 130px);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:0 24px; pointer-events:none;
}
.arrival-eyebrow{
  position:absolute;
  font-size:clamp(1.05rem, 3vw, 1.85rem); font-weight:640; color:var(--ink-deep);
  letter-spacing:-.01em; max-width:20ch;
  opacity:0; transform:translate3d(0,14px,0);
  transition:opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
}
.arrival-eyebrow.on{ opacity:1; transform:none; }

.arrival-skip{
  position:absolute; top:calc(18px + env(safe-area-inset-top)); right:18px;
  display:flex; align-items:center; gap:7px;
  padding:9px 16px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line);
  background:rgba(255,255,255,.9);
  color:var(--ink); font:inherit; font-size:.85rem; font-weight:600;
  transition:background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.arrival-skip:hover{ background:#fff; border-color:var(--ink-soft); }

.arrival-progress{
  position:absolute; left:0; right:0; bottom:0; height:3px;
  background:rgba(23,50,77,.1);
}
.arrival-progress > span{
  display:block; height:100%; width:0;
  background:var(--brand);
  transition:width 400ms linear;
}

/* Nobody should ever be trapped: if the script dies mid-sequence the overlay
   fades itself out on a CSS timer as a last resort. */
.arrival.armed{ animation:arrivalFailsafe 1ms linear 9s forwards; }
@keyframes arrivalFailsafe{ to{ opacity:0; visibility:hidden; pointer-events:none; } }

@media (prefers-reduced-motion:reduce){
  .arrival{ display:none !important; }
}

/* ===========================================================================
   DIRECTORY BOARD — categories as centre wayfinding
   =========================================================================== */
.directory{
  background:var(--ink-deep); color:#fff;
  border-radius:var(--r-xl); overflow:hidden;
  position:relative;
}
.directory::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg, var(--brand) 0%, var(--gold) 100%);
}
.dir-head{
  display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap;
  padding:26px 26px 18px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
@media (min-width:720px){ .dir-head{ padding:30px 36px 20px; } }
.dir-head h2{ color:#fff; margin:0; font-size:clamp(1.2rem,2.6vw,1.7rem); }
.dir-head .eyebrow{ color:var(--gold); margin:0 0 4px; display:block; }
.dir-now{
  margin-left:auto; display:flex; align-items:center; gap:8px;
  font-size:.78rem; color:#B4BFCB;
}
.dir-now i{
  width:7px; height:7px; border-radius:50%; background:var(--ok);
  animation:amBeat 2.4s ease-in-out infinite;
}

.dir-list{ display:grid; grid-template-columns:1fr; }
@media (min-width:640px){ .dir-list{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1024px){ .dir-list{ grid-template-columns:repeat(3,minmax(0,1fr)); } }

.dir-row{
  display:flex; align-items:center; gap:14px;
  padding:16px 26px;
  border-bottom:1px solid rgba(255,255,255,.08);
  border-right:1px solid rgba(255,255,255,.08);
  color:#fff; position:relative; overflow:hidden;
  transition:background var(--dur-1) var(--ease);
}
@media (min-width:720px){ .dir-row{ padding:18px 36px; } }
.dir-row::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--gold);
  transform:scaleY(0); transform-origin:center;
  transition:transform 260ms var(--ease);
}
.dir-row:hover{ background:rgba(255,255,255,.06); }
.dir-row:hover::after{ transform:scaleY(1); }

.dir-letter{
  flex:none; width:42px; height:42px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.09); color:var(--gold);
  font-size:1rem; font-weight:800; letter-spacing:.02em;
  transition:background 260ms var(--ease), color 260ms var(--ease), transform 260ms var(--ease);
}
.dir-row:hover .dir-letter{ background:var(--gold); color:var(--ink-deep); transform:scale(1.05); }

.dir-name{ font-weight:620; font-size:1rem; line-height:1.25; }
.dir-meta{ display:block; font-size:.74rem; color:#93A1B0; margin-top:2px; }
.dir-go{
  margin-left:auto; flex:none; color:#93A1B0;
  transform:translate3d(-4px,0,0); opacity:0;
  transition:opacity 240ms var(--ease), transform 240ms var(--ease);
}
.dir-row:hover .dir-go{ opacity:1; transform:none; color:var(--gold); }

.dir-foot{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:18px 26px; background:rgba(0,0,0,.16);
}
@media (min-width:720px){ .dir-foot{ padding:18px 36px; } }
.dir-foot .muted{ color:#93A1B0; }

/* ===========================================================================
   WING HEADER — a category page opens into its corridor
   =========================================================================== */
.wing{
  position:relative; overflow:hidden;
  border-radius:0 0 var(--r-xl) var(--r-xl);
  background:var(--mist);
}
.wing-art{ position:absolute; inset:0; }
.wing-art .w-scene{ height:100%; width:100%; object-fit:cover; }
.wing-inner{
  position:relative; z-index:2;
  padding:clamp(28px,5vw,56px) 0 clamp(34px,6vw,64px);
}
.wing-title{ font-size:clamp(1.6rem,4vw,2.6rem); margin:0 0 6px; }
.wing-sub{ color:var(--ink-soft); max-width:52ch; margin:0; }

/* Storefronts along the wing */
.fronts{ display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:14px; }
.front{
  display:block; position:relative;
  border-radius:var(--r-lg); overflow:hidden;
  background:var(--surface); border:1px solid var(--line);
  transition:transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out),
             border-color 280ms var(--ease);
}
.front:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--brand); }
.front-art{ position:relative; aspect-ratio:16/11; overflow:hidden; background:var(--mist); }
.front-art .w-scene{ position:absolute; inset:0; transition:transform 520ms var(--ease-out); }
.front:hover .front-art .w-scene{ transform:scale(1.05); }

/* The sign above the door carries the retailer's own logo. */
.front-sign{
  position:absolute; left:50%; top:12%; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px;
  padding:7px 14px; border-radius:8px;
  background:var(--ink-deep); color:#fff;
  font-size:.86rem; font-weight:650; white-space:nowrap;
  max-width:82%;
  box-shadow:0 6px 18px rgba(17,36,55,.28);
}
.front-sign img{ height:18px; width:auto; }
.front-sign span{ overflow:hidden; text-overflow:ellipsis; }

/* "Enter" appears at the doorway on hover — the invitation to walk in. */
.front-enter{
  position:absolute; left:50%; bottom:14%; transform:translate(-50%, 8px);
  padding:7px 16px; border-radius:999px;
  background:var(--brand-deep); color:#fff;
  font-size:.78rem; font-weight:650; white-space:nowrap;
  opacity:0; transition:opacity 240ms var(--ease), transform 240ms var(--ease);
}
.front:hover .front-enter,
.front:focus-visible .front-enter{ opacity:1; transform:translate(-50%, 0); }
@media (hover:none){ .front-enter{ opacity:1; transform:translate(-50%,0); } }

.front-body{ padding:12px 14px 14px; display:flex; align-items:center; gap:10px; }
.front-name{ font-weight:620; color:var(--ink-deep); font-size:.95rem; }
.front-meta{ display:block; font-size:.74rem; color:var(--muted); margin-top:1px; }

/* ===========================================================================
   STORE ENTRANCE — the facade lifts and you're inside
   =========================================================================== */
.entrance{
  position:relative; overflow:hidden;
  background:var(--mist); border-radius:0 0 var(--r-xl) var(--r-xl);
}
.entrance-art{
  position:absolute; inset:0; opacity:.28;
}
.entrance-art .w-scene{ width:100%; height:100%; }
.entrance-inner{ position:relative; z-index:2; padding:clamp(26px,4vw,44px) 0; }

/* Walking in: the facade lifts away once, on load. */
.entrance-veil{
  position:absolute; inset:0; z-index:3; background:var(--surface);
  transform-origin:top center;
  animation:enterDoors 900ms var(--ease-out) both;
  pointer-events:none;
}
@keyframes enterDoors{
  0%   { transform:scaleY(1); opacity:1; }
  100% { transform:scaleY(0); opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .entrance-veil{ animation:none; display:none; }
  .w-ping{ animation:none; }
}

/* ===========================================================================
   ALWAYS-AVAILABLE ESCAPE
   The immersive layer must never be the only route to the shop.
   =========================================================================== */
.quickbar{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:12px 0;
}
.quickbar .q{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line);
  font-size:.84rem; font-weight:560; color:var(--ink-deep);
}
.quickbar .q:hover{ border-color:var(--brand); color:var(--brand-text); }

/* The page under the arrival must not scroll while it's playing, but the
   lock is released by the same finish() that removes the overlay — and by
   the failsafe — so it can never outlive the animation. */
body.arrival-open{ overflow:hidden; }