/* =====================================================================
   Soft, animated, quiet: the designer home. Loaded last.
   One statement, a slowly changing showcase, a short rail of work.
   ===================================================================== */
:root{--glow:0 0 18px -6px rgba(43,255,198,.42)}

/* every page change rises in gently */
.view.is-active{animation:vin .5s var(--ease) both}
@keyframes vin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* scroll reveals */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .sc.rv{transition:opacity .8s var(--ease),transform .8s var(--ease),box-shadow .2s}
.rail .sc.rv:nth-child(2){transition-delay:.07s}
.rail .sc.rv:nth-child(3){transition-delay:.14s}
.calm .rv,.calm .rv.in{opacity:1;transform:none;transition:none}

/* ---------- intro ---------- */
.intro{position:relative;isolation:isolate;overflow:hidden;padding:38px 20px 8px}
.intro::before,.intro::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none;will-change:transform}
.intro::before{width:360px;height:360px;left:-140px;top:-120px;background:radial-gradient(circle,rgba(139,107,255,.42),transparent 66%);animation:drift-a 24s ease-in-out infinite alternate}
.intro::after{width:340px;height:340px;right:-150px;top:300px;background:radial-gradient(circle,rgba(34,228,255,.26),transparent 66%);animation:drift-b 28s ease-in-out infinite alternate}
@keyframes drift-a{to{transform:translate(90px,110px) scale(1.18)}}
@keyframes drift-b{to{transform:translate(-80px,-90px) scale(1.12)}}
.calm .intro::before,.calm .intro::after{animation:none}
.intro__h{max-width:13ch;font-size:clamp(2.5rem,11.4vw,3.5rem);line-height:1.02;font-weight:600!important;letter-spacing:-.04em!important;text-wrap:balance}
.intro__p{max-width:36ch;margin-top:16px;font-size:1.04rem;line-height:1.55;color:var(--ink-2)}
.intro__acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.intro__acts .tk{flex:1 1 auto}
.js .intro__h,.js .intro__p,.js .intro__acts,.js .show{animation:rise .9s var(--ease) both}
.js .intro__p{animation-delay:.1s}
.js .intro__acts{animation-delay:.2s}
.js .show{animation-delay:.32s}
.calm .intro__h,.calm .intro__p,.calm .intro__acts,.calm .show{animation:none}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* the showcase: a browser window that slowly changes site */
.show{margin-top:30px}
.show__stack{position:relative;height:min(74vw,330px);filter:drop-shadow(0 22px 30px rgba(0,0,0,.55))}
.show__i{position:absolute;inset:0;display:block;overflow:hidden;border-radius:20px;background:#0B1022;box-shadow:0 0 0 1px rgba(160,180,255,.18);opacity:0;transform:translateY(14px) scale(.965);transition:opacity 1s var(--ease),transform 1.1s var(--ease);pointer-events:none}
.show__i.on{opacity:1;transform:none;pointer-events:auto}
.show__i::before{content:"";position:absolute;left:14px;top:11px;z-index:2;width:8px;height:8px;border-radius:50%;background:#FF5F57;box-shadow:14px 0 #FEBC2E,28px 0 #28C840}
.show__i::after{content:"";position:absolute;left:0;right:0;top:0;height:30px;background:rgba(6,8,15,.85)}
.show__i img{position:absolute;inset:30px 0 0;width:100%;height:calc(100% - 30px);object-fit:cover;object-position:top}
.show__cap{margin-top:14px;font-size:.88rem;color:var(--ink-2)}
.show__cap a{color:var(--ink);font-weight:650;text-underline-offset:4px;text-decoration-thickness:1.5px}

/* ---------- selected work: a calm rail ---------- */
.work{padding:46px 0 0}
.work__hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.work__hd h2{font-size:1.6rem!important;line-height:1.1}
.seeall{display:inline-flex;align-items:center;gap:4px;min-height:44px;color:var(--neon);font-weight:650;text-decoration:none}
.seeall .ico{width:16px;height:16px}
.rail{display:flex;gap:12px;overflow-x:auto;padding:0 16px 10px;scroll-snap-type:x mandatory;scroll-padding:0 16px;scrollbar-width:none;overscroll-behavior-x:contain}
.rail::-webkit-scrollbar{display:none}
.rail .sc{flex:0 0 74%;scroll-snap-align:start;border-radius:22px}
.rail .sc .win{aspect-ratio:4/5}
.rail .sc__t{font-size:1.2rem}

/* ---------- the quiet remainder ---------- */
.howto{padding-top:40px}
.back,.denom,.care__card{border-radius:22px}
.denoms{padding-top:34px}
.care{padding-top:34px}

/* softer touch feedback on every button */
.tk:active,.tabs__i:active{transform:scale(.97)}
.tk{transition:transform .2s var(--ease),background .2s,box-shadow .2s}

/* ---------- short attention: few words, one action, always in reach ---------- */
.intro__h{max-width:12ch}
.intro__p{max-width:30ch}
.steps{gap:10px;margin:12px 0 16px}
.steps li{font-size:1rem}
.back h2{font-size:1.3rem!important}
.denoms__hd h2{font-size:1.3rem!important}
.work{padding-top:34px}
.howto{padding-top:30px}
.denoms,.care{padding-top:28px}
/* phones: the main action stays above the tab bar while the home page scrolls */
.stickgo{display:none}
@media (max-width:759px){
  .stickgo{position:fixed;z-index:55;left:14px;right:84px;bottom:calc(var(--tabs-h) + var(--safe) + 14px);display:flex;justify-content:center;min-height:52px;border-radius:99px;opacity:0;transform:translateY(16px);pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
  body.past-hero .stickgo{display:inline-flex;opacity:1;transform:none;pointer-events:auto}
  body.care-in .stickgo,body.no-wabar .stickgo{opacity:0;pointer-events:none}
}
@media (min-width:760px){.work__hd h2,.denoms__hd h2{font-size:2rem!important}.back h2{font-size:2.1rem!important}}