/* The home page: full-screen scenes from the game, one idea each. */

.scene { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; background: var(--black); }
.media { position: absolute; inset: 0; z-index: -2; margin: 0; overflow: hidden; background: #0b1016; }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; }
.media video { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.media video.playing { opacity: 1; }
/* A slow camera move over the still, only while the scene is on screen. */
.media img { transform: scale(1.08); animation: drift 26s ease-in-out infinite alternate; animation-play-state: paused; }
.inview .media img { animation-play-state: running; }
@keyframes drift { from { transform: scale(1.08) translate3d(1.5%, 0, 0); } to { transform: scale(1.16) translate3d(-2.5%, -1%, 0); } }
.shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.shade-bottom { background: linear-gradient(0deg, rgba(7,9,12,.97) 0%, rgba(7,9,12,.78) 38%, rgba(7,9,12,.15) 66%, rgba(7,9,12,0) 80%); }
@media (min-width: 900px) { .shade-bottom { background: linear-gradient(0deg, rgba(7,9,12,.95) 0%, rgba(7,9,12,.55) 32%, rgba(7,9,12,0) 60%), linear-gradient(90deg, rgba(7,9,12,.55), rgba(7,9,12,0) 55%); } }
.shade-sunset { background:
  linear-gradient(0deg, rgba(7,9,12,.96) 0%, rgba(7,9,12,.5) 34%, rgba(7,9,12,0) 58%),
  linear-gradient(90deg, rgba(40,15,30,.35), rgba(40,15,30,0) 55%); }
.shade-night { background:
  linear-gradient(0deg, rgba(7,9,12,.97) 0%, rgba(7,9,12,.5) 38%, rgba(7,9,12,.15) 70%),
  linear-gradient(180deg, rgba(10,20,50,.75), rgba(10,20,50,.25)); }

.copy { position: relative; width: 100%; padding-bottom: clamp(40px, 9vh, 96px); padding-top: 120px; }
.kicker { font: 700 .78rem/1 var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--danfo); margin: 0 0 18px; }
.headline { font-size: clamp(3.4rem, 16vw, 11rem); max-width: 9.5em; margin: 0 0 .22em; text-wrap: balance; }
.headline.md { font-size: clamp(3rem, 13vw, 8.5rem); }
.headline .y { color: var(--danfo); }
.line { font-size: clamp(1.08rem, 2.2vw, 1.45rem); line-height: 1.45; color: rgba(255,255,255,.86); max-width: 32em; margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.actions .btn { flex: 1 1 230px; }
@media (min-width: 640px) { .actions .btn { flex: 0 0 auto; } }
.small-links { margin-top: 18px; font-size: .88rem; color: rgba(255,255,255,.7); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.small-links a { color: rgba(255,255,255,.9); }

/* Reveal on scroll */
.reveal > * { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in > * { opacity: 1; transform: none; }
.reveal.in > :nth-child(2) { transition-delay: .08s; }
.reveal.in > :nth-child(3) { transition-delay: .16s; }
.reveal.in > :nth-child(4) { transition-delay: .24s; }
.reveal.in > :nth-child(5) { transition-delay: .32s; }
.no-js .reveal > * { opacity: 1; transform: none; }

/* Hero */
.hero .headline { font-size: clamp(3.8rem, 19vw, 13rem); }
.hero .media img, .hero .media video { object-position: 50% 50%; }
.scroll-cue { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); width: 2px; height: 46px; background: linear-gradient(rgba(255,255,255,.0), rgba(255,255,255,.7)); display: none; }
@media (min-height: 700px) and (min-width: 900px) { .scroll-cue { display: block; animation: cue 2.2s ease-in-out infinite; } }
@keyframes cue { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

/* The sticky story: the picture stays, the words change */
.story { position: relative; background: var(--black); }
.story-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; isolation: isolate; }
.story-stage .media { opacity: 0; transition: opacity 1.1s ease; }
.story-stage .media.on { opacity: 1; }
.story-stage .media img { animation-play-state: paused; }
.story-stage .media.on img { animation-play-state: running; }
.story-steps { position: relative; margin-top: -100svh; z-index: 2; }
.step { min-height: 100svh; display: flex; align-items: flex-end; }
.step .copy { padding-top: 0; }
.step-no { font: 400 1rem/1 var(--display); letter-spacing: .12em; color: rgba(255,255,255,.6); margin-bottom: 12px; display: block; }
.progress { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); display: none; flex-direction: column; gap: 10px; z-index: 3; }
.progress span { width: 3px; height: 26px; border-radius: 3px; background: rgba(255,255,255,.25); transition: background-color .4s; }
.progress span.on { background: var(--danfo); }
@media (min-width: 900px) { .progress { display: flex; } }

/* Chat bubbles over players (the "meet people" frame) */
.bubbles { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .8s ease .3s; }
.media.on .bubbles { opacity: 1; }
.bubble { position: absolute; max-width: min(64vw, 300px); padding: 9px 14px; border-radius: 16px; font: 600 clamp(.82rem, 1.6vw, 1rem)/1.3 var(--body); color: var(--ink); background: #fff; box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.bubble::after { content: ""; position: absolute; left: 18px; bottom: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: inherit; }
.bubble b { display: block; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.bubble.a { left: 46%; top: 16%; border-top-color: #fff; }
.bubble.a::after { border-top-color: #fff; }
.bubble.b { left: 8%; top: 30%; background: var(--danfo); }
.bubble.b::after { border-top-color: var(--danfo); }
@media (min-width: 900px) { .bubble.a { left: 52%; top: 22%; } .bubble.b { left: 30%; top: 34%; } }

/* Live from Lagos: a number over the city at night */
.live { min-height: 100svh; }
.live .media { background: #05080c; }
.live .map-img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 60%; opacity: .95; }
.live .shade { background: linear-gradient(0deg, rgba(5,8,12,.92) 0%, rgba(5,8,12,.4) 34%, rgba(5,8,12,0) 60%); }
.live image { filter: brightness(1.7) saturate(1.2); }
.pins { position: absolute; inset: 0; width: 100%; height: 100%; }
.pin-dot { fill: var(--led); filter: drop-shadow(0 0 10px rgba(255,182,39,.9)); transform-box: fill-box; transform-origin: center; animation: pulse 2.6s ease-in-out infinite; }
.pin-ring { fill: none; stroke: rgba(255,182,39,.55); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: ring 2.6s ease-out infinite; }
.pin-label { fill: rgba(255,255,255,.9); font: 600 34px/1 var(--body); letter-spacing: .04em; paint-order: stroke; stroke: rgba(0,0,0,.8); stroke-width: 6px; }
.pin-label.quiet { fill: rgba(255,255,255,.6); }
@media (max-width: 700px) { .pin-label { font-size: 52px; } }
@keyframes pulse { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
@keyframes ring { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }
.count { font: 400 clamp(7rem, 40vw, 20rem)/.82 var(--display); color: var(--led); margin: 0 0 6px; letter-spacing: .01em; text-shadow: 0 0 40px rgba(255,182,39,.45), 0 0 4px rgba(255,220,140,.8); font-variant-numeric: tabular-nums; }
.count-label { font: 400 clamp(1.6rem, 6vw, 3.4rem)/1 var(--display); text-transform: uppercase; margin: 0 0 14px; }
.live-status { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.75); font-size: .95rem; margin: 0; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #6c757d; flex: none; }
.dot.on { background: #3ddc84; box-shadow: 0 0 12px #3ddc84; }
.top-districts { margin: 14px 0 0; color: rgba(255,255,255,.7); font-size: .95rem; max-width: 40em; }
.top-districts b { color: #fff; font-weight: 700; }
.live-facts { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, max-content); gap: 10px 28px; color: rgba(255,255,255,.75); font-size: .95rem; }
.live-facts strong { display: block; color: var(--y, #f6c21a); font-size: 1.6rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .live-facts { grid-template-columns: repeat(2, max-content); } }

/* The advert scene */
.led-board { position: absolute; right: 6%; top: 15%; width: min(46vw, 560px); aspect-ratio: 3.2 / 1; background: #050608; border: 5px solid #23272c; border-radius: 4px; display: grid; place-items: center; box-shadow: 0 0 60px rgba(255,182,39,.35), 0 20px 50px rgba(0,0,0,.6); }
.led-board::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(0,0,0,.55) 1px, transparent 1.6px) 0 0/4px 4px; pointer-events: none; }
.led-board span { font: 400 clamp(1rem, 4.4vw, 3rem)/1 var(--display); color: var(--led); letter-spacing: .04em; text-shadow: 0 0 18px rgba(255,182,39,.9); animation: flicker 5s steps(1) infinite; }
@keyframes flicker { 0%, 100% { opacity: 1; } 48% { opacity: 1; } 49% { opacity: .82; } 50% { opacity: 1; } }
.facts { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 22px 0 0; padding: 0; list-style: none; font: 400 clamp(1.1rem, 2.6vw, 1.6rem)/1.1 var(--display); text-transform: uppercase; color: #fff; }
.facts li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--led); margin-right: 10px; vertical-align: middle; box-shadow: 0 0 10px var(--led); }
.note { font-size: .85rem; color: rgba(255,255,255,.6); margin-top: 14px; }

/* News */
.news { padding: clamp(80px, 14vh, 160px) 0; background: var(--black); }
.news .headline { margin-bottom: .5em; }
.news-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #222a32; }
.news-list li { display: grid; gap: 6px 40px; padding: 28px 0; border-bottom: 1px solid #222a32; }
@media (min-width: 860px) { .news-list li { grid-template-columns: 220px 1fr; } }
.news-list time { font: 700 .8rem/1.4 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--danfo); padding-top: 8px; }
.news-list h3 { font-size: clamp(1.8rem, 5vw, 3rem); margin: 0 0 8px; }
.news-list p { color: rgba(255,255,255,.7); margin: 0; max-width: 46em; font-size: 1.05rem; }

/* Closing */
.closing .headline { font-size: clamp(3.2rem, 14vw, 9.5rem); }

@media (prefers-reduced-motion: reduce) {
  .media img, .pin-dot, .pin-ring, .led-board span, .scroll-cue { animation: none !important; }
  .media img { transform: none; }
  .reveal > * { opacity: 1; transform: none; transition: none; }
  .story-stage .media, .bubbles, .media video { transition: none; }
}

/* Scene framing fixes: keep the subject clear of the words */
.story-stage .media[data-step="0"] img { object-position: 22% 50%; }
@media (min-width: 900px) { .story-stage .media[data-step="0"] img { object-position: 50% 50%; } }
.ads .media { bottom: 45%; }
.ads .media img, .ads .media video { object-position: 50% 70%; filter: brightness(1.3) saturate(1.15); }
.ads .media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(rgba(7,9,12,0), var(--black)); }
@media (min-width: 900px) { .ads .media { bottom: 38%; } }

/* Phones: "Play now" brings the store buttons into view and flashes them. */
#get-app.flash [data-store] { animation: store-flash 1.2s ease-out 1; }
@keyframes store-flash { 0%, 40% { box-shadow: 0 0 0 3px #f5c518; } 100% { box-shadow: 0 0 0 0 rgba(245, 197, 24, 0); } }

/* Homes: in-game shots of the homes, by kind, with a full-screen viewer */
.step-link { display: inline-block; margin-top: 18px; color: var(--danfo); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.homes { background: var(--black); }
.homes-hero { min-height: 92svh; }
.homes-hero .media img { object-position: 40% 50%; }
@media (min-width: 900px) { .homes-hero .media img { object-position: 50% 50%; } }
.homes-body { padding-top: 34px; padding-bottom: clamp(70px, 12vh, 140px); }
.homes-facts { margin: 0 0 18px; }
.homes-note { color: rgba(255,255,255,.75); font-size: 1.05rem; max-width: 46em; margin: 0 0 30px; }
.home-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; }
.home-tabs button { min-height: 46px; padding: 10px 22px; border-radius: 999px; border: 2px solid rgba(255,255,255,.35); background: transparent; color: #fff; font: 700 .95rem/1 var(--body); cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
.home-tabs button:hover { border-color: #fff; }
.home-tabs button[aria-selected="true"] { background: var(--danfo); border-color: var(--danfo); color: var(--ink); }
.home-sum { color: rgba(255,255,255,.75); max-width: 46em; margin: 0 0 20px; }
.shots { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.shot.wide { grid-column: 1 / -1; }
.shot figure { position: relative; margin: 0; }
.shot-open { display: block; width: 100%; padding: 0; border: 0; background: #0b1016; cursor: zoom-in; border-radius: 12px; overflow: hidden; }
.shot-open img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .5s ease; }
.shot.wide .shot-open img { aspect-ratio: 1856 / 574; }
.shot-open:hover img { transform: scale(1.03); }
.shot figcaption { margin-top: 10px; font-size: .95rem; color: rgba(255,255,255,.82); }
.daynight { position: absolute; right: 10px; top: 10px; display: flex; padding: 3px; border-radius: 999px; background: rgba(7,9,12,.7); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.daynight button { min-height: 32px; padding: 4px 12px; border: 0; border-radius: 999px; background: transparent; color: rgba(255,255,255,.85); font: 700 .78rem/1 var(--body); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.daynight button[aria-pressed="true"] { background: var(--danfo); color: var(--ink); }
/* Phones: each kind's pictures scroll sideways, one and a bit at a time. */
@media (max-width: 699px) {
  .shots { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px; scroll-padding: 0 var(--gutter); -webkit-overflow-scrolling: touch; }
  .shot { flex: 0 0 84%; scroll-snap-align: start; }
  .shot.wide { flex-basis: 84%; }
  .shot.wide .shot-open img { aspect-ratio: 16 / 9; }
}

/* The full-screen viewer */
.viewer { position: fixed; inset: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 56px 12px 24px; background: rgba(4,6,8,.94); }
.viewer[hidden] { display: none; }
.viewer img { max-width: 100%; max-height: calc(100svh - 150px); width: auto; height: auto; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.viewer p { margin: 0; color: rgba(255,255,255,.88); text-align: center; max-width: 40em; font-size: 1rem; }
.viewer-btn { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); background: rgba(0,0,0,.45); color: #fff; font: 700 1.4rem/1 var(--body); cursor: pointer; display: grid; place-items: center; }
.viewer-btn:hover { border-color: #fff; }
.viewer-close { top: 10px; right: 12px; }
.viewer-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.viewer-next { right: 12px; top: 50%; transform: translateY(-50%); }
@media (max-width: 699px) { .viewer-prev, .viewer-next { top: auto; bottom: 14px; transform: none; } .viewer { padding-bottom: 80px; } }
body.viewing { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .shot-open img, .home-tabs button { transition: none; } .shot-open:hover img { transform: none; } }

/* Businesses: in-game shots of the business spaces (a made-up demo business), the
   kinds of space, how players find you and how to rent. Shares the Homes shots and
   full-screen viewer (js/homes.js). */
.biz { background: var(--black); }
.biz-hero { min-height: 92svh; }
.biz-hero .media img { object-position: 50% 50%; }
.biz-body { padding-top: 34px; padding-bottom: clamp(70px, 12vh, 140px); }
.biz-kinds { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.biz-kinds li { border: 1px solid #222a32; border-radius: 12px; padding: 16px 18px; background: #0b1016; }
.biz-kinds h3 { font-size: clamp(1.35rem, 3vw, 1.7rem); margin: 0 0 8px; color: var(--danfo); }
.biz-kinds p { margin: 0; color: rgba(255,255,255,.75); font-size: .98rem; line-height: 1.45; }
.biz-cols { display: grid; gap: 34px; margin-top: 46px; }
@media (min-width: 900px) { .biz-cols { grid-template-columns: 1fr 1fr; gap: 56px; } }
.biz-h { font-size: clamp(1.8rem, 5vw, 2.6rem); margin: 0 0 16px; }
.biz-ways { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.biz-ways li { position: relative; padding-left: 20px; color: rgba(255,255,255,.8); font-size: 1.05rem; line-height: 1.45; }
.biz-ways li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: var(--led); box-shadow: 0 0 10px var(--led); }
.biz-ways b { color: #fff; }
.biz-how { color: rgba(255,255,255,.8); font-size: 1.05rem; line-height: 1.45; max-width: 34em; margin: 0; }
.biz-cols .actions { margin-top: 22px; }
@media (min-width: 900px) { .biz-shots { grid-template-columns: repeat(2, 1fr); } .air-shots { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 599px) { .biz-kinds { gap: 8px; } .biz-kinds li { padding: 12px 14px; } }

/* The airport, coming in the next version: in-game shots, cropped clear of the HUD. */
.air { background: var(--black); padding: clamp(70px, 12vh, 140px) 0; border-top: 1px solid #222a32; }
.air .line { margin-bottom: 30px; }