/* Wolf Creek Showcase · Flooring */

#demo-root.pgrid{grid-auto-flow:dense}
#demo-root.pgrid>.item.w2{grid-column:span 2}
@media (max-width:640px){#demo-root.pgrid>.item.w2{grid-column:auto}}
#demo-root.pgrid>.item .stage{flex:1 1 auto;padding:22px 20px}
.pg{container-type:inline-size;width:100%;color:#f4f7ff;font:500 13px/1.4 "Segoe UI",system-ui,-apple-system,sans-serif}
.pg button{font:inherit}
.pg :focus-visible{outline:2px solid #00e5ff;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.pg *,.pg *::before,.pg *::after{animation:none!important;transition:none!important}}

/* 01 Plank roll-out install */
.fl1{display:grid;gap:12px;justify-items:center}
.fl1-floor{position:relative;width:100%;max-width:340px;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#141a26;box-shadow:inset 0 0 0 1px #263044}
.fl1-p{position:absolute;height:calc(100%/6);--w1:#b07a45;--w2:#c99161;--w3:#9a6638;background:repeating-linear-gradient(90deg,rgba(0,0,0,.10) 0 1px,transparent 1px 7px),repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 2px,transparent 2px 13px),linear-gradient(90deg,var(--w1),var(--w2) 40%,var(--w1) 70%,var(--w3));
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.35),inset 1px 0 0 rgba(0,0,0,.25);transform:translateY(-140%) rotate(-4deg);opacity:0;
  animation:fl1drop .45s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes fl1drop{to{transform:none;opacity:1}}
.fl1-btn{border:0;border-radius:999px;padding:8px 14px;background:#22c55e;color:#06210f;font-weight:800;cursor:pointer}

/* 02 Herringbone flip reveal */
.fl2{display:grid;gap:10px;justify-items:center}
.fl2-grid{position:relative;width:100%;max-width:320px;aspect-ratio:1;overflow:hidden;border-radius:10px;background:#3a2a1c}
.fl2-t{position:absolute;width:30%;height:10%;perspective:400px}
.fl2-t i{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,1.3,.5,1)}
.fl2-t i::before,.fl2-t i::after{content:"";position:absolute;inset:0;backface-visibility:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.35)}
.fl2-t i::before{--w1:#7a5230;--w2:#8d6039;--w3:#6a4527;background:repeating-linear-gradient(90deg,rgba(0,0,0,.10) 0 1px,transparent 1px 7px),repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 2px,transparent 2px 13px),linear-gradient(90deg,var(--w1),var(--w2) 40%,var(--w1) 70%,var(--w3))}
.fl2-t i::after{--w1:#d9c3a0;--w2:#e8d6b8;--w3:#c9b18b;background:repeating-linear-gradient(90deg,rgba(0,0,0,.10) 0 1px,transparent 1px 7px),repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 2px,transparent 2px 13px),linear-gradient(90deg,var(--w1),var(--w2) 40%,var(--w1) 70%,var(--w3));transform:rotateX(180deg)}
.fl2.on .fl2-t i{transform:rotateX(180deg)}
.fl2-hint{color:#93a0b8;font:700 11px/1 ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase}

/* 03 Finish sheen sweep */
.fl3{display:grid;gap:12px;justify-items:center}
.fl3-board{position:relative;width:100%;max-width:340px;height:120px;border-radius:8px;overflow:hidden;--g:.35;
  --w1:#b98a5a;--w2:#cfa173;--w3:#a47546;background:repeating-linear-gradient(90deg,rgba(0,0,0,.10) 0 1px,transparent 1px 7px),repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 2px,transparent 2px 13px),linear-gradient(90deg,var(--w1),var(--w2) 40%,var(--w1) 70%,var(--w3));box-shadow:0 10px 30px rgba(0,0,0,.45)}
.fl3-sheen{position:absolute;inset:-40% auto -40% -40%;width:40%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,var(--g)),transparent);animation:fl3 2.8s ease-in-out infinite}
@keyframes fl3{to{left:130%}}
.fl3-opts{display:flex;gap:6px}
.fl3-opts button{border:1px solid #2b3550;background:#141a26;color:#cbd5e1;border-radius:999px;padding:6px 12px;cursor:pointer;font-weight:700}
.fl3-opts button[aria-pressed=true]{background:#f4f7ff;color:#0b0f17}

/* 04 Click-lock snap */
.fl4{display:grid;gap:12px;justify-items:center}
.fl4-row{position:relative;width:100%;max-width:340px;height:70px}
.fl4-p{position:absolute;top:15px;height:40px;width:46%;border-radius:4px;--w1:#a87447;--w2:#c08b5c;--w3:#91613a;background:repeating-linear-gradient(90deg,rgba(0,0,0,.10) 0 1px,transparent 1px 7px),repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 2px,transparent 2px 13px),linear-gradient(90deg,var(--w1),var(--w2) 40%,var(--w1) 70%,var(--w3));box-shadow:0 6px 16px rgba(0,0,0,.45)}
.fl4-p.a{left:0}
.fl4-p.b{left:54%;transition:left .5s cubic-bezier(.5,0,.3,1),transform .5s}
.fl4-tongue{position:absolute;right:-10px;top:12px;width:10px;height:16px;background:#91613a;border-radius:0 3px 3px 0}
.fl4-groove{position:absolute;left:0;top:12px;width:4px;height:16px;background:#3a2615}
.fl4.lock .fl4-p.b{left:calc(46% + 1px)}
.fl4.lock .fl4-row::after{content:"";position:absolute;left:46%;top:35px;width:8px;height:8px;margin:-4px;border-radius:50%;
  box-shadow:0 0 0 0 rgba(34,197,94,.9);animation:fl4p .6s .45s ease-out}
@keyframes fl4p{to{box-shadow:0 0 0 40px rgba(34,197,94,0)}}
.fl4-btn{border:0;border-radius:999px;padding:8px 14px;background:#f59e0b;color:#1f1300;font-weight:800;cursor:pointer}
.fl4-msg{min-height:16px;color:#22c55e;font:800 12px/1 ui-monospace,monospace;letter-spacing:.08em}

/* 05 Room floor swap */
.fl5{display:grid;gap:10px;justify-items:center}
.fl5-room{position:relative;width:100%;max-width:340px;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:#d9d4cb;perspective:500px}
.fl5-wall{position:absolute;inset:0 0 45% 0;background:linear-gradient(#e7e2d8,#cfc9bd)}
.fl5-win{position:absolute;top:12%;left:58%;width:26%;height:26%;background:linear-gradient(#bfe3ff,#e9f6ff);border:4px solid #fff;border-radius:2px}
.fl5-floor{position:absolute;left:-30%;right:-30%;bottom:-20%;height:85%;transform:rotateX(62deg);transform-origin:bottom;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.18) 0 1px,transparent 1px 12%),repeating-linear-gradient(90deg,rgba(0,0,0,.10) 0 1px,transparent 1px 7px),repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 2px,transparent 2px 13px),linear-gradient(90deg,var(--w1),var(--w2) 40%,var(--w1) 70%,var(--w3));transition:filter .5s,background-color .5s}
.fl5-sofa{position:absolute;left:10%;bottom:14%;width:38%;height:22%;border-radius:10px 10px 4px 4px;background:#3c4a64;box-shadow:0 8px 14px rgba(0,0,0,.35)}
.fl5-chips{display:flex;gap:8px}
.fl5-chips button{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer;background:var(--c)}
.fl5-chips button[aria-checked=true]{border-color:#f4f7ff;box-shadow:0 0 0 3px #7c5cff}
.fl5-name{color:#cbd5e1;font-weight:700}

/* 06 Stain rag wipe */
.fl6{display:grid;gap:10px;justify-items:center}
.fl6-c{width:100%;max-width:340px;height:auto;border-radius:8px;touch-action:none;cursor:crosshair;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.fl6-row{display:flex;gap:12px;align-items:center;color:#93a0b8;font:700 11px/1 ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}
.fl6-reset{border:1px solid #2b3550;background:#141a26;color:#cbd5e1;border-radius:999px;padding:6px 10px;cursor:pointer}

/* 07 Carpet pile brush */
.fl7{display:grid;gap:10px;justify-items:center}
.fl7-c{width:100%;max-width:340px;height:auto;border-radius:10px;touch-action:none;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.fl7-hint{color:#93a0b8;font:700 11px/1 ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase}

/* 08 Tile & grout draw-in */
.fl8{display:grid;gap:10px;justify-items:center}
.fl8-s{width:100%;max-width:340px;border-radius:10px;background:#cfc8bc}
.fl8-s rect{opacity:0;transform-box:fill-box;transform-origin:center;animation:fl8t .5s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes fl8t{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.fl8-s line{stroke:#8f877a;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:400;stroke-dashoffset:400;animation:fl8g 1.2s ease forwards}
@keyframes fl8g{to{stroke-dashoffset:0}}
.fl8-btn{border:0;border-radius:999px;padding:8px 14px;background:#60a5fa;color:#071426;font-weight:800;cursor:pointer}

/* 09 Square-footage fill calculator */
.fl9{display:grid;gap:10px;justify-items:center}
.fl9-in{display:flex;gap:10px}
.fl9-in label{display:grid;gap:4px;color:#93a0b8;font:700 10px/1 ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase}
.fl9-in input{width:80px;padding:7px 8px;border-radius:8px;border:1px solid #2b3550;background:#0b0f17;color:#f4f7ff;font:700 14px/1 ui-monospace,monospace}
.fl9-room{position:relative;width:min(100%,300px);aspect-ratio:var(--ar,1.17);border:2px dashed #3b4766;border-radius:6px;overflow:hidden;transition:aspect-ratio .3s}
.fl9-fill{position:absolute;inset:0;--w1:#b98a5a;--w2:#cfa173;--w3:#a47546;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 1px,transparent 1px 12px),repeating-linear-gradient(90deg,rgba(0,0,0,.10) 0 1px,transparent 1px 7px),repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 2px,transparent 2px 13px),linear-gradient(90deg,var(--w1),var(--w2) 40%,var(--w1) 70%,var(--w3));clip-path:inset(0 100% 0 0);transition:clip-path .9s cubic-bezier(.5,0,.2,1)}
.fl9-out{text-align:center;color:#cbd5e1;font:600 13px/1.5 ui-monospace,monospace}
.fl9-out b{color:#22c55e;font-size:16px}

/* 10 Peel back to hardwood */
.fl10{display:grid;justify-items:center}
.fl10-stage{position:relative;width:100%;max-width:340px;aspect-ratio:4/3;border-radius:10px;overflow:hidden;--k:22%}
.fl10-wood{position:absolute;inset:0;--w1:#a8703f;--w2:#c28b57;--w3:#8f5c32;background:repeating-linear-gradient(0deg,rgba(0,0,0,.3) 0 1px,transparent 1px 16%),repeating-linear-gradient(90deg,rgba(0,0,0,.10) 0 1px,transparent 1px 7px),repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 2px,transparent 2px 13px),linear-gradient(90deg,var(--w1),var(--w2) 40%,var(--w1) 70%,var(--w3))}
.fl10-carpet{position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.08),transparent 60%),
  repeating-conic-gradient(#8c6f86 0 25%,#836680 0 50%) 0 0/4px 4px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--k)),calc(100% - var(--k)) 100%,0 100%)}
.fl10-curl{position:absolute;inset:0;pointer-events:none;filter:drop-shadow(-4px -4px 6px rgba(0,0,0,.5))}
.fl10-curl::before{content:"";position:absolute;inset:0;background:linear-gradient(315deg,#6b5468 0%,#cbb8c7 60%,#efe6ec 100%);
  clip-path:polygon(100% calc(100% - var(--k)),calc(100% - var(--k)) 100%,calc(100% - var(--k)) calc(100% - var(--k)))}
.fl10-r{position:absolute;inset:10px 10px auto 10px;width:calc(100% - 20px);accent-color:#f59e0b}

/* Cross-category flooring demos, shown live through embed.html */
.fl-embed{padding:0;overflow:hidden}
.fl-embed iframe{display:block;width:100%;border:0;background:#0a0d16;border-radius:inherit}
.item .lab .fl-src{margin-left:8px;font:600 11px/1 var(--mono);color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 8px;white-space:nowrap}
.item .lab .fl-src:hover{color:var(--ink);text-decoration:none;border-color:var(--accent2)}