/* Entrance guide, kept minimal: a hollow ring on the door and a hairline cue with one word. Shown once the door is open for
   visitors (not during the teaser); journey.js fades it as soon as the walk starts. */
.door-guide{position:absolute;inset:0;z-index:6;pointer-events:none;color:#2a2722}
body[data-teaser=true] .door-guide{display:none}
.guide-inner{position:absolute;inset:0;animation:guideIn 1.1s cubic-bezier(.2,.7,.2,1) .9s both}
@keyframes guideIn{from{opacity:0}}
/* The ring: hollow, breathing, with one soft ripple */
.guide-tap{position:absolute;left:50%;top:57%;width:44px;height:44px;margin:-22px 0 0 -22px}
.guide-tap b{position:absolute;inset:14px;border:1.5px solid currentColor;border-radius:50%;opacity:.7;animation:guideBreathe 3s ease-in-out 1.4s infinite}
.guide-tap i{position:absolute;inset:14px;border:1px solid currentColor;border-radius:50%;opacity:0;animation:guideRing 3s cubic-bezier(.2,.6,.3,1) 1.4s infinite}
@keyframes guideBreathe{0%,100%{transform:scale(1)}40%{transform:scale(.82)}60%{transform:scale(1.06)}}
@keyframes guideRing{0%,38%{opacity:0;transform:scale(1)}45%{opacity:.5}100%{opacity:0;transform:scale(2.6)}}
/* The cue: a hairline with a dot travelling along it (up for swipe, down for scroll), one word underneath */
.guide-cue{position:absolute;left:50%;bottom:6%;display:grid;justify-items:center;gap:10px;transform:translateX(-50%)}
.cue-line{position:relative;width:1.5px;height:46px;background:linear-gradient(transparent,currentColor 30%,currentColor 70%,transparent);opacity:.6}
.cue-line i{position:absolute;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:currentColor;opacity:0}
.cue-line i::after{content:'';position:absolute;left:1.5px;width:2px;height:16px;border-radius:2px}
.is-swipe .cue-line i{bottom:0;animation:cueUp 2.4s cubic-bezier(.5,0,.2,1) 1.4s infinite}
.is-swipe .cue-line i::after{top:100%;background:linear-gradient(currentColor,transparent)}
.is-scroll .cue-line i{top:0;animation:cueDown 2.4s cubic-bezier(.5,0,.2,1) 1.4s infinite}
.is-scroll .cue-line i::after{bottom:100%;background:linear-gradient(transparent,currentColor)}
@keyframes cueUp{0%{opacity:0;transform:translateY(0)}15%{opacity:1}70%{opacity:1;transform:translateY(-37px)}85%,100%{opacity:0;transform:translateY(-37px)}}
@keyframes cueDown{0%{opacity:0;transform:translateY(0)}15%{opacity:1}70%{opacity:1;transform:translateY(37px)}85%,100%{opacity:0;transform:translateY(37px)}}
.cue-word{font:600 11px 'DM Sans',sans-serif;letter-spacing:.32em;text-transform:uppercase;padding-left:.32em;opacity:1;white-space:nowrap;text-shadow:0 0 6px #e4dfd4,0 0 12px #e4dfd4}
.entry-layer .door-cue{display:none}

/* Gesture hints (hints.js): one dark pill at a time, fading in and out, with an animated glyph and a few words */
.gesture-hint{position:absolute;left:50%;top:60%;z-index:30;display:flex;align-items:center;gap:12px;padding:10px 18px 10px 13px;border-radius:999px;background:#191b17d9;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 12px 34px #0003;color:#f4f1e8;font:600 10.5px 'DM Sans',sans-serif;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,calc(-50% + 10px)) scale(.96);transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}
.gesture-hint.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.gesture-hint .hint-glyph{width:24px;height:24px}
#tour>.gesture-hint{position:fixed}
.hint-glyph{position:relative;display:block;width:22px;height:22px;flex:none}
.hint-glyph b{position:absolute;width:5px;height:5px;border-radius:50%;background:currentColor}
/* Swipe: a hairline cross; the dot slides left, back, up, back */
.g-swipe::before,.g-swipe::after{content:'';position:absolute;background:currentColor;opacity:.3}
.g-swipe::before{left:0;right:0;top:50%;height:1px}
.g-swipe::after{top:0;bottom:0;left:50%;width:1px}
.g-swipe b{left:8.5px;top:8.5px;animation:hintSwipe 3.2s cubic-bezier(.5,0,.2,1) infinite}
@keyframes hintSwipe{0%,100%{transform:none}20%,28%{transform:translateX(-8px)}45%{transform:none}65%,73%{transform:translateY(-8px)}90%{transform:none}}
/* Scroll: a dot falling along a hairline */
.g-scroll::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;background:currentColor;opacity:.3}
.g-scroll b{left:8.5px;top:0;animation:hintScroll 2.2s cubic-bezier(.5,0,.2,1) infinite}
@keyframes hintScroll{0%{opacity:0;transform:none}15%{opacity:1}70%{opacity:1;transform:translateY(17px)}85%,100%{opacity:0;transform:translateY(17px)}}
/* Pinch: two dots closing in from opposite corners of a fading frame */
.g-pinch::before{content:'';position:absolute;inset:2px;border:1px solid currentColor;border-radius:4px;opacity:.3;animation:hintFrame 2.6s cubic-bezier(.5,0,.2,1) infinite}
.g-pinch b:first-child{left:0;top:0;animation:hintPinchA 2.6s cubic-bezier(.5,0,.2,1) infinite}
.g-pinch b:last-child{right:0;bottom:0;animation:hintPinchB 2.6s cubic-bezier(.5,0,.2,1) infinite}
@keyframes hintPinchA{0%,15%,100%{transform:none}50%,65%{transform:translate(6px,6px)}}
@keyframes hintPinchB{0%,15%,100%{transform:none}50%,65%{transform:translate(-6px,-6px)}}
@keyframes hintFrame{0%,15%,100%{transform:none}50%,65%{transform:scale(.55)}}
/* Sideways swipe: the dot slides left along a hairline, twice */
.g-side::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;opacity:.35}
.g-side b{left:17px;top:9.5px;animation:hintSide 1.9s cubic-bezier(.5,0,.2,1) infinite}
@keyframes hintSide{0%{opacity:0;transform:none}15%{opacity:1}65%{opacity:1;transform:translateX(-15px)}80%,100%{opacity:0;transform:translateX(-15px)}}
/* Swipe up: the dot rises along a hairline */
.g-up::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:1px;background:currentColor;opacity:.35}
.g-up b{left:9.5px;bottom:0;animation:hintUp 1.9s cubic-bezier(.5,0,.2,1) infinite}
@keyframes hintUp{0%{opacity:0;transform:none}15%{opacity:1}65%{opacity:1;transform:translateY(-17px)}80%,100%{opacity:0;transform:translateY(-17px)}}
/* Tap / double tap: a dot pressing with a ring, once or twice */
.g-tap b,.g-dtap b{left:50%;top:50%;margin:-3px 0 0 -3px;width:6px;height:6px}
.g-tap b{animation:hintPress 1.8s ease-in-out infinite}
.g-tap::after,.g-dtap::after{content:'';position:absolute;inset:3px;border:1.5px solid currentColor;border-radius:50%;opacity:0}
.g-tap::after{animation:hintRing 1.8s ease-out infinite}
.g-dtap b:first-child{animation:hintPress2 1.9s ease-in-out infinite}
.g-dtap b:last-child{display:none}
.g-dtap::after{animation:hintRing2 1.9s ease-out infinite}
@keyframes hintPress{0%,30%,100%{transform:scale(1)}15%{transform:scale(.6)}}
@keyframes hintRing{0%,10%{opacity:0;transform:scale(.4)}20%{opacity:.8}60%,100%{opacity:0;transform:scale(1.2)}}
@keyframes hintPress2{0%,40%,100%{transform:scale(1)}10%,28%{transform:scale(.6)}19%{transform:scale(1)}}
@keyframes hintRing2{0%,6%{opacity:0;transform:scale(.4)}12%{opacity:.8}20%{opacity:.2;transform:scale(.8)}26%{opacity:.8;transform:scale(.6)}60%,100%{opacity:0;transform:scale(1.25)}}
/* Bigger touch target behaviour: no double-tap zoom on the pieces */
.tee-image-button,.tee3d{touch-action:manipulation}
@media(prefers-reduced-motion:reduce){.guide-inner,.guide-tap b,.guide-tap i,.cue-line i,.hint-glyph b,.g-pinch::before,.hint-glyph::after{animation:none}.gesture-hint{transition:none}.guide-tap i{display:none}.cue-line i{opacity:1}}

/* /journey tour: the same ring on its doors, and the hint under the button fits the device */
.arch .tour-tap{top:56%;z-index:3;color:#2a2722;animation:guideFade .9s ease 1s both}
@keyframes guideFade{from{opacity:0}}
.hint-mouse{display:none}
@media(hover:hover) and (pointer:fine){.hint-touch{display:none}.hint-mouse{display:inline}}
@media(prefers-reduced-motion:reduce){.arch .tour-tap{animation:none}}
.shop-pill .ico-search{width:14px;height:14px;vertical-align:-3px}

/* Colourways in the walkthrough and the /journey tour: two-tone swatches (shirt + print) under each piece */
.tee-swatches,.tee3d-colors{display:flex;justify-content:center;gap:7px;margin-top:9px}
.tee-swatch,.tee3d-swatch{position:relative;width:18px;height:18px;padding:0;border:0;border-radius:50%;background:linear-gradient(135deg,var(--swatch) 50%,var(--print) 50%);box-shadow:inset 0 0 0 1px #0002,0 1px 3px #0002;cursor:pointer;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s}
.tee-swatch::before,.tee3d-swatch::before{content:'';position:absolute;inset:-6px}
.tee-swatch:hover,.tee3d-swatch:hover{transform:scale(1.12)}
.tee-swatch[aria-pressed=true],.tee3d-swatch[aria-pressed=true]{box-shadow:inset 0 0 0 1px #0002,0 0 0 2px #f6f5f0,0 0 0 3.2px #2f3a28}
.tee-swatch.is-out{opacity:.35}
.journey-tee .tee-colour{display:block;font-size:10.5px;color:#6f7563;margin-top:1px}
.scene-collection .tee3d-colors{display:flex!important;margin-top:6px}
.theme-beyond .tee3d-swatch[aria-pressed=true],.theme-court .tee3d-swatch[aria-pressed=true]{box-shadow:inset 0 0 0 1px #fff3,0 0 0 2px #1d1f1c,0 0 0 3.2px #f1eee6}
@media(max-width:700px){.tee-swatch,.tee3d-swatch{width:16px;height:16px}.tee-swatches{gap:8px;margin-top:8px}}
/* Overview (pinched / zoomed out): compact labels, number and name only; they scale from the top so they never overlap */
.journey-tee.on-track .tee-name{transform-origin:50% 0}
#journey-tees.is-overview .tee-colour,#journey-tees.is-overview .tee-name em,#journey-tees.is-overview .tee-swatches{display:none}
#journey-tees.is-overview .tee-name{padding:6px 12px}
#journey-tees.is-overview .tee-name{max-width:var(--ov-label-max,220px);white-space:normal;text-wrap:balance}
.theme-beyond .tee3d-swatch,.theme-court .tee3d-swatch{box-shadow:inset 0 0 0 1px #ffffff47,0 1px 3px #0006}
/* On the dark tour scenes the hint turns light so it stands out */
#tour[data-tone=dark]>.gesture-hint{background:#f4f1e8eb;color:#1d1f1c;box-shadow:0 12px 34px #0007}
/* Hints placed off the piece (hints.js place): smaller, and never over the print. */
.gesture-hint.at-corner,.gesture-hint.at-edge,.gesture-hint.at-foot,.gesture-hint.at-sides span{padding:7px 12px 7px 9px;gap:8px;font-size:9.5px;letter-spacing:.16em}
.gesture-hint.at-corner .hint-glyph,.gesture-hint.at-edge .hint-glyph,.gesture-hint.at-foot .hint-glyph{width:18px;height:18px}
.gesture-hint.at-corner{transform:translate(-100%,calc(-100% + 6px)) scale(.96)}.gesture-hint.at-corner.is-on{transform:translate(-100%,-100%)}
.gesture-hint.at-edge{left:auto;right:0;border-radius:999px 0 0 999px;padding-right:14px;transform:translate(100%,-50%)}.gesture-hint.at-edge.is-on{transform:translate(0,-50%)}
.gesture-hint.at-foot{top:auto;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 62px);transform:translate(-50%,10px)}.gesture-hint.at-foot.is-on{transform:translate(-50%,0)}
#tour>.gesture-hint.at-sides{inset:0;transform:none;padding:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:inherit}
.gesture-hint.at-sides .hint-glyph{display:none}
.gesture-hint.at-sides::before,.gesture-hint.at-sides::after{content:'';position:absolute;top:22%;bottom:22%;width:min(22vw,160px);animation:hintEdge 1.6s ease-in-out infinite}
.gesture-hint.at-sides::before{left:0;background:radial-gradient(ellipse 60% 50% at 0 50%,#ff5a3655,transparent 70%)}
.gesture-hint.at-sides::after{right:0;background:radial-gradient(ellipse 60% 50% at 100% 50%,#ff5a3655,transparent 70%);animation-delay:.8s}
.gesture-hint.at-sides span{position:absolute;left:50%;bottom:calc(max(16px,env(safe-area-inset-bottom)) + 62px);transform:translateX(-50%);border-radius:999px;background:#191b17d9;color:#f4f1e8;padding:7px 14px}
#tour[data-tone=dark]>.gesture-hint.at-sides span{background:#f4f1e8eb;color:#1d1f1c}
@keyframes hintEdge{0%,100%{opacity:.15}50%{opacity:1}}
@media (min-width:761px){.gesture-hint.at-foot,.gesture-hint.at-sides span{bottom:96px}}
@media(prefers-reduced-motion:reduce){.gesture-hint.at-sides::before,.gesture-hint.at-sides::after{animation:none;opacity:.6}}