/* Figma 394:5, placed after historical background. Screen layers and interaction retained. */
.journey-section { position:relative; width:868px; height:616px; margin-left:calc(var(--portfolio-content-left) + 16px); }
.journey-steps { margin:0; padding:0; list-style:none; }
.journey-step { position:absolute; width:180px; }
.journey-step>p { position:absolute; font:400 12px/24px "PingFang SC",sans-serif; color:rgba(25,22,24,.65); white-space:nowrap; }
.journey-screen,.journey-placeholder { width:100%; height:389.76px; border-radius:18px; }
.journey-placeholder { background:#f0f0f0; border:4px solid white; opacity:.64; box-shadow:0 9px 17.8px #00000014; }
.step-browse { left:.164px; top:168.07px; }
.step-browse>p { left:40.435px; top:-33.375px; }
.step-detail { left:212px; top:138.543px; width:208px; }
.step-detail>p { left:39.531px; top:-34.537px; }
.step-detail .journey-placeholder { height:450.389px; }
.step-return { left:452px; top:168.858px; }
.step-return>p { left:15.254px; top:-30.173px; }
.step-search { left:678px; top:168.858px; }
.step-search>p { left:32.46px; top:-30.173px; }
.journey-sticker { position:absolute; left:204.033px; top:85.97px; width:41.176px; height:44px; }
.journey-screen img,.journey-sticker img { display:block; width:100%; height:100%; object-fit:contain; }
@media(max-width:1279.98px) { .journey-section { margin-left:280px; } }

/* The Figma layout illustrates the second screen hovered; neutral state is uniform. */
.journey-steps { position:absolute; top:132.887px; left:0; width:858px; display:flex; align-items:center; justify-content:space-between; }
.journey-step { position:relative; left:auto; top:auto; width:180px; height:389.76px; flex:none; outline:none; z-index:1; }
.journey-step>p { left:50%; top:-34px; transform:translateX(-50%); transition:translate 280ms var(--toc-ease); }
.journey-screen,.journey-placeholder,.step-detail .journey-placeholder { height:389.76px; width:180px; border:4px solid white; border-radius:18px; background:#f0f0f0; opacity:1; overflow:hidden; box-shadow:0 9px 17.8px #00000014; transform-origin:center; transition:transform 280ms var(--toc-ease),box-shadow 280ms var(--toc-ease); }
.journey-screen img { width:100%; height:100%; object-fit:cover; }
.journey-avatar { position:absolute; width:41.176px; height:44px; object-fit:contain; left:-48px; top:-18px; opacity:0; transform:translateY(5px); pointer-events:none; transition:opacity 180ms ease,transform 280ms var(--toc-ease); }
@media(hover:hover) {
 .journey-step:hover { z-index:2; }
 .journey-step:hover>div { transform:scale(1.1555556); }
 .journey-step:hover>p { translate:0 -30.315px; }
 .journey-step:hover .journey-avatar { opacity:1; transform:translateY(0); }
}
.journey-step:focus-visible { z-index:2; }
.journey-step:focus-visible>div { transform:scale(1.1555556); outline:2px solid var(--purple); outline-offset:4px; }
.journey-step:focus-visible>p { translate:0 -30.315px; }
.journey-step:focus-visible .journey-avatar { opacity:1; transform:translateY(0); }
@media(prefers-reduced-motion:reduce) { .journey-step>div,.journey-step>p,.journey-avatar { transition:none; } }

/* Shadow follows the avatar silhouette, including its white sticker edge. */
.journey-avatar { filter: drop-shadow(0 4px 2.5px rgba(0, 0, 0, 0.11)); }

/* Same 375×812 viewBox for every layer; opacity never applies to the screen parent. */
.journey-screen { position:absolute; left:50%; top:50%; translate:-50% -50%; background:white; }

.journey-screen .journey-layer { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:fill; opacity:1; pointer-events:none; user-select:none; transition:opacity 220ms ease; }
.journey-overlay { z-index:1; }
/* Resize the frame so its 4px white border and 18px radius remain constant. */
.journey-screen { transition:width 280ms var(--toc-ease),height 280ms var(--toc-ease),box-shadow 280ms var(--toc-ease); }
@media(hover:hover) {
 .journey-step:hover>.journey-screen { transform:none; width:208px; height:450.389px; }
 .journey-step:hover .has-overlay .journey-base { opacity:.5; }
}
.journey-step:focus-visible>.journey-screen { transform:none; width:208px; height:450.389px; }
.journey-step:focus-visible .has-overlay .journey-base { opacity:.5; }
@media(prefers-reduced-motion:reduce) { .journey-screen,.journey-screen .journey-layer { transition:none; } }

/* The supplied layers are the screen: one shared group, without a device shell.
   An outside white edge preserves the original SVG aspect ratio and alignment. */
.journey-screen {
  border:0;
  padding:0;
  border-radius:18px;
  background:white;
  isolation:isolate;
  box-shadow:0 0 0 4px white,0 9px 17.8px 4px rgba(0,0,0,.12);
}
.journey-screen .journey-layer { object-fit:contain; }

/* Center the visible caption and sticker together over the active screen. */
.journey-step>p { display:flex; align-items:center; width:max-content; height:24px; margin:0; }
.journey-step>p .journey-avatar {
 position:static; flex:none; width:0; height:44px; margin-right:0;
 transform:translateY(-3.035px);
 transition:width 280ms var(--toc-ease),margin-right 280ms var(--toc-ease),opacity 180ms ease,transform 280ms var(--toc-ease);
}
@media(hover:hover) {
 .journey-step:hover>p { translate:0 -30.852px; }
 .journey-step:hover>p .journey-avatar { width:41.176px; margin-right:12.265px; opacity:1; transform:translateY(-8.035px); }
}
.journey-step:focus-visible>p { translate:0 -30.852px; }
.journey-step:focus-visible>p .journey-avatar { width:41.176px; margin-right:12.265px; opacity:1; transform:translateY(-8.035px); }
@media(prefers-reduced-motion:reduce) { .journey-step>p .journey-avatar { transition:none; } }

@media(hover:hover) { .journey-step:hover>p { color:#7F6CF6; } }
.journey-step:focus-visible>p { color:#7F6CF6; }

.journey-heading { height:40.797px; }
.journey-heading h2 { margin:0; font:700 26px/normal DouyinSans,sans-serif; color:rgba(25,22,24,.9); }