/*
 * VEON World. Everything is laid out on the kiosks' 960 × 1670 design canvas (the Figma frames), which
 * app.js scales to fit the screen like the kiosk apps do; the leftover axis is black. Phones get their own
 * canvas (the block at the end).
 */

@font-face { font-family: Montserrat; font-weight: 300; src: url(fonts/montserrat_light.ttf); }
@font-face { font-family: Montserrat; font-weight: 400; src: url(fonts/montserrat_regular.ttf); }
@font-face { font-family: Montserrat; font-weight: 500; src: url(fonts/montserrat_medium.ttf); }
@font-face { font-family: Montserrat; font-weight: 600; src: url(fonts/montserrat_semibold.ttf); }
@font-face { font-family: Montserrat; font-weight: 700; src: url(fonts/montserrat_bold.ttf); }

:root {
	--veon: #ffc83a;
	--ink: #f4f5f7;
	--ink-2: rgba(244, 245, 247, 0.62);
	--ink-3: rgba(244, 245, 247, 0.38);
	--line: rgba(255, 255, 255, 0.34);
	--glass: rgba(72, 72, 74, 0.72);
	--cut: 22px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #000; overflow: hidden; }
body {
	font-family: Montserrat, system-ui, sans-serif; color: var(--ink);
	user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
	touch-action: none; cursor: default;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus { outline: none; }
video { display: block; }
[hidden] { display: none !important; }

.stage {
	position: absolute; left: 50%; top: 50%;
	width: 960px; height: 1670px;
	transform-origin: 0 0;
	overflow: hidden;
	background: radial-gradient(70% 40% at 50% 52%, rgba(40, 90, 200, 0.09), transparent 72%), #000;
}

/* ─── holding screen ─────────────────────────────────────────────────────── */

.holding { position: absolute; inset: 0; }

/* The globe's box is centred on the planet: 860 px across at (480, 911) on the holding screen, the same
   planet 110 px higher on the explore screen. */
.globe { position: absolute; left: 0; right: 0; top: 291px; height: 1240px; transition: transform 1.1s cubic-bezier(0.65, 0, 0.25, 1); }
.globe > canvas { display: block; position: absolute; inset: 0; }
.stage[data-state='explore'] .globe { transform: translateY(-110px); }

/* The glowing lines around the planet: drawn once by app.js, turned slowly here. */
.globe > .contours { inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); animation: drift 240s linear infinite; pointer-events: none; }
@keyframes drift { to { transform: translate(-50%, -50%) rotate(360deg); } }

.shade { position: absolute; left: 0; right: 0; bottom: 0; height: 560px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.88) 78%); pointer-events: none; }

.intro, .explore { position: absolute; inset: 0; pointer-events: none; transition: opacity 0.5s; }
.intro > *, .explore > * { pointer-events: auto; }
.stage[data-state='intro'] .explore, .stage[data-state='explore'] .intro { opacity: 0; }
.stage[data-state='intro'] .explore > *, .stage[data-state='explore'] .intro > * { pointer-events: none; }
.stage[data-state='explore'] .explore { transition-delay: 0.55s; }

.intro__tag { position: absolute; left: 564px; top: 322px; display: flex; align-items: center; gap: 14px; font-size: 22px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; }
.intro__tag svg { width: 30px; height: 30px; fill: none; stroke: var(--ink); stroke-width: 2.4; }
.intro__logo { position: absolute; left: 99px; top: 371px; width: 759px; }
/* LEARN MORE at the bottom, at the same height as in VEON Starlink. */
.intro__go {
	position: absolute; left: 343px; top: 1500px; width: 272px; height: 49px; --cut: 14px; isolation: isolate;
	display: flex; align-items: center; justify-content: center;
	font-size: 17px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase;
	background: rgba(255, 255, 255, 0.55);
	clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
}
.intro__go::before { content: ''; position: absolute; inset: 1px; z-index: -1; background: rgba(28, 33, 48, 0.9); clip-path: inherit; }

.top { position: absolute; left: 56px; right: 56px; top: 48px; display: flex; align-items: center; gap: 22px; }
.top__logo { height: 38px; }
.top__rule { width: 1px; height: 34px; background: var(--line); }
.top__title { font-size: 34px; font-weight: 300; letter-spacing: 0.32em; text-transform: uppercase; }
.top__event { margin-left: auto; text-align: right; font-size: 13px; line-height: 1.5; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.top__event b { font-weight: 600; color: var(--ink); }
#clock { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }

.pills { position: absolute; left: 56px; right: 56px; top: 128px; display: flex; gap: 10px; padding: 7px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.pill {
	display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 18px; border-radius: 9px;
	font-size: 14px; font-weight: 500; letter-spacing: 0.04em; color: var(--ink-2);
	transition: background-color 0.25s, color 0.25s;
}
.pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--tint, #fff); box-shadow: 0 0 10px var(--tint, #fff); }
.pill[aria-pressed='true'] { background: rgba(255, 255, 255, 0.12); color: var(--ink); }

/* Point labels: a button anchored on its point, the tag off to one side. */
.labels { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.label { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: auto; will-change: transform; transition: opacity 0.3s; }
.label__hit { position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%; }
.label__tag {
	position: absolute; top: -21px; display: flex; flex-direction: column; gap: 2px; white-space: nowrap;
	padding: 7px 11px 7px 10px; background: rgba(12, 14, 20, 0.62); border-left: 2px solid var(--tint);
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
	transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.35s;
}
.label[data-side='right'] .label__tag { left: 20px; }
.label[data-side='left'] .label__tag { right: 20px; }
.label__tag::before { content: ''; position: absolute; top: 20px; width: 10px; height: 1px; background: var(--tint); opacity: 0.8; }
.label[data-side='right'] .label__tag::before { left: -12px; }
.label[data-side='left'] .label__tag::before { right: -10px; }
.label__place { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.label__what { font-size: 9px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tint); }
.label.is-spot .label__tag { background: rgba(24, 28, 38, 0.86); transform: scale(1.08); }
.label[data-side='right'].is-spot .label__tag { transform-origin: left center; }
.label[data-side='left'].is-spot .label__tag { transform-origin: right center; }

.hint {
	position: absolute; left: 0; right: 0; top: 1262px; display: flex; justify-content: center; align-items: center; gap: 12px;
	font-size: 14px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-2);
}
.hint__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--veon); box-shadow: 0 0 0 0 rgba(255, 200, 58, 0.6); animation: ping 2.2s ease-out infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 14px rgba(255, 200, 58, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 200, 58, 0); } }

/* Chamfered glass: the Figma cards and buttons have a cut bottom-right corner and a hairline edge. The
   element is the edge colour, ::before is the fill one pixel in, both clipped to the same shape. */
.cut { position: relative; isolation: isolate; background: var(--line); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%); }
.cut::before { content: ''; position: absolute; inset: 1px; z-index: -1; background: var(--fill, var(--glass)); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut) + 0.4px), calc(100% - var(--cut) + 0.4px) 100%, 0 100%); }

/* Cards keep a third of the row's width whatever their number, centred. */
.collections { position: absolute; left: 56px; right: 56px; top: 1304px; display: grid; --gap: 22px; grid-template-columns: repeat(auto-fit, calc((100% - 2 * var(--gap)) / 3)); justify-content: center; gap: var(--gap); list-style: none; }

.collections li, .cards li { display: flex; }
.card { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 10px 10px 18px; text-align: left; --fill: rgba(58, 58, 62, 0.9); }
.card__thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #111 center / cover no-repeat; }
.card__thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgba(0, 0, 0, 0.35)); }
.card__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin: 16px 6px 10px; }
.card__title { font-size: 14px; font-weight: 600; line-height: 1.35; letter-spacing: 0.14em; text-transform: uppercase; }
.card__arrow { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--ink); stroke-width: 2; }
.card__sub { margin: auto 6px 0; font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-3); }
.card__sub b { color: var(--tint); font-weight: 600; }
.card__tag { position: absolute; left: 10px; top: 10px; z-index: 1; padding: 4px 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; background: rgba(0, 0, 0, 0.55); border-left: 2px solid var(--tint); }

/* Back to the holding screen, centred under the collections. */
.home-btn { position: absolute; left: 50%; bottom: 44px; transform: translateX(-50%); }

.crumbs { position: absolute; left: 56px; bottom: 44px; display: flex; gap: 38px; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); }
.crumbs span::before { content: '·'; margin-right: 10px; }

/* ─── popup ──────────────────────────────────────────────────────────────── */

.popup { position: absolute; inset: 0; z-index: 5; }
.popup__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.62); animation: fade 0.35s both; }
.panel {
	position: absolute; left: 34px; right: 34px; top: 96px; bottom: 96px; --cut: 64px; --fill: rgba(64, 64, 66, 0.93); --line: rgba(255, 255, 255, 0.22);
	display: flex; flex-direction: column;
	animation: rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.panel::before { backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.panel__video { position: relative; aspect-ratio: 16 / 9; margin: 1px 1px 0; background: #000; overflow: hidden; }
.panel__video video { width: 100%; height: 100%; object-fit: cover; }
.panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin: 52px 50px 0; }
.panel__title { font-size: 30px; font-weight: 600; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; white-space: pre-line; }

.chip { display: inline-flex; align-items: center; gap: 14px; height: 40px; padding: 0 18px 0 16px; --cut: 9px; --fill: rgba(70, 70, 72, 0.9); font-size: 14px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; }
.chip svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin: 46px 50px 0; list-style: none; }
.cards[data-count='4'] { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cards[data-count='4'] .card__title { font-size: 12px; }
.card[aria-current='true'] .card__sub { color: var(--ink); }

.crumbs--panel { left: 50px; bottom: 34px; }

/* ─── full 9:16 video ────────────────────────────────────────────────────── */

.full { position: absolute; inset: 0; z-index: 8; background: #000; animation: fade 0.35s both; }
.full video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.full__shade { position: absolute; left: 0; right: 0; bottom: 0; height: 520px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.78)); pointer-events: none; }
.full__ui { position: absolute; left: 56px; bottom: 60px; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.full__title { font-size: 30px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 8px; }

@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } }

/* ─── phone layout (app.js sets data-layout and a 430 px wide canvas as tall as the screen) ─── */

.stage[data-layout='mobile'] {
	.top { left: 20px; right: 20px; top: 26px; gap: 12px; }
	.top__logo { height: 20px; }
	.top__rule { height: 20px; }
	.top__title { font-size: 18px; letter-spacing: 0.28em; }
	.top__event { font-size: 9px; letter-spacing: 0.12em; }

	.pills { left: 14px; right: 14px; top: 66px; gap: 4px; padding: 4px; border-radius: 10px; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; }
	.pill { flex: none; height: 32px; padding: 0 11px; gap: 7px; font-size: 11.5px; letter-spacing: 0.02em; border-radius: 7px; }
	.pill i { width: 6px; height: 6px; }

	.globe { top: 112px; bottom: 270px; height: auto; }
	&[data-state='explore'] .globe { transform: none; }
	/* The holding screen has nothing under the planet on a phone, so the planet and its titles sit 80 px lower. */
	&[data-state='intro'] .globe, .intro { transform: translateY(80px); }
	.shade { height: 320px; }

	/* Holding screen: the logo over the top of the planet. The planet spans 17% to 83% of the globe box
	   (fit 0.66), which runs from 112 px to 270 px above the bottom. LEARN MORE sits 64 px above the bottom,
	   as in VEON Starlink (144 px here because .intro is moved 80 px down). */
	.intro__logo { left: 50%; width: 330px; transform: translateX(-50%); top: calc(112px + 0.17 * (100% - 382px) - 48px); }
	.intro__tag { left: auto; right: 50px; top: calc(112px + 0.17 * (100% - 382px) - 84px); gap: 8px; font-size: 11px; }
	.intro__tag svg { width: 15px; height: 15px; stroke-width: 2.8; }
	.intro__go { left: 50%; width: 190px; height: 38px; margin-left: -95px; --cut: 10px; font-size: 12px; top: auto; bottom: 144px; }

	.label__hit { left: -20px; top: -20px; width: 40px; height: 40px; }
	.label__tag { top: -12px; padding: 4px 7px 4px 6px; gap: 1px; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%); }
	.label[data-side='right'] .label__tag { left: 12px; }
	.label[data-side='left'] .label__tag { right: 12px; }
	.label__tag::before { top: 11px; width: 6px; }
	.label[data-side='right'] .label__tag::before { left: -8px; }
	.label[data-side='left'] .label__tag::before { right: -6px; }
	.label__place { font-size: 9px; letter-spacing: 0.08em; }
	.label__what { display: none; }

	.hint { top: auto; bottom: 238px; gap: 8px; font-size: 10px; letter-spacing: 0.18em; }
	.hint__dot { width: 7px; height: 7px; }

	.collections { left: 14px; right: 14px; top: auto; bottom: 56px; --gap: 10px; }
	.card { --cut: 14px; padding: 6px 6px 12px; }
	.card__row { margin: 10px 3px 6px; gap: 4px; }
	.card__title { font-size: 9.5px; letter-spacing: 0.08em; }
	.card__arrow { width: 13px; height: 13px; }
	.card__sub { margin: auto 3px 0; font-size: 8px; letter-spacing: 0.14em; }

	.home-btn { bottom: 13px; }

	.panel { left: 10px; right: 10px; top: 58px; bottom: 16px; --cut: 34px; }
	.panel__head { margin: 24px 20px 0; gap: 12px; align-items: center; }
	.panel__title { font-size: 17px; letter-spacing: 0.1em; }
	.chip { height: 32px; gap: 8px; padding: 0 11px 0 12px; --cut: 7px; font-size: 10.5px; letter-spacing: 0.12em; }
	.chip svg { width: 16px; height: 16px; }
	.cards, .cards[data-count='4'] { grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 22px 20px 0; }
	.cards .card__title { font-size: 10.5px; }
	.crumbs--panel { display: none; }

	.full__shade { height: 300px; }
	.full__ui { left: 20px; bottom: 30px; gap: 12px; }
	.full__title { font-size: 20px; margin-bottom: 4px; }
}