/* Lagos Life · P8 Beyond Lagos: two-city split + passport stamp with ticket.
   Client pick 8 Oct (direction 3 + stamp), from Design/variations/2026-10-08-beyond/split-stamp.html.
   Every rule is scoped to #beyond and every class is prefixed bx-. Page tokens come from style.css. */
#beyond { --bx-line: 2px solid var(--ink); --bx-sh: 0 18px 40px -18px rgba(16,22,52,.28); --bx-stamp: #12784b; }
#beyond .bx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#beyond .bx-defs { position: absolute; width: 0; height: 0; }

/* ---------- split ---------- */
#beyond .bx-split { display: flex; gap: 16px; align-items: stretch; }
#beyond .bx-side { flex: 1 1 0; min-width: 0; background: var(--white); border: var(--bx-line); border-radius: 24px; padding: 36px; display: flex; flex-direction: column; overflow: hidden; transition: flex-grow .5s var(--ease-out), background .3s var(--ease-out); }
#beyond .bx-side.is-wide { flex-grow: 1.86; background: var(--green-soft); }
#beyond .bx-side__code { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; }
#beyond .bx-code { font: 800 15px/1 var(--text); letter-spacing: .04em; }
#beyond .bx-side h3 { font: 800 clamp(56px, 6.4vw, 96px)/.86 var(--display); font-variation-settings: "wdth" 75; text-transform: uppercase; margin: 24px 0 20px; }
#beyond .bx-side.is-narrow h3 { font-size: 64px; }
#beyond .bx-side__tags { display: flex; gap: 8px; flex-wrap: wrap; }
#beyond .bx-tag { display: inline-flex; align-items: center; gap: 8px; font: 600 14px/1 var(--text); min-height: 44px; padding: 0 16px; border: var(--bx-line); border-radius: 999px; background: var(--white); color: var(--ink); white-space: nowrap; cursor: pointer; transition: background .18s var(--ease-out), color .18s var(--ease-out), transform .18s var(--ease-out); }
#beyond .bx-tag svg { width: 16px; height: 16px; flex: none; }
#beyond .bx-tag:hover { background: var(--ink); color: var(--white); }
#beyond .bx-tag:active { transform: translateY(1px); }
#beyond .bx-side__hint { font: 500 13px/1.3 var(--text); color: var(--ink-2); margin-top: 10px; }
#beyond .bx-tiles { list-style: none; margin: auto 0 0; padding: 32px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
#beyond .bx-tile { background: var(--cotton); border: 2px solid transparent; border-radius: 14px; padding: 14px 14px 12px; min-height: 84px; display: flex; flex-direction: column; justify-content: space-between; }
#beyond .bx-side.is-wide .bx-tile { background: var(--white); border-color: var(--ink); }
#beyond .bx-tile small { font: 700 11px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
#beyond .bx-tile b { font: 700 15px/1.25 var(--text); }
#beyond .bx-side.is-narrow .bx-tiles { grid-template-columns: 1fr; gap: 0; }
#beyond .bx-side.is-narrow .bx-tile { min-height: 0; background: none; padding: 10px 0; border-radius: 0; border: 0; border-top: 1px solid var(--ink-3); }
#beyond .bx-side.is-narrow .bx-tile small { display: none; }
#beyond .bx-visited { display: none; align-items: center; gap: 6px; font: 800 11px/1 var(--text); letter-spacing: .1em; color: var(--bx-stamp); border: 2px solid var(--bx-stamp); border-radius: 999px; padding: 7px 10px; transform: rotate(-4deg); }
#beyond .bx-visited svg { width: 14px; height: 14px; }
#beyond .bx-side.is-visited .bx-visited { display: inline-flex; }
#beyond .bx-foot { margin-top: 28px; font: 600 14px/1.3 var(--text); color: var(--ink-2); }

/* ---------- overlay ---------- */
#beyond .bx-ov { position: fixed; inset: 0; z-index: 90; display: none; place-items: center; background: rgba(16,22,52,0); transition: background .25s var(--ease-out); padding: 24px; overflow-y: auto; }
#beyond .bx-ov.is-on { display: grid; }
#beyond .bx-ov.s1 { background: rgba(16,22,52,.66); }
#beyond .bx-stack { position: relative; display: flex; flex-direction: column; align-items: center; }
#beyond .bx-scene { display: flex; gap: 40px; align-items: center; justify-content: center; }
#beyond .bx-ov__top { position: fixed; top: 16px; right: 16px; z-index: 2; }
#beyond .bx-ov__top button { font: 600 13px/1 var(--text); color: var(--ink); background: var(--white); border: var(--bx-line); border-radius: 999px; padding: 0 14px; min-height: 40px; cursor: pointer; }

/* passport */
#beyond .bx-pp { width: 360px; height: 488px; position: relative; perspective: 1400px; transform: translateY(60px); opacity: 0; transition: transform .45s var(--ease-out), opacity .3s var(--ease-out); }
#beyond .s1 .bx-pp { transform: none; opacity: 1; }
#beyond .bx-pp__visa { position: absolute; inset: 0; background: var(--paper); border: var(--bx-line); border-radius: 18px; padding: 24px; box-shadow: var(--bx-sh); overflow: hidden; transform-origin: 50% 100%; }
#beyond .bx-pp__visa::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 31px, rgba(16,22,52,.05) 31px 32px); pointer-events: none; }
#beyond .bx-pp__hd { display: flex; justify-content: space-between; font: 700 11px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); padding-bottom: 14px; border-bottom: 1px solid var(--ink-3); position: relative; }
#beyond .bx-pp__foot { position: absolute; left: 24px; right: 24px; bottom: 20px; font: 500 12px/1.3 var(--text); color: var(--ink-2); display: flex; justify-content: space-between; }
#beyond .bx-pp.thunk .bx-pp__visa { animation: bx-squash .22s var(--ease-out); }
@keyframes bx-squash { 0% { transform: none; } 35% { transform: scale(1.01, .975); } 100% { transform: none; } }
#beyond .bx-pp__cover { position: absolute; inset: 0; border-radius: 18px; background: var(--etu); border: var(--bx-line); transform-origin: 0 50%; transition: transform .5s cubic-bezier(.6,0,.3,1), opacity .2s linear .35s; display: grid; place-items: center; text-align: center; color: var(--gold); backface-visibility: hidden; z-index: 3; }
#beyond .s2 .bx-pp__cover { transform: rotateY(-165deg); opacity: 0; }
#beyond .bx-pp__cover b { display: block; font: 800 34px/.9 var(--display); font-variation-settings: "wdth" 75; letter-spacing: .06em; margin-top: 18px; }
#beyond .bx-pp__cover small { display: block; font: 700 11px/1 var(--text); letter-spacing: .3em; margin-top: 10px; }
#beyond .bx-pp__cover svg { width: 84px; height: 84px; }

/* stamps */
#beyond .bx-st { position: absolute; width: 230px; left: 50%; margin-left: -115px; }
#beyond .bx-st[data-city="ABV"] { top: 66px; transform: rotate(-5deg); }
#beyond .bx-st[data-city="PHC"] { top: 250px; transform: rotate(4deg); }
#beyond .bx-st svg { width: 100%; height: auto; display: block; overflow: visible; }
#beyond .bx-blot { position: absolute; inset: -10%; border-radius: 40%; background: radial-gradient(closest-side, rgba(18,120,75,.22), transparent); opacity: 0; }
#beyond .bx-st.new { opacity: 0; }
#beyond .s4 .bx-st.new { animation: bx-ink .5s var(--ease-out) forwards; }
#beyond .s4 .bx-st.new .bx-blot { animation: bx-spread .7s var(--ease-out) forwards; }
@keyframes bx-ink { 0% { opacity: 0; filter: blur(1.5px); scale: 1.06; } 25% { opacity: .95; } 100% { opacity: .92; filter: none; scale: 1; } }
@keyframes bx-spread { 0% { opacity: .9; scale: .7; } 100% { opacity: 0; scale: 1.15; } }

/* rubber stamp tool */
#beyond .bx-tool { position: absolute; left: 50%; width: 200px; margin-left: -100px; z-index: 4; pointer-events: none; transform: translateY(-260px); opacity: 0; }
#beyond .bx-tool svg { width: 100%; display: block; }
#beyond .s3 .bx-tool { animation: bx-drop .62s cubic-bezier(.5,0,.75,0) forwards; }
@keyframes bx-drop { 0% { transform: translateY(-260px); opacity: 0; } 15% { opacity: 1; } 48% { transform: translateY(0); } 58% { transform: translateY(6px); } 70% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-300px); opacity: 0; } }

/* ticket */
#beyond .bx-tk { width: 340px; background: var(--white); border: var(--bx-line); border-radius: 18px; box-shadow: var(--bx-sh); overflow: hidden; transform: translateX(60px); opacity: 0; transition: transform .45s var(--ease-out), opacity .3s var(--ease-out); }
#beyond .s2b .bx-tk { transform: none; opacity: 1; }
#beyond .bx-tk__band { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: var(--bx-line); font: 800 12px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; }
#beyond .bx-tk--fly .bx-tk__band { background: var(--green-soft); }
#beyond .bx-tk--coach .bx-tk__band { background: var(--gold-soft); }
#beyond .bx-tk__band svg { width: 18px; height: 18px; }
#beyond .bx-tk__route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 22px 20px 16px; }
#beyond .bx-tk__route b { display: block; font: 800 52px/.86 var(--display); font-variation-settings: "wdth" 75; }
#beyond .bx-tk__route span { font: 600 13px/1.2 var(--text); color: var(--ink-2); }
#beyond .bx-tk__route .r { text-align: right; }
#beyond .bx-tk__route svg { width: 26px; height: 26px; }
#beyond .bx-tk__f { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; padding: 0 20px 20px; }
#beyond .bx-tk__f div { min-width: 0; }
#beyond .bx-tk__f small { display: block; font: 700 10px/1 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 5px; }
#beyond .bx-tk__f p { margin: 0; font: 700 14px/1.25 var(--text); overflow-wrap: anywhere; }
#beyond .bx-tk__f .wide { grid-column: 1 / -1; }
#beyond .bx-tk__tear { border-top: 2px dashed var(--ink-3); padding: 16px 20px 18px; }
#beyond .bx-tk__tear svg { width: 100%; height: 48px; display: block; }

/* welcome */
#beyond .bx-wel { position: absolute; left: 0; right: 0; bottom: -96px; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); }
#beyond .s5 .bx-wel { opacity: 1; transform: none; }
#beyond .bx-wel p { margin: 0 0 12px; font: 800 30px/1 var(--display); font-variation-settings: "wdth" 85; color: var(--white); }
#beyond .bx-wel button { font: 700 15px/1 var(--text); background: var(--green); color: var(--ink); border: var(--bx-line); border-radius: 999px; padding: 0 24px; min-height: 48px; cursor: pointer; }

/* skip / reduced motion: jump to the end state */
#beyond .bx-ov.done * { transition: none !important; animation-duration: 0s !important; animation-delay: 0s !important; }
#beyond .bx-ov.done .bx-tool { display: none; }

@media (max-width: 900px) {
  #beyond .bx-split { flex-direction: column; }
  #beyond .bx-side, #beyond .bx-side.is-wide, #beyond .bx-side.is-narrow { flex: none; padding: 24px; }
  #beyond .bx-side h3, #beyond .bx-side.is-narrow h3 { font-size: 56px; }
  #beyond .bx-tiles, #beyond .bx-side.is-narrow .bx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #beyond .bx-side.is-narrow .bx-tile { padding: 14px; border-radius: 14px; background: var(--cotton); border: 0; min-height: 84px; }
  #beyond .bx-side.is-narrow .bx-tile small { display: block; }
  #beyond .bx-ov { place-items: start center; padding: 72px 16px 140px; }
  #beyond .bx-scene { flex-direction: column; gap: 20px; }
  #beyond .bx-pp { width: 320px; height: 360px; }
  #beyond .bx-st { width: 200px; margin-left: -100px; }
  #beyond .bx-st[data-city="ABV"] { top: 52px; }
  #beyond .bx-st[data-city="PHC"] { top: 196px; }
  #beyond .bx-tk { width: 320px; transform: translateY(40px); }
  #beyond .bx-tk__route { padding: 16px 20px 12px; }
  #beyond .bx-tk__route b { font-size: 40px; }
  #beyond .bx-tk__f { gap: 10px 16px; padding-bottom: 14px; }
  #beyond .bx-tk__tear { padding: 12px 20px 14px; }
  #beyond .bx-wel { position: static; margin-top: 24px; }
  #beyond .bx-tool { width: 170px; margin-left: -85px; }
}
@media (max-width: 360px) { #beyond .bx-pp, #beyond .bx-tk { width: 288px; } }
@media (prefers-reduced-motion: reduce) { #beyond .bx-side { transition: none; } }
html.reduce-motion #beyond .bx-side { transition: none; }

/* client 8 Oct: keep the split, slow the hover right down, each city its own colour */
#beyond .bx-side { transition: flex-grow 1.1s cubic-bezier(.22,1,.36,1), background-color .9s ease; }
#beyond .bx-side[data-city="ABV"].is-wide { background: var(--green-soft); }
#beyond .bx-side[data-city="PHC"].is-wide { background: var(--gold-soft); }
@media (prefers-reduced-motion: reduce) { #beyond .bx-side { transition: none; } }
html.reduce-motion #beyond .bx-side { transition: none; }

/* client 9 Oct: keep the widen-on-hover, but smooth: slow flex growth, heading scales (transform, no re-flow), the list swap fades, row height locked in beyond.js */
@media (min-width: 761px) {
  #beyond .bx-side { transition: flex-grow 1s cubic-bezier(.22,1,.36,1), background-color .9s ease !important; }
  #beyond .bx-side h3 { transition: font-size 1s cubic-bezier(.22,1,.36,1); white-space: nowrap; }
  #beyond .bx-tiles { transition: opacity .35s ease; }
  #beyond .bx-split:hover .bx-tiles { animation: bxFade .55s ease both; }
  #beyond .bx-side { overflow: hidden; }
}
@keyframes bxFade { from { opacity: .35; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #beyond .bx-side, #beyond .bx-side h3 { transition: none !important; } #beyond .bx-split:hover .bx-tiles { animation: none; } }