/* 18 Parvas: sky, clay wordmark, tall story posters. Follows clayrified.com. */
:root{
  --sky-top:#3d8be3; --sky-mid:#8ec3f5; --sky-low:#cfe6fb;
  --ink:#14295c; --cream:#f4eee2; --cream-edge:#d9cfbc;
  --orange:#ef5b1c; --orange-edge:#c2410c; --clay-blue:#58b6ff;
  --display:"Archivo",system-ui,sans-serif; --round:"Fredoka","Archivo",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;font:500 1.0625rem/1.5 var(--display);color:var(--ink);
  background:linear-gradient(var(--sky-top) 0,var(--sky-mid) 620px,var(--sky-mid) 100%);overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:12px}
.skip{position:absolute;left:-999px;top:8px;background:var(--cream);padding:.5rem 1rem;border-radius:999px;z-index:10}
.skip:focus{left:8px}

/* ---------- hero ---------- */
.hero{position:relative;overflow-x:clip;padding:clamp(2rem,4vw,3.5rem) 16px 0;text-align:center;
  background:linear-gradient(var(--sky-top) 0,#62a6ec 55%,var(--sky-mid) 100%)}
.cloud{position:absolute;width:var(--w);height:auto;aspect-ratio:360/210;pointer-events:none}
.hero .c1{--w:clamp(170px,30vw,430px);left:-4%;top:-1%}
.hero .c2{--w:clamp(150px,27vw,400px);right:-5%;top:-3%}
.hero .c3{--w:clamp(110px,19vw,270px);left:-3%;top:40%}
.hero .c4{--w:clamp(110px,18vw,250px);right:-2%;top:43%}

.mark{position:relative;width:min(940px,96%);margin:0 auto;padding-top:min(188px,19.2vw)}
.mark h1{margin:0}
.mark h1 img{width:100%;height:auto}
.mark text,.numbers text{font-family:var(--round);font-weight:700;fill:#f6f0e4;stroke:#f6f0e4;
  stroke-linejoin:round;stroke-linecap:round;paint-order:stroke}
.mark text{font-size:184px;stroke-width:7px;letter-spacing:6px}
.sitter{position:absolute;z-index:2;width:17.5%;height:auto;bottom:39.5%;
  filter:drop-shadow(0 8px 8px rgba(15,63,134,.35))}
.sitter.s1{left:6.5%}
.sitter.s2{right:9%;width:15.5%}

.tag{display:inline-block;margin:clamp(.2rem,1.5vw,1rem) 0 0;padding:.45rem 1.1rem;border-radius:999px;
  background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8);font-weight:700;font-size:1rem}
.cta{list-style:none;display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin:1.4rem 0 0;padding:0}
.pill{display:inline-block;padding:.85rem 1.7rem;border-radius:999px;background:var(--cream);
  font:800 1.2rem/1 var(--display);text-decoration:none;letter-spacing:-.01em;
  box-shadow:inset 0 -5px 0 var(--cream-edge),inset 0 2px 0 #fff,0 8px 16px rgba(15,63,134,.28);
  transition:transform .15s}
.pill:hover{transform:translateY(-2px)}
.pill:active{transform:translateY(2px)}

/* the duel: Arjuna shoots, the arrow flies once, Duryodhana flinches */
.duel{position:relative;display:flex;justify-content:space-between;align-items:flex-end;
  width:min(980px,100%);margin:clamp(1.6rem,4vw,3rem) auto 0;padding:0 2%}
.duel img{height:auto;filter:drop-shadow(0 10px 10px rgba(15,63,134,.35))}
.villain{width:19%;transform-origin:50% 100%;animation:flinch 3.4s .4s ease-out infinite}
.chariot{width:40%;margin-bottom:-1%}
.arrow{position:absolute;width:17%;right:39%;top:22%;overflow:visible;
  animation:fly 3.4s .4s linear infinite;opacity:0}

/* one 3.4s loop: draw, shoot, land, flinch, reset */
@keyframes fly{
  0%,6%{transform:translate(0,0) rotate(-7deg);opacity:0}
  9%{opacity:1}
  34%{transform:translate(-128%,470%) rotate(-7deg);opacity:1;animation-timing-function:ease-out}
  37%{transform:translate(-124%,455%) rotate(-11deg)}
  40%,78%{transform:translate(-128%,470%) rotate(-7deg);opacity:1}
  88%,100%{transform:translate(-128%,560%) rotate(-30deg);opacity:0}}
@keyframes flinch{0%,33%{transform:none}37%{transform:rotate(-8deg) translateX(-3%)}43%{transform:rotate(4deg)}49%{transform:rotate(-2deg)}55%,100%{transform:none}}
@keyframes recoil{0%,5%{transform:none}9%{transform:translateX(1.6%) rotate(.8deg)}18%{transform:translateX(-.4%)}26%,100%{transform:none}}
@keyframes bob{50%{transform:translateY(-2.2%)}}
@keyframes sway{50%{transform:rotate(-2.5deg)}}
@keyframes drift{to{translate:var(--dx,26px) 0}}
@keyframes pop{0%{transform:scale(.6) translateY(18%);opacity:0}60%{transform:scale(1.06)}100%{transform:none;opacity:1}}
.chariot{transform-origin:60% 100%;animation:recoil 3.4s .4s ease-out infinite}
.sitter{transform-origin:50% 100%}
.sitter.s1{animation:sway 4.6s ease-in-out infinite}
.sitter.s2{animation:bob 3.8s .6s ease-in-out infinite}
.cloud{animation:drift 9s ease-in-out infinite alternate}
.hero .c2,.hero .c3,footer .f2{--dx:-30px;animation-duration:11s}
.hero .c4{--dx:18px;animation-duration:13s}
.mark h1{animation:pop .7s cubic-bezier(.3,1.4,.5,1) both}
.numbers li img{animation:bob 4.2s ease-in-out infinite}
.numbers li:nth-child(2) img{animation-delay:.7s}
.numbers li:nth-child(3) img{animation-delay:1.4s}

/* ---------- numbers ---------- */
.numbers{background:var(--sky-mid);padding:clamp(2rem,5vw,3.5rem) 16px 0}
.numbers ul{list-style:none;margin:0 auto;padding:0;display:flex;justify-content:center;gap:clamp(.5rem,4vw,3.5rem);max-width:980px}
.numbers li{flex:1;max-width:280px;text-align:center}
.numbers img{height:clamp(54px,9vw,96px);width:auto;margin:0 auto}
.numbers text{font-size:118px;stroke-width:4px;letter-spacing:2px}
.numbers p{margin:.5rem 0 0;font-weight:700;font-size:clamp(.85rem,2vw,1.05rem);line-height:1.25}

/* ---------- stories ---------- */
main{padding:clamp(3rem,7vw,5rem) 0 2rem;background:var(--sky-mid)}
h2{margin:0;text-align:center;font:800 clamp(2rem,6vw,3.4rem)/1.05 var(--display);letter-spacing:-.035em;padding:0 16px}
.lede{text-align:center;margin:.6rem 0 0;padding:0 16px}
.row{list-style:none;margin:1.6rem 0 0;padding:.5rem max(16px,calc((100vw - 1180px)/2)) 1.6rem;
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;
  scrollbar-color:rgba(20,41,92,.35) transparent}
.card{flex:0 0 clamp(236px,26vw,318px);scroll-snap-align:center;position:relative;aspect-ratio:9/16;
  border-radius:26px;overflow:hidden;background:#0d2148;box-shadow:0 14px 26px rgba(15,63,134,.35)}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover img{transform:scale(1.04)}
.face{position:absolute;inset:0;width:100%;border:0;padding:0;background:none;cursor:pointer;color:#fff;
  font:inherit;text-align:left;display:block}
.face::after{content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(8,20,52,.5) 0,transparent 34%,transparent 58%,rgba(8,20,52,.86) 100%)}
.no{position:absolute;z-index:2;left:12px;top:12px;padding:.32rem .8rem;border-radius:999px;background:var(--orange);
  box-shadow:inset 0 -3px 0 var(--orange-edge);font:600 .82rem/1.2 var(--round)}
.name{position:absolute;z-index:2;left:8px;right:8px;top:50px;text-align:center;text-transform:uppercase;
  font:700 clamp(1.7rem,3vw,2.25rem)/.98 var(--round);letter-spacing:.02em;color:var(--clay-blue);
  -webkit-text-stroke:1.5px #2f8de6;
  text-shadow:0 2px 0 #1f6fc4,0 4px 0 #17579c,0 0 22px rgba(60,160,255,.75)}
.tease{position:absolute;z-index:2;left:16px;right:16px;bottom:16px;font:600 1.05rem/1.25 var(--round)}
.tease small{display:block;font:500 .82rem/1.3 var(--display);opacity:.85;margin-bottom:.15rem}
.panel{position:absolute;inset:0;z-index:3;padding:58px 18px 18px;background:rgba(13,33,72,.93);color:#fff;
  display:flex;flex-direction:column;gap:.7rem;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.card.open .panel{opacity:1;visibility:visible}
.panel h3{margin:0;font:700 1.35rem/1.1 var(--round);color:var(--clay-blue)}
.panel p{margin:0;font-size:.98rem;line-height:1.45}
.panel .soon{margin-top:auto;font-size:.85rem;opacity:.75}
.panel button{align-self:flex-start;border:0;border-radius:999px;padding:.55rem 1.1rem;background:var(--cream);color:var(--ink);
  font:800 .95rem/1 var(--display);cursor:pointer;box-shadow:inset 0 -4px 0 var(--cream-edge)}
.keep{text-align:center;margin:0;font-size:.9rem;opacity:.7}


/* ---------- learn how we make these ---------- */
.learn{background:var(--sky-mid);padding:clamp(2rem,6vw,4.5rem) 16px clamp(1rem,3vw,2rem)}
.learn-card{max-width:1010px;margin:0 auto;text-align:center;border-radius:32px;padding:clamp(2rem,6vw,4.2rem) clamp(1rem,4vw,3rem) clamp(1.6rem,4vw,2.6rem);
  background:rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.65);box-shadow:0 20px 50px rgba(15,63,134,.14)}
.learn-sub{margin:.9rem 0 0;font-size:1.05rem}
.fan{position:relative;width:min(470px,100%);aspect-ratio:470/250;margin:clamp(1.4rem,4vw,2.4rem) auto 0}
.part{position:absolute;top:8%;width:38%;aspect-ratio:4/5;box-sizing:border-box;padding:6% 5% 0;text-align:left;
  background:#efe6da;border:3px solid #fff;border-radius:14px;box-shadow:0 14px 26px rgba(15,63,134,.28);
  display:flex;flex-direction:column;justify-content:space-between;gap:6px;padding-bottom:7%}
.part b{font:400 clamp(.7rem,2.1vw,1rem)/1.08 "EB Garamond",Georgia,serif;color:#2a211c}
.part img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:3px;border:2px solid #fff}
.part.p1{left:3%;transform:rotate(-8deg)}
.part.p3{right:3%;transform:rotate(8deg)}
.part.p2{left:31%;top:0;z-index:1}
.steps{list-style:none;counter-reset:s;margin:clamp(1.6rem,5vw,3rem) auto 0;padding:0;display:flex;flex-direction:column;gap:.8rem;text-align:left;width:max-content;max-width:100%}
.steps li{counter-increment:s;display:flex;align-items:center;gap:.85rem;font-weight:700}
.steps li::before{content:counter(s);flex:none;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--orange);color:#fff;
  display:grid;place-items:center;font:600 .9rem/1 var(--round);box-shadow:inset 0 -3px 0 var(--orange-edge)}
.get{display:inline-block;margin-top:clamp(1.6rem,4vw,2.4rem);padding:1rem 2.2rem;border-radius:999px;background:var(--orange);color:#fff;
  font:800 1.15rem/1 var(--display);text-decoration:none;box-shadow:inset 0 -5px 0 var(--orange-edge),0 10px 20px rgba(194,65,12,.3);transition:transform .15s}
.get:hover{transform:translateY(-2px)}
.get:active{transform:translateY(2px)}
.learn-alt{margin:1rem 0 0;font-size:.95rem}
.learn-alt a{text-underline-offset:3px}
.learn-alt.small{margin-top:.4rem;font-size:.88rem;opacity:.85}
.learn-fine{margin:.7rem auto 0;font-size:.9rem;max-width:44em}


/* ---------- reveal on scroll (reveal.js) ---------- */
.js-reveal [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--d,0s)}
.js-reveal [data-reveal].in{opacity:1;transform:none}
.js-reveal .row[data-reveal]{transform:translateX(70px)}
.js-reveal .row[data-reveal].in{transform:none}
.part{transition:transform .9s cubic-bezier(.2,.9,.25,1.15) .25s,left .9s cubic-bezier(.2,.9,.25,1.15) .25s,right .9s cubic-bezier(.2,.9,.25,1.15) .25s}
.js-reveal .learn-card:not(.in) .part.p1{left:31%;transform:none}
.js-reveal .learn-card:not(.in) .part.p3{right:31%;transform:none}
.steps li{transition:opacity .5s ease,transform .5s ease}
.js-reveal .learn-card:not(.in) .steps li{opacity:0;transform:translateX(-14px)}
.learn-card.in .steps li:nth-child(1){transition-delay:.7s}
.learn-card.in .steps li:nth-child(2){transition-delay:.85s}
.learn-card.in .steps li:nth-child(3){transition-delay:1s}

/* ---------- footer ---------- */
footer{position:relative;background:linear-gradient(var(--sky-mid),var(--sky-low));text-align:center;
  padding:clamp(5rem,12vw,8rem) 16px 2.5rem;overflow:hidden}
footer .f1{--w:clamp(160px,26vw,340px);left:-3%;top:4%}
footer .f2{--w:clamp(140px,22vw,300px);right:-3%;top:12%}
footer p{margin:.2rem 0;position:relative}
footer .handle{font:800 1.5rem/1.1 var(--display);letter-spacing:-.02em}

@media (max-width:640px){
  .hero .c3,.hero .c4{display:none}
  .hero .c1{--w:120px;left:-12%;top:-1%}
  .hero .c2{--w:120px;right:-12%;top:-1%}
  .tag{font-size:.92rem}
  .mark text{stroke-width:9px}
  .pill{font-size:1.05rem;padding:.8rem 1.3rem}
  .villain{width:24%}.chariot{width:50%}.arrow{width:20%;right:48%}
  .numbers text{stroke-width:6px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .arrow{animation:none;opacity:1;transform:translate(-128%,470%) rotate(-7deg)}
  .villain,.chariot,.sitter,.cloud,.mark h1,.numbers li img{animation:none!important}
  .card img,.pill,.get,.part,.steps li{transition:none}
}

footer .foot-nav{position:relative;display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;justify-content:center;margin-top:1.1rem;font-size:.95rem}
footer .foot-nav a{text-underline-offset:3px}
footer .copy{font-size:.85rem;opacity:.8;margin-top:.6rem}