/* Section two: context becomes a working partner as the visitor scrolls. */
.opening-story { position: relative; }
.opening-story::before { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg,#17112388,#17112300 85%); pointer-events: none; }
.opening-stage { position: relative; }
.opening-content { display: grid; grid-template-columns: 42% minmax(0,1fr); align-items: center; gap: 5%; }
.opening-panels { width: 100%; margin: 0; min-width: 0; }
.opening-panel h2 { font-size: clamp(36px,3.85vw,62px); line-height: 1.09; }
.opening-panel p { font-size: 17px; line-height: 1.55; max-width: 460px; }
.opening-panel p br { display: none; }
.opening-story.is-pinned .opening-stage { display: flex; flex-direction: column; padding-bottom: 64px; }
.opening-story.is-pinned .opening-label { flex: none; margin-bottom: 0; }
.opening-story.is-pinned .opening-content { flex: 1; }
.vision-composition { position: relative; height: 470px; min-width: 0; pointer-events: none; isolation: isolate; }
.composition-light { position: absolute; inset: -6%; background: radial-gradient(ellipse at 45% 50%,#b496dd45,transparent 62%); opacity: .7; }
.composition-grid { position: absolute; inset: 5% 0; background-image: radial-gradient(#d6cef046 .7px,transparent .8px); background-size: 24px 24px; mask-image: radial-gradient(ellipse,#0008,transparent 67%); opacity: .65; transform: perspective(800px) rotateX(20deg) rotateZ(-12deg); }
.composition-assembly { position: absolute; width: 430px; height: 430px; top: 50%; left: 50%; margin-left: -215px; margin-top: -215px; perspective: 1000px; }
.vision-fragment { position: absolute; top: 50%; left: 50%; width: 232px; height: 164px; margin: -82px 0 0 -116px; border: 1px solid #ded2f48f; border-radius: 15px; padding: 20px; color: #f4f3ee; background: linear-gradient(140deg,#84709aef,#31273fd9); box-shadow: inset 0 1px 0 #ffffff35,0 15px 35px #100c243b; backface-visibility: hidden; transform-origin: 50% 50%; }
.vision-fragment[data-layer="0"] { z-index: 1; transform: translate3d(-25px,-28px,-30px) rotateZ(-8deg); }
.vision-fragment[data-layer="1"] { z-index: 2; transform: translate3d(0,0,10px); background: linear-gradient(145deg,#998ca9ef,#504467ed); }
.vision-fragment[data-layer="2"] { z-index: 3; transform: translate3d(25px,28px,40px) rotateZ(8deg); background: linear-gradient(145deg,#a58287f2,#564055ed); }
.fragment-top { display: flex; gap: 9px; align-items: center; font-size: 13px; line-height: 1.2; font-weight: 600; }
.fragment-top .icon { width: 18px; height: 18px; stroke-width: 1.35; }
.fragment-top > i { display: block; width: 5px; height: 5px; background: #eac3b5; border-radius: 50%; margin-left: auto; }
.fragment-people { display: flex; margin-top: 17px; }
.fragment-people span { width: 29px; height: 29px; border: 1px solid #dbd2e68c; background: #504067; border-radius: 50%; display: grid; place-items: center; font-size: 9px; margin-right: -6px; }
.fragment-people span:nth-child(2) { background: #a78487; }
.fragment-people span:nth-child(3) { background: #6b567e; }
.fragment-lines { display: grid; gap: 7px; margin-top: 14px; }
.fragment-lines i { height: 3px; width: 78%; background: #ddd3e747; border-radius: 4px; }
.fragment-lines i:last-child { width: 53%; }
.fragment-bars { display: flex; gap: 8px; align-items: flex-end; height: 43px; margin-top: 14px; }
.fragment-bars i { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(0deg,#ded2f041,#ded2f0b5); height: 40%; }
.fragment-bars i:nth-child(2) { height: 70%; }.fragment-bars i:nth-child(3) { height: 56%; }.fragment-bars i:nth-child(4) { height: 90%; }.fragment-bars i:nth-child(5) { height: 100%; background: linear-gradient(0deg,#d98b7363,#efc2af); }
.fragment-caption { display: block; font-size: 10px; margin-top: 11px; color: #f4f3ee; }
.fragment-task { margin-top: 19px; display: flex; align-items: center; gap: 10px; }
.fragment-task + .fragment-task { margin-top: 12px; }
.fragment-task span { width: 13px; height: 13px; border: 1px solid #efcbbb9c; border-radius: 3px; }
.fragment-task i { height: 3px; width: 63%; background: #f1dfe063; border-radius: 5px; }
.fragment-task:last-child i { width: 42%; }
.vision-partner { position: absolute; top: 50%; left: 50%; width: 240px; height: 244px; margin: -122px 0 0 -120px; border-radius: 22px; border: 1px solid #f4efffcc; background: radial-gradient(ellipse at 0 100%,#d98b738c,transparent 75%),linear-gradient(145deg,#ede6fa,#b9a7d8); color: var(--deep); box-shadow: inset 0 1px 0 #fff,0 22px 60px #170c343b; display: flex; flex-direction: column; align-items: center; z-index: 5; transform: translateZ(80px); }
.partner-caption { margin-top: 23px; font-size: 11px; color: #514269; }
.partner-symbol { position: relative; width: 72px; height: 55px; margin-top: 20px; transform: rotate(-25deg); }
.partner-symbol i { position: absolute; width: 40px; height: 40px; border: 1.4px solid #5a437d; border-radius: 13px; }
.partner-symbol i:nth-child(2) { translate: 12px 5px; }.partner-symbol i:nth-child(3) { translate: 24px 10px; }
.vision-partner strong { font-size: 33px; font-weight: 600; line-height: 1; letter-spacing: -.05em; margin-top: 3px; }
.partner-role { font-size: 11px; margin-top: 10px; }
.partner-ready { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 21px; padding-top: 13px; border-top: 1px solid #392b592b; width: calc(100% - 36px); font-size: 10px; }
.partner-ready i { width: 5px; height: 5px; border-radius: 50%; background: #7059cb; }
.vision-assurance { position: absolute; z-index: 6; left: 50%; top: calc(50% + 166px); white-space: nowrap; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; color: var(--paper); font-size: 12px; }
.vision-assurance .icon { width: 26px; height: 26px; padding: 5px; border: 1px solid #e9b8a599; border-radius: 50%; color: #efc9b9; }
/* Every internal gesture is scrubbed by the shared scroll progress; no idle loop. */
.vision-fragment {
  box-shadow: inset 0 1px 0 #ffffff35, 0 var(--fragment-shadow-y, 13px) 35px #100c243b;
}
.vision-fragment::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid #f3e9ff55;
  background: linear-gradient(130deg, #fff1, transparent 48%);
  opacity: var(--fragment-focus, 1);
}
.fragment-top > i {
  scale: calc(.8 + var(--fragment-focus, 1) * .2);
  box-shadow: 0 0 9px rgb(239 194 175 / calc(var(--fragment-focus, 1) * .32));
}
.fragment-people span { transform-origin: center; }
.fragment-lines i, .fragment-task > i { transform-origin: left center; }
.fragment-bars i { transform-origin: center bottom; }
.fragment-task > span { position: relative; }
.fragment-task > span::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 3px;
  left: 2px;
  top: 3px;
  border-left: 1.2px solid #f7dece;
  border-bottom: 1.2px solid #f7dece;
  transform: rotate(-45deg) scale(var(--task-ready, 1));
  transform-origin: left bottom;
  opacity: var(--task-ready, 1);
}
.fragment-task > i {
  scale: calc(.18 + var(--task-ready, 1) * .82) 1;
  translate: calc((1 - var(--task-ready, 1)) * 10px) 0;
  opacity: calc(.35 + var(--task-ready, 1) * .65);
}
.vision-partner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, #ffffff85 48%, #ffffff24 55%, transparent 64%);
  background-size: 280% 100%;
  background-position: var(--partner-reflection-x, -160%) 50%;
  opacity: var(--partner-reflection, 0);
}
.partner-symbol i { transform-origin: center; }
.partner-ready i {
  position: relative;
  scale: calc(.7 + var(--partner-ready, 1) * .3);
}
.partner-ready i::after {
  content: '';
  position: absolute;
  inset: -6px;
  border: 1px solid #7059cb55;
  border-radius: 50%;
  scale: calc(.7 + var(--partner-confirmation, 0) * .65);
  opacity: var(--partner-confirmation, 0);
}
.vision-assurance .icon {
  scale: calc(.88 + var(--assurance-ready, 1) * .12);
  rotate: calc((1 - var(--assurance-ready, 1)) * -9deg);
}
@media (min-width: 900px) and (max-width: 1150px) {
  .opening-content { grid-template-columns: 40% minmax(0,1fr); gap: 4%; }
  .composition-assembly { scale: .87; }
  .vision-composition { height: 410px; }
  .opening-panel h2 { font-size: clamp(34px,3.75vw,44px); }
  .opening-panel p { font-size: 16px; }
}
@media (max-width: 899px) {
  .opening-content { display: flex; flex-direction: column; gap: 45px; }
  .vision-composition { width: 100%; max-width: 500px; height: 340px; margin-top: -12px; }
  .composition-assembly { scale: .78; }
  .opening-panels { max-width: 610px; }
  .opening-panel h2 { font-size: clamp(32px,6vw,54px); }
  .opening-panel { border-bottom: 1px solid #d6cef029; padding-bottom: 40px; margin-bottom: 44px; }
  .opening-panel:last-child { border: 0; padding-bottom: 0; margin-bottom: 0; }
}
@media (max-width: 600px) {
  .opening-stage { padding-top: 45px; }
  .opening-label { margin-bottom: 22px; }
  .vision-composition { height: 286px; margin-top: -12px; }
  .composition-assembly { scale: .68; }
  .opening-content { gap: 35px; }
  .opening-panel h2 { font-size: clamp(31px,8.7vw,47px); }
  .opening-panel p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce), print {
  .vision-composition, .composition-assembly, .composition-light, .composition-grid { translate: none !important; }
  .opening-story.is-pinned .opening-stage { display: block; }
  .fragment-people span, .fragment-lines i, .fragment-bars i, .partner-symbol i { transform: none !important; opacity: 1 !important; }
  .fragment-task > i { scale: 1; translate: none; opacity: 1; }
  .fragment-task > span::after { transform: rotate(-45deg); opacity: 1; }
  .partner-caption, .vision-partner > strong, .partner-role, .partner-ready { opacity: 1 !important; translate: none !important; }
  .vision-partner::after, .partner-ready i::after { display: none; }
  .partner-ready i, .vision-assurance .icon { scale: 1; rotate: none; }
}