/* 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 figcaption{font-size:14px;line-height:1.4;max-width:300px}
.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:10px!important;padding:8px 12px!important}.demo-wrap .c1{left:-6px!important}.demo-wrap .c2{right:-6px!important}}
@media (prefers-reduced-motion:reduce){.demo-wrap .chip{animation:none}}