/* Home page: a scroll-through picture story (one full-screen scene per feature). */
:root{--scene-0:#BDEFE3;--ticket-line:#9CC7F0;--ok:#2EB872;--bar-alt:#FFC98A;--red-deep:#B23A50}
html{scroll-snap-type:y proximity;scroll-behavior:smooth;overscroll-behavior-y:none}
body{background:var(--bg,var(--scene-0));transition:background-color .9s ease}
.scene{position:relative;min-height:100svh;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,3vh,28px);padding:84px 20px 40px;overflow:hidden;text-align:center}
/* the hill every scene stands on */
.scene::before{content:"";position:absolute;left:-20%;right:-20%;bottom:-38vh;height:70vh;border-radius:50%;background:color-mix(in srgb,var(--c) 78%,var(--heading));opacity:.35;z-index:0;transform:translateY(30%);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.scene.on::before{transform:none}
.scene>*{position:relative;z-index:1}

/* ---- fixed chrome ---- */
.bars{position:fixed;left:18px;top:18px;z-index:20;display:flex;gap:14px;align-items:flex-end;height:34px;padding:6px 8px;border-radius:12px}
.bars button{all:unset;cursor:pointer;width:7px;height:20px;border-radius:4px;background:var(--heading);opacity:.35;transition:height .3s,opacity .3s,background-color .3s;position:relative}
.bars button::after{content:"";position:absolute;inset:-12px -10px}
.bars button:hover{opacity:.7}
.bars button.on{height:32px;opacity:1}
.bars button:focus-visible{outline:2px solid var(--heading);outline-offset:3px}
.bars .tip{position:absolute;left:0;top:44px;white-space:nowrap;font-size:13px;background:var(--white);border-radius:999px;padding:3px 12px;box-shadow:0 2px 8px rgba(31,75,72,.15);opacity:0;pointer-events:none;transition:opacity .2s}
.bars:hover .tip,.bars.show .tip{opacity:1}
.get{position:fixed;right:16px;top:16px;z-index:20;display:inline-flex;align-items:center;min-height:44px;background:var(--green);color:var(--white);text-decoration:none;border-radius:999px;padding:9px 18px;font-size:15px;font-weight:500;box-shadow:0 4px 0 var(--shadow)}

/* ---- captions: hand-written, one chunk at a time ---- */
.cap{font-family:"Itim",cursive;font-size:clamp(26px,5.4vw,46px);line-height:1.25;margin:0;max-width:900px;color:var(--heading)}
.cap span{display:inline-block;opacity:0;transform:translateY(14px) rotate(-2deg);transition:opacity .5s,transform .5s cubic-bezier(.2,.9,.3,1.4);transition-delay:calc(var(--i)*.22s + .35s)}
.on .cap span{opacity:1;transform:none}
.title{font-size:clamp(44px,10vw,96px);font-weight:600;line-height:1.3;margin:0;letter-spacing:-1px}
.title.sm{font-size:clamp(34px,7vw,64px)}
/* one plain line under the brand: what the app is */
.what{margin:-6px 0 0;font-size:clamp(17px,3.4vw,22px);font-weight:500;line-height:1.4;color:var(--heading)}
.scene .stores{justify-content:center}
.title b{color:var(--red);font-weight:600}

/* ---- art ---- */
.art{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:12px}
.art img,.art .prop{opacity:0;transform:translateY(40px) scale(.9);transition:opacity .6s,transform .8s cubic-bezier(.2,.9,.3,1.3);transition-delay:calc(var(--i,0)*.15s + .1s)}
.on .art img,.on .art .prop{opacity:1;transform:translate(calc(var(--px,0)*var(--d,0)*1px),calc(var(--py,0)*var(--d,0)*1px))}
.hero-art{height:min(38vh,340px);width:auto}
.tap{cursor:pointer;-webkit-tap-highlight-color:transparent}
.bob{animation:bob 3.2s ease-in-out infinite}
.sway{animation:sway 4s ease-in-out infinite;transform-origin:50% 100%}
.boing{animation:boing .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes bob{50%{translate:0 -10px}}
@keyframes sway{0%,100%{rotate:-3deg}50%{rotate:3deg}}
@keyframes boing{0%{scale:1}30%{scale:1.15 .85}60%{scale:.92 1.1}100%{scale:1}}
.deco{position:absolute;pointer-events:none;z-index:0;opacity:.9}
.spark{animation:twinkle 2.4s ease-in-out infinite}
@keyframes twinkle{50%{opacity:.25;scale:.7}}
.heart{position:fixed;z-index:30;pointer-events:none;font-size:22px;animation:heart 1s ease-out forwards}
@keyframes heart{to{translate:var(--hx) -120px;opacity:0;scale:1.6}}

/* scene 0: capy walks across the hill */
/* the sprite is drawn facing left; it walks left → right, so mirror it */
.walker{position:absolute;bottom:14vh;left:0;width:110px;scale:-1 1;animation:walk 16s linear infinite;z-index:1}
@keyframes walk{from{translate:-140px 0}to{translate:100vw 0}}
.down{all:unset;cursor:pointer;display:grid;place-items:center;gap:2px;font-size:14px;color:var(--heading);animation:bob 1.8s ease-in-out infinite}
.down svg{width:30px;height:30px}
/* first scene: just a small arrow, the App Store button is the call to action */
.down.arrow{width:44px;height:44px;opacity:.7}
.down.arrow svg{width:26px;height:26px}

/* scene 1: result card */
.scene .result-wrap{width:min(100%,520px);padding-top:84px}
.scene .result-wrap .peek{width:140px;right:48px}

/* scene 3: tickets */
.tickets{display:flex;gap:0;align-items:flex-end;height:150px}
.ticket{width:150px;height:88px;border-radius:12px;background:var(--white);border:2px dashed var(--ticket-line);box-shadow:0 6px 16px rgba(31,75,72,.12);display:grid;place-items:center;font-size:26px;font-weight:600;color:var(--number);letter-spacing:3px;position:relative;margin:0 -22px}
.ticket:nth-child(1){rotate:-10deg}.ticket:nth-child(3){rotate:10deg}.ticket:nth-child(2){translate:0 -18px;z-index:2}
.ticket small{position:absolute;top:6px;left:10px;font-size:10px;font-weight:400;letter-spacing:0;color:var(--muted)}
.ticket .ok{position:absolute;right:-12px;top:-14px;width:40px;height:40px;border-radius:50%;background:var(--ok);color:var(--white);display:grid;place-items:center;font-size:22px;scale:0;transition:scale .5s cubic-bezier(.3,1.8,.5,1) 1.4s}
.on .ticket .ok{scale:1}

/* scene 4: bars grow */
.chart{display:flex;gap:10px;align-items:flex-end;height:min(30vh,240px)}
.chart i{display:block;width:34px;border-radius:10px 10px 4px 4px;background:var(--white);box-shadow:0 4px 12px rgba(31,75,72,.1);height:0;transition:height 1s cubic-bezier(.2,.9,.3,1.2);transition-delay:calc(var(--i)*.12s + .5s);position:relative}
.chart i::after{content:attr(data-n);position:absolute;top:-26px;left:50%;translate:-50%;font-style:normal;font-weight:600;font-size:16px;color:var(--number)}
.on .chart i{height:var(--h)}
.chart i:nth-child(odd){background:var(--bar-alt)}

/* scene 5: lucky numbers */
.lucky{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
.slot{min-width:92px;padding:6px 16px;border-radius:18px;background:var(--white);font-size:40px;font-weight:600;color:var(--number);box-shadow:0 4px 0 rgba(31,75,72,.12);font-variant-numeric:tabular-nums}
.slot small{display:block;font-size:12px;font-weight:400;color:var(--muted);margin-bottom:-6px}
.roll{all:unset;cursor:pointer;background:var(--red);color:var(--white);border-radius:999px;padding:12px 26px;font-size:18px;font-weight:500;box-shadow:0 5px 0 var(--red-deep);transition:transform .1s,box-shadow .1s}
.roll:active{transform:translateY(4px);box-shadow:0 1px 0 var(--red-deep)}
.roll:focus-visible{outline:3px solid var(--heading);outline-offset:3px}
.fine{font-size:12px;color:var(--muted);font-weight:300;margin:0}

/* /app feature chips */
.scene .more{grid-template-columns:repeat(4,1fr);width:100%}
@media(max-width:700px){.scene .more{grid-template-columns:1fr 1fr;gap:8px}.scene .more div{padding:12px;font-size:13px}.scene .more b{font-size:15px}}

/* scene 6 */
.links{font-size:14px;color:var(--muted);font-weight:300;line-height:1.8}
.links a{color:var(--muted)}

@media(max-width:600px){
  .scene{padding:76px 16px 28px}
  .hero-art{height:min(30vh,240px)}
  .art{flex-direction:column;align-items:center;gap:8px}
  .tickets{height:120px}
  .ticket{width:112px;height:70px;font-size:19px;margin:0 -18px}
  .chart{height:110px;order:2}
  .chart i{width:26px}
  .chart i::after{font-size:13px;top:-20px}
  .slot{font-size:32px;min-width:76px}
  .walker{width:84px;bottom:10vh}
}
@media(max-height:700px){.hero-art{height:26vh}.scene .result-wrap{padding-top:60px}.scene .result-wrap .peek{width:100px}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bob,.sway,.spark,.walker,.down{animation:none}
  .cap span,.art img,.art .prop,.chart i,.ticket .ok,.scene::before{transition:none}
}
/* first scene also carries the App Store button: keep the art smaller */
.scene:first-child .hero-art{height:min(30vh,280px)}
@media(max-width:600px){.scene:first-child .hero-art{height:min(22vh,190px)}}