/* Homepage hero sample: a fixed loop of sample pets, right across the page.
   The pet's face photo, an arrow, then the same pet standing on the page itself
   in bricks, 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).
   Phones show the bricks alone, edge to edge. */
.hero-stage{min-width:0;width:100%;position:relative;
  --stage-side:44px;
  --stage-height:clamp(340px,min(36vw,100svh - 420px),520px);
  --photo:min(27vw,calc(var(--stage-height)*.76));--photo-frame:clamp(6px,.7vw,10px);
  --quiet-fill:#F6D98A;--quiet-thumb:#FFC12E;--quiet-ring:#A87700;--quiet-track:#ECEEF3}
.stage-row{position:relative;display:grid;grid-template-columns:var(--photo) clamp(60px,9vw,132px) minmax(0,1fr);align-items:center;column-gap:clamp(8px,1.6vw,24px)}

/* The photo: a white-edged print, leaning a different way for each pet. */
.stage-photo{position:relative;z-index:2;width:var(--photo);aspect-ratio:1;border-radius:clamp(22px,2.6vw,38px);background:#fff;box-shadow:0 26px 54px rgba(5,14,66,.4),0 3px 0 rgba(5,14,66,.2);transform:rotate(var(--tilt,-4deg));transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.stage-photo img{position:absolute;inset:var(--photo-frame);width:calc(100% - 2*var(--photo-frame));height:calc(100% - 2*var(--photo-frame));object-fit:cover;border-radius:clamp(16px,2vw,29px);opacity:0;transition:opacity .4s ease}
.stage-photo img.is-on{opacity:1}

/* The arrow draws itself from the photo to the bricks (sales-demo.mjs). */
.stage-arrow{display:block;width:100%;height:auto;overflow:visible;fill:none;stroke:var(--site-accent,#FFCE55);stroke-width:11;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 5px 0 rgba(5,14,66,.22))}
.arrow-line{stroke-dasharray:1}
.arrow-head{transform-box:fill-box;transform-origin:center}

.stage-glow{position:absolute;left:50%;top:44%;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: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:var(--stage-height);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:pan-y;opacity:0;transition:opacity .45s ease}
.hero-stage[data-state=ready] .sample-viewport canvas{opacity:1}
/* One pet fades as the next one's photo arrives; the new pet then stacks up. */
.hero-stage[data-state=ready][data-swapping] .sample-viewport canvas{opacity:0;transition-duration:.16s}
.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]) .drag-hint{opacity:1}
.hero-stage[data-touched] .drag-hint{opacity:0;transform:translate(-50%,8px)}

.stage-loader{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);opacity:0;transition:opacity .25s ease;pointer-events:none}
/* 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{opacity:1}

/* 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}

.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){display:none}

/* Tablets are taller than they are wide: the pet and its photo can be too. */
@media(max-width:1000px){
  .hero-stage{--stage-height:clamp(340px,50vw,460px);--photo:30vw}
}
@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}
}
@media(prefers-reduced-motion:reduce){
  .sample-viewport canvas,.drag-hint,.stage-photo,.stage-photo img{transition:none}
}

/* Phones: the bricks alone. The canvas reaches both screen edges; cuts float above the model. */
@media(max-width:700px){
  .hero-stage{width:calc(100% + 40px);margin-inline:-20px}
  .stage-row{display:block}
  .stage-photo,.stage-arrow{display:none}
  .stage-grid{display:block;margin:0}
  .sample-viewport{height:clamp(350px,110vw,500px)}
  .stage-layers{position:absolute;z-index:2;right:6px;top:20px;bottom:64px;height:auto;width:44px;align-self:auto}
  .stage-slice{position:absolute;z-index:2;bottom:10px;left:20px;right:54px;padding:0;min-height:44px}
  .drag-hint{bottom:62px}
}