/* Homepage hero sample: the pet stands on the page itself, always at its full
   size. Two quiet yellow cuts let you look inside: Layers (top down, up the
   right) and Slice (along the body, under the pet). An empty left column of the
   same width keeps the pet centred. */
.hero-stage{min-width:0;width:100%;position:relative;
  --stage-side:44px;
  --quiet-fill:#F6D98A;--quiet-thumb:#FFC12E;--quiet-ring:#A87700;--quiet-track:#ECEEF3}
.stage-glow{position:absolute;left:50%;top:40%;width:min(118%,720px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#EEF2FF 0%,rgba(238,242,255,.6) 42%,rgba(255,255,255,0) 70%);pointer-events:none}
.stage-grid{position:relative;display:grid;grid-template-columns:var(--stage-side) minmax(0,1fr) var(--stage-side);
  grid-template-areas:". view layers" ". slice .";column-gap:6px;align-items:stretch}

.stage-view{grid-area:view;position:relative;min-width:0}
.sample-viewport{width:100%;height:clamp(340px,36vw,540px);position:relative;cursor:grab;outline-offset:-4px;touch-action:pan-y}
.sample-viewport:active{cursor:grabbing}
.sample-viewport canvas{display:block;width:100%;height:100%;touch-action:none;opacity:0;transition:opacity .45s ease}
.hero-stage[data-state=ready] .sample-viewport canvas{opacity:1}
.hero-stage[data-state=ready][data-switching] .sample-viewport canvas{opacity:.18;transition-duration:.2s}
.sample-viewport:focus-visible{outline:3px solid var(--pb-blue);border-radius:24px}

/* Small "drag to turn" hint that bows out after the first drag. */
.drag-hint{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);margin:0;display:flex;align-items:center;gap:8px;padding:8px 14px 8px 11px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 6px 18px rgba(21,22,30,.10),0 0 0 1px #E6E8EF;font-size:13px;font-weight:800;color:#15161E;pointer-events:none;opacity:0;transition:opacity .4s ease,transform .4s ease;white-space:nowrap}
.drag-hint svg{width:18px;height:18px;fill:none;stroke:var(--pb-blue);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hero-stage[data-state=ready]:not([data-touched]):not([data-switching]) .drag-hint{opacity:1}
.hero-stage[data-touched] .drag-hint{opacity:0;transform:translate(-50%,8px)}

/* Brick loader: three little 2×2 bricks drop and stack, then start again.
   Sized in em, so one font-size scales the whole stack. */
.brick-loader{--a:var(--pb-red);--b:var(--pb-yellow);--c:var(--pb-blue);font-size:10px;width:5.4em;height:5.6em;position:relative;pointer-events:none}
.brick-loader i{position:absolute;left:.6em;width:4.2em;height:1.35em;border-radius:.32em;color:var(--a);background:currentColor;box-shadow:inset 0 -.32em 0 rgba(0,0,0,.16);animation:brick-drop 2.1s cubic-bezier(.3,.7,.3,1) infinite both}
.brick-loader i::before,.brick-loader i::after{content:"";position:absolute;top:-.42em;width:1.15em;height:.48em;border-radius:.2em .2em 0 0;background:currentColor;box-shadow:inset 0 .14em 0 rgba(255,255,255,.35)}
.brick-loader i::before{left:.55em}.brick-loader i::after{right:.55em}
.brick-loader i:nth-child(1){bottom:0}
.brick-loader i:nth-child(2){bottom:1.35em;left:1.1em;color:var(--b);animation-delay:.25s}
.brick-loader i:nth-child(3){bottom:2.7em;left:.3em;color:var(--c);animation-delay:.5s}
@keyframes brick-drop{0%{transform:translateY(-2.6em);opacity:0}14%{transform:translateY(0);opacity:1}20%{transform:translateY(-.25em)}26%,78%{transform:translateY(0);opacity:1}90%,100%{transform:translateY(0);opacity:0}}
.stage-loader{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);opacity:0;transition:opacity .25s ease;font-size:11px}
.stage-loader i{animation-play-state:paused}
/* Showing before the script runs too, so the first load is never a blank stage. */
.hero-stage:not([data-state=ready]):not([data-state=fallback]) .stage-loader,.hero-stage[data-switching] .stage-loader{opacity:1}
.hero-stage:not([data-state=ready]):not([data-state=fallback]) .stage-loader i,.hero-stage[data-switching] .stage-loader i{animation-play-state:running}

/* Shared range reset. */
.hero-stage input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;margin:0;padding:0;background:transparent;cursor:pointer;touch-action:none}
.hero-stage input[type=range]:focus-visible{outline:none}
.hero-stage input:disabled{cursor:wait;opacity:.45}
/* Vertical sliders: the range is rotated so it styles the same everywhere. */
.v-track{position:relative;width:100%;height:100%;container-type:size}
.v-track input[type=range]{position:absolute;left:50%;top:50%;width:240px;width:100cqh;transform:translate(-50%,-50%) rotate(-90deg)}

/* LAYERS and SLICE — quiet yellow helpers: thin track, small thumb with a gold ring. */
.stage-quiet input[type=range]{height:26px}
.stage-quiet input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--quiet-fill) var(--progress,100%),var(--quiet-track) var(--progress,100%))}
.stage-quiet input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:var(--quiet-track)}
.stage-quiet input[type=range]::-moz-range-progress{height:4px;border-radius:2px;background:var(--quiet-fill)}
.stage-quiet input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-7px;border:2px solid var(--quiet-ring);box-sizing:border-box;border-radius:50%;background:var(--quiet-thumb);box-shadow:0 2px 6px rgba(21,22,30,.14);transition:transform .15s cubic-bezier(.2,.8,.2,1)}
.stage-quiet input[type=range]::-moz-range-thumb{width:18px;height:18px;border:2px solid var(--quiet-ring);box-sizing:border-box;border-radius:50%;background:var(--quiet-thumb);box-shadow:0 2px 6px rgba(21,22,30,.14)}
.stage-quiet input[type=range]:hover::-webkit-slider-thumb{transform:scale(1.12)}
.stage-quiet input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(43,89,255,.4)}
.stage-quiet input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px rgba(43,89,255,.4)}
.stage-layers{grid-area:layers;display:grid;justify-items:center;align-self:center;height:min(80%,330px)}
.stage-layers .v-track{width:26px}
/* Slice keeps the part to the right of the thumb, so the fill sits on the right. */
.stage-slice{grid-area:slice;display:grid;align-items:center;padding:2px 8px 0}
.stage-slice input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(to right,var(--quiet-track) var(--progress,0%),var(--quiet-fill) var(--progress,0%))}
.stage-slice input[type=range]::-moz-range-track{background:var(--quiet-fill)}
.stage-slice input[type=range]::-moz-range-progress{background:var(--quiet-track)}

.stage-status{position:relative;margin:8px 0 0;font-size:12px;line-height:1.45;color:#7A7D8E;text-align:center;min-height:18px}

/* Animal picker: the retriever first, then the other samples. */
.stage-animals{position:relative;margin:14px auto 0;max-width:520px;min-height:118px}
.animals-label{margin:0 0 8px;font-size:12px;font-weight:800;letter-spacing:.02em;color:#5B5E70;text-align:center}
.animal-list{display:flex;justify-content:center;justify-content:safe center;gap:10px;padding:4px 2px 6px}
.animal{flex:0 0 auto;width:86px;display:grid;justify-items:center;gap:5px;padding:0;margin:0;border:0;background:none;font:inherit;color:#5B5E70;cursor:pointer;-webkit-tap-highlight-color:transparent}
.animal-art{position:relative;width:86px;height:72px;border-radius:18px;background:#F5F6FA;display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 0 0 1.5px #E6E8EF;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .2s}
.animal-art img{position:absolute;inset:12%;width:76%;height:76%;object-fit:contain;opacity:0;transform:scale(.92);transition:opacity .3s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.animal[data-loaded] .animal-art img{opacity:1;transform:none}
.animal .brick-loader{font-size:4.5px;transition:opacity .2s}
.animal[data-loaded] .brick-loader{opacity:0}
.animal-name{font-size:12px;font-weight:800;line-height:1.2;text-align:center;white-space:nowrap}
.animal[aria-checked=true]{color:#15161E}
.animal[aria-checked=true] .animal-art{background:#EEF2FF;box-shadow:inset 0 0 0 2.5px var(--pb-blue)}
.animal[aria-busy=true] .brick-loader{opacity:1}
.animal:focus-visible{outline:none}
.animal:focus-visible .animal-art{box-shadow:inset 0 0 0 2.5px var(--pb-blue),0 0 0 4px rgba(43,89,255,.35)}
.animal:disabled{cursor:wait}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .animal:hover .animal-art{transform:translateY(-3px)}
  .animal:hover img{transform:scale(1.06) rotate(-2deg)}
}
.animal:active .animal-art{transform:translateY(1px)}

.sample-fallback{max-width:300px;padding:30px;text-align:center;font-size:24px;line-height:1.3;color:#5B5E70;font-weight:700;margin:auto}
.hero-stage[data-state=fallback] .sample-viewport{display:flex;align-items:center;cursor:auto}
.hero-stage[data-state=fallback] :is(.stage-layers,.stage-slice,.drag-hint,.stage-loader,.stage-animals){display:none}

@media(max-width:1000px){.sample-viewport{height:clamp(320px,62vw,480px)}}
@media(max-width:480px){
  .hero-stage{--stage-side:38px}
  .stage-grid{column-gap:2px;margin:0 -4px}
  .stage-quiet input[type=range]{height:34px}
  .sample-viewport{height:min(86vw,330px)}
  .stage-layers .v-track{width:24px}
  .stage-slice{padding:2px 2px 0}
  .stage-status{font-size:11px}
  .stage-animals{margin:10px -20px 0;min-height:108px}
  .animal-list{overflow-x:auto;scroll-snap-type:x proximity;scroll-padding:0 16px;padding:4px 16px 8px;gap:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .animal-list::-webkit-scrollbar{display:none}
  .animal{width:60px;scroll-snap-align:start}
  .animal-art{width:60px;height:54px;border-radius:15px}
  .animal-name{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  .sample-viewport canvas,.drag-hint,.animal-art,.animal-art img{transition:none}
  .brick-loader i{animation:none;opacity:1}
}