/* A selectable product scene: no carousel, autoplay or simulated live status. */
:root { --acid: #d8d0c2; }
.loader-readout strong { font-family: var(--serif); font-weight: 400; letter-spacing: -.045em; font-size: clamp(3.5rem,10vw,10rem); }
.loader-readout > span { font-family: var(--mono); font-weight: 400; letter-spacing: -.07em; font-size: clamp(3rem,7vw,7rem); }
::selection { background: #d8d0c2; }
.scene-invitation .signal-core { display: flex; flex-direction: column; }
.invitation-label { font: .56rem var(--mono); letter-spacing: .1em; color: var(--muted); }
.scene-invitation strong { margin-top: 1.3rem; font: 2.45rem/.98 var(--serif); letter-spacing: -.04em; font-weight: 400; }
.scene-invitation .signal-thread { margin: .5rem 0; height: 3rem; }
.scene-invitation .signal-thread i { border-color: var(--paper); }
.scene-invitation .signal-thread::before { background: linear-gradient(90deg,transparent,#d8d0c2,transparent); }
.invitation-action { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .72rem; }
.invitation-action b { font-size: 1.4rem; font-weight: 400; transition: transform .3s; }
.scene-invitation:hover .invitation-action b { transform: translate(3px,-3px); }
.experience-intro { max-width: 37rem; color: var(--muted); font-size: 1rem; line-height: 1.7; margin: -1rem 0 2.5rem auto; }
.scenario-controls { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-top: 1px solid var(--line); }
.scenario-controls[hidden], .scenario-panel[hidden] { display: none; }
.scenario-controls button { display: flex; align-items: center; gap: 1rem; padding: 1.5rem 1.2rem; border: 0; border-bottom: 2px solid transparent; text-align: left; background: transparent; color: var(--muted); cursor: pointer; transition: color .25s, background .25s; }
.scenario-controls button span { font: .66rem var(--mono); opacity: .6; }
.scenario-controls button b { margin-left: auto; font-weight: 400; opacity: 0; transform: translate(-4px,4px); transition: opacity .25s, transform .25s; }
.scenario-controls button[aria-selected="true"] { color: var(--paper); border-bottom-color: var(--paper); background: rgba(244,241,235,.04); }
.scenario-controls button[aria-selected="true"] b { opacity: 1; transform: none; }
.scenario-controls button:hover { color: var(--paper); background: rgba(244,241,235,.04); }
.scenario-controls button:active { background: rgba(244,241,235,.09); }
.scenario-controls button:focus-visible, .scenario-panel:focus-visible { outline: 2px solid var(--paper); outline-offset: -4px; }
.scenario-stage { border-bottom: 1px solid var(--line); }
.scenario-panel { position: relative; isolation: isolate; min-height: 39rem; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.5rem,4vw,3.7rem); }
.scenario-art, .scenario-wash { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.scenario-art { object-fit: cover; object-position: 70% 40%; animation: scenario-arrive 1.2s var(--ease-heavy) both; }
.scenario-wash { background: linear-gradient(90deg,rgba(5,6,7,.92),rgba(5,6,7,.4) 48%,rgba(5,6,7,.08)),linear-gradient(0deg,#080a0b,transparent 50%); }
.scenario-caption { max-width: 33rem; margin-block: 2.5rem 3rem; }
.scenario-caption > span { font: .62rem var(--mono); letter-spacing: .12em; color: var(--muted); }
.scenario-caption h3 { font: 400 clamp(2.6rem,4.7vw,5.1rem)/.98 var(--serif); letter-spacing: -.045em; margin: 1.5rem 0; }
.scenario-caption p { max-width: 26rem; font-size: .95rem; line-height: 1.8; color: #d0ceca; }
.scenario-caption .scenario-caveat { max-width: 26rem; font-size: .75rem; line-height: 1.65; color: #a9aaa7; margin-top: 1.6rem; }
.route-ribbon { display: grid; grid-template-columns: auto minmax(1rem,1fr) auto minmax(1rem,1fr) auto; align-items: center; gap: 1rem; border-top: 1px solid var(--line); padding-top: 1.8rem; font: .68rem var(--mono); }
.route-ribbon strong { font-weight: 500; color: var(--paper); }
.route-ribbon > span { color: var(--muted); }
.route-ribbon i { height: 1px; position: relative; background: rgba(244,241,235,.22); }
.route-ribbon i::after { content: ""; position: absolute; inset: 0; background: var(--paper); transform-origin: left; animation: route-draw 1.2s var(--ease-heavy) both; }
.experience-footer { display: flex; justify-content: space-between; gap: 2rem; align-items: baseline; margin-top: 1.4rem; }
.experience-footer > span { max-width: 31rem; font-size: .7rem; color: var(--muted); line-height: 1.6; }
.experience-footer > a { font-size: .78rem; flex-shrink: 0; padding-block: .6rem; border-bottom: 1px solid var(--line-strong); }
.experience-footer b { padding-left: 1rem; font-weight: 400; }
@keyframes scenario-arrive { from { opacity: .3; transform: scale(1.035); } to { opacity: 1; transform: scale(1); } }
@keyframes route-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 767px) {
  .scene-invitation .signal-core { padding: 1rem 1.2rem; flex-direction: row; align-items: center; justify-content: space-between; gap: .6rem; }
  .scene-invitation .invitation-label, .scene-invitation strong { display: none; }
  .scene-invitation .invitation-action { width: 100%; font-size: .78rem; }
  .experience-intro { margin: 0 0 1.6rem; font-size: .88rem; }
  .scenario-controls button { flex-direction: column; align-items: flex-start; gap: .5rem; padding: 1rem .65rem; font-size: .75rem; min-height: 5rem; }
  .scenario-controls button b { display: none; }
  .scenario-panel { min-height: 39rem; padding: 1.4rem; }
  .scenario-art { object-position: 62% top; }
  .scenario-wash { background: linear-gradient(0deg,#080a0b 4%,rgba(5,6,7,.87) 32%,rgba(5,6,7,.08) 100%); }
  .scenario-caption { margin-top: 10rem; margin-bottom: 1rem; }
  .scenario-caption h3 { font-size: clamp(2.55rem,9.5vw,4rem); }
  .scenario-caption p { font-size: .85rem; }
  .scenario-caption .scenario-caveat { font-size: .72rem; }
  .route-ribbon { font-size: .55rem; gap: .55rem; grid-template-columns: 1fr 1rem 1.3fr 1rem 1fr; line-height: 1.6; }
  .route-ribbon > :last-child { text-align: right; }
  .experience-footer { flex-direction: column; gap: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .scenario-art, .route-ribbon i::after { animation: none; }
  .scenario-controls button, .scenario-controls button b, .invitation-action b { transition: none; }
}