/* ============================================================
   Alt Screens — screens and tokens, run from one place.
   The page is a sequence of three modes; each one states what it
   does and then shows it. Loads after home.css.
   ============================================================ */
.am-app--screens{
	--app:#2bb3f3; --app-deep:#1489c6; --app-bg:#2bb3f3;
	--app-ink:#ffffff; --app-muted:#dff2fe;
	--app-chip-bg:#ffffff; --app-chip-ink:#1079b2;
}
.sc-page{--sc:#2bb3f3;--sc-deep:#1079b2;--sc-soft:#8bd7fb;}

/* ---------- Hero ---------- */
.sc-hero{position:relative;overflow:hidden;isolation:isolate;}
.sc-grid{
	position:absolute;inset:-10% -6%;z-index:-1;pointer-events:none;opacity:.26;
	background-image:linear-gradient(rgba(255,255,255,.55) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.55) 1px,transparent 1px);
	background-size:78px 78px;
	-webkit-mask-image:radial-gradient(120% 86% at 76% 14%,#000 8%,transparent 74%);
	mask-image:radial-gradient(120% 86% at 76% 14%,#000 8%,transparent 74%);
}
.sc-hero__edge{
	position:absolute;left:14px;top:50%;z-index:1;
	writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);
	font-size:12px;font-weight:700;letter-spacing:.42em;color:rgba(255,255,255,.4);
	pointer-events:none;user-select:none;
}
body.am .sc-hero h1{letter-spacing:-0.035em;}

.sc-stats{list-style:none;display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,40px);margin:clamp(26px,3vw,38px) 0 0;padding:0;}
.sc-stats li{display:flex;align-items:baseline;gap:9px;position:relative;padding-right:clamp(16px,3vw,40px);}
.sc-stats li + li::before{content:"";position:absolute;left:calc(-1 * clamp(8px,1.5vw,20px));top:.18em;bottom:.18em;width:1px;background:rgba(255,255,255,.34);}
.sc-stats b{font-size:clamp(30px,3.4vw,44px);font-weight:700;letter-spacing:-0.03em;line-height:1;color:var(--app-ink);font-variant-numeric:tabular-nums;}
.sc-stats span{font-size:14px;font-weight:600;color:var(--app-muted);}

/* ---------- The three modes ---------- */
.sc-sec{padding-block:clamp(56px,7.5vw,104px);overflow-x:clip;}
.sc-mode--alt{background:var(--bg-2);border-block:1px solid var(--line);}
.sc-mode__wrap{display:grid;gap:clamp(28px,3.6vw,52px);}
.sc-mode__copy{max-width:60ch;}
.sc-num{
	display:inline-block;margin-bottom:12px;
	font-size:13px;font-weight:700;letter-spacing:.22em;
	color:var(--sc-deep);
	font-variant-numeric:tabular-nums;
}
body.am .sc-mode__copy h2{font-size:clamp(25px,3vw,36px);line-height:1.12;letter-spacing:-0.025em;color:var(--green-deep);}
body.am .sc-mode__copy p{margin-top:14px;font-size:17px;line-height:1.7;color:var(--muted);}

.sc-shot{
	margin:0;border-radius:clamp(14px,1.6vw,20px);
	overflow:hidden;background:var(--surface);
	border:1px solid var(--line);
	box-shadow:0 30px 70px -34px rgba(46,60,40,.42),0 2px 6px rgba(46,60,40,.07);
}
.sc-shot img{display:block;width:100%;height:auto;}
.sc-shot--wide{border-radius:clamp(10px,1.2vw,14px);}

/* Each shot arrives its own way, so the three modes do not repeat
   the same movement down the page. */
.am-motion .sc-mode .sc-shot.rv{opacity:0;transform:translateY(34px) scale(.985);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.8,.2,1);}
.am-motion #signage .sc-shot.rv{transform:perspective(1200px) rotateX(9deg) translateY(40px);transform-origin:top center;}
.am-motion #image-queue .sc-shot.rv{transform:translateX(44px) scale(.985);}
.am-motion #queue .sc-shot.rv{transform:translateY(46px) scale(.96);}
.am-motion .sc-mode .sc-shot.rv.is-in{opacity:1;transform:none;}

.am-motion .sc-mode__copy.rv{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .75s cubic-bezier(.2,.8,.2,1);}
.am-motion .sc-mode__copy.rv.is-in{opacity:1;transform:none;}

@media (min-width:981px){
.sc-mode__wrap{grid-template-columns:minmax(0,4.6fr) minmax(0,7fr);align-items:center;column-gap:clamp(36px,4.4vw,70px);}
.sc-mode--alt .sc-mode__copy{order:2;}
.sc-mode--alt .sc-shot{order:1;}
#signage .sc-mode__wrap{grid-template-columns:1fr;}
#signage .sc-mode__copy{max-width:64ch;}
}

/* ---------- Closing ---------- */
.sc-end{
	position:relative;background:var(--bg-2);color:var(--ink);overflow:hidden;isolation:isolate;
	padding-block:clamp(64px,9vw,120px);
	border-top:1px solid var(--line);
}
body.am .sc-end h2{font-size:clamp(30px,5.2vw,64px);line-height:1.04;letter-spacing:-0.04em;color:var(--green-deep);}
.sc-end h2 em{font-style:normal;color:var(--sc-deep);}
.sc-end__lead{margin-top:clamp(20px,3vw,32px);max-width:60ch;font-size:17px;line-height:1.68;color:var(--muted);}
.sc-end__act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:clamp(26px,3.4vw,42px);}
.sc-end__btn{gap:10px;min-height:52px;}
.sc-end__btn i{font-style:normal;display:inline-block;transition:transform .35s cubic-bezier(.2,.8,.2,1);}
@media (hover:hover){.sc-end__btn:hover i{transform:translateX(7px);}}
body.am .sc-end__back{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:500;color:var(--green);text-decoration:none;}
body.am .sc-end__back:hover{color:var(--green-deep);text-decoration:underline;}

@media (max-width:640px){
.sc-hero__edge{display:none;}
.sc-grid{background-size:54px 54px;}
}
@media (prefers-reduced-motion:reduce){
.am-motion .sc-mode .sc-shot.rv,
.am-motion .sc-mode__copy.rv{opacity:1;transform:none;transition:none;}
.sc-end__btn i{transition:none;}
}


/* ============================================================
   Alt Screens — the motion layer.
   A reading rule, a hero that drifts, a ghost numeral behind
   each mode, shots that float and lean, and a button that pulls.
   ============================================================ */

/* ---- Reading progress ---- */
.sc-prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;}
.sc-prog i{display:block;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#1079b2,#2bb3f3,#8bd7fb);}

/* ---- Hero ---- */
.sc-grid{will-change:transform;}
.sc-hero__orb{position:absolute;inset:-28% -14%;z-index:-1;pointer-events:none;}
.sc-hero__orb i{position:absolute;display:block;border-radius:50%;filter:blur(52px);}
.sc-hero__orb i:nth-child(1){width:40vw;height:40vw;top:-12%;right:-6%;background:radial-gradient(circle,rgba(255,255,255,.4),transparent 68%);animation:sc-orb-a 18s ease-in-out infinite alternate;}
.sc-hero__orb i:nth-child(2){width:28vw;height:28vw;bottom:-16%;left:-4%;background:radial-gradient(circle,rgba(10,70,110,.38),transparent 70%);animation:sc-orb-b 22s ease-in-out infinite alternate;}
@keyframes sc-orb-a{to{transform:translate3d(-40px,26px,0) scale(1.08)}}
@keyframes sc-orb-b{to{transform:translate3d(34px,-22px,0) scale(1.1)}}

/* The headline rises word by word (home.js splits it). */
.am-w{display:inline-block;overflow:hidden;vertical-align:top;margin-bottom:-.3em;}
.am-w > span{display:inline-block;padding-bottom:.3em;transform:translateY(112%);opacity:0;transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .7s ease;}
.sc-hero .is-in .am-w > span,.sc-hero h1.is-in .am-w > span{transform:none;opacity:1;}

/* ---- The ghost numeral behind each mode ---- */
.sc-mode__wrap{position:relative;}
.sc-ghost{
	position:absolute;top:-.32em;right:-.04em;z-index:0;
	font-size:clamp(120px,19vw,260px);font-weight:800;line-height:.78;
	letter-spacing:-0.06em;
	color:var(--line);opacity:.5;
	pointer-events:none;user-select:none;
	font-variant-numeric:tabular-nums;
}
.sc-mode--alt .sc-ghost{right:auto;left:-.04em;}
.sc-mode__copy,.sc-shot{position:relative;z-index:1;}

/* ---- Shots: float with the scroll, lean toward the pointer ---- */
.sc-shot{
	--fy:0px;--tx:0deg;--ty:0deg;
	transform:translateY(var(--fy)) perspective(1100px) rotateX(var(--tx)) rotateY(var(--ty));
	transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease;
	will-change:transform;
}
.sc-shot:hover{box-shadow:0 44px 90px -40px rgba(14,70,105,.55),0 2px 8px rgba(46,60,40,.09);}
/* While it is still arriving the entrance transform wins. */
.am-motion .sc-mode .sc-shot.rv:not(.is-in){transform:translateY(34px) scale(.985);}

/* ---- A quiet sheen crossing each shot ---- */
.sc-shot::after{
	content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
	background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.3) 48%,transparent 58%);
	transform:translateX(-120%);
	transition:transform 1.1s cubic-bezier(.2,.8,.2,1);
}
.sc-shot.is-in::after{transform:translateX(120%);}

/* ---- Numbers roll up, label follows ---- */
.sc-stats li{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .66s cubic-bezier(.2,.8,.2,1);}
.am-ready .sc-stats li,.sc-stats.is-in li{opacity:1;transform:none;}
.sc-stats li:nth-child(1){transition-delay:.40s}
.sc-stats li:nth-child(2){transition-delay:.52s}
.sc-stats li:nth-child(3){transition-delay:.64s}

/* ---- Closing band ---- */
.sc-end__btn{--mx:0px;--my:0px;transform:translate(var(--mx),var(--my));transition:transform .35s cubic-bezier(.2,.8,.2,1),background-color .15s ease;}
.sc-end::before{
	content:"";position:absolute;inset:-40%;z-index:-1;pointer-events:none;
	background:conic-gradient(from 0deg,transparent 0 64%,rgba(43,179,243,.10) 76%,transparent 90%);
	animation:sc-turn 26s linear infinite;
}
@keyframes sc-turn{to{rotate:360deg}}

@media (max-width:900px){
.sc-ghost{font-size:clamp(90px,26vw,160px);opacity:.42;}
}
@media (prefers-reduced-motion:reduce){
.sc-prog,.sc-hero__orb,.sc-shot::after{display:none;}
.sc-shot{transform:none;transition:none;}
.sc-end::before{animation:none;}
.sc-stats li{opacity:1;transform:none;transition:none;}
.am-w > span{transform:none;opacity:1;}
}