/* The product card in the homepage journey (journey-cards.js): under the tees row and in the drop room, where the
   per-piece name pills and the Discover pill used to be. The card looks as it does in the room (product-card.css). */
.journey-card{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 96px);z-index:12;transform:translateX(-50%)}
.journey-card[hidden]{display:none}
/* The row: names and dots live in the card now (the pinch overview keeps its names); the pieces sit a little higher. */
#journey-tees:not(.is-overview) .journey-tee.on-track :is(.tee-name,.tee-swatches){display:none}
.gallery-layer:has(#journey-tees.is-overview) .tees-card{opacity:0;pointer-events:none}
.tees-card{transition:opacity .35s ease}
/* The shirts take all the room above the card (journey-cards.js measures the card's top into --tees-card-top): the shirt
   itself is ~82% of its photo's box, so the box is sized for the shirt to fit between 24px under the top and 40px above
   the card (that gap holds its shadow), on phones as wide as the screen allows, and it stands right above the card. */
.journey-tee.on-track{--free:calc(var(--tees-card-top,calc(100vh - 290px)) - 64px);--w:min(calc(30vw/.82),calc(var(--free)/.82),620px);max-width:none!important;top:calc(var(--free) + 24px - var(--w)*.91)!important}
@media(max-width:700px){.journey-tee.on-track{--w:min(calc((100vw - 16px)/.82),calc(var(--free)/.82))}}
/* Under each shirt a soft shadow, as if it hovered: a radial fade to nothing inside its own box, so no edge ever shows;
   it breathes with the shirt's float (narrower and lighter as the shirt rises). */
.journey-tee.on-track::after,.journey-layer.drop-layer .drop-sculpture::after{content:'';position:absolute;left:24%;right:24%;top:calc(var(--w)*.935);height:calc(var(--w)*.075);
  background:radial-gradient(closest-side,#1a161166,#1a161126 55%,#1a161100);pointer-events:none;z-index:-1}
.journey-tee.on-track::after{animation:teeShadow calc(6s + var(--i,0) * .7s) ease-in-out calc(var(--i,0) * -1.3s) infinite}
.journey-layer.drop-layer .drop-sculpture::after{animation:dropShadow 7s ease-in-out infinite}
@keyframes teeShadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.88);opacity:.7}}
@keyframes dropShadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.86);opacity:.66}}
@media(prefers-reduced-motion:reduce){.journey-tee.on-track::after,.journey-layer.drop-layer .drop-sculpture::after{animation:none}}
/* The drop room: the card replaces the Discover pill; the piece sits above it. */
.journey-layer.drop-layer .drop-discover{display:none!important}
.journey-layer.drop-layer .drop-sculpture{--free:calc(var(--drop-card-top,calc(100vh - 290px)) - 64px);--w:min(calc(40vw/.82),calc(var(--free)/.82),680px);width:var(--w);max-width:none;top:calc(var(--free) + 24px - var(--w)*.41)} /* its top is its centre (it is translated -50%): the shirt stands right above the card */
@media(max-width:700px){.journey-layer.drop-layer .drop-sculpture{--w:min(calc((100vw - 16px)/.82),calc(var(--free)/.82))}}
@media(max-height:700px){.journey-card{bottom:calc(env(safe-area-inset-bottom) + 84px)}#scroll-note{display:none}} /* no room under the card on short phones */
/* Wide screens, every piece on screen: the one on the card stays bright, the others step back a little. */
#journey-tees.is-picking .journey-tee.on-track .tee-image-button{transition:opacity .35s ease,filter .35s ease}
#journey-tees.is-picking:not(.is-overview) .journey-tee.on-track:not(.is-carded) .tee-image-button{opacity:.82;filter:saturate(.85) brightness(.96)}
/* No words above the pieces: the shirts take the room, the card below names the collection. The headings stay for screen
   readers and search; "Explore collection" goes (the dock's Shop leads there). */
.journey-layer :is(.gallery-copy,.drop-copy){position:absolute!important;width:1px!important;height:1px!important;margin:0!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;pointer-events:none!important}
.gallery-copy .gallery-explore{display:none!important}
/* One float for every piece on the track (same period, same phase, the shadow with it), so the next piece always
   arrives at the same height as the one before. */
.journey-tee.on-track .tee-image-button,.journey-tee.on-track::after{animation-duration:6.5s!important;animation-delay:0s!important}

/* A shirt being pinch-zoomed (product-card.js ftnShirtZoom) rises over the card while the fingers are on it. */
#journey-tees:has(.is-zooming){z-index:13}