/*
	The look of app.shahenlogistics.com: the website's hero ( php: frontend/site/style.phtml ),
	light and colourful, with the logo's blue and grey and its orange, teal and green accents.
	The animations loop by themselves and all stop for reduced motion.
	Gradients only in the background and in light effects, never in letters or on buttons.
*/
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400 800; font-display: swap;
	src: url("fonts/jost-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400 800; font-display: swap;
	src: url("fonts/jost-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
	src: url("fonts/jakarta-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
	src: url("fonts/jakarta-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* an inviter's name in Arabic: this file is fetched only when such a name shows */
@font-face { font-family: "Noto Kufi Arabic"; font-style: normal; font-weight: 100 900; font-display: swap;
	src: url("fonts/kufi-arabic.woff2") format("woff2");
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }

:root {
	--blue: #3564af; --blue-50: #eef3fb; --blue-100: #dce7f7;
	--grey: #58595b;
	--green: #168a57; --green-700: #12774b; --green-50: #e3f5ec;
	--ink: #172133; --ink-2: #4b5567;
	--wrap: 1220px;
	--m: clamp(20px, 3vw, 32px);
	--bar: 78px;
	--font: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--brand-font: "Plus Jakarta Sans", "Noto Kufi Arabic", "Jost", system-ui, sans-serif;
	--ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--ink); font-family: var(--font); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1 { margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 3px solid #f28c28; outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--blue); color: #fff; }
.ic { width: 1em; height: 1em; flex: none; fill: currentColor; }
.wrap { width: min(var(--wrap), 100% - 2 * var(--m)); margin-inline: auto; }

/* ---------- the page: the sky, the grid and its lights ---------- */
.page { position: relative; min-height: 100svh; display: flex; flex-direction: column; background: linear-gradient(180deg, #edf3fc 0%, #f6f9fe 62%, #fff 100%); overflow: hidden; isolation: isolate; }
.sky { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; animation: drift-blob 22s ease-in-out infinite alternate; will-change: transform; }
.blob-1 { width: 760px; height: 760px; top: -320px; right: -240px; background: radial-gradient(closest-side, rgba(176, 203, 243, .7), rgba(176, 203, 243, 0)); }
.blob-2 { width: 560px; height: 560px; bottom: -280px; left: -200px; background: radial-gradient(closest-side, rgba(255, 220, 182, .65), rgba(255, 220, 182, 0)); animation-delay: -8s; }
.blob-3 { width: 460px; height: 460px; top: 30%; left: 36%; background: radial-gradient(closest-side, rgba(196, 236, 230, .5), rgba(196, 236, 230, 0)); animation-delay: -14s; }

.lines { --cell: 72px; position: absolute; inset-block: 0; left: 0; width: 64%; z-index: -1; overflow: hidden; pointer-events: none;
	background-image: linear-gradient(rgba(53, 100, 175, .085) 1px, transparent 1px), linear-gradient(90deg, rgba(53, 100, 175, .085) 1px, transparent 1px);
	background-size: var(--cell) var(--cell);
	-webkit-mask-image: radial-gradient(ellipse 72% 70% at 34% 52%, #000 22%, transparent 78%); mask-image: radial-gradient(ellipse 72% 70% at 34% 52%, #000 22%, transparent 78%); }
.beam { position: absolute; overflow: hidden; }
.beam-x { left: 0; right: 0; top: calc(var(--row) * var(--cell)); height: 1px; }
.beam-y { top: 0; bottom: 0; left: calc(var(--col) * var(--cell)); width: 1px; }
.beam::after { content: ""; position: absolute; inset: 0; animation: var(--t) linear var(--d) infinite; will-change: transform; }
.beam-x::after { background: linear-gradient(90deg, rgba(53, 100, 175, 0), rgba(53, 100, 175, .7), rgba(53, 100, 175, 0)) no-repeat 0 0 / 220px 100%; animation-name: beam-x; }
.beam-y::after { background: linear-gradient(180deg, rgba(53, 100, 175, 0), rgba(53, 100, 175, .7), rgba(53, 100, 175, 0)) no-repeat 0 0 / 100% 220px; animation-name: beam-y; }
.beam-x.beam-warm::after { background-image: linear-gradient(90deg, rgba(242, 140, 40, 0), rgba(242, 140, 40, .85), rgba(242, 140, 40, 0)); }
.beam-y.beam-warm::after { background-image: linear-gradient(180deg, rgba(242, 140, 40, 0), rgba(242, 140, 40, .85), rgba(242, 140, 40, 0)); }

/* ---------- the bar and the foot ---------- */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: var(--bar); }
.bar-home img { width: 170px; height: auto; }
.bar-link { padding: 9px 16px; border-radius: 999px; background: #fff; box-shadow: 0 2px 10px rgba(23, 33, 51, .06), 0 1px 2px rgba(23, 33, 51, .04); color: var(--ink); font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color .2s ease, color .2s ease; }
.bar-link:hover { background: var(--blue-50); color: var(--blue); }

.foot { display: flex; flex-wrap: wrap; gap: 4px 20px; padding-block: 18px 22px; color: var(--ink-2); font-size: 15px; }
.foot a { font-weight: 500; text-decoration: none; }
.foot a:hover { color: var(--blue); text-decoration: underline; }

/* ---------- the two sides: the words and the ticket, the globe ---------- */
.main { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 64px); padding-block: 12px 16px; }
.copy { position: relative; transition: opacity .45s ease; }
.copy::before { content: ""; position: absolute; inset: -70px -90px; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(247, 250, 255, .92), rgba(247, 250, 255, .6) 55%, rgba(247, 250, 255, 0)); }
/* the invite waits a moment for the inviter's name, so the words do not jump */
.is-waiting .copy { opacity: 0; }

/* the name: strong in the logo's blue, then light in its grey */
.name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .26em; font-family: var(--brand-font); font-size: clamp(40px, 4.4vw, 62px); line-height: 1.08; letter-spacing: -.035em; }
.name-1 { padding-bottom: .04em; min-width: 0; overflow-wrap: anywhere; font-weight: 800; color: var(--blue); animation: name-in 1s var(--ease) both; }
/* this font's hyphen is wide: a smaller one, raised to the middle of the letters */
.name-1 .hy { font-size: .62em; vertical-align: .2em; margin: 0 .02em; }
.name-2 { font-weight: 300; white-space: nowrap; word-spacing: .14em; color: var(--grey); animation: name-in 1s var(--ease) .12s both; }
.lede { margin-top: 22px; max-width: 31em; color: var(--ink-2); font-size: clamp(17px, 1.25vw, 19px); line-height: 1.7; animation: rise 1s var(--ease) .4s both; }
.going { margin-top: 18px; color: var(--green-700); font-size: 16px; font-weight: 600; }

/* ---------- the shipping ticket: a receipt's torn edge, a stub behind a perforation ---------- */
.ticket { width: 100%; max-width: 560px; margin-top: 24px; color: var(--ink); text-align: start; filter: drop-shadow(0 16px 24px rgba(33, 63, 115, .13)) drop-shadow(0 2px 3px rgba(33, 63, 115, .08)); animation: rise 1s var(--ease) .6s both; }
.ticket-paper { --stub: 204px; --notch: 11px; display: grid; grid-template-columns: minmax(0, 1fr) var(--stub); padding-bottom: 7px; background: #fff;
	-webkit-mask: radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 98%, #000), radial-gradient(circle var(--notch) at calc(100% - var(--stub)) calc(100% - 7px), #0000 98%, #000), conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
	-webkit-mask-composite: source-in, source-in;
	mask: radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0, #0000 98%, #000), radial-gradient(circle var(--notch) at calc(100% - var(--stub)) calc(100% - 7px), #0000 98%, #000), conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
	mask-composite: intersect; }
.ticket-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px 20px 16px; }
.ticket-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 26px; }
.ticket-label { color: var(--blue); font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
/* a rubber stamp */
.ticket-stamp { flex: none; padding: 2px 9px; border: 2px solid var(--green); border-radius: 6px; color: var(--green); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; transform: rotate(-5deg); opacity: .92; }
.ticket-title { font-family: var(--brand-font); font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: var(--ink); }
.ticket-points { display: flex; flex-direction: column; gap: 7px; }
.ticket-points > span { display: flex; align-items: flex-start; gap: 9px; color: var(--ink-2); font-size: 15px; line-height: 1.35; }
.ticket-points .ic { width: 18px; height: 18px; padding: 4px; border-radius: 50%; background: var(--green-50); color: var(--green); }

/* the invite code, printed large, and its Copy button */
.ticket-code { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.code { min-width: 0; overflow-wrap: anywhere; font-family: var(--brand-font); font-size: clamp(30px, 2.8vw, 36px); font-weight: 800; line-height: 1.1; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--ink); }
.copy-code { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--blue-50); color: var(--blue); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; transition: background-color .2s ease, color .2s ease, transform .12s ease; }
.copy-code:hover { background: var(--blue-100); }
.copy-code:active { transform: scale(.97); }
.copy-code.is-done { background: var(--green-50); color: var(--green-700); }
.copy-code svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

/* the stub: the two store buttons, with a light crossing them now and then */
.ticket-stub { display: flex; padding: 14px; border-inline-start: 2px dashed #d7dfeb; }
.stores { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 0; }
.store { position: relative; overflow: hidden; display: flex; align-items: center; gap: 11px; min-height: 58px; padding: 8px 14px; border-radius: 14px; background: var(--green); color: #fff; text-decoration: none; transition: background-color .2s ease, transform .2s var(--ease); }
.store::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, 0) 70%); transform: translateX(-100%); animation: btn-shine 5s ease-in-out 2.4s infinite; }
.store + .store::after { animation-delay: 3s; }
.store:hover { background: var(--green-700); transform: translateY(-2px); }
.store:active { transform: scale(.98); }
.store .ic { font-size: 23px; }
.store span { display: flex; flex-direction: column; min-width: 0; }
.store small { font-size: 13px; font-weight: 500; line-height: 1.25; white-space: nowrap; }
.store b { font-size: 17px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
/* the visitor's own phone: a soft ring pulses round its store */
.store.is-first { animation: dl-pulse 2.8s ease-out 1.6s infinite; }

/* ---------- the globe and the two flags behind its rim ---------- */
.visual { position: relative; width: 100%; max-width: 620px; aspect-ratio: 1; justify-self: end; animation: globe-in 1.6s var(--ease) .15s both; }
.globe { position: relative; z-index: 1; width: 100%; height: 100%; font-family: var(--font); }
.halo { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(53, 100, 175, .12) 0%, rgba(42, 159, 216, .05) 60%, rgba(42, 159, 216, 0) 100%); animation: breathe 7s ease-in-out infinite; }
.flag { position: absolute; z-index: 0; width: 27%; aspect-ratio: 4 / 3; overflow: hidden; pointer-events: none; animation: flag-in 1.6s var(--ease) .6s both; }
.flag img { display: block; width: 100%; height: 100%; animation: flag-wave 7s ease-in-out infinite; transform-origin: 100% 50%; }
.flag::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 9%, rgba(255, 255, 255, 0) 18%, rgba(16, 32, 64, .1) 27%, rgba(255, 255, 255, 0) 36%) 0 0 / 200% 100%; animation: cloth 6s linear infinite; }
.flag-lb { left: -1%; top: 11%; -webkit-mask-image: radial-gradient(ellipse 58% 54% at 54% 50%, rgba(0, 0, 0, .95) 28%, rgba(0, 0, 0, .45) 66%, rgba(0, 0, 0, 0) 100%); mask-image: radial-gradient(ellipse 58% 54% at 54% 50%, rgba(0, 0, 0, .95) 28%, rgba(0, 0, 0, .45) 66%, rgba(0, 0, 0, 0) 100%); }
.flag-cn { right: -1%; top: 8%; -webkit-mask-image: radial-gradient(ellipse 58% 56% at 40% 44%, rgba(0, 0, 0, .95) 28%, rgba(0, 0, 0, .45) 66%, rgba(0, 0, 0, 0) 100%); mask-image: radial-gradient(ellipse 58% 56% at 40% 44%, rgba(0, 0, 0, .95) 28%, rgba(0, 0, 0, .45) 66%, rgba(0, 0, 0, 0) 100%); }
.flag-cn img { transform-origin: 0 50%; animation-delay: -3.5s; }

/* ---------- smaller screens: the words and the ticket, then the globe ---------- */
@media (max-width: 1080px) {
	.lines { width: 100%; height: 62%; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, #000 20%, transparent 78%); mask-image: radial-gradient(ellipse 70% 80% at 50% 40%, #000 20%, transparent 78%); }
	.main { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 20px; text-align: center; }
	.name { justify-content: center; }
	.lede { margin-inline: auto; }
	.ticket { margin-inline: auto; }
	.visual { max-width: 520px; justify-self: center; }
	.foot { justify-content: center; }
}
/* phones: the stub moves under the words, the perforation and its notches turn sideways */
@media (max-width: 520px) {
	:root { --bar: 66px; }
	.bar-home img { width: 136px; }
	.bar-link { padding: 7px 14px; font-size: 14px; }
	.ticket-paper { --stub-h: 88px; grid-template-columns: minmax(0, 1fr);
		-webkit-mask: radial-gradient(circle var(--notch) at 0 calc(100% - 7px - var(--stub-h)), #0000 98%, #000), radial-gradient(circle var(--notch) at 100% calc(100% - 7px - var(--stub-h)), #0000 98%, #000), conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
		-webkit-mask-composite: source-in, source-in;
		mask: radial-gradient(circle var(--notch) at 0 calc(100% - 7px - var(--stub-h)), #0000 98%, #000), radial-gradient(circle var(--notch) at 100% calc(100% - 7px - var(--stub-h)), #0000 98%, #000), conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
		mask-composite: intersect; }
	.ticket-main { padding: 16px 16px 14px; }
	.ticket-stub { height: var(--stub-h); padding: 14px; border-inline-start: 0; border-top: 2px dashed #d7dfeb; }
	.stores { flex-direction: row; }
	.store { flex: 1 1 0; min-height: 0; gap: 8px; padding: 6px 10px; }
	.store .ic { font-size: 20px; }
	.store small { font-size: 13px; }
	.store b { font-size: 15.5px; }
	.copy-code { min-height: 44px; }
	.flag { width: 20%; }
}
/* the narrowest phones: one store button above the other */
@media (max-width: 372px) {
	.ticket-paper { --stub-h: 148px; }
	.stores { flex-direction: column; }
	.store { padding: 6px 14px; }
}

/* ---------- the loops ---------- */
@keyframes drift-blob { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(60px, 40px) scale(1.15); } }
@keyframes beam-x { from { transform: translateX(-220px); } to { transform: translateX(100%); } }
@keyframes beam-y { from { transform: translateY(-220px); } to { transform: translateY(100%); } }
@keyframes name-in { from { opacity: 0; transform: translateY(28px); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes globe-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes flag-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes flag-wave { 0%, 100% { transform: perspective(600px) rotateY(10deg) skewY(-1.5deg); } 50% { transform: perspective(600px) rotateY(-6deg) skewY(1.5deg); } }
@keyframes cloth { from { background-position: 0 0; } to { background-position: -200% 0; } }
@keyframes btn-shine { 0% { transform: translateX(-100%); } 32%, 100% { transform: translateX(100%); } }
@keyframes dl-pulse { 0% { box-shadow: 0 8px 18px rgba(22, 138, 87, .3), 0 0 0 0 rgba(22, 138, 87, .45); } 70%, 100% { box-shadow: 0 8px 18px rgba(22, 138, 87, .3), 0 0 0 12px rgba(22, 138, 87, 0); } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
	.beam { display: none; }
}