/* ============================================================
   Alt Schools product page — loads after home.css.
   Each section carries its own entrance and its own hover.
   Everything degrades to a static page under reduced motion.
   ============================================================ */

.sk-sec{position:relative;}

/* ---------- Reading progress ---------- */
.sk-prog{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none;background:transparent;}
.sk-prog i{display:block;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--green),var(--accent,#c8a951));}

/* ============================================================
   HERO — drifting blobs, a fine grid, headline wipe, counters
   ============================================================ */
.am-page__hero{position:relative;overflow:hidden;isolation:isolate;}
.sk-orbs{position:absolute;inset:-20% -10%;z-index:-1;pointer-events:none;}
.sk-orbs i{position:absolute;display:block;border-radius:50%;filter:blur(40px);opacity:.55;will-change:transform;}
.sk-orbs i:nth-child(1){width:46vw;height:46vw;top:-12%;right:-6%;background:radial-gradient(circle,rgba(255,255,255,.75),transparent 68%);animation:sk-float 15s ease-in-out infinite;}
.sk-orbs i:nth-child(2){width:32vw;height:32vw;bottom:-18%;left:-6%;background:radial-gradient(circle,rgba(28,27,23,.16),transparent 68%);animation:sk-float 19s ease-in-out infinite reverse;}
.sk-orbs i:nth-child(3){width:22vw;height:22vw;top:38%;left:46%;background:radial-gradient(circle,rgba(255,255,255,.55),transparent 66%);animation:sk-float 23s ease-in-out infinite;}
@keyframes sk-float{0%,100%{translate:0 0}33%{translate:3% -4%}66%{translate:-3% 3%}}

.sk-grid{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.14;
	background-image:linear-gradient(rgba(28,27,23,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(28,27,23,.5) 1px,transparent 1px);
	background-size:58px 58px;
	mask-image:radial-gradient(70% 60% at 30% 20%,#000,transparent 75%);
	-webkit-mask-image:radial-gradient(70% 60% at 30% 20%,#000,transparent 75%);
	animation:sk-grid-pan 26s linear infinite;}
@keyframes sk-grid-pan{to{background-position:58px 58px,58px 58px}}

.sk-hero__stats{list-style:none;display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,44px);margin:clamp(26px,3vw,38px) 0 0;padding:0;}
.sk-hero__stats li{display:flex;align-items:baseline;gap:9px;position:relative;padding-right:clamp(18px,3vw,44px);}
.sk-hero__stats li + li::before{content:"";position:absolute;left:calc(-1 * clamp(9px,1.5vw,22px));top:.15em;bottom:.15em;width:1px;background:color-mix(in srgb, var(--app-ink) 22%, transparent);}
.sk-hero__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;}
.sk-hero__stats span{font-size:14px;font-weight:600;color:var(--app-muted);}

/* Section headings wipe in behind a soft gradient. */
.sk-sec .as-head h2{background:linear-gradient(90deg,var(--green-deep) 0%,var(--green-deep) 55%,var(--green) 100%);
	-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ============================================================
   1. MODULES — flip-in reveal, stroke-draw icons,
      hover: cursor spotlight + top rule draws + icon inverts
   ============================================================ */
.sk-mods{perspective:1400px;}
.sk-mod{position:relative;overflow:hidden;--mx:50%;--my:0%;}
.as-anim .sk-mod.as-rv{opacity:0;transform:translateY(26px) rotateX(9deg);transform-origin:top center;}
.as-anim .sk-mod.as-rv.as-in{opacity:1;transform:none;}

.sk-mod::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--green);
	transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.2,.8,.2,1);z-index:2;}
.sk-mod::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s ease;
	background:radial-gradient(240px 200px at var(--mx) var(--my), color-mix(in srgb, var(--green) 13%, transparent), transparent 70%);}
.sk-mod > *{position:relative;z-index:1;}

.sk-mod__icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:13px;margin-bottom:14px;
	background:color-mix(in srgb, var(--green) 12%, transparent);color:var(--green-deep);
	transition:background-color .35s ease,color .35s ease,transform .5s cubic-bezier(.2,.8,.2,1);}
.sk-mod__icon svg *{stroke-dasharray:130;stroke-dashoffset:130;}
.as-anim .sk-mod.as-in .sk-mod__icon svg *{animation:sk-draw .9s cubic-bezier(.3,.8,.3,1) forwards;animation-delay:.18s;}
html:not(.as-anim) .sk-mod__icon svg *,
.sk-mod:hover .sk-mod__icon svg *{stroke-dashoffset:0;}
@keyframes sk-draw{to{stroke-dashoffset:0}}

.sk-mod h3{font-size:19px;letter-spacing:-0.015em;margin-bottom:6px;}
.sk-mod .as-list li{transition:color .3s ease,transform .35s cubic-bezier(.2,.8,.2,1);}
@media (hover:hover){
.sk-mod:hover::before{transform:scaleX(1);}
.sk-mod:hover::after{opacity:1;}
.sk-mod:hover .sk-mod__icon{background:var(--green);color:var(--on-green);transform:rotate(-8deg) scale(1.08);}
.sk-mod:hover{transform:translateY(-9px);}
.sk-mod:hover .as-list li{color:var(--green-deep);transform:translateX(3px);transition-delay:calc(var(--i,0)*18ms);}
}

/* ============================================================
   2. FLOW — a line draws behind the chips, arrows pulse along,
      hover: the chip fills from the left
   ============================================================ */
.sk-flow{position:relative;}
.sk-flow::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;
	background:repeating-linear-gradient(90deg,color-mix(in srgb, var(--green) 45%, transparent) 0 7px,transparent 7px 14px);
	transform:scaleX(0);transform-origin:left;transition:transform 1.1s cubic-bezier(.2,.8,.2,1);}
.as-anim .sk-flow.as-in::before{transform:scaleX(1);}
.sk-flow span{position:relative;overflow:hidden;z-index:1;background:var(--surface);color:var(--green-deep);border:1px solid var(--line);
	transition:color .35s ease,border-color .35s ease,transform .35s cubic-bezier(.2,.8,.2,1);}
.sk-flow span::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--green);
	transform:translateX(-101%);transition:transform .45s cubic-bezier(.2,.8,.2,1);}
.sk-flow i{position:relative;z-index:1;opacity:.55;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .35s ease;}
.as-anim .sk-flow.as-in i{animation:sk-nudge 2.6s ease-in-out infinite;}
.as-anim .sk-flow.as-in i:nth-of-type(2){animation-delay:.25s;}
.as-anim .sk-flow.as-in i:nth-of-type(3){animation-delay:.5s;}
@keyframes sk-nudge{0%,100%{transform:none}50%{transform:translateX(5px)}}
@media (hover:hover){
.sk-flow span:hover{color:var(--on-green);border-color:var(--green);transform:translateY(-3px);}
.sk-flow span:hover::before{transform:none;}
.sk-flow span:hover + i{transform:translateX(7px) scale(1.15);opacity:1;animation:none;}
}

/* ============================================================
   3. APPS — the card leans toward the pointer, a spotlight
      blooms, and the rows step right in sequence
   ============================================================ */
.sk-apps{perspective:1200px;}
.sk-app{position:relative;overflow:hidden;transform-style:preserve-3d;--rx:0deg;--ry:0deg;
	transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease;}
.sk-js .sk-app{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));}
.sk-app::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s ease;
	background:radial-gradient(420px 320px at 14% 0%, color-mix(in srgb, var(--green) 17%, transparent), transparent 70%);}
.sk-app > *{position:relative;}
.sk-app__tag{display:inline-block;margin-bottom:12px;padding:5px 13px;border-radius:var(--r-pill);
	background:var(--green-deep);color:var(--on-green);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
	transition:transform .4s cubic-bezier(.2,.8,.2,1);}
.sk-app h3{font-size:20px;letter-spacing:-0.015em;margin-bottom:16px;}
.sk-app .as-list li{transition:transform .4s cubic-bezier(.2,.8,.2,1),color .3s ease;}
.sk-app .as-list li::before{transition:transform .4s cubic-bezier(.2,.8,.2,1),background-color .3s ease;}
@media (hover:hover){
.sk-app:hover{box-shadow:0 40px 80px -40px rgba(46,60,40,.5);}
.sk-app:hover::after{opacity:1;}
.sk-app:hover .sk-app__tag{transform:translateY(-3px) scale(1.04);}
.sk-app:hover .as-list li{transform:translateX(8px);color:var(--green-deep);transition-delay:calc(var(--i,0)*30ms);}
.sk-app:hover .as-list li::before{transform:scale(1.6);background:var(--green);transition-delay:calc(var(--i,0)*30ms);}
}

/* ============================================================
   4. WHY — rows slide in from alternating sides,
      hover: the number stretches into a bar
   ============================================================ */
.sk-why{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:clamp(4px,0.8vw,10px);}
.sk-why li{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:18px;
	padding:clamp(18px,2vw,24px);border-radius:var(--r-sm);border-left:2px solid transparent;
	transition:background-color .35s ease,border-color .35s ease,transform .45s cubic-bezier(.2,.8,.2,1);}
.as-anim .sk-why li.as-rv{opacity:0;transform:translateX(-22px);}
.as-anim .sk-why li.as-rv:nth-child(even){transform:translateX(22px);}
.as-anim .sk-why li.as-rv.as-in{opacity:1;transform:none;}
.sk-why__n{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;flex:0 0 auto;
	background:color-mix(in srgb, var(--green) 11%, transparent);color:var(--green-deep);
	font-size:13px;font-weight:700;letter-spacing:.06em;
	transition:width .5s cubic-bezier(.2,.8,.2,1),background-color .35s ease,color .35s ease,transform .4s ease;}
.sk-why h3{font-size:18px;letter-spacing:-0.015em;margin-bottom:5px;transition:transform .4s cubic-bezier(.2,.8,.2,1);}
.sk-why p{font-size:15px;line-height:1.6;color:var(--muted);margin:0;}
@media (hover:hover){
.sk-why li:hover{background:var(--surface);border-left-color:var(--green);transform:translateX(7px);}
.sk-why li:hover .sk-why__n{width:64px;background:var(--green);color:var(--on-green);}
.sk-why li:hover h3{transform:translateX(3px);}
}

/* ============================================================
   5. MARQUEE — the module names run past, and pause on hover
   ============================================================ */
.sk-marq{overflow:hidden;padding-block:clamp(16px,2vw,26px);border-block:1px solid var(--line);background:var(--surface);
	mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
	-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.sk-marq__row{display:flex;width:max-content;animation:sk-run 34s linear infinite;}
.sk-marq ul{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0;}
.sk-marq li{display:flex;align-items:center;gap:clamp(20px,3vw,40px);padding-right:clamp(20px,3vw,40px);
	font-size:clamp(18px,2.4vw,30px);font-weight:600;letter-spacing:-0.02em;color:var(--green-deep);white-space:nowrap;}
.sk-marq li::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent,#c8a951);flex:0 0 auto;}
@keyframes sk-run{to{transform:translateX(-50%)}}
.sk-marq:hover .sk-marq__row{animation-play-state:paused;}

/* ============================================================
   6. TAGS — pop in, magnetic pull, invert on hover
   ============================================================ */
.sk-tags li{--tx:0px;--ty:0px;
	transition:background-color .3s ease,border-color .3s ease,color .3s ease,letter-spacing .35s ease,transform .35s cubic-bezier(.2,.8,.2,1);}
.sk-js .sk-tags li{transform:translate(var(--tx),var(--ty));}
@media (hover:hover){
.sk-tags li:hover{background:var(--green-deep);border-color:var(--green-deep);color:var(--on-green);letter-spacing:.03em;}
}

/* ============================================================
   7. OUT + CTA — a slow conic glow turns behind the panel,
      the button is magnetic and its arrow travels
   ============================================================ */
.sk-out,.sk-cta{position:relative;overflow:hidden;isolation:isolate;}
.sk-out::before,.sk-cta::before{content:"";position:absolute;inset:-60%;z-index:-1;opacity:.5;
	background:conic-gradient(from 0deg, transparent 0 60%, rgba(250,247,239,.16) 75%, transparent 90%);
	animation:sk-turn 18s linear infinite;}
.sk-cta::before{animation-duration:24s;animation-direction:reverse;}
@keyframes sk-turn{to{rotate:360deg}}
.sk-out > *,.sk-cta > *{position:relative;}
.sk-cta__btn{--tx:0px;--ty:0px;gap:10px;min-height:50px;}
.sk-js .sk-cta__btn{transform:translate(var(--tx),var(--ty));transition:transform .35s cubic-bezier(.2,.8,.2,1),background-color .2s ease;}
.sk-cta__btn i{font-style:normal;display:inline-block;transition:transform .35s cubic-bezier(.2,.8,.2,1);}
@media (hover:hover){
.sk-cta__btn:hover i{transform:translateX(7px);}
}
.sk-cta .am-page__back{display:flex;align-items:center;justify-content:center;width:100%;margin-top:20px;min-height:44px;color:var(--on-green-muted);}
.sk-cta .am-page__back:hover{color:var(--on-green);}

/* ---------- Entrance timing for this page's own pieces ---------- */
.as-anim .sk-why li:nth-child(2){transition-delay:.06s;}
.as-anim .sk-why li:nth-child(3){transition-delay:.12s;}
.as-anim .sk-why li:nth-child(4){transition-delay:.18s;}
.as-anim .sk-why li:nth-child(5){transition-delay:.24s;}
.as-anim .sk-why li:nth-child(6){transition-delay:.30s;}
.as-anim .sk-hero__stats li{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1);}
.as-ready .sk-hero__stats li{opacity:1;transform:none;}
.as-ready .sk-hero__stats li:nth-child(1){transition-delay:.45s;}
.as-ready .sk-hero__stats li:nth-child(2){transition-delay:.56s;}
.as-ready .sk-hero__stats li:nth-child(3){transition-delay:.67s;}

@media (max-width:640px){
.sk-why li{gap:14px;padding:16px 14px;}
.sk-hero__stats{gap:14px 20px;}
.sk-hero__stats li{padding-right:14px;}
.sk-grid{background-size:40px 40px;}
}

/* ---------- Static fallback ---------- */
@media (prefers-reduced-motion:reduce){
.sk-orbs,.sk-grid,.sk-prog{display:none;}
.sk-marq__row{animation:none;}
.sk-out::before,.sk-cta::before{animation:none;opacity:.25;}
.sk-mod__icon svg *{stroke-dashoffset:0;}
.sk-mod,.sk-mod::before,.sk-mod::after,.sk-mod__icon,.sk-flow span,.sk-flow span::before,.sk-flow i,
.sk-app,.sk-app::after,.sk-app .as-list li,.sk-why li,.sk-why__n,.sk-why h3,.sk-tags li,
.sk-cta__btn,.sk-cta__btn i{transition:none;animation:none;}
.sk-mod:hover,.sk-why li:hover,.sk-flow span:hover{transform:none;}
.as-anim .sk-hero__stats li{opacity:1;transform:none;}
}




/* ============================================================
   ALT SCHOOLS — real screens, two per band, six ways in.
   Each pair sits inside the section it belongs to, between the
   words rather than after them, and arrives its own way.
   ============================================================ */
.sk-shot{margin-block:clamp(30px,3.8vw,54px);}
.sk-shot figure{margin:0;min-width:0;}
.sk-shot__frame{
	position:relative;overflow:hidden;
	border-radius:clamp(9px,1vw,14px);
	border:1px solid rgba(31,42,32,.13);
	background:#f2efe7;
	box-shadow:0 30px 60px -44px rgba(31,42,32,.55);
	transition:box-shadow .6s ease;
}
.sk-shot img{display:block;width:100%;height:auto;}

/* Every shot breathes in: the picture eases back to true size
   as its frame arrives. One shared gesture under six others. */
.as-anim .sk-shot img{transform:scale(1.065);transform-origin:50% 12%;
	transition:transform 1.4s cubic-bezier(.16,.84,.26,1);}
.as-anim .sk-shot.as-in img{transform:none;}

.sk-shot figcaption{
	display:flex;gap:9px;align-items:baseline;
	margin-top:11px;font-size:12.8px;line-height:1.5;color:var(--muted);
}
.sk-shot figcaption b{
	flex:0 0 auto;font-size:10px;letter-spacing:.17em;text-transform:uppercase;
	font-weight:700;color:var(--green);padding-top:.2em;
}
.as-sec--alt .sk-shot__frame{background:#efece3;}

/* ---------- 1 · Modules: two cards deal onto the table ---------- */
.sk-shot--fan{position:relative;max-width:min(980px,100%);margin-inline:auto;perspective:1500px;}
.sk-shot--fan .sk-shot__pair{position:relative;display:grid;transform-style:preserve-3d;}
.sk-shot--fan figure{
	grid-area:1 / 1;
	transition:transform .85s cubic-bezier(.2,.8,.2,1),opacity .6s ease;
}
.sk-shot--fan figure:nth-child(1){--rest:translate(-4.5%,0) rotate(-2.8deg);z-index:1;}
.sk-shot--fan figure:nth-child(2){--rest:translate(4.5%,4.5%) rotate(2.4deg);z-index:2;}
.sk-shot--fan figure{transform:var(--rest);}
/* Dealt in: they come from off to the right, stacked flat. */
.as-anim .sk-shot--fan figure{opacity:0;transform:translate(34%,12%) rotate(9deg) scale(.94);}
.as-anim .sk-shot--fan.as-in figure{opacity:1;transform:var(--rest);
	transition:transform 1.05s cubic-bezier(.17,.85,.24,1),opacity .6s ease;}
.as-anim .sk-shot--fan.as-in figure:nth-child(2){transition-delay:.13s;}
.sk-shot--fan figcaption{position:absolute;left:0;right:0;bottom:-2.6em;opacity:0;
	transition:opacity .4s ease,transform .5s cubic-bezier(.2,.8,.2,1);transform:translateY(-5px);}
@media (hover:hover) and (min-width:861px){
.sk-shot--fan:hover figure:nth-child(1){transform:translate(-27%,-2.5%) rotate(-4.2deg);}
.sk-shot--fan:hover figure:nth-child(2){transform:translate(27%,2.5%) rotate(3.6deg);}
.sk-shot--fan figure:hover{z-index:3;}
.sk-shot--fan figure:hover .sk-shot__frame{box-shadow:0 52px 96px -40px rgba(31,42,32,.7);}
.sk-shot--fan figure:hover figcaption{opacity:1;transform:none;}
.sk-shot--fan:hover .sk-shot__note{opacity:0;}
}
.sk-shot--fan .sk-shot__note{
	margin-top:clamp(24px,3vw,40px);text-align:center;font-size:12.8px;color:var(--muted);
	transition:opacity .35s ease;
}
.sk-shot--fan .sk-shot__note b{color:var(--green);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:10px;}

/* ---------- 2 · Flow: the pair drifts at two speeds ---------- */
.sk-shot--drift{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.4vw,40px);align-items:start;}
.sk-shot--drift figure{will-change:transform;}
.sk-shot--drift figure:nth-child(2){margin-top:clamp(26px,4.6vw,68px);}
/* --d is written by script from the scroll position; without it
   the pair simply sits where the grid puts it. */
.sk-shot--drift .sk-shot__frame{transform:translateY(calc(var(--d,0) * 1px));
	transition:box-shadow .5s ease;}
.as-anim .sk-shot--drift figure{opacity:0;transform:translateY(52px);
	transition:opacity .8s ease,transform 1s cubic-bezier(.2,.8,.2,1);}
.as-anim .sk-shot--drift.as-in figure{opacity:1;transform:none;}
.as-anim .sk-shot--drift.as-in figure:nth-child(2){transition-delay:.15s;}
@media (hover:hover){
.sk-shot--drift figure:hover .sk-shot__frame{box-shadow:0 44px 78px -40px rgba(31,42,32,.66);}
}

/* ---------- 3 · Apps: a diagonal wipe with a lit edge ---------- */
.sk-shot--wipe{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.2vw,34px);}
.sk-shot--wipe .sk-shot__frame{overflow:hidden;}
.as-anim .sk-shot--wipe .sk-shot__frame{clip-path:polygon(-30% 0,0 0,-14% 100%,-44% 100%);
	transition:clip-path 1.15s cubic-bezier(.2,.84,.22,1);}
.as-anim .sk-shot--wipe.as-in .sk-shot__frame{clip-path:polygon(-30% 0,145% 0,131% 100%,-44% 100%);}
.as-anim .sk-shot--wipe.as-in figure:nth-child(2) .sk-shot__frame{transition-delay:.22s;}
/* The lit edge rides the same diagonal. */
.sk-shot--wipe .sk-shot__frame::after{
	content:"";position:absolute;inset:-10% -30%;pointer-events:none;z-index:2;opacity:0;
	background:linear-gradient(97deg,transparent 46%,rgba(255,255,255,.72) 50%,transparent 54%);
	background-size:300% 100%;
}
.as-anim .sk-shot--wipe.as-in .sk-shot__frame::after{animation:sk-edge 1.15s cubic-bezier(.2,.84,.22,1);}
.as-anim .sk-shot--wipe.as-in figure:nth-child(2) .sk-shot__frame::after{animation-delay:.22s;}
@keyframes sk-edge{0%{opacity:0;background-position:118% 0}10%{opacity:1}92%{opacity:1}100%{opacity:0;background-position:-40% 0}}
.as-anim .sk-shot--wipe figcaption{opacity:0;transform:translateY(6px);
	transition:opacity .5s ease .62s,transform .6s cubic-bezier(.2,.8,.2,1) .62s;}
.as-anim .sk-shot--wipe.as-in figcaption{opacity:1;transform:none;}

/* ---------- 4 · Why: in from opposite edges, then a gleam ---------- */
.sk-shot--slide{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.2vw,34px);}
.as-anim .sk-shot--slide figure{opacity:0;transition:opacity .7s ease,transform 1.05s cubic-bezier(.16,.86,.22,1);}
.as-anim .sk-shot--slide figure:nth-child(1){transform:translateX(-15%) rotate(-1.6deg);}
.as-anim .sk-shot--slide figure:nth-child(2){transform:translateX(15%) rotate(1.6deg);}
.as-anim .sk-shot--slide.as-in figure{opacity:1;transform:none;}
.as-anim .sk-shot--slide.as-in figure:nth-child(2){transition-delay:.1s;}
.sk-shot--slide .sk-shot__frame::after{
	content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
	background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);
	background-size:240% 100%;background-position:150% 0;opacity:0;
}
.as-anim .sk-shot--slide.as-in .sk-shot__frame::after{animation:sk-gleam 1.15s cubic-bezier(.3,.7,.3,1) .5s;}
.as-anim .sk-shot--slide.as-in figure:nth-child(2) .sk-shot__frame::after{animation-delay:.6s;}
@keyframes sk-gleam{0%{opacity:0;background-position:150% 0}25%{opacity:1}100%{opacity:0;background-position:-60% 0}}
/* Hover pushes into the picture rather than moving the card. */
.sk-shot--slide img{transition:transform .8s cubic-bezier(.2,.8,.2,1);}
@media (hover:hover){
.sk-shot--slide figure:hover img{transform:scale(1.035);}
.sk-shot--slide figure:hover .sk-shot__frame{box-shadow:0 46px 84px -40px rgba(31,42,32,.68);}
}

/* ---------- 5 · Coverage: a reel that keeps moving ---------- */
.sk-shot--reel{
	position:relative;overflow:hidden;
	mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
	-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.sk-shot--reel .sk-shot__track{display:flex;gap:clamp(16px,2vw,30px);width:max-content;
	animation:sk-reel 52s linear infinite;}
.sk-shot--reel figure{width:clamp(320px,46vw,660px);flex:0 0 auto;}
/* Each frame rides its own slow bob, so the rail is not one rigid bar. */
.sk-shot--reel figure:nth-child(odd) .sk-shot__frame{animation:sk-bob 7.5s ease-in-out infinite;}
.sk-shot--reel figure:nth-child(even) .sk-shot__frame{animation:sk-bob 7.5s ease-in-out infinite -3.4s;}
@keyframes sk-bob{0%,100%{transform:translateY(-5px)}50%{transform:translateY(5px)}}
@keyframes sk-reel{to{transform:translateX(-50%)}}
.sk-shot--reel img{filter:saturate(.72);transition:filter .5s ease;}
.sk-shot--reel:hover .sk-shot__track,
.sk-shot--reel:focus-within .sk-shot__track{animation-play-state:paused;}
@media (hover:hover){
.sk-shot--reel figure:hover img{filter:none;}
.sk-shot--reel figure:hover .sk-shot__frame{animation-play-state:paused;box-shadow:0 44px 80px -38px rgba(31,42,32,.66);}
}

/* ---------- 6 · About: each one turns in on its own hinge ---------- */
.sk-shot--flip{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.2vw,34px);perspective:1500px;}
.sk-shot--flip figure{transform-style:preserve-3d;}
.as-anim .sk-shot--flip figure{opacity:0;transform:rotateY(-24deg) translateZ(-70px);transform-origin:left center;
	transition:opacity .7s ease,transform 1.05s cubic-bezier(.2,.84,.22,1);}
.as-anim .sk-shot--flip figure:nth-child(2){transform:rotateY(24deg) translateZ(-70px);transform-origin:right center;}
.as-anim .sk-shot--flip.as-in figure{opacity:1;transform:none;}
.as-anim .sk-shot--flip.as-in figure:nth-child(2){transition-delay:.15s;}
/* A specular pass as the panel comes square to the reader. */
.sk-shot--flip .sk-shot__frame::after{
	content:"";position:absolute;inset:0;pointer-events:none;z-index:2;opacity:0;
	background:linear-gradient(80deg,rgba(255,255,255,.62),transparent 55%);
}
.as-anim .sk-shot--flip.as-in .sk-shot__frame::after{animation:sk-spec 1.05s ease-out;}
.as-anim .sk-shot--flip.as-in figure:nth-child(2) .sk-shot__frame::after{animation-delay:.15s;}
@keyframes sk-spec{0%{opacity:.8}100%{opacity:0}}

/* ---------- Narrow ---------- */
@media (max-width:860px){
.sk-shot--drift,.sk-shot--wipe,.sk-shot--slide,.sk-shot--flip{grid-template-columns:1fr;gap:clamp(20px,5vw,30px);}
.sk-shot--drift figure:nth-child(2){margin-top:0;}
.sk-shot--drift .sk-shot__frame{transform:none;}
.sk-shot--fan .sk-shot__pair{display:grid;grid-template-columns:1fr;gap:18px;}
.sk-shot--fan figure{grid-area:auto;}
.as-anim .sk-shot--fan figure,
.as-anim .sk-shot--fan.as-in figure,
.sk-shot--fan figure{transform:none;}
.as-anim .sk-shot--fan figure{opacity:0;transform:translateY(30px);}
.as-anim .sk-shot--fan.as-in figure{opacity:1;transform:none;}
.sk-shot--fan figcaption{position:static;opacity:1;transform:none;}
.sk-shot--fan .sk-shot__note{display:none;}
.sk-shot--reel figure{width:min(78vw,420px);}
.as-anim .sk-shot--slide figure:nth-child(1),
.as-anim .sk-shot--slide figure:nth-child(2){transform:translateY(34px) rotate(0);}
.as-anim .sk-shot--slide.as-in figure{transform:none;}
.as-anim .sk-shot--flip figure,
.as-anim .sk-shot--flip figure:nth-child(2){transform:translateY(34px);}
.as-anim .sk-shot--flip.as-in figure{transform:none;}
.sk-shot figcaption{font-size:12.5px;}
}

@media (prefers-reduced-motion:reduce){
.as-anim .sk-shot figure,
.as-anim .sk-shot.as-in figure,
.as-anim .sk-shot img,
.as-anim .sk-shot.as-in img{opacity:1;transform:none;transition:none;}
.sk-shot--fan figure{transform:none;}
.as-anim .sk-shot--wipe .sk-shot__frame,
.as-anim .sk-shot--wipe.as-in .sk-shot__frame{clip-path:none;transition:none;}
.sk-shot--wipe .sk-shot__frame::after,
.sk-shot--slide .sk-shot__frame::after,
.sk-shot--flip .sk-shot__frame::after{display:none;}
.as-anim .sk-shot--wipe figcaption{opacity:1;transform:none;}
.sk-shot--reel .sk-shot__track{animation:none;flex-wrap:wrap;width:auto;}
.sk-shot--reel .sk-shot__frame{animation:none;}
.sk-shot--reel img{filter:none;}
.sk-shot--drift .sk-shot__frame{transform:none;}
.sk-shot--fan figcaption{position:static;opacity:1;}
}


/* The decorative orbs pushed 2px past the viewport on a phone. */
.sk-orbs{max-width:100%;overflow:hidden;}

/* The shots arrive from off-frame, so their sections clip sideways.
   `clip` rather than `hidden`: it does not create a scroll box. */
.sk-sec{overflow-x:clip;}

/* ============================================================
   A third card in the fan. The pair rests slightly apart; with
   three, the middle one sits square and the outer two lean off
   it, and hover opens all three instead of two.
   ============================================================ */
.sk-shot--fan .sk-shot__pair:has(> figure:nth-child(3)) > figure:nth-child(1){--rest:translate(-7%,1.5%) rotate(-3.4deg);z-index:1;}
.sk-shot--fan .sk-shot__pair:has(> figure:nth-child(3)) > figure:nth-child(2){--rest:translate(0,0) rotate(.6deg);z-index:2;}
.sk-shot--fan .sk-shot__pair:has(> figure:nth-child(3)) > figure:nth-child(3){--rest:translate(7%,5%) rotate(3deg);z-index:3;}
.as-anim .sk-shot--fan.as-in .sk-shot__pair:has(> figure:nth-child(3)) > figure:nth-child(3){transition-delay:.24s;}
@media (hover:hover) and (min-width:861px){
.sk-shot--fan:hover .sk-shot__pair:has(> figure:nth-child(3)) > figure:nth-child(1){transform:translate(-34%,-2%) rotate(-5deg);}
.sk-shot--fan:hover .sk-shot__pair:has(> figure:nth-child(3)) > figure:nth-child(2){transform:translate(0,-4%) rotate(0);}
.sk-shot--fan:hover .sk-shot__pair:has(> figure:nth-child(3)) > figure:nth-child(3){transform:translate(34%,2%) rotate(4.2deg);}
}
@media (max-width:860px){
.sk-shot--fan .sk-shot__pair:has(> figure:nth-child(3)) > figure{--rest:none;}
}
/* Without :has support the three simply stack as the pair does,
   which still reads correctly. */