/* LeOtter Printables: immersive layer (preview) */
.hero{min-height:min(78vh,760px);display:flex;align-items:center;justify-content:center;padding:120px 20px 140px;isolation:isolate}
.hero .fx-n,.hero .fx-c,.hero .fx-t{display:none!important}
.hero .fx-h{background:none}
.hbg{position:absolute;inset:-6% -3%;background-size:cover;background-position:center;z-index:-3;will-change:transform;transform:translate3d(0,0,0) scale(1.04)}
[data-theme=neutral] .hbg{background-image:url(hero-neutral-1920.webp)}[data-theme=christmas] .hbg{background-image:url(hero-christmas-1920.webp);background-position:center 70%}
[data-theme=halloween] .hbg{background-image:url(hero-halloween-1920.webp)}[data-theme=thanksgiving] .hbg{background-image:url(hero-thanksgiving-1920.webp);background-position:center 60%}
@media(max-width:760px){[data-theme=neutral] .hbg{background-image:url(hero-neutral-960.webp)}[data-theme=christmas] .hbg{background-image:url(hero-christmas-960.webp)}[data-theme=halloween] .hbg{background-image:url(hero-halloween-960.webp)}[data-theme=thanksgiving] .hbg{background-image:url(hero-thanksgiving-960.webp)}}
.hshade{position:absolute;inset:0;z-index:-2;background:radial-gradient(ellipse 60% 55% at 50% 48%,color-mix(in srgb,var(--hero2) 78%,transparent),color-mix(in srgb,var(--hero2) 30%,transparent) 70%,transparent),linear-gradient(transparent 70%,color-mix(in srgb,var(--hero2) 70%,transparent))}
[data-theme=thanksgiving] .hshade{background:radial-gradient(ellipse 62% 58% at 50% 46%,#36230fd9,#36230f66 70%,#36230f22),linear-gradient(transparent 65%,#36230fb3)}
.hcv{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hero h1{text-shadow:0 2px 24px #0006}.hero p{text-shadow:0 1px 12px #0008}
.hero .wrap>*{opacity:0;transform:translateY(14px);animation:hin .9s cubic-bezier(.2,.7,.2,1) forwards}
.hero .wrap>*:nth-child(2){animation-delay:.12s}.hero .wrap>*:nth-child(3){animation-delay:.24s}.hero .wrap>*:nth-child(4){animation-delay:.36s}
@keyframes hin{to{opacity:1;transform:none}}
.eyebrow span{display:none}[data-theme=neutral] .eb-n,[data-theme=christmas] .eb-c,[data-theme=halloween] .eb-h,[data-theme=thanksgiving] .eb-t{display:inline}
.hcta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.btn.ghost{background:#ffffff1f;border:2px solid #ffffff73;backdrop-filter:blur(4px)}.btn.ghost:hover{background:#ffffff33}
/* reveals */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}.rv.in{opacity:1;transform:none}
/* tilt */
.grid{perspective:1100px}.card{transform-style:preserve-3d;will-change:transform}.card.tilting{transition:transform .08s linear,box-shadow .2s}
.card .glare{position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),#ffffff40,transparent 55%);opacity:0;transition:opacity .2s}.card{position:relative}.card.tilting .glare{opacity:1}
/* flipbook */
#inside{padding:80px 0;background:var(--alt);overflow:hidden}
.fbbar{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap;margin:0 0 26px}
.fbbar select,.fbbar button{font:inherit;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text);padding:8px 16px;min-height:44px;cursor:pointer}
.book{position:relative;width:min(880px,94vw);aspect-ratio:2/1.294;margin:0 auto;perspective:2200px}
.book:before{content:"";position:absolute;inset:-14px -14px -18px;border-radius:14px;background:linear-gradient(90deg,#6b4a2f,#8a6243 48%,#5a3d26 50%,#8a6243 52%,#6b4a2f);box-shadow:0 18px 40px #0004;z-index:0}
[data-theme=neutral] .book:before{background:linear-gradient(90deg,#0c3138,#14505a 48%,#0a2a30 50%,#14505a 52%,#0c3138)}
.leaf{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.4,.1,.2,1);cursor:pointer;z-index:1}
.leaf.flipped{transform:rotateY(-180deg)}
.leaf>div{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff center/cover no-repeat;box-shadow:inset 12px 0 18px -12px #0005}
.leaf .bk{transform:rotateY(180deg);box-shadow:inset -12px 0 18px -12px #0005}
.fbcount{text-align:center;color:var(--muted);margin-top:22px;font-size:.95rem}
@media(max-width:600px){.book{aspect-ratio:2/1.35}}
/* otter guide */
.otter{position:fixed;left:14px;bottom:12px;z-index:45;display:flex;align-items:flex-end;gap:8px;pointer-events:none}
.otter>*{pointer-events:auto}
.obtn{width:96px;height:120px;border:0;padding:0;background:none;cursor:pointer;position:relative;filter:drop-shadow(0 6px 10px #0003)}
.obtn img{width:100%;height:100%;object-fit:contain;position:absolute;inset:0;transition:opacity .2s}.obtn .oc{opacity:0}.otter.cheer .oc{opacity:1}.otter.cheer .ow{opacity:0}
.otter.wave .obtn{animation:owave 1.1s ease-in-out 2}.otter.cheer .obtn{animation:ojump .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes owave{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg)}75%{transform:rotate(6deg)}}
@keyframes ojump{0%{transform:translateY(0) scale(1)}40%{transform:translateY(-26px) scale(1.05)}100%{transform:none}}
.bub{max-width:240px;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:16px 16px 16px 4px;padding:12px 14px;font-size:.92rem;line-height:1.45;box-shadow:0 10px 26px #0002;margin-bottom:70px;opacity:0;transform:translateY(8px) scale(.96);transform-origin:bottom left;transition:opacity .25s,transform .25s;pointer-events:none}
.otter.talk .bub{opacity:1;transform:none;pointer-events:auto}
.odock{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.odock button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;font-size:1rem;box-shadow:0 2px 8px #0002}
.odock button[aria-pressed=true]{background:var(--accent);color:#fff;border-color:var(--accent)}
.otter.hide .obtn,.otter.hide .bub{display:none}
@media(max-width:600px){.obtn{width:70px;height:88px}.bub{max-width:200px;margin-bottom:52px;font-size:.86rem}}
/* burst */
.burst{position:fixed;width:9px;height:14px;border-radius:2px;pointer-events:none;z-index:120;will-change:transform,opacity}
/* calm button */
.ctl button.calm{width:auto;padding:0 12px;height:32px}.ctl button.calm[aria-pressed=true]{background:var(--hl);color:#1b1d1f;border-color:var(--hl)}
@media(max-width:480px){.ctl button.calm{padding:0 8px;font-size:.78rem}}
/* calm mode */
[data-calm="1"] *{animation:none!important;transition-duration:.01s!important}
[data-calm="1"] .hero .wrap>*,[data-calm="1"] .rv{opacity:1;transform:none}
[data-calm="1"] .hcv{display:none}[data-calm="1"] .hbg{transform:scale(1.04)!important}
.ctl button.calm{background:#ffffff1a;color:#fff;border:1px solid #ffffff40;border-radius:999px;font:inherit;font-size:.85rem;cursor:pointer}
.hero .eyebrow{line-height:1.25;margin-bottom:.35em}
@media(max-width:600px){.hero .eyebrow{font-size:1.3rem}[data-theme=halloween] .hero .eyebrow{font-size:.95rem}.hero{min-height:auto;padding:90px 18px 120px}}
.otsvg{display:inline-block;line-height:0}.otsvg svg{width:100%;height:100%;display:block;overflow:visible}
.ot-hd{width:40px;height:40px;filter:drop-shadow(0 2px 3px #0007)}
.obtn{width:96px;height:96px}.ot-gd{width:96px;height:96px;filter:drop-shadow(0 8px 10px #0004)}
@media(max-width:600px){.obtn{width:72px;height:72px}.ot-gd{width:72px;height:72px}.bub{margin-bottom:40px}}
.logo .otsvg{position:static!important;left:auto!important}
.fbver{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--surface)}
.fbbar .fbver button{border:0;border-radius:0;min-height:44px}.fbbar .fbver button[aria-pressed=true]{background:var(--accent);color:#fff}
.book.nofx .leaf{transition:none}
/* ---------- branded cart (Payhip) ---------- */
.lp-hide{display:none!important}
.lp-cart-frame{border-radius:18px!important;box-shadow:0 0 0 2px var(--accent),0 18px 40px #0003,0 4px 12px #0002!important;background:#fff;
right:18px!important;bottom:92px!important;max-width:calc(100vw - 36px);transition:filter .3s}
[data-theme=neutral] .lp-cart-frame{filter:hue-rotate(-8deg) saturate(.9)}
[data-theme=christmas] .lp-cart-frame{filter:hue-rotate(165deg) saturate(1.15)}
[data-theme=halloween] .lp-cart-frame{filter:hue-rotate(190deg) saturate(1.2)}
[data-theme=thanksgiving] .lp-cart-frame{filter:hue-rotate(183deg) saturate(1.05)}
[data-mode=dark] .lp-cart-frame{background:#222;box-shadow:0 0 0 2px var(--hl),0 18px 40px #0008!important}
[data-mode=dark][data-theme=neutral] .lp-cart-frame{filter:invert(.9) hue-rotate(172deg) saturate(.9)}
[data-mode=dark][data-theme=christmas] .lp-cart-frame{filter:invert(.9) hue-rotate(345deg) saturate(1.15)}
[data-mode=dark][data-theme=halloween] .lp-cart-frame{filter:invert(.9) hue-rotate(370deg) saturate(1.2)}
[data-mode=dark][data-theme=thanksgiving] .lp-cart-frame{filter:invert(.9) hue-rotate(363deg) saturate(1.05)}
.lpbag{position:fixed;right:18px;bottom:18px;z-index:2147483000;width:62px;height:62px;border-radius:50%;border:0;cursor:pointer;display:none;align-items:center;justify-content:center;
background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--accent) 70%,#fff),var(--accent) 60%,var(--accent-h));color:#fff;box-shadow:0 0 0 3px var(--hl),0 10px 24px #0004;transition:transform .2s}
.lpbag.show{display:flex}.lpbag:hover{transform:translateY(-2px) scale(1.04)}.lpbag:focus-visible{outline:3px solid var(--text);outline-offset:3px}
.lpbag svg{width:30px;height:30px}.lpbag.pop{animation:bagpop .5s cubic-bezier(.3,1.6,.5,1)}@keyframes bagpop{40%{transform:scale(1.18)}}
.lpcount{position:absolute;top:-4px;right:-4px;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:var(--hl);color:#1b1d1f;font:700 .8rem/24px Lato,sans-serif;text-align:center;box-shadow:0 0 0 2px var(--surface)}
.cartbtn{position:relative}.cartbtn .lpcount{top:-8px;right:-8px;height:20px;min-width:20px;line-height:20px;font-size:.72rem}
.lpcount:empty{display:none}
@media(max-width:600px){.lpbag{width:54px;height:54px;right:14px;bottom:14px}.lp-cart-frame{right:10px!important;bottom:80px!important;max-width:calc(100vw - 20px)}}