/* Optional preview layer. All original layout rules remain in site.css. */
body[data-preview]{--fur-x:0px;--fur-y:0px;--light-x:0px;--light-y:0px;--tree-x:0px;--tree-y:0px;--shadow-x:0px;--shadow-y:0px;--fur-strength:.84;--fur-size:600px;background:#121211;isolation:isolate}
body[data-preview]::before{content:"";position:fixed;inset:-45px;z-index:-2;pointer-events:none;background:url('/assets/panther-original.webp') repeat;background-size:var(--fur-size);opacity:var(--fur-strength);filter:brightness(1.9) contrast(.96);transform:translate3d(var(--fur-x),var(--fur-y),0)}
body[data-preview]::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#10100f18,#10100f48 60%,#10100f68)}
body[data-preview] .hero{isolation:isolate}
body[data-preview] .hero::before{content:"";position:absolute;left:4%;right:4%;top:12%;height:75%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 56% 45%,#e9943630 0%,#b56a181c 28%,transparent 64%);transform:translate3d(var(--light-x),var(--light-y),0)}
body[data-preview] .tree-stage::before{content:"";position:absolute;left:12%;right:12%;height:36%;top:44%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse,#0009,transparent 68%);transform:translate3d(var(--shadow-x),var(--shadow-y),0)}
body[data-preview] .tree-stage{isolation:isolate;transform:translate3d(var(--tree-x),var(--tree-y),0)}
body[data-preview] .tree-art{mix-blend-mode:lighten}
body[data-preview] .tool-layout,body[data-preview] .breed-card,body[data-preview] .family-grid article{background:#1b1b19f5}
body[data-preview] .section,body[data-preview] .hero-bottom{border-color:#ffffff24}
body[data-preview="kratzbaum"]{--fur-strength:.9}
body[data-preview="kratzbaum"] .hero::before{background:radial-gradient(ellipse at 54% 48%,#e9943636,transparent 63%)}
.preview-bar{position:relative;z-index:10;border-bottom:1px solid #d4861a60;background:#171713f5;padding:16px max(5%,calc((100vw - 1240px)/2));box-shadow:0 8px 35px #0003}
.preview-bar-inner{display:flex;align-items:center;gap:22px;justify-content:space-between;flex-wrap:wrap}
.preview-title{display:flex;flex-direction:column;gap:2px}
.preview-title>span{font-size:9px;color:var(--ochre);letter-spacing:2px}
.preview-title>strong{font-size:15px;font-weight:500}
.preview-bar nav{gap:8px;align-items:center;font-size:11px}
.preview-bar nav a{border:1px solid #ffffff20;border-radius:25px;padding:8px 12px;color:#c4c0b6}
.preview-bar nav a[aria-current="page"]{border-color:var(--orange);background:#fd7e1416;color:#ffd0aa}
.preview-bar nav a:hover{border-color:var(--ochre);color:var(--text)}
.preview-bar button{background:transparent;color:var(--muted);border:1px solid #ffffff25;border-radius:6px;padding:8px 12px;font-size:11px}
.preview-bar>p{font-size:11px;margin:10px 0 0;color:#a6a397}
.preview-trail{position:absolute;left:50%;top:82%;width:72px;height:87px;transform:translateX(-50%);pointer-events:none;z-index:-1}
.preview-trail img{position:absolute;width:17px;height:17px;opacity:0;filter:drop-shadow(0 2px 7px #0008);transition:opacity .22s,translate .3s;translate:0 5px;transform:rotate(-15deg)}
.preview-trail img:nth-child(1){left:9px;top:12px;transition-delay:.03s}
.preview-trail img:nth-child(2){left:40px;top:35px;transform:rotate(18deg);transition-delay:.09s}
.preview-trail img:nth-child(3){left:19px;top:59px;transition-delay:.15s}
body[data-preview="kratzbaum"] .cat-link:hover .preview-trail img,body[data-preview="kratzbaum"] .cat-link:focus-visible .preview-trail img{opacity:.85;translate:0 0}
body[data-preview="kratzbaum"] .cat-two .preview-trail{top:62%}
body[data-motion="off"] .preview-trail{display:none}
@media(max-width:760px){.preview-bar{padding:14px 5%}.preview-bar-inner{gap:12px}.preview-bar nav{width:100%;gap:7px}.preview-bar nav a{padding:7px 9px;font-size:10px}.preview-bar button{position:absolute;right:5%;top:19px}.preview-title{max-width:55%}.preview-title>strong{font-size:13px}body[data-preview]{--fur-size:480px}.preview-trail{display:none}}
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){body[data-preview]::before,body[data-preview] .hero::before,body[data-preview] .tree-stage,body[data-preview] .tree-stage::before{transform:none!important}.preview-trail{display:none!important}body[data-preview] .cat-link:hover,body[data-preview] .cat-link:focus-visible{transform:none}}

/* Variant A: user's transparent tree, darker fur, no screen blending at the cutout edges. */
body[data-preview="panther"]{--fur-strength:.62}
body[data-preview="panther"]::before{filter:brightness(1.38) contrast(.98)}
body[data-preview="panther"] .tree-art{
 top:-14%;mix-blend-mode:normal;
 /* Preserve the cutout sides; fade only the supplied reflection below the base. */
 mask-image:linear-gradient(to bottom,#000 0%,#000 69%,transparent 83%);
 -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 69%,transparent 83%);
}
body[data-preview="panther"] .tree-stage{margin-bottom:40px}
body[data-preview="panther"] .cat-one{left:10%;top:17%;width:20%;height:35%}
body[data-preview="panther"] .cat-two{left:34%;top:76%;width:12%;height:14%}
body[data-preview="panther"] .cat-three{left:47%;top:38%;width:20%;height:30%}
body[data-preview="panther"] .cat-four{left:76%;top:30%;width:18%;height:32%}
@media(max-width:760px){
 body[data-preview="panther"] .cat-two{left:32%;top:76%;width:18%;min-height:32px}
 body[data-preview="panther"] .hero-bottom{margin-top:22px}
}

/* Discreet motion control on the default homepage. */
.motion-toggle{display:flex;justify-content:flex-end;margin-bottom:12px}.motion-toggle button{background:#171713;color:var(--muted);border:1px solid #ffffff25;border-radius:6px;padding:8px 12px;font-size:11px}.motion-toggle button:focus-visible{outline:2px solid var(--orange);outline-offset:3px}