/* ParkReady sign-in. Lead with black + yellow; secondary colours only as bay status. */
:root { --black: #000; --yellow: #FEF153; --white: #fff; --violet: #AF87F5; --green: #AFEB5A; --blue: #78D2FF; --pink: #FF78A5; --grey: #E6E6E6; --ink: #cfcfcf; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--black); color: var(--white); font-family: 'Rethink Sans', Arial, sans-serif; -webkit-font-smoothing: antialiased;
  min-height: 100dvh; display: flex; flex-direction: column; overflow-x: hidden; position: relative;
}
img { display: block; max-width: 100%; }

/* Painted car-park lane markings behind everything */
.lanes {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.6;
  background:
    repeating-linear-gradient(90deg, transparent 0 116px, #1c1c1c 116px 120px),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(254,241,83,.07) 46px 50px);
  -webkit-mask-image: radial-gradient(ellipse at 72% 45%, #000 0%, transparent 72%);
          mask-image: radial-gradient(ellipse at 72% 45%, #000 0%, transparent 72%);
}
.top, .hero, .foot { position: relative; z-index: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
@media (min-width: 900px) { .top, .hero, .foot { padding-left: 48px; padding-right: 48px; } }

/* Header: ParkReady, an application from MTC FutureReady */
.top { display: flex; align-items: center; padding-top: 22px; }
.brand { display: inline-flex; align-items: center; gap: 12px; }
.brand .mark { width: 44px; height: 44px; }
.wordmark { font-size: 1.6rem; font-weight: 400; letter-spacing: -0.01em; }
.wordmark b { font-weight: 800; }
.divider { width: 1px; height: 34px; background: #3a3a3a; margin: 0 6px 0 4px; }
.brand .mtc { width: 96px; height: auto; margin-left: -8px; }
@media (max-width: 420px) { .brand .mtc { width: 78px; } .wordmark { font-size: 1.35rem; } .brand .mark { width: 38px; height: 38px; } }

/* Hero */
.hero { flex: 1; display: grid; gap: 48px; align-items: center; padding-top: 48px; padding-bottom: 40px; }
@media (min-width: 980px) { .hero { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 64px; padding-top: 24px; } }

h1 { margin: 0 0 36px; font-weight: 800; font-size: clamp(3.2rem, 9vw, 6rem); line-height: 0.98; letter-spacing: -0.035em; }
h1 .w { display: inline-block; }
.hl { color: var(--black); background: linear-gradient(var(--yellow), var(--yellow)) no-repeat 0 60% / 100% 84%; padding: 0 0.08em; }

.cta {
  display: inline-flex; align-items: center; gap: 14px; background: var(--yellow); color: var(--black); text-decoration: none;
  font-weight: 800; font-size: 1.08rem; border-radius: 999px; padding: 10px 22px 10px 10px; min-height: 62px;
  border: 2px solid var(--yellow); transition: transform 0.12s ease, box-shadow 0.18s ease; position: relative; overflow: hidden;
}
.cta .ms { width: 42px; height: 42px; border-radius: 50%; background: var(--white); display: grid; place-items: center; flex: none; }
.cta .ms svg { width: 20px; height: 20px; }
.cta .arrow { width: 22px; height: 22px; transition: transform 0.18s ease; }
.cta:hover { box-shadow: 6px 6px 0 var(--white); transform: translate(-2px, -2px); }
.cta:hover .arrow { transform: translateX(3px); }
.cta:active { transform: none; box-shadow: 2px 2px 0 var(--white); }
.cta:focus-visible { outline: 3px solid var(--white); outline-offset: 4px; }
.help { color: #a9a9a9; font-size: 0.88rem; margin: 14px 0 0; }

/* App preview */
.preview { position: relative; padding-bottom: 36px; }
.stage { position: relative; transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.4s cubic-bezier(.2,.8,.2,1); transform-style: preserve-3d; }
.stage::before {
  content: ''; position: absolute; inset: 8% 4% 10% 8%; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(254,241,83,.28), rgba(254,241,83,0)); filter: blur(30px);
}
.device {
  background: var(--white); color: var(--black); border-radius: 26px; padding: 22px; border: 2px solid var(--white);
  box-shadow: 14px 14px 0 var(--yellow); rotate: -1.2deg; position: relative;
}
@media (max-width: 979px) { .device { rotate: none; box-shadow: 8px 8px 0 var(--yellow); padding: 16px; } }
.d-head { display: grid; gap: 2px; position: relative; }
.d-site { position: absolute; right: 0; top: 0; display: inline-flex; align-items: center; gap: 4px; border: 2px solid var(--black); border-radius: 999px; padding: 3px 10px; font-size: 0.75rem; font-weight: 700; }
.d-site svg { width: 12px; height: 12px; }
.d-hello { font-size: 0.8rem; color: #555; font-weight: 600; }
.d-title { font-size: clamp(1.2rem, 2.4vw, 1.6rem); font-weight: 800; letter-spacing: -0.02em; }
.d-title i { font-style: normal; background: linear-gradient(to bottom, transparent 20%, var(--yellow) 20%, var(--yellow) 96%, transparent 96%); padding: 0 0.1em; }
.d-days { display: flex; gap: 8px; margin: 14px 0 16px; }
.d-day { flex: 1; border: 2px solid var(--black); border-radius: 12px; display: grid; text-align: center; padding: 6px 0; line-height: 1.1; }
.d-day small { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.d-day b { font-size: 1.1rem; font-weight: 800; }
.d-day.on { background: var(--black); color: var(--yellow); }

.d-map { border-radius: 14px; overflow: hidden; }
.d-map svg { width: 100%; height: auto; display: block; }
.d-map .o { fill: #f6f6f6; stroke: var(--black); stroke-width: 3; }
.d-map .lane { fill: none; stroke: #bdbdbd; stroke-width: 2.5; stroke-dasharray: 7 7; }
.d-map .ramp { fill: var(--black); }
.d-map .ramp-t { fill: var(--yellow); font: 800 15px 'Rethink Sans', Arial; text-anchor: middle; dominant-baseline: middle; letter-spacing: 0.1em; }
.d-map .blk { fill: var(--grey); stroke: var(--black); stroke-width: 1.5; }
.d-map .s rect { fill: var(--white); stroke: var(--black); stroke-width: 1.6; }
.d-map .s text { font: 800 15px 'Rethink Sans', Arial; text-anchor: middle; dominant-baseline: middle; fill: #8a8a8a; }
.d-map .s.f rect { fill: var(--green); stroke-width: 2.5; } .d-map .s.b rect { fill: var(--blue); stroke-width: 2.5; } .d-map .s.p rect { fill: var(--pink); stroke-width: 2.5; }
.d-map .s.f text, .d-map .s.b text, .d-map .s.p text, .d-map .s.me text { fill: var(--black); }
.d-map .s.me rect { fill: var(--yellow); stroke-width: 3.5; }
.d-map .s.a rect { fill: var(--violet); }
.d-map .s.a text { fill: var(--black); }
.d-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.78rem; font-weight: 600; margin-top: 12px; }
.d-legend span { display: inline-flex; align-items: center; gap: 6px; }
.d-legend i { width: 12px; height: 12px; border-radius: 3px; border: 1.5px solid var(--black); }
.d-legend .f { background: var(--green); } .d-legend .b { background: var(--blue); } .d-legend .p { background: var(--pink); } .d-legend .me { background: var(--yellow); } .d-legend .a { background: var(--violet); }

/* Pointer that acts out a booking, and floating moments from around the car park */
.cursor { position: absolute; left: 0; top: 0; width: 30px; height: 30px; opacity: 0; pointer-events: none; z-index: 3; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.cursor svg { width: 100%; height: 100%; display: block; }
.cursor::after { content: ''; position: absolute; left: -11px; top: -11px; width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--black); opacity: 0; }
.float {
  position: absolute; display: flex; align-items: center; gap: 10px; background: var(--white); color: var(--black); border: 2px solid var(--black);
  border-radius: 14px; padding: 9px 14px 9px 10px; box-shadow: 5px 5px 0 var(--black); opacity: 0; z-index: 2; white-space: nowrap;
}
.float b { display: block; font-size: 0.9rem; }
.float small { display: block; font-size: 0.76rem; color: #555; }
.float .dot { width: 14px; height: 14px; border-radius: 50%; background: var(--green); border: 2px solid var(--black); flex: none; }
.float svg { width: 22px; height: 22px; flex: none; }
.float-a { right: -70px; top: 30%; }
.float-b { left: -38px; bottom: 22%; }
@media (max-width: 979px) { .float { display: none; } }

.toast-card {
  position: absolute; right: -6px; bottom: 0; display: flex; align-items: center; gap: 12px; background: var(--black); color: var(--white);
  border: 2px solid var(--yellow); border-radius: 18px; padding: 12px 18px 12px 12px; box-shadow: 0 18px 40px rgba(0,0,0,0.5);
}
.toast-card .t-num { width: 44px; height: 44px; border-radius: 12px; background: var(--yellow); color: var(--black); display: grid; place-items: center; font-weight: 800; font-size: 1.3rem; }
.toast-card b { display: block; font-size: 1rem; }
.toast-card small { color: var(--ink); font-size: 0.82rem; }
@media (max-width: 979px) { .preview { padding-bottom: 64px; } .toast-card { right: 10px; } }

.foot { padding-top: 8px; padding-bottom: 28px; color: #7a7a7a; font-size: 0.82rem; }

/* Motion. The preview acts out a booking on a 10s loop: tap Thursday, the bays update, tap bay 4, it turns yours,
   the car drives in, the confirmation pops. Floating cards show other moments. Static when motion is reduced. */
.d-map .car { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .cursor { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  h1 .w { animation: word 0.7s cubic-bezier(.2,.8,.2,1) both; }
  h1 .w:nth-of-type(2) { animation-delay: 0.08s; }
  h1 .w.hl { animation: word 0.7s 0.18s cubic-bezier(.2,.8,.2,1) both, wipe 0.6s 0.55s cubic-bezier(.6,0,.2,1) both; }
  .cta { animation: fade 0.7s 0.4s cubic-bezier(.2,.8,.2,1) both; }
  .help { animation: fade 0.7s 0.5s cubic-bezier(.2,.8,.2,1) both; }
  .cta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.6) 50%, transparent 70%); transform: translateX(-120%); animation: shine 5s 2s ease-in-out infinite; pointer-events: none; }
  .lanes { animation: drift 40s linear infinite; }
  .preview { animation: rise 0.9s 0.2s cubic-bezier(.2,.8,.2,1) both; }
  .device { animation: bob 7s 1.2s ease-in-out infinite; }

  .device, .d-map, .d-days { --loop: 10s; }
  .cursor { animation: cursor 10s 1s cubic-bezier(.5,0,.2,1) infinite; }
  .cursor::after { animation: tapring 10s 1s ease-out infinite; }
  .d-day.wed { animation: chipOut 10s 1s infinite; }
  .d-day.thu { animation: chipIn 10s 1s infinite; }
  .d-map .s.to-free rect { animation: toFree 10s 1s infinite; }
  .d-map .s.to-booked rect { animation: toBooked 10s 1s infinite; }
  .d-map .s.frees rect { animation: frees 10s 1s infinite; }
  .d-map .s.me rect { animation: claim 10s 1s infinite; }
  .d-map .tick { animation: tick 10s 1s infinite; transform-box: fill-box; transform-origin: center; }
  .d-map .car { offset-path: path("M330 34 H575 V165 H174 V96"); offset-rotate: auto; animation: drive 10s 1s infinite; }
  .toast-card { animation: toast 10s 1s infinite; }
  .float-a { animation: floatIn 10s 1s infinite; --show: 46%; --hide: 64%; }
  .float-b { animation: floatB 10s 1s infinite; }
}
@keyframes word { from { opacity: 0; transform: translateY(0.4em); } }
@keyframes wipe { from { background-size: 0% 84%; } }
@keyframes fade { from { opacity: 0; transform: translateY(12px); } }
@keyframes shine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes drift { to { background-position: 240px 0, 0 200px; } }
@keyframes rise { from { opacity: 0; transform: translateY(30px); } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

@keyframes cursor {
  0% { opacity: 0; translate: var(--c0x, 80%) var(--c0y, 90%); scale: 1; }
  5% { opacity: 1; translate: var(--c0x, 80%) var(--c0y, 90%); }
  16% { translate: var(--t1x, 70%) var(--t1y, 30%); scale: 1; }
  18.5% { scale: 0.82; } 21% { scale: 1; translate: var(--t1x, 70%) var(--t1y, 30%); }
  33% { translate: var(--t2x, 25%) var(--t2y, 55%); scale: 1; }
  35.5% { scale: 0.82; } 38% { scale: 1; opacity: 1; translate: var(--t2x, 25%) var(--t2y, 55%); }
  46%, 100% { opacity: 0; translate: var(--t2x, 25%) var(--t2y, 55%); }
}
@keyframes tapring { 0%, 18% { opacity: 0; scale: 0.4; } 19% { opacity: 1; scale: 0.6; } 24% { opacity: 0; scale: 1.6; } 35% { opacity: 0; scale: 0.4; } 36% { opacity: 1; scale: 0.6; } 41%, 100% { opacity: 0; scale: 1.6; } }
@keyframes chipOut { 0%, 19% { background: var(--black); color: var(--yellow); } 20.5%, 94% { background: var(--white); color: var(--black); } 97%, 100% { background: var(--black); color: var(--yellow); } }
@keyframes chipIn { 0%, 19% { background: var(--white); color: var(--black); } 20.5%, 94% { background: var(--black); color: var(--yellow); } 97%, 100% { background: var(--white); color: var(--black); } }
@keyframes toFree { 0%, 21% { fill: var(--blue); } 24%, 94% { fill: var(--green); } 97%, 100% { fill: var(--blue); } }
@keyframes toBooked { 0%, 21.5% { fill: var(--green); } 24.5%, 94% { fill: var(--blue); } 97%, 100% { fill: var(--green); } }
@keyframes frees { 0%, 47% { fill: var(--pink); } 50%, 94% { fill: var(--green); } 97%, 100% { fill: var(--pink); } }
@keyframes claim { 0%, 36% { fill: var(--green); } 38.5%, 94% { fill: var(--yellow); } 97%, 100% { fill: var(--green); } }
@keyframes tick { 0%, 38% { opacity: 0; scale: 0.3; } 41% { opacity: 1; scale: 1.15; } 43%, 92% { opacity: 1; scale: 1; } 96%, 100% { opacity: 0; scale: 0.6; } }
@keyframes drive {
  0%, 40% { offset-distance: 0%; opacity: 0; }
  44% { opacity: 1; offset-distance: 6%; animation-timing-function: cubic-bezier(.4,0,.2,1); }
  68% { offset-distance: 100%; opacity: 1; }
  90% { offset-distance: 100%; opacity: 1; }
  95%, 100% { offset-distance: 100%; opacity: 0; }
}
@keyframes toast { 0%, 66% { opacity: 0; transform: translateY(18px) scale(.96); } 71%, 91% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(10px); } }
@keyframes floatIn { 0%, 46% { opacity: 0; transform: translateY(10px) rotate(2deg); } 50%, 62% { opacity: 1; transform: rotate(2deg); } 66%, 100% { opacity: 0; transform: translateY(-8px) rotate(2deg); } }
@keyframes floatB { 0%, 72% { opacity: 0; transform: translateX(-10px) rotate(-2deg); } 76%, 90% { opacity: 1; transform: rotate(-2deg); } 94%, 100% { opacity: 0; transform: translateX(-10px) rotate(-2deg); } }

/* Denied page shares this stylesheet */
.denied { min-height: 100dvh; display: grid; place-items: center; padding: 24px; text-align: center; position: relative; z-index: 1; }
.denied .box { max-width: 460px; display: grid; gap: 18px; justify-items: center; }
.denied h1 { font-size: 2.2rem; margin: 0; }
.denied p { color: #d6d6d6; margin: 0; }
.denied a.link { color: var(--yellow); font-weight: 700; }