/* All presentation values consume the generated Veylo token system. */
.journey { --journey-bg:var(--color-demo-skincare-canvas); --journey-ink:var(--color-demo-skincare-ink); color:var(--journey-ink); background:var(--journey-bg); position:relative; }
.journey[data-journey="restaurant"] { --journey-bg:var(--color-demo-dining-canvas); --journey-ink:var(--color-demo-dining-ink); }
.journey[data-journey="travel"] { --journey-bg:var(--color-demo-travel-canvas); --journey-ink:var(--color-demo-travel-ink); }
.journey-stage { position:relative; height:var(--journey-stage-height); min-height:var(--journey-viewport-min); overflow:hidden; isolation:isolate; }
.journey-enabled .journey-stage { position:sticky; top:0; }
.journey-enabled:not(.journey-embedded) { height:calc(var(--journey-stage-height) + var(--journey-travel)); }
.journey .cinematic-media { position:absolute; inset:0; height:100%; }
.journey .cinematic-media picture,.journey .cinematic-media img { height:100%; width:100%; object-fit:cover; }
.journey .cinematic-media video { opacity:0; }
.journey .cinematic-media[data-playing] video { opacity:1; }
.journey-copy { position:absolute; left:var(--journey-gutter); top:var(--space-7); width:var(--journey-copy-width); z-index:2; }
.journey-copy .journey-eyebrow { font:var(--type-label)/1.5 var(--font-body); letter-spacing:var(--showcase-tracking); margin:0 0 var(--space-5); }
.journey-copy h1,.journey-copy h3 { font-size:var(--journey-display); font-weight:var(--showcase-weight); line-height:var(--type-leading-display); letter-spacing:var(--type-tracking-display); margin:0 0 var(--space-5); }
.journey-copy p { font-size:var(--type-body); line-height:var(--type-leading-body); max-width:var(--layout-hero-copy-width); }
.journey[data-journey="restaurant"] .journey-copy,.journey[data-journey="travel"] .journey-copy { color:var(--color-paper); }
.journey[data-journey="restaurant"] .cinematic-media::after,.journey[data-journey="travel"] .cinematic-media::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--color-hero-shade),transparent); pointer-events:none; }
.journey-panel { position:absolute; z-index:3; left:var(--journey-gutter); bottom:var(--space-6); width:min(var(--journey-panel-width),calc(100% - var(--journey-gutter) * 2)); padding:var(--space-5); background:var(--journey-ui-surface); color:var(--color-paper); font-family:var(--font-body); }
.journey-panel p { font-size:var(--type-label); line-height:var(--type-leading-body); margin:0 0 var(--space-3); }
.journey-phase { display:block; font-size:var(--type-label); letter-spacing:var(--showcase-tracking); margin-bottom:var(--space-3); }
.journey-skip { display:inline-flex; align-items:center; min-height:var(--layout-touch); font-size:var(--type-label); color:var(--color-paper); margin-top:var(--space-3); text-decoration:underline; text-underline-offset:var(--space-1); }
.journey-skip:focus-visible { outline:var(--border-focus) solid var(--color-focus); outline-offset:var(--space-1); }
.journey-meter { height:var(--space-1); background:var(--color-progress-track); margin-top:var(--space-3); }
.journey-meter::after { content:""; display:block; height:100%; width:100%; background:var(--color-progress-fill); transform:scaleX(var(--journey-progress,0)); transform-origin:left; }
.journey-label { position:absolute; top:var(--space-5); right:var(--journey-gutter); z-index:2; background:var(--journey-ui-surface); color:var(--color-paper); padding:var(--space-2) var(--space-3); font:var(--type-label)/1.5 var(--font-body); }
.journey-note { margin:0; padding:var(--space-4) var(--journey-gutter); font:var(--type-label)/var(--type-leading-body) var(--font-body); }
.journey-embedded .journey-stage { position:relative; height:100%; min-height:0; }
.journey-embedded { height:calc(var(--journey-viewport-height,var(--showcase-hero-height)) - var(--journey-mock-nav-height,var(--prototype-nav-height))); }
.journey-embedded .journey-copy { top:var(--space-6); }
.journey-embedded .journey-copy h3 { font-size:var(--showcase-display); }
.journey-embedded .journey-panel { padding:var(--space-4); bottom:var(--space-4); }
.journey-embedded .journey-panel p { font-size:var(--prototype-label); }
.journey:not(.journey-enabled) .journey-meter { display:none; }
@media(max-width:640px) {
 .journey-stage { height:var(--journey-mobile-stage-height); }
 .journey-enabled:not(.journey-embedded) { height:calc(var(--journey-mobile-stage-height) + var(--journey-travel)); }
 .journey-copy { top:var(--space-6); width:calc(100% - var(--journey-gutter) * 2); }
 .journey-copy h1,.journey-copy h3,.journey-embedded .journey-copy h3 { font-size:var(--journey-mobile-display); }
 .journey-copy p { font-size:var(--type-label); }
 .journey-copy .journey-eyebrow { margin-bottom:var(--space-3); }
 .journey-panel { padding:var(--space-3); bottom:var(--space-4); width:min(var(--journey-panel-mobile),calc(100% - var(--journey-gutter) * 2)); }
 .journey-label { top:var(--space-2); right:var(--space-3); font-size:var(--prototype-label); }
 .journey-embedded { height:calc(var(--journey-viewport-height,var(--showcase-hero-height)) - var(--journey-mock-nav-height,var(--prototype-nav-height))); }
 .journey-embedded .journey-copy { top:var(--space-5); }
 .journey-embedded .journey-copy p { display:none; }
 .journey-embedded .journey-panel { padding:var(--space-3); }
 .journey-embedded .journey-panel p { margin-bottom:var(--space-2); }
 .journey-embedded:not([data-selection]) .journey-status { display:none; }
 .journey-embedded .journey-skip { display:none; }
 .journey-embedded .journey-phase { font-size:var(--type-label); letter-spacing:var(--type-tracking-label); }
}
@media(prefers-reduced-motion:reduce) {
 .journey-enabled:not(.journey-embedded) { height:auto; }
 .journey-stage { position:relative!important; }
 .journey video,.journey-meter { display:none; }
 .journey-copy { transform:none!important; opacity:1!important; }
 .journey .cinematic-media { opacity:1!important; }
}

.destination-still { display:block; width:100%; height:auto; object-fit:cover; }