/* One motion grammar for the whole story: assemble, expose, transform. */
.infographic{position:relative;overflow:hidden;isolation:isolate;padding:2rem 0 1rem}
.infographic>*{position:relative;z-index:1}
.motion-ready{--ease:cubic-bezier(.2,.75,.2,1)}
.motion-ready .eyebrow,.motion-ready>h3,.motion-ready .control-group,.motion-ready .chart-note,.motion-ready .source{transition:opacity .7s var(--ease),transform .8s var(--ease)}
.motion-ready:not(.is-seen) .eyebrow,.motion-ready:not(.is-seen)>h3,.motion-ready:not(.is-seen) .control-group,.motion-ready:not(.is-seen) .chart-note,.motion-ready:not(.is-seen) .source{opacity:0;transform:translateY(24px)}
.motion-ready.is-seen .control-group{transition-delay:.12s}.motion-ready.is-seen .chart-note{transition-delay:.55s}.motion-ready.is-seen .source{transition-delay:.65s}
.day-blocks{perspective:600px}.day-blocks i{transform-origin:bottom;transition:transform .75s var(--ease),opacity .45s ease,background .3s;transition-delay:calc(var(--i)*7ms)}
.motion-ready:not(.is-seen) .day-blocks i{transform:scaleY(.04) rotateX(70deg);opacity:.08}
.day-blocks i:hover{transform:translateY(-6px) scaleY(1.25)}
.calendar-grid span{transition:transform .55s var(--ease),opacity .45s,background .25s;transition-delay:calc(var(--i)*5ms)}
.motion-ready:not(.is-seen) .calendar-grid span{transform:scale(.2);opacity:0}.calendar-grid span:hover{transform:translateY(-4px);z-index:2}
/* Ice-cube data marks: one cell remains one counted day. Facets belong to the
   same cell; they never introduce additional units or a different scale. */
.night-dots{perspective:none;grid-template-columns:repeat(9,minmax(0,1fr));gap:clamp(5px,1vw,10px);max-width:27rem}
.night-dots i{position:relative;display:block;aspect-ratio:1;border-radius:5px;border:1px solid #c9eafa88;background:linear-gradient(135deg,#b8def0 0%,#89bcd8 68%,#6c9dbd 100%);box-shadow:inset 1px 1px 0 #f0faff80,inset -1px -1px 0 #365c7a60;transform-origin:center;transition:opacity .3s,transform .45s var(--ease),background .3s,border-color .3s;transition-delay:calc(var(--i)*3ms)}
.night-dots i:before,.night-dots i:after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:3px}
.night-dots i:before{background:#e0f3ffb3;clip-path:polygon(0 0,100% 0,76% 24%,24% 24%)}
.night-dots i:after{background:#315c8366;clip-path:polygon(100% 0,100% 100%,76% 76%,76% 24%)}
.night-dots i:nth-child(3n+2){border-radius:4px 6px 5px 4px}
.night-dots i.inactive{opacity:1;background:transparent;border-color:#91b5ce45;box-shadow:none}
.night-dots i.inactive:before,.night-dots i.inactive:after{background:transparent}
.motion-ready:not(.is-seen) .night-dots i{transform:translateY(8px);opacity:0}
.sea-chart:after{content:'';position:absolute;z-index:0;left:-15%;right:-15%;bottom:20%;height:44%;background:repeating-radial-gradient(ellipse at 50% 100%,#fff0 0 18px,#fff4 20px 21px,#fff0 23px 35px);transform:translateY(var(--sea-y,0));pointer-events:none}
.sea-comparison>div{transition:transform .9s var(--ease),opacity .7s;transform-origin:bottom}.motion-ready:not(.is-seen) .sea-comparison>div{transform:translateY(80px);opacity:0}.sea-comparison>div:nth-child(2){transition-delay:.16s}.difference{transition:clip-path .9s .35s var(--ease);clip-path:inset(0)}.motion-ready:not(.is-seen) .difference{clip-path:inset(0 100% 0 0)}
/* A continuous glacier-front chart. Its 100 equal-width strips encode the
   index, not a geographical outline or individual glaciers. */
.ice-volume{position:relative;display:grid;grid-template-columns:repeat(100,minmax(0,1fr));gap:0;height:clamp(180px,27vw,270px);padding:0;margin:2rem 0 1.5rem;perspective:none;border-bottom:1px solid #739ba9;background:linear-gradient(to top,#c8dfdf 0 8%,transparent 8%)}
.ice-volume i{--ice-light:#cbe5e9;--ice-middle:#80b6c3;--ice-deep:#376d84;display:block;position:relative;aspect-ratio:auto;height:100%;border:0;background:linear-gradient(to bottom,#f4faf8 0 12%,var(--ice-light) 12% 21%,var(--ice-middle) 42%,var(--ice-deep) 100%);transform-origin:bottom;transition:transform .75s var(--ease),opacity .6s;transition-delay:calc(var(--i)*2ms)}
.ice-volume i:nth-child(7n+2){--ice-middle:#a3cbd3;--ice-deep:#518497}
.ice-volume i:nth-child(11n+4){--ice-light:#e4f2f0;--ice-middle:#70a9bb;--ice-deep:#2f637c}
.ice-volume i:nth-child(5n):after{content:'';position:absolute;inset:18% 0 0;background:#244f685c;clip-path:polygon(35% 0,70% 0,45% 31%,90% 52%,45% 77%,65% 100%,25% 100%,10% 73%,45% 48%,5% 30%)}
.ice-volume i:nth-child(9n):before{content:'';position:absolute;inset:12% 0 5%;background:#e6f7f280;clip-path:polygon(0 0,55% 0,100% 27%,42% 55%,75% 100%,40% 100%,0 53%,55% 26%)}
.ice-volume:before{content:'';position:absolute;inset:0;border:1px dashed #8eafb7;pointer-events:none}
.ice-volume i.lost{border:0;transform:none;opacity:0!important}
.ice-volume i.lost:before,.ice-volume i.lost:after{display:none}
.motion-ready:not(.is-seen) .ice-volume i:not(.lost){transform:scaleY(.08);opacity:0}
.ice-volume i:hover{transform:none}
.risk-fill{width:var(--target);transform-origin:left;transition:transform 1.35s var(--ease);box-shadow:0 0 35px #f8a75266}.motion-ready:not(.is-seen) .risk-fill{transform:scaleX(0)}.risk-row:nth-of-type(2) .risk-fill{transition-delay:.17s}.fire-chart.is-seen .risk-fill{animation:fire-breathe 2.8s ease-in-out 1.35s infinite alternate}
@keyframes fire-breathe{to{filter:brightness(1.22);box-shadow:0 0 55px #ffe77b90}}
.rain-mark{transform-origin:center 50%;transition:transform 1s var(--ease),filter .7s;transition-delay:calc(var(--i)*.13s)}.rain-mark.positive{transform-origin:center bottom}.rain-mark.negative{transform-origin:center top}.motion-ready:not(.is-seen) .rain-mark{transform:scaleY(0)}.rain-chart.is-seen .rain-mark.positive{filter:drop-shadow(0 -12px 15px #99d2d4aa)}
.rain-value,.rain-label{transition:opacity .55s .55s,transform .7s .55s var(--ease)}.motion-ready:not(.is-seen) .rain-value,.motion-ready:not(.is-seen) .rain-label{opacity:0;transform:translateY(12px)}
.cooling-cells{perspective:900px}.cooling-cells i{transition:transform .75s var(--ease),opacity .6s,background .35s;transition-delay:calc(var(--i)*5ms)}.motion-ready:not(.is-seen) .cooling-cells i{transform:rotateY(90deg) translateZ(-50px);opacity:0}.cooling-cells i.exposed{box-shadow:0 0 0 1px #aa100b,0 8px 22px #aa100b24}.cooling-cells i:hover{transform:translateZ(22px) scale(1.17);z-index:2}
.chapter-heading .chapter-number,.chapter-heading h2{transition:transform 1s var(--ease),opacity .8s,clip-path 1s var(--ease);clip-path:inset(0)}.chapter-heading.motion-ready:not(.is-seen) .chapter-number{transform:translateY(70px) rotate(8deg);opacity:0}.chapter-heading.motion-ready:not(.is-seen) h2{transform:translateY(70px);clip-path:inset(0 0 100% 0)}
.photo{overflow:visible}.photo img{clip-path:inset(var(--photo-cut,0) 0 0 0);transform:translate3d(0,var(--photo-y,0px),0) scale(var(--photo-scale,1));transition:clip-path 1.1s var(--ease),opacity .8s;will-change:transform,clip-path}.photo.motion-ready:not(.is-seen) img{clip-path:inset(100% 0 0 0);opacity:.2}.photo figcaption{transition:opacity .6s .7s,transform .7s .7s var(--ease)}.photo.motion-ready:not(.is-seen) figcaption{opacity:0;transform:translateY(20px)}
.infographic .control-group{gap:1.5rem}
.infographic .control-group button{position:relative;min-height:44px;padding:.75rem .2rem;border:0;border-bottom:1px solid transparent;background:transparent;color:inherit;font-size:.9375rem;transition:border-color .2s}
.infographic .control-group button[aria-pressed=true]{background:transparent;color:inherit;border-color:currentColor;border-bottom-width:2px}
.infographic .control-group button:hover{border-bottom-color:currentColor}
.infographic .control-group button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
@media(max-width:700px){.infographic{padding-top:2.5rem}.photo img{will-change:auto}.fire-chart.is-seen .risk-fill{animation:none}}
.reduce-motion .motion-ready *{transition:none!important;animation:none!important}.reduce-motion .motion-ready:not(.is-seen) *{opacity:1!important;transform:none!important;clip-path:none!important}
@media(prefers-reduced-motion:reduce){.motion-ready *{transition:none!important;animation:none!important}.motion-ready:not(.is-seen) *{opacity:1!important;transform:none!important;clip-path:none!important}}
@media print{.motion-ready *{opacity:1!important;transform:none!important;clip-path:none!important;animation:none!important}}
/* Data encoding wins over generic reveal/print visibility resets. */
.ice-chart .ice-volume i.lost{opacity:0!important}