/* Samples: one long sky. The page runs from dawn to night as you scroll (registered custom properties animated on the
   root scroll timeline), the sun follows an arc worked out with sin(), and three layers of clouds rise at different
   speeds. Each sample is a full-width scene: its name, its site window and its "what was there" screenshot drift at
   their own rates, the site plays in its window as you pass, and the counts tick up. Browsers without scroll-driven
   animations get a still daytime sky and a window you hover (or tap) to scroll. */
@property --sky1{syntax:'<color>';inherits:true;initial-value:#7CC6F0}
@property --sky2{syntax:'<color>';inherits:true;initial-value:#CDEEFF}
@property --cloud{syntax:'<color>';inherits:true;initial-value:#ffffff}
@property --t{syntax:'<number>';inherits:true;initial-value:.3}
@property --night{syntax:'<number>';inherits:true;initial-value:0}
@property --n{syntax:'<integer>';inherits:false;initial-value:0}

.p-samples{--ink:#1E1B2E;background:linear-gradient(180deg,var(--sky1),var(--sky2)) fixed}
.p-samples::after{display:none}
@supports (animation-timeline:scroll()){
  .p-samples{animation:day linear both;animation-timeline:scroll(root)}
}
@keyframes day{
  0%{--sky1:#F3B4A6;--sky2:#FFE4C8;--cloud:#FFF1EA;--t:0;--night:0}
  12%{--sky1:#7CC6F0;--sky2:#CDEEFF;--cloud:#ffffff;--t:.16;--night:0}
  48%{--sky1:#58B0E8;--sky2:#BDE6FA;--cloud:#ffffff;--t:.55;--night:0}
  60%{--sky1:#86BCE4;--sky2:#FFE1B0;--cloud:#ffffff;--t:.72;--night:0}
  70%{--sky1:#EF8A5A;--sky2:#FFD08F;--cloud:#FFE2CF;--t:.88;--night:.08}
  86%{--sky1:#4A3777;--sky2:#D7778A;--cloud:#8F7CB1;--t:1;--night:.6}
  100%{--sky1:#120E26;--sky2:#2A2150;--cloud:#3E3566;--t:1.15;--night:1}
}

/* the sky */
.sky,.sky-front{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.sky{z-index:0}
.sky-front{z-index:5}
.sun{position:absolute;left:calc(3% + var(--t) * 84%);top:calc(68vh - sin(var(--t) * 180deg) * 50vh);width:clamp(70px,9vw,124px);aspect-ratio:1;border-radius:50%;background:#FFD23F;border:5px solid var(--ink);
  box-shadow:0 0 0 16px rgba(255,210,63,.3),0 0 0 36px rgba(255,210,63,.12)}
.moon{position:absolute;right:14%;top:calc(34vh - var(--night) * 18vh);width:clamp(56px,6vw,84px);aspect-ratio:1;border-radius:50%;background:#F6EED8;border:5px solid var(--ink);opacity:var(--night);
  box-shadow:inset -14px -6px 0 rgba(30,27,46,.13),0 0 0 14px rgba(246,238,216,.1)}
.stars{position:absolute;inset:0;opacity:var(--night);background-image:radial-gradient(2px 2px at 12% 18%,#fff 98%,transparent),radial-gradient(2px 2px at 28% 8%,#fff 98%,transparent),radial-gradient(1.5px 1.5px at 44% 22%,#fff 98%,transparent),radial-gradient(2px 2px at 63% 12%,#fff 98%,transparent),radial-gradient(1.5px 1.5px at 78% 28%,#fff 98%,transparent),radial-gradient(2px 2px at 90% 6%,#fff 98%,transparent),radial-gradient(1.5px 1.5px at 6% 40%,#fff 98%,transparent),radial-gradient(1.5px 1.5px at 35% 44%,#fff 98%,transparent),radial-gradient(2px 2px at 55% 38%,#fff 98%,transparent),radial-gradient(1.5px 1.5px at 86% 46%,#fff 98%,transparent),radial-gradient(1.5px 1.5px at 20% 60%,#fff 98%,transparent),radial-gradient(2px 2px at 70% 64%,#fff 98%,transparent)}
.clouds{position:absolute;left:0;right:0;top:0}
.cl{position:absolute;width:var(--w);height:calc(var(--w) * .3);border-radius:999px;background:var(--cloud);animation:bob var(--bob) ease-in-out infinite alternate}
.cl::before,.cl::after{content:"";position:absolute;border-radius:50%;background:inherit}
.cl::before{left:14%;bottom:35%;width:40%;aspect-ratio:1}
.cl::after{left:42%;bottom:22%;width:50%;aspect-ratio:1}
.far .cl{opacity:.5;transform:scale(.9)}
.mid .cl{opacity:.8}
.near .cl{opacity:.9}
@keyframes bob{to{translate:22px 0}}
@supports (animation-timeline:scroll()){
  .far{animation:rise-far linear both;animation-timeline:scroll(root)}
  .mid{animation:rise-mid linear both;animation-timeline:scroll(root)}
  .near{animation:rise-near linear both;animation-timeline:scroll(root)}
}
@keyframes rise-far{to{transform:translateY(-120vh)}}
@keyframes rise-mid{to{transform:translateY(-270vh)}}
@keyframes rise-near{to{transform:translateY(-480vh)}}

/* the opening */
.p-samples main{position:relative;z-index:1;padding-bottom:clamp(5rem,10vw,8rem);color:var(--ink);font-family:"Nunito",system-ui,sans-serif}
.s-head{padding-top:clamp(3.5rem,10vh,7rem)}
.s-title{margin:0;font:400 clamp(4.6rem,15vw,11rem)/.9 "Lilita One","Arial Black",sans-serif;letter-spacing:.02em;color:#FF5A4E;
  text-shadow:-5px -5px 0 var(--ink),5px -5px 0 var(--ink),-5px 5px 0 var(--ink),5px 5px 0 var(--ink),0 -5px 0 var(--ink),0 5px 0 var(--ink),-5px 0 0 var(--ink),5px 0 0 var(--ink),10px 12px 0 var(--ink)}
.s-tagline{display:inline-block;margin:1.2rem 0 0;padding:.35rem 1.2rem .45rem;background:#fff;border:4px solid var(--ink);border-radius:999px;box-shadow:5px 5px 0 var(--ink);font-weight:900;font-size:clamp(1.05rem,2.2vw,1.5rem);transform:none}
.s-intro{display:grid;gap:.8rem;max-width:44em;margin-top:clamp(1.6rem,3vw,2.2rem);padding:1.3rem 1.5rem;background:#fff;border:4px solid var(--ink);border-radius:18px;box-shadow:7px 7px 0 var(--ink);font-weight:700;font-size:1.08rem;line-height:1.55}
.s-intro p,.s-card p{margin:0}

/* a sample */
.scene{position:relative;padding-top:clamp(8rem,24vh,15rem)}
.s-name{margin:0;max-width:100%;font-size:clamp(3rem,9.6vw,8.6rem);line-height:.92;text-wrap:balance}
.s-kind{display:inline-block;margin:1rem 0 0;padding:.3rem 1rem .35rem;background:var(--ink);color:#fff;border-radius:999px;font-weight:800}
.s-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;margin-top:clamp(2.4rem,5vw,3.6rem)}
.s-visual{position:relative;padding-bottom:clamp(3rem,7vw,5.5rem)}
.s-made{position:relative;margin:0}
.s-tag{position:absolute;z-index:3;top:-18px;right:24px;padding:.22rem .9rem .3rem;background:#FFD23F;border:4px solid var(--ink);border-radius:999px;box-shadow:3px 3px 0 var(--ink);font:400 1.05rem "Lilita One",sans-serif;letter-spacing:.03em;transform:rotate(3deg)}
.s-browser{border:5px solid var(--ink);border-radius:16px;overflow:hidden;background:#fff;box-shadow:12px 12px 0 rgba(30,27,46,.85);view-timeline-name:--win}
.s-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#2A2433;border-bottom:4px solid var(--ink);color:#B9B2C4;font:500 .72rem "DM Mono",monospace;min-width:0}
.s-bar i{flex:none;width:11px;height:11px;border-radius:50%;border:2px solid var(--ink);background:#FF5A4E}
.s-bar i:nth-child(2){background:#FFD23F}.s-bar i:nth-child(3){background:#2FB5A3}
.s-bar span{margin-left:.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.s-screen{position:relative;aspect-ratio:16/11;overflow:hidden;container-type:size;background:#000;cursor:pointer}
.s-screen img{position:absolute;left:0;top:0;width:100%;height:auto;max-width:none;display:block;transition:transform 1.4s ease}
.s-made:hover .s-screen img,.s-screen.is-panning img{transform:translateY(calc(-100% + 100cqh));transition:transform 12s ease-in-out}
.s-had{position:absolute;z-index:2;left:-5%;bottom:0;width:34%;margin:0;background:#fff;border:5px solid var(--ink);border-radius:14px;box-shadow:8px 8px 0 rgba(30,27,46,.85);transform:rotate(-4deg)}
.s-had img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 100%;border-radius:9px}
.s-had-wide{width:46%}
.s-had-wide img{aspect-ratio:16/10;object-position:50% 25%}
.s-tag-had{left:10px;right:auto;top:-20px;background:#fff;transform:rotate(-3deg)}
.s-card{padding:clamp(1.3rem,2.6vw,1.9rem);background:#fff;border:5px solid var(--ink);border-radius:20px;box-shadow:10px 10px 0 rgba(30,27,46,.85);font-weight:600;line-height:1.55}
.s-card h3{margin:0 0 .35rem;font:400 1.5rem/1.1 "Lilita One",sans-serif;letter-spacing:.02em;color:var(--accent)}
.s-card h3+p{margin-bottom:1.3rem}
.s-card ul{margin:0 0 1.3rem;padding-left:1.2rem;display:grid;gap:.55rem}
.s-card b{font-weight:900}
.s-card .s-stats{display:flex;flex-wrap:wrap;gap:.6rem;padding:0;list-style:none}
.s-stats li{display:flex;align-items:baseline;gap:.35rem;padding:.3rem .95rem .38rem;border:3px solid var(--ink);border-radius:999px;background:var(--chip);font-weight:800}
.count{--n:var(--to);counter-reset:n var(--n)}
.count::before{content:counter(n);font:400 1.6rem/1 "Lilita One",sans-serif}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.s-btns{display:flex;flex-wrap:wrap;gap:.8rem}
.s-btn{display:inline-flex;align-items:center;min-height:48px;padding:.6rem 1.2rem;background:var(--accent);color:#fff;border:4px solid var(--ink);border-radius:14px;box-shadow:5px 5px 0 var(--ink);font:400 1.15rem "Lilita One",sans-serif;letter-spacing:.03em;text-decoration:none;transition:transform .1s,box-shadow .1s}
.s-btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink);color:#fff}
.s-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.s-btn-2,.s-btn-2:hover{background:#fff;color:var(--ink)}
.s-btn:focus-visible{outline:4px solid #FFD23F;outline-offset:3px}

/* each business in its own lettering */
.sc-sf{--accent:#E8560B;--chip:#FFE3CF}
.sc-sf .s-name{font-family:"Fraunces","Cooper Black",Georgia,serif;font-weight:900;font-variation-settings:"SOFT" 100;text-transform:uppercase;color:#FF6B1A;
  text-shadow:-4px -4px 0 var(--ink),4px -4px 0 var(--ink),-4px 4px 0 var(--ink),4px 4px 0 var(--ink),0 -4px 0 var(--ink),0 4px 0 var(--ink),-4px 0 0 var(--ink),4px 0 0 var(--ink),9px 11px 0 var(--ink)}
.sc-tr{--accent:#B45E28;--chip:#F6E2D2}
.sc-tr .s-name{font-family:"Bricolage Grotesque","Arial Black",sans-serif;font-weight:800;text-transform:uppercase;color:#2F353B;text-shadow:7px 7px 0 #D47A3F}
.sc-ota{--accent:#1F6E3D;--chip:#FFF0B3}
.sc-ota .s-name{display:inline-block;padding:.14em .5em .18em;background:#1F6E3D;color:#fff;border-radius:.2em;font-family:"Overpass","Arial Black",sans-serif;font-weight:800;font-size:clamp(1.8rem,5.2vw,4.9rem);text-transform:uppercase;
  box-shadow:inset 0 0 0 .06em #1F6E3D,inset 0 0 0 .1em #fff,10px 10px 0 var(--ink)}
.sc-nm{--accent:#3E9468;--chip:#F3EAD8}
.sc-nm .s-name{font-family:"Jost","Century Gothic",sans-serif;font-weight:300;text-transform:lowercase;letter-spacing:.12em;color:#FBF5E9;
  text-shadow:-3px -3px 0 #12241A,3px -3px 0 #12241A,-3px 3px 0 #12241A,3px 3px 0 #12241A,8px 9px 0 #12241A}
.sc-srf{--accent:#0B2B5B;--chip:#F5E7CC}
.sc-srf .s-name{font-family:"Montserrat","Arial Black",sans-serif;font-weight:700;font-size:clamp(2.1rem,6.2vw,5.6rem);text-transform:uppercase;letter-spacing:.08em;color:#F3EEE4;
  text-shadow:-3px -3px 0 #0B2B5B,3px -3px 0 #0B2B5B,-3px 3px 0 #0B2B5B,3px 3px 0 #0B2B5B,8px 9px 0 #CF9838}
.sc-next{--accent:#2FB5A3;--chip:#E3FFF9}
.sc-next .s-name{font-family:"Lilita One",sans-serif;font-weight:400;color:transparent;-webkit-text-stroke:3px #EDE8FA;letter-spacing:.02em}
.s-card-next{max-width:780px;margin-top:clamp(2rem,4vw,3rem)}
.s-lede{font-size:1.2rem;font-weight:800;margin-bottom:1.2rem!important}
.s-steps{margin:0 0 1.5rem;padding-left:1.5rem;display:grid;gap:.6rem}
.s-note{max-width:40em;margin:clamp(3rem,6vw,4rem) 0 0;color:#E8E3F5;font-weight:700}
.s-note a{color:#fff}

/* drifting at different speeds, the site playing in its window, the counts ticking up */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .drift-slow{animation:drift-slow linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .drift-fast{animation:drift-fast linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    .s-screen img{animation:play linear both;animation-timeline:--win;animation-range:cover 6% cover 94%;transition:none}
    .count{animation:count linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
  }
}
@keyframes drift-slow{from{transform:translateY(-70px)}to{transform:translateY(70px)}}
@keyframes drift-fast{from{transform:translateY(140px) rotate(-7deg)}to{transform:translateY(-140px) rotate(-1deg)}}
/* half the speed it had (Anduin, 2026-10-13): a longer stretch of scrolling, and the top 80% of the site instead of all of it */
@keyframes play{from{transform:translateY(0)}to{transform:translateY(calc((-100% + 100cqh) * .8))}}
@keyframes count{from{--n:0}to{--n:var(--to)}}

@media (max-width:900px){
  .s-grid{grid-template-columns:minmax(0,1fr)}
  .s-had{width:40%;left:-2%}
  .s-had-wide{width:52%}
  @keyframes drift-fast{from{transform:translateY(60px) rotate(-6deg)}to{transform:translateY(-60px) rotate(-2deg)}}
  @keyframes drift-slow{from{transform:translateY(-24px)}to{transform:translateY(24px)}}
  .near{display:none}
}
@media (max-width:560px){
  .s-had{width:46%}
  .s-tag{font-size:.92rem;right:12px}
  .s-card{border-width:4px;box-shadow:7px 7px 0 rgba(30,27,46,.85)}
  .s-intro{font-size:1rem;padding:1.1rem}
}
@media (prefers-reduced-motion:reduce){
  .cl{animation:none}
  .s-screen img{transition:none}
}