/* All Stiles: Discover + Tile Finder "cinematic motion" (Oct 2026, owner's choice). Loaded last on those two pages, on top
   of as-discover.css and as-discover-stage.css. Room photos always end whole (the wipe only reveals them); only the
   swatches and the blurred backdrop fill their space. Everything settles with reduced motion. */

/* ---------- Discover: one screen, the fan shuffles through the looks on its own (owner, Oct 22) ---------- */
.dc-page.dc-cinema{overflow:clip}
.dcx{position:relative;padding:0!important;margin:0}
.dcx-stage{position:relative;height:calc(100svh - 88px);min-height:600px;overflow:hidden;display:flex;flex-direction:column;padding:26px clamp(16px,4.2vw,80px) 22px;box-sizing:border-box}
.dcx .dc-stage-bg i{filter:blur(22px) brightness(.62) saturate(1.35)}
.dcx .dc-stage-bg i.is-on{animation:dcxDrift 14s ease-in-out infinite alternate}
@keyframes dcxDrift{from{transform:scale(1.06) translate(0,0)}to{transform:scale(1.16) translate(-2%,-1.5%)}}
.dcx-head .crumbs{margin-bottom:6px}
.dcx-head h1{font-size:clamp(32px,2.7vw,44px);opacity:.9}
/* Room for the sideways name on the right */
.dcx-grid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(20px,3vw,56px);align-items:center;padding-right:clamp(90px,10vw,170px)}
.dcx-left{display:flex;flex-direction:column;justify-content:center;min-height:0;height:100%}
.dcx-copy{margin-top:clamp(18px,3.5vh,40px)}
.dcx-copy .dc-eyebrow{margin:0 0 10px;font-size:12px;letter-spacing:.3em;animation:dcxFade .6s ease both}
.dcx-copy h2{margin:0;font:400 clamp(40px,4.4vw,74px)/.98 Italiana,serif;color:var(--st-cream);text-shadow:0 4px 40px rgba(0,0,0,.4)}
.dcx-copy h2 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em}
.dcx-copy h2 .w>span{display:inline-block;animation:dcxUp .9s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * 80ms + 120ms)}
@keyframes dcxUp{from{transform:translateY(105%);opacity:0}to{transform:none;opacity:1}}
@keyframes dcxFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* The fan at its earlier (bigger) card size, fitted under the title within one screen */
.dcx .dc-fan{--cw:clamp(104px,min(10.5vw,calc((100svh - 88px - 300px) / 2.42)),200px);margin-top:auto;height:calc(var(--cw) * 5 / 3 * 1.42 + 40px)}
/* Cards fly in on arrival, then settle */
.dcx .dc-chip{opacity:0;transform:translateY(70%) rotate(0deg) scale(.8)}
.dcx.is-in .dc-chip{opacity:1;transform:rotate(var(--a));transition:transform .9s cubic-bezier(.16,1,.3,1),opacity .5s,box-shadow .3s;transition-delay:calc(var(--i) * 70ms)}
.dcx.is-in.is-settled .dc-chip{transition-delay:0s;transition-duration:.5s,.5s,.3s}
.dcx.is-in .dc-chip:hover{transform:rotate(var(--a)) translateY(-14px)}
.dcx.is-in .dc-chip.is-active{transform:rotate(var(--a)) translateY(-44px)}
/* Room photo, shown whole, wiped in; "See the collections" under it */
.dcx-photo{margin:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:26px;min-height:0;height:100%}
.dcx-ph{position:relative;display:block;line-height:0;max-width:100%}
.dcx-ph img{display:block;max-width:100%;max-height:calc(100svh - 88px - 230px);width:auto;height:auto;box-shadow:0 40px 90px rgba(0,0,0,.6);animation:dcxWipe 1.15s cubic-bezier(.77,0,.18,1) both}
.dcx-ph::after{content:'';position:absolute;inset:0;transform:translate(18px,18px);border:1px solid rgba(143,201,219,.7);z-index:-1;animation:dcxFade 1s .5s ease both}
.dcx-photo .dc-detail-go{animation:dcxFade .8s .5s ease both}
@keyframes dcxWipe{from{clip-path:inset(0 100% 0 0);transform:scale(1.04)}to{clip-path:inset(0 0 0 0);transform:none}}
/* The look's name, huge and outlined, running sideways down the right edge */
.dcx .dc-word{left:auto;bottom:auto;right:clamp(8px,1.6vw,30px);top:50%;writing-mode:vertical-rl;transform:translateY(-50%);
	font-size:clamp(70px,min(9vw,calc((100svh - 140px) / (var(--len,6) * .74))),190px);line-height:.85;-webkit-text-stroke:1px rgba(245,242,236,.32);animation:dcxWord 1.2s cubic-bezier(.16,1,.3,1) both}
@keyframes dcxWord{from{opacity:0;transform:translateY(-42%)}to{opacity:1;transform:translateY(-50%)}}
@media (max-width:900px){
.dcx-stage{height:auto;min-height:calc(100svh - 72px);padding-top:16px}
.dcx-grid{grid-template-columns:1fr;padding-right:0;align-content:start;gap:16px}
.dcx-photo{height:auto;gap:18px}
.dcx-ph img{max-height:34svh}
.dcx-copy h2{font-size:clamp(30px,8vw,44px)}
.dcx .dc-fan{--cw:clamp(70px,15vw,110px);margin-top:14px}
.dcx .dc-word{display:none}
}

/* ---------- Tile Finder: sizes drop onto the floor, colours roll in, a colour flips every size in a wave ---------- */
.tf-page .tf-band-head h2 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em}
.tf-page .tf-band-head h2 .w>span{display:inline-block;transform:translateY(105%)}
.tf-page .is-in .tf-band-head h2 .w>span,.tf-page .tf-band-head.is-in h2 .w>span{transform:none;transition:transform .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--k) * 80ms)}
.tf-shelf .tf-tile{opacity:0;transform:translateY(-55vh)}
.tf-shelf.is-in .tf-tile{opacity:1;transform:none;transition:transform .8s cubic-bezier(.34,1.35,.5,1),opacity .35s;transition-delay:calc(var(--i) * 50ms)}
/* Colour balls roll in one at a time from the right (the sizes come from the left), at the same pace as the sizes:
   --step is set by the script so the last ball lands as the last size lands. */
.tf-strips .tf-strip{opacity:0;transform:translateX(60vw)}
.tf-strips .tf-strip .tf-dot{transform:rotate(-540deg)}
.tf-strips .tf-strip .tf-strip-name{opacity:0}
.tf-strips.is-in .tf-strip{opacity:1;transform:none;transition:transform .8s cubic-bezier(.22,.9,.3,1),opacity .3s;transition-delay:calc(var(--i) * var(--step,50ms))}
.tf-strips.is-in .tf-strip .tf-dot{transform:none;transition:transform .8s cubic-bezier(.22,.9,.3,1),box-shadow .2s;transition-delay:calc(var(--i) * var(--step,50ms))}
.tf-strips.is-in .tf-strip .tf-strip-name{opacity:1;transition:opacity .4s;transition-delay:calc(var(--i) * var(--step,50ms) + 450ms)}
.tf-strips.is-settled .tf-strip,.tf-strips.is-settled .tf-strip .tf-dot,.tf-strips.is-settled .tf-strip .tf-strip-name{transition-delay:0s}
.tf-strips.is-settled .tf-strip .tf-dot{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.tf-strips.is-in .tf-strip:hover .tf-dot{transform:translateY(-6px)}
.tf-strips.is-in .tf-strip.is-on .tf-dot{transform:translateY(-8px)}
.tf-tile .tf-tile-shape{transform-style:preserve-3d}
.tf-shelf.is-flip .tf-tile-shape{animation:tfFlip .7s cubic-bezier(.4,0,.2,1) both;animation-delay:calc(var(--i) * 35ms)}
@keyframes tfFlip{0%{transform:perspective(600px) rotateY(0)}50%{transform:perspective(600px) rotateY(90deg)}100%{transform:perspective(600px) rotateY(0)}}
/* The chosen size gets a beam of light from above */
.tf-tile{position:relative}
.tf-tile::before{content:'';position:absolute;left:50%;bottom:calc(var(--h) * var(--px) + 40px);width:calc(var(--w) * var(--px) * 2.4 + 60px);height:46vh;transform:translateX(-50%) scaleY(0);transform-origin:bottom;pointer-events:none;opacity:0;
	background:linear-gradient(to top,rgba(255,240,214,.28),rgba(255,240,214,0));clip-path:polygon(38% 0,62% 0,100% 100%,0 100%);transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .4s}
.tf-tile.is-on::before{opacity:1;transform:translateX(-50%) scaleY(1)}
/* On wide screens the shelf fits, so let the drop and the light beam reach above it */
@media (min-width:1101px){.tf-shelf-scroll{overflow:visible}}

@media (prefers-reduced-motion:reduce){
.dcx .dc-stage-bg i.is-on,.dcx-copy h2 .w>span,.dcx-copy .dc-eyebrow,.dcx-ph img,.dcx-ph::after,.dcx-photo .dc-detail-go,.dcx .dc-word,.tf-shelf.is-flip .tf-tile-shape{animation:none}
.dcx .dc-chip,.tf-shelf .tf-tile,.tf-strips .tf-strip,.tf-strips .tf-strip .tf-dot,.tf-strips .tf-strip .tf-strip-name,.tf-page .tf-band-head h2 .w>span{opacity:1;transform:none;transition:none}
.dcx .dc-chip{transform:rotate(var(--a))}
}