/* Two consecutive scenes; ordinary page scrolling, no pinned slideshow. */
.impact-story { background: #080e14; overflow: clip; scroll-margin-top: 56px; }
.outlook-panel { position: relative; isolation: isolate; min-height: min(960px, 100svh); scroll-margin-top: 66px; }
.outlook-content.wrap { position: relative; z-index: 1; width: 88%; max-width: 1440px; padding-top: clamp(88px, 10svh, 130px); padding-bottom: 25px; }
.outlook-landscape, .outlook-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.outlook-landscape { object-fit: cover; object-position: 56% 55%; }
.outlook-shade { background: linear-gradient(90deg,#030a12ed 0%,#040b1296 45%,#02081026 100%),linear-gradient(0deg,#050c13f5 0%,transparent 55%,#07101b70 100%); }
.outlook-kicker { font-size: 10px; letter-spacing: .2em; font-weight: 500; line-height: 1.6; color: #adcfdf; }
.outlook-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; }
.outlook-panel h2 { margin-top: 23px; font-size: clamp(38px, 4.7vw, 72px); line-height: 1.06; font-weight: 400; letter-spacing: -.045em; text-wrap: balance; }
.outlook-date { text-align: right; padding-top: 1px; }
.outlook-date .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.outlook-date > span:not(.sr-only) { font-size: 10px; letter-spacing: .2em; color: #d6e7ef; }
.outlook-date strong { display: block; font-size: clamp(65px, 10vw, 156px); line-height: 1; font-weight: 300; letter-spacing: -.065em; font-variant-numeric: tabular-nums; color: #e6f5ff; }
.outlook-waste-data { display: grid; grid-template-columns: 1.35fr 1fr; gap: 10%; align-items: end; margin-top: 32px; }
.outlook-waste-stat { padding-bottom: 43px; }
.outlook-tonnage { display: flex; align-items: center; gap: 24px; margin: 8px 0 12px; }
.outlook-tonnage strong { font-size: clamp(110px, 15vw, 220px); line-height: 1; font-weight: 500; letter-spacing: -.065em; color: #fff; font-variant-numeric: tabular-nums; }
.outlook-tonnage > span { font-size: clamp(18px, 2vw, 28px); line-height: 1.25; color: #c5d6e1; }
.outlook-range { color: #a9becb; font-size: 12px; line-height: 1.6; }
.outlook-chart { position: relative; height: clamp(240px, 35svh, 360px); margin: 0 8px 62px 20px; }
.outlook-chart-grid { position: absolute; inset: 0; }
.outlook-chart-grid span { position: absolute; bottom: var(--tick); width: 100%; border-bottom: 1px solid #d7edff35; padding: 0 0 7px; font-size: 10px; color: #bed0dc; }
.outlook-chart-grid span:last-child { border-color: #d7edff70; }
.outlook-bar { position: absolute; bottom: 0; background: linear-gradient(0deg,#327aaac9,#9cd9fff2); border: 0; box-shadow: 0 0 60px #9adeff12; transform-origin: center bottom; opacity: .55; }
.outlook-bar.is-current { opacity: 1; outline: 1px solid #bce8ff90; outline-offset: -1px; }
.outlook-bar > b { position: absolute; top: -30px; left: 0; width: 100%; text-align: center; font-size: 18px; font-weight: 500; color: #f5fbff; }
.outlook-bar > small { position: absolute; top: calc(100% + 10px); left: -30%; width: 160%; text-align: center; font-size: 11px; letter-spacing: .07em; color: #e1f0f7; white-space: nowrap; }
.outlook-bar:not(.is-current) > b { font-size: 13px; top: -24px; }
.outlook-chart figcaption { position: absolute; bottom: -56px; left: 0; right: 0; display: flex; justify-content: space-between; font-size: 9px; letter-spacing: .12em; color: #b5cddb; }
.outlook-chart figcaption b { font-size: 11px; font-weight: 500; }
.outlook-source { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 9px 25px; border-top: 1px solid #b7d8ed26; padding-top: 14px; color: #a7bbc8; font-size: 10px; line-height: 1.6; }
.outlook-source a, .outlook-value-source a { color: inherit; text-decoration: none; }
.outlook-source a:hover, .outlook-value-source a:hover { color: #fff; text-decoration: underline; }
.outlook-value { background: radial-gradient(ellipse at 50% 52%,#15324777,transparent 64%), #080e14; border-bottom: 1px solid #b7d8ed26; }
.outlook-value-atmosphere { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.outlook-value-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; opacity: .38; filter: sepia(.12) hue-rotate(110deg) saturate(.7); }
.outlook-value-veil { position: absolute; inset: 0; background: linear-gradient(90deg,#080e14f5 0%,#080e14c4 39%,#080e1440 80%),linear-gradient(0deg,#080e14 0%,#080e14d9 22%,transparent 57%,#080e148f 100%); }
.outlook-growth { position: absolute; width: 52%; height: auto; right: 8%; top: 20%; opacity: .85; overflow: visible; }
.outlook-growth path { stroke-linecap: round; stroke-linejoin: round; }
.outlook-growth-halo { stroke: #5cef9d; stroke-width: 18; opacity: .17; filter: blur(12px); }
.outlook-growth-line { stroke: url(#valueGrowth); stroke-width: 4.2; stroke-dasharray: 1; filter: blur(.7px); }
.outlook-growth-tip { stroke: #a8fbd0; stroke-width: 4.2; filter: blur(.7px); }
.outlook-growth-glint { fill: url(#valueFlowLight); opacity: 0; transform-box: fill-box; offset-path: path('M40 390 L190 315 L255 333 L367 211 L424 227 L548 59'); offset-distance: 0%; offset-anchor: 50% 50%; offset-rotate: 0deg; }
.outlook-value.is-revealed .outlook-growth-line { animation: value-rise 2.2s cubic-bezier(.2,.7,.3,1) both; }
.outlook-value.is-revealed .outlook-growth-tip { animation: value-arrow-in 2.2s both; }
.outlook-value.is-active .outlook-growth-glint { animation: value-glint 6.5s 1.2s cubic-bezier(.37,0,.63,1) infinite; }
@keyframes value-rise { from { stroke-dashoffset: 1; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes value-arrow-in { 0%,65% { opacity: 0; transform: translate(-8px,12px); } 100% { opacity: 1; transform: none; } }
@keyframes value-glint { 0% { offset-distance: 0%; opacity: 0; } 18%,74% { opacity: .8; } 100% { offset-distance: 100%; opacity: 0; } }
.outlook-value-header { display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.outlook-value-header > p { font-size: 16px; line-height: 1.6; color: #96b2c6; }
.outlook-value-stat { margin: 65px 0 12px; }
.outlook-money { position: relative; display: flex; align-items: baseline; gap: .02em; width: fit-content; font-size: clamp(100px, 19vw, 292px); line-height: .95; letter-spacing: -.065em; font-weight: 400; margin: 20px 0 18px; color: #d6eeff; }
.outlook-money strong { font-weight: 500; font-variant-numeric: tabular-nums; }
.outlook-money-prefix { font-size: .19em; font-weight: 400; margin-right: .4em; letter-spacing: .06em; }
.outlook-money-suffix { font-size: .73em; font-weight: 300; }
.outlook-money-note { font-size: 12px; line-height: 1.7; color: #9bb6c8; }
.outlook-resource-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: clamp(24px,4vw,64px); margin: 38px 0 18px; }
.outlook-resource > div { position: relative; aspect-ratio: 793 / 520; }
/* Crop each sprite row from its rendered width, independent of the slide height.
   The 1586 × 992 sheet splits at x=793 and y=474 (bottom row: 518px). */
.outlook-resource > div::before { content: ''; position: absolute; inset: auto 0 0; height: auto; aspect-ratio: 793 / 474; background: url('../assets/industrial-materials-ready.webp') var(--resource-x) var(--resource-y) / 200% auto no-repeat; }
.outlook-resource:nth-child(n+3) > div::before { aspect-ratio: 793 / 518; }
.outlook-resource.outlook-resource--copper > div::before { height: 100%; aspect-ratio: auto; background: url('../assets/copper-wire-coil.webp') center bottom / contain no-repeat; transform: translateY(9%); }
/* CSS backgrounds otherwise download at startup even several screens away. */
html.has-deferred-visuals .outlook-value:not(.has-visual-assets) .outlook-resource > div::before { background-image: none; }
.outlook-resource p { display: flex; justify-content: center; align-items: baseline; gap: 10px; margin-top: 18px; color: #8eacbf; font-size: 11px; }
.outlook-resource b { color: #d9eaf5; font-weight: 400; font-size: 18px; }
.outlook-material-note { margin-bottom: 24px; color: #849daf; font-size: 10px; line-height: 1.6; text-align: center; letter-spacing: .025em; }
.outlook-value-source { display: flex; align-items: end; justify-content: space-between; gap: 25px; border-top: 1px solid #b7d8ed26; padding-top: 18px; color: #849daf; font-size: 10px; line-height: 1.8; }
.outlook-value-source p { max-width: 680px; }
.outlook-value-source a { white-space: nowrap; letter-spacing: .07em; }
.impact-story :focus-visible { outline: 2px solid #9edaff; outline-offset: 6px; }
/* The single 2060 bar rises on a fixed, zero-based linear scale. */
.impact-story.has-motion .outlook-waste:not(.is-revealed) .outlook-bar { opacity: 0; }
.impact-story.has-motion .outlook-waste:not(.is-revealed) .outlook-waste-stat { opacity: 0; transform: translateY(20px); }
.impact-story.has-motion .outlook-value:not(.is-revealed) .outlook-value-stat, .impact-story.has-motion .outlook-value:not(.is-revealed) .outlook-resource-row { opacity: 0; transform: translateY(25px); }
.outlook-bar { transition: height 1.25s cubic-bezier(.22,.7,.22,1), opacity .65s; }
.outlook-waste.is-setting .outlook-bar { transition: none; }
.outlook-waste-stat, .outlook-value-stat, .outlook-resource-row { transition: opacity .8s, transform 1s cubic-bezier(.18,.75,.24,1); }
.outlook-value.is-revealed .outlook-resource-row { transition-delay: .16s; }
.capital-investors { margin-top: 52px; }
.capital-investors p { color: #7d9daf; font-size: 10px; letter-spacing: .16em; margin-bottom: 18px; }
html[lang="ko"] .impact-story { word-break: keep-all; }
html[lang="ko"] .outlook-panel h2 { font-size: clamp(35px,4.1vw,64px); line-height: 1.2; }
@media (min-height: 900px) and (min-width: 900px) {
  .outlook-waste-data { margin-top: 70px; }
}
@media (max-width: 760px) {
  .outlook-panel { min-height: 0; }
  .outlook-content.wrap { width: 88%; padding-top: 80px; padding-bottom: 24px; }
  .outlook-header { display: block; }
  .outlook-header .outlook-kicker { max-width: 48%; }
  .outlook-header h2 { margin-top: 76px; }
  .outlook-panel h2 { font-size: 36px; }
  .outlook-date { position: absolute; top: 77px; right: 0; padding-top: 0; }
  .outlook-date strong { font-size: 54px; }
  .outlook-date > span:not(.sr-only) { font-size: 8px; }
  .outlook-kicker { font-size: 8px; letter-spacing: .14em; }
  .outlook-waste-data { gap: 20px; grid-template-columns: 1.3fr 1fr; margin-top: 65px; }
  .outlook-waste-stat { padding-bottom: 15px; }
  .outlook-tonnage { display: block; margin: 8px 0 20px; }
  .outlook-tonnage strong { font-size: 96px; }
  .outlook-tonnage > span { display: block; font-size: 16px; line-height: 1.35; margin-top: 8px; }
  .outlook-tonnage br { display: none; }
  .outlook-range { font-size: 10px; }
  .outlook-chart { height: 230px; margin-left: 0; margin-right: 0; }
  .outlook-bar { width: 25%; }
  .outlook-bar > small { font-size: 8px; }
  .outlook-bar > b { font-size: 15px; }
  .outlook-bar:not(.is-current) > b { font-size: 10px; }
  .outlook-chart figcaption { font-size: 7px; letter-spacing: 0; }
  .outlook-landscape { object-position: 65% center; }
  .outlook-source { font-size: 8px; }
  .outlook-value-header { display: block; }
  .outlook-value-film { object-position: center; opacity: .3; }
  .outlook-value-veil { background: linear-gradient(0deg,#080e14 0%,#080e14bd 48%,#080e1480 80%,#080e14df 100%); }
  .outlook-growth { width: 62%; right: -5%; top: 12%; opacity: .42; }
  .outlook-value-header > p { margin-top: 20px; font-size: 13px; }
  .outlook-value-stat { margin-top: 44px; }
  .outlook-money { font-size: 23vw; margin: 20px 0; }
  .outlook-money-note { font-size: 10px; }
  .outlook-resource-row { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 22px; margin-top: 32px; }
  .outlook-resource p { gap: 7px; margin-top: 12px; font-size: 10px; }
  .outlook-resource b { font-size: 16px; }
  .outlook-material-note { margin-top: 24px; font-size: 9px; }
  .outlook-value-source { display: block; font-size: 9px; }
  .outlook-value-source a { display: inline-block; margin-top: 16px; }
  html[lang="ko"] .outlook-panel h2 { font-size: 29px; }
}
/* Keep the value story, materials and source together in one desktop view. */
@media (min-width: 761px) {
  .outlook-value { min-height: calc(100svh - 66px); }
  .outlook-value .outlook-content.wrap { padding-top: clamp(24px, 4svh, 48px); padding-bottom: 14px; }
  .outlook-value h2, html[lang="ko"] .outlook-value h2 { margin-top: 16px; font-size: clamp(32px, 5.8svh, 60px); line-height: 1.08; }
  .outlook-value-stat { margin-top: clamp(16px, 3svh, 32px); }
  .outlook-money { font-size: clamp(112px, 23svh, 240px); margin: 12px 0; }
  .outlook-resource-row { max-width: 1120px; margin: 18px auto 12px; gap: 4vw; }
  .outlook-resource > div { height: clamp(80px, 18svh, 180px); width: 100%; max-width: calc(18svh * 1.525); margin: 0 auto; }
  .outlook-resource p { margin-top: 10px; }
  .outlook-material-note { margin-bottom: 12px; }
  .outlook-value-source { padding-top: 10px; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .impact-story *, .impact-story *::after { transition: none !important; animation: none !important; }
}