/* =========================================================
   Where To Eat — homepage motion layer (front page only)
   Uses the tokens from main.css. Everything degrades to a
   complete, static page without JS or with reduced motion.
   ========================================================= */

/* ---- Scroll progress ---- */
.wte-progress { position: fixed; left: 0; top: 0; width: 100%; height: 3px; z-index: 101; transform-origin: 0 50%; transform: scaleX(0); background: var(--orange); pointer-events: none; }

/* ---- Hero with craving bowl ---- */
.wte-hero--motion { overflow: hidden; }
.wte-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1rem, 3vw, 3rem); align-items: center; }
.wte-hero--motion .wte-hero__inner { max-width: none; }
/* The H1, intro and search are deliberately not animated: they are the LCP
   candidates and must paint immediately. Motion starts below them. */

.wte-crave { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.wte-crave__q { font-weight: 600; margin: 0 0 .6rem; }
.wte-crave__opts { display: flex; flex-wrap: wrap; gap: .5rem; }
.wte-crave__opt { min-height: 44px; padding: 0 1.1rem; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font-weight: 600; font-size: .95rem; transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease); }
.wte-crave__opt:hover { border-color: var(--orange); color: var(--orange-dark); }
.wte-crave__opt:active { transform: scale(.97); }
.wte-crave__opt[aria-pressed="true"] { background: var(--orange-dark); border-color: var(--orange-dark); color: #fff; }
.wte-crave__link { display: inline-block; margin-top: .9rem; }

.wte-bowl { position: relative; width: 100%; max-width: 600px; aspect-ratio: 1 / 1; justify-self: center; touch-action: pan-y; }
.wte-bowl__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; opacity: 0; transition: opacity .6s var(--ease); }
.wte-bowl__canvas:active { cursor: grabbing; }
.wte-bowl.is-3d .wte-bowl__canvas { opacity: 1; }
.wte-bowl__fallback { position: absolute; inset: 14%; width: 72%; height: auto; transition: opacity .5s var(--ease); }
.wte-bowl.is-3d .wte-bowl__fallback { opacity: 0; }
.wte-bowl__label { position: absolute; top: 4%; right: 2%; max-width: 230px; background: rgba(255,255,255,.88); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 14px; padding: .65rem .9rem; box-shadow: var(--shadow); line-height: 1.4; }
.wte-bowl__label b { display: block; font-family: var(--font-display); font-size: 1.1rem; }
.wte-bowl__label span { font-size: .85rem; color: var(--ink-soft); }
.wte-bowl__hint { position: absolute; left: 50%; bottom: 2%; transform: translateX(-50%); margin: 0; font-size: .82rem; color: var(--muted-strong); white-space: nowrap; opacity: 0; transition: opacity .4s; }
.wte-bowl.is-3d .wte-bowl__hint { opacity: 1; }
.wte-bowl.is-touched .wte-bowl__hint { opacity: 0; }

/* ---- Story (sticky three-step) ---- */
.wte-story__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 5vw, 5rem); }
.wte-story__steps { list-style: none; margin: 0; padding: 0; }
.wte-story__step { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; transition: opacity .4s var(--ease); }
/* Inactive steps are greyed with an AA colour, not faded with opacity (which drops them to ~1.5:1 contrast). */
.js-motion .wte-story__step:not(.is-on) :is(h3, p, .wte-story__n, .wte-link-arrow) { color: var(--muted-strong); }
.js-motion .wte-story__step :is(h3, p, .wte-story__n, .wte-link-arrow) { transition: color .4s var(--ease); }
.wte-story__step h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: .4em; }
.wte-story__step p { color: var(--ink-soft); max-width: 42ch; }
.wte-story__n { font-family: var(--font-display); font-weight: 800; color: var(--orange-dark); font-size: 1rem; margin-bottom: .5rem; }
.wte-story__stagecol { position: relative; }
.wte-story__stage { position: sticky; top: calc(72px + 8vh); height: 66vh; min-height: 400px; border-radius: 24px; background: var(--ink); color: #fff; overflow: hidden; isolation: isolate; }
.wte-story__bar { position: absolute; left: 1.25rem; right: 1.25rem; top: 1.1rem; display: flex; gap: .4rem; z-index: 5; }
.wte-story__bar i { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.15); overflow: hidden; }
.wte-story__bar i::after { content: ""; display: block; height: 100%; background: var(--orange); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
.wte-story__layer { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; }
.wte-story__layer.is-on { opacity: 1; visibility: visible; }
/* no-JS: show the first frame */
html:not(.js-motion) .wte-story__layer--1 { opacity: 1; visibility: visible; }
.wte-story__pill { position: relative; z-index: 2; display: flex; align-items: center; gap: .6rem; min-width: min(320px, 80%); background: #fff; color: var(--ink); border-radius: 999px; padding: .85rem 1.4rem; font-weight: 600; font-size: 1.15rem; box-shadow: 0 20px 50px -20px #000; }
.wte-story__caret { width: 2px; height: 1.2em; background: var(--orange); animation: wte-blink 1s steps(2) infinite; }
@keyframes wte-blink { 50% { opacity: 0; } }
.wte-story__fly { position: absolute; padding: .45rem .9rem; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.2); font-weight: 600; font-size: .95rem; white-space: nowrap; opacity: 0; transform: translate(calc(var(--tx) * -.4), calc(var(--ty) * -.4)); transition: transform 1.1s var(--ease), opacity .8s; }
.wte-story__layer.is-on .wte-story__fly { opacity: .9; transform: translate(calc(var(--tx) * .25), calc(var(--ty) * .25)); transition-delay: var(--d); }
.wte-story__layer--2 svg { width: 86%; height: auto; overflow: visible; }
.wte-story__ln { fill: none; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 1.6s var(--ease); }
.wte-story__layer.is-on .wte-story__ln { stroke-dashoffset: 0; }
.wte-story__ring { fill: none; stroke: var(--orange); stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; }
.wte-story__layer.is-on .wte-story__ring { animation: wte-ring 2.4s 1s ease-out infinite; }
@keyframes wte-ring { 0% { transform: scale(.3); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
.wte-story__tag { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); background: var(--orange-dark); color: #fff; font-weight: 700; padding: .5rem 1rem; border-radius: 999px; white-space: nowrap; }
.wte-story__list { display: grid; gap: .7rem; width: min(380px, 84%); }
.wte-story__pick { display: grid; grid-template-columns: 44px 1fr auto; gap: .8rem; align-items: center; background: #262626; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: .8rem 1rem; line-height: 1.35; opacity: 0; transform: translateY(30px); transition: transform .7s var(--ease), opacity .6s; transition-delay: var(--d); }
.wte-story__layer.is-on .wte-story__pick { opacity: 1; transform: none; }
.wte-story__pick b { display: block; }
.wte-story__pick > span > span { font-size: .85rem; color: rgba(255,255,255,.65); }
.wte-story__no { width: 44px; height: 44px; border-radius: 12px; background: rgba(229,94,21,.18); color: var(--orange); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; }
.wte-story__pick svg { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 2; }
.wte-story__pick.is-saved svg { fill: var(--orange); stroke: var(--orange); }
.wte-story__layer.is-on .wte-story__pick.is-saved svg { animation: wte-pop .5s 1.4s both; }
@keyframes wte-pop { 40% { transform: scale(1.45); } }

/* ---- Staggered reveal for silo grids ---- */
.js-motion [data-reveal] > * { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease), background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); transition-delay: calc(var(--i, 0) * 50ms); }
.js-motion [data-reveal].is-in > * { opacity: 1; transform: none; }
.js-motion [data-reveal].is-in > *:hover { transition-delay: 0s; }

/* ---- Latest guides: pinned horizontal scroll (desktop) ---- */
.wte-hs__meter { display: none; height: 4px; border-radius: 4px; background: var(--line); margin-top: 1.5rem; overflow: hidden; }
.wte-hs__meter i { display: block; height: 100%; background: var(--orange); transform-origin: 0 50%; transform: scaleX(0); }
.wte-latest.is-pinned { padding-block: 0; overflow-x: clip; }
.wte-latest.is-pinned > .wte-container { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-top: 72px; }
.wte-latest.is-pinned .wte-hs__track { display: flex; gap: clamp(1.2rem, 2.5vw, 2rem); width: max-content; will-change: transform; }
.wte-latest.is-pinned .wte-card { width: min(360px, 30vw); flex: none; }
.wte-latest.is-pinned .wte-hs__meter { display: block; }

/* ---- MRT map ---- */
.wte-mrt { background: var(--ink); color: rgba(255,255,255,.85); }
.wte-mrt .wte-section-title { color: #fff; }
.wte-mrt .wte-eyebrow--accent { color: var(--orange); }
.wte-mrt__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
.wte-mrt__map { position: relative; }
.wte-mrt__svg { width: 100%; height: auto; display: block; overflow: visible; }
.wte-mrt__svg .ml { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.wte-mrt__svg .st { cursor: pointer; opacity: 0; transition: opacity .5s; }
.wte-mrt__map.is-lit .st { opacity: 1; }
.wte-mrt__svg .st circle { fill: var(--ink); stroke: #fff; stroke-width: 2; transition: fill .2s, stroke .2s; }
.wte-mrt__svg .st.is-hot circle { fill: var(--orange); stroke: var(--orange); }
.wte-mrt__svg .st text { fill: #fff; font: 700 13px var(--font-text); paint-order: stroke; stroke: var(--ink); stroke-width: 5px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.wte-mrt__svg .st.is-hot text, .wte-mrt__svg .st.is-lab text { opacity: 1; }
.wte-mrt__svg .you { fill: var(--orange); }
.wte-mrt__svg .you-ring { fill: none; stroke: var(--orange); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: wte-ring 2s ease-out infinite; }
.wte-mrt__legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; list-style: none; margin: 1rem 0 0; padding: 0; font-size: .82rem; color: rgba(255,255,255,.65); }
.wte-mrt__legend i { display: inline-block; width: 18px; height: 5px; border-radius: 3px; vertical-align: middle; margin-right: .35rem; }
.wte-mrt__lead { color: rgba(255,255,255,.75); margin: .8rem 0 1.4rem; }
.wte-mrt__filter { display: block; margin-top: 1.6rem; }
.wte-mrt__filter span { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .4rem; color: #fff; }
.wte-mrt__filter input { width: 100%; min-height: 48px; padding: 0 1rem; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.18); background: #262626; color: #fff; font: inherit; }
.wte-mrt__filter input::placeholder { color: rgba(255,255,255,.5); }
.wte-mrt__filter input:focus { outline: none; border-color: var(--orange); }
.wte-mrt__list { list-style: none; margin: 1rem 0 0; padding: 0 .25rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; max-height: 320px; overflow: auto; }
.wte-mrt__list li[hidden] { display: none; }
.wte-mrt__list a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .85rem; border-radius: 999px; background: #262626; border: 1px solid rgba(255,255,255,.12); color: #fff; font-weight: 500; font-size: .9rem; transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease); }
.wte-mrt__list a:hover, .wte-mrt__list a:focus-visible, .wte-mrt__list a.is-hot { background: var(--orange-dark); border-color: var(--orange-dark); color: #fff; }
.wte-mrt__empty { margin-top: .8rem; color: rgba(255,255,255,.7); }
.wte-mrt__empty a { color: var(--orange); }

/* ---- Can't decide spinner ---- */
/* Equal gap above and below; only collapse the top when the section before is also white. */
.wte-section:not(.wte-mrt):not(.wte-section--surface) + .wte-spin-wrap { padding-top: 0; }
.wte-spin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: center; padding: clamp(1.8rem, 5vw, 3rem); border-radius: 24px; background: var(--orange-soft); border: 1px solid #F6C3AE; }
.wte-spin__sub { color: var(--ink-soft); margin: .6rem 0 1.2rem; max-width: 40ch; }
.wte-spin__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.wte-spin__reel { height: 132px; overflow: hidden; position: relative; background: #fff; border-radius: var(--radius); border: 1px solid #F6C3AE; }
.wte-spin__reel::before, .wte-spin__reel::after { content: ""; position: absolute; left: 0; right: 0; height: 38px; z-index: 2; pointer-events: none; }
.wte-spin__reel::before { top: 0; background: linear-gradient(#fff, rgba(255,255,255,0)); }
.wte-spin__reel::after { bottom: 0; background: linear-gradient(rgba(255,255,255,0), #fff); }
.wte-spin__reel ul { list-style: none; margin: 0; padding: 0; will-change: transform; }
.wte-spin__reel li { height: 66px; display: flex; align-items: center; justify-content: center; transform: translateY(33px); font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--ink); letter-spacing: -.02em; }
.wte-spin__reel li:nth-child(odd) { color: var(--orange-dark); }

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.wte-hero__grid { grid-template-columns: 1fr; }
	.wte-bowl { max-width: 440px; }
	.wte-mrt__grid { grid-template-columns: 1fr; }
	.wte-mrt__list { max-height: none; }
}
@media (max-width: 860px) {
	.wte-story__grid { grid-template-columns: 1fr; gap: 0; }
	.wte-story__stagecol { order: -1; position: sticky; top: 72px; z-index: 2; background: var(--white); padding-bottom: .75rem; }
	.wte-story__stage { position: relative; top: 0; height: 40vh; min-height: 280px; }
	.wte-story__step { min-height: 60vh; }
}
@media (max-width: 700px) {
	.wte-spin { grid-template-columns: 1fr; }
	.wte-bowl__label { max-width: 190px; padding: .5rem .7rem; }
}
@media (prefers-reduced-motion: reduce) {
	.js-motion [data-reveal] > * { opacity: 1; transform: none; }
}