/* One Ambitious Mama: motion and page strips */
header{position:sticky;top:0;z-index:50;transition:box-shadow .3s ease}
header.scrolled{box-shadow:0 6px 24px rgba(23,29,41,.08)}

/* reveal on scroll (only when JS is running) */
.js-motion .rv{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js-motion .rv.in{opacity:1;transform:none}
.js-motion .rv-img{opacity:0;transform:scale(.96);transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js-motion .rv-img.in{opacity:1;transform:none}

/* buttons and cards */
a[style*="border-radius: 999px"],button[style*="border-radius: 999px"]{transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease}
a[style*="border-radius: 999px"]:hover,button[style*="border-radius: 999px"]:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(173,46,38,.22)}
article[style*="border-radius: 28px"]{transition:transform .35s ease,box-shadow .35s ease}
article[style*="border-radius: 28px"]:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(23,29,41,.12)!important}

/* handwritten notes gently write in */
.js-motion .hand{clip-path:inset(0 100% 0 0);transition:clip-path 1.4s ease .4s}
.js-motion .hand.in{clip-path:inset(0 0 0 0)}

/* page strips */
.strip{position:relative}
.pages{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:6px 6px 22px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.pages figure{margin:0;flex:0 0 auto;scroll-snap-align:start;display:flex;flex-direction:column;gap:10px;cursor:zoom-in}
.pages figure img{display:block;height:360px;width:auto;max-width:none;background:#fff;border-radius:6px;border:1px solid #e2dfd6;box-shadow:0 14px 30px rgba(23,29,41,.12);transition:transform .35s ease,box-shadow .35s ease}
.pages figure:hover img{transform:translateY(-6px);box-shadow:0 22px 40px rgba(23,29,41,.18)}
.pages figure{width:min-content}
.pages figcaption{font-size:14px;line-height:1.4;min-width:0}
.pages figcaption strong{color:#171d29;font-weight:600}
.strip-nav{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:8px}
.strip-nav button{width:48px;height:48px;border-radius:50%;border:1px solid #1e1e1e;background:#fff;color:#171d29;font-family:'DM Mono',monospace;font-size:18px;cursor:pointer;transition:background .2s,color .2s,transform .2s}
.strip-nav button:hover{background:#ad2e26;color:#fff;transform:translateY(-2px)}
.strip-nav .bar{width:140px;height:3px;background:#e2dfd6;border-radius:3px;overflow:hidden}
.strip-nav .bar span{display:block;height:100%;width:0;background:#ad2e26;transition:width .3s ease}
@media (max-width:600px){.pages figure img{height:300px}}

/* lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(23,29,41,.86);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .3s ease}
.lb.open{opacity:1;pointer-events:auto}
.lb img{max-width:100%;max-height:86vh;border-radius:6px;box-shadow:0 30px 60px rgba(0,0,0,.4);transform:scale(.96);transition:transform .3s ease}
.lb.open img{transform:none}
.lb button{position:absolute;top:18px;right:18px;width:48px;height:48px;border-radius:50%;border:1px solid #fff;background:transparent;color:#fff;font-size:22px;cursor:pointer}
.lb .lbp,.lb .lbn{top:50%;transform:translateY(-50%)}
.lb .lbp{left:18px;right:auto}.lb .lbn{right:18px}
.lb .cap{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:#fff;font-size:15px}

@media (prefers-reduced-motion:reduce){
  .js-motion .rv,.js-motion .rv-img,.js-motion .hand{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  .pages{scroll-behavior:auto}
  *{transition-duration:.01ms!important}
}
.dark .pages figcaption{color:#c9c7c2}.dark .pages figcaption strong{color:#f8f6ef}
.dark .pages figure img{border-color:#2c3446;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.dark .strip-nav button{background:transparent;color:#f8f6ef;border-color:#f8f6ef}
.dark .strip-nav .bar{background:#2c3446}
[hidden]{display:none!important}
/* floating chips on the demo */
@keyframes oamFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.demo-wrap .chip{animation:oamFloat 5s ease-in-out infinite;white-space:nowrap}
.demo-wrap .c2{animation-delay:-1.6s}.demo-wrap .c3{animation-delay:-3.2s}
@media (max-width:600px){.demo-wrap .chip{font-size:9px!important;padding:7px 10px!important;letter-spacing:.08em!important}.demo-wrap .c1{left:0!important;top:-40px!important}.demo-wrap .c2{right:0!important;top:-40px!important}.demo-wrap .c3{bottom:-44px!important;margin-left:-74px!important}}
@media (prefers-reduced-motion:reduce){.demo-wrap .chip{animation:none}}
@media (max-width:700px){header{position:static}}

/* ---- effects (effects.js); all skipped when reduced motion is on ---- */
.fx body{animation:fxIn .45s ease both}
.fx.fx-leaving body{opacity:0;transition:opacity .2s ease}
@keyframes fxIn{from{opacity:0}to{opacity:1}}


/* hand-drawn underline: a marker stroke wipes in under the word */
.fx-ul{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M4 13 C 50 6, 110 4, 196 9' fill='none' stroke='%23ad2e26' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M30 16 C 80 12, 140 12, 186 14' fill='none' stroke='%23ad2e26' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 100%;background-size:0% .26em;padding-bottom:.06em;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 1.1s cubic-bezier(.6,.1,.3,1)}
.fx-ul.drawn{background-size:100% .26em}

.count{font-variant-numeric:tabular-nums}

/* doodle arrow draws in */
.fx .doodle path{stroke-dasharray:80;stroke-dashoffset:80;transition:stroke-dashoffset .9s ease}
.fx .doodle path.head{transition-delay:.85s;transition-duration:.3s}
.fx .doodle.drawn path{stroke-dashoffset:0}

/* sticky note */
.sticky-note{position:absolute;top:-30px;right:16px;z-index:2;background:#fbe7a1;color:#171d29;font-family:'Gochi Hand',cursive;font-size:21px;line-height:1;padding:12px 14px 14px;transform:rotate(6deg);box-shadow:0 8px 16px rgba(23,29,41,.18)}
.sticky-note::before{content:"";position:absolute;top:-9px;left:50%;width:46px;height:18px;margin-left:-23px;background:rgba(255,255,255,.7);transform:rotate(-4deg)}
.fx .sticky-note{opacity:0}
.fx .sticky-note.slap{animation:fxSlap .7s cubic-bezier(.3,1.6,.5,1) .5s both}
@keyframes fxSlap{from{opacity:0;transform:rotate(-14deg) scale(1.5)}to{opacity:1;transform:rotate(6deg) scale(1)}}

/* typing */
.type-head.typing::after{content:"";display:inline-block;width:2px;height:1em;background:#ad2e26;vertical-align:-.12em;margin-left:2px;animation:fxBlink 1s steps(1) infinite}
@keyframes fxBlink{50%{opacity:0}}
.type-rest.fx-wait{opacity:0;transition:opacity .9s ease}
.type-rest.fx-show{opacity:1}


/* ribbon ticker */
.fx-ticker{overflow:hidden;white-space:nowrap;padding-left:0!important;padding-right:0!important;text-align:left!important}
.fx-track{display:flex;width:max-content;animation:fxTick 30s linear infinite}
.fx-ticker:hover .fx-track{animation-play-state:paused}
.fx-item{padding-right:48px}
.fx-item::before{content:"·";padding-right:48px;opacity:.8}
@keyframes fxTick{to{transform:translateX(-50%)}}

/* confetti */
.fx-confetti{position:fixed;inset:0;pointer-events:none;z-index:80;overflow:hidden}
.fx-confetti i{position:absolute;width:9px;height:14px;border-radius:2px}