/* A complete, winding journey. Cards reflow; the timeline is never a scroll pane. */
html:has(body.about-page.history-view) { scrollbar-width:none; }
html:has(body.about-page.history-view)::-webkit-scrollbar,
.about-page.history-view::-webkit-scrollbar { width:0; height:0; }
.about-page.history-view { scrollbar-width:none; }
.history-view .about-main { padding-top:22px; }
.history-view .about-chapters { margin-bottom:26px; }
.history-view .about-tabs { max-width:1000px; gap:14px; }
.about-history { display:block; }
.history-intro { display:flex; align-items:flex-end; justify-content:space-between; gap:36px; }
.history-intro .about-heading { min-width:0; padding-top:0; }
.about-history .about-heading .eyebrow { display:block; margin-bottom:11px; font-size:11px; letter-spacing:.24em; }
.about-history .about-heading h1,
html[lang=en] .about-history .about-heading h1 { font-size:clamp(32px,3.1vw,50px); line-height:1.25; letter-spacing:.01em; }
.about-history .about-heading .tiny-rule { display:none; }
.history-intro .about-summary { flex:0 1 365px; max-width:365px; margin:0 0 3px; font-size:14px; line-height:1.75; }
.about-history .about-detail { margin:26px 0 0; }
.history-viewport { --history-columns:3; position:relative; width:100%; max-width:100%; padding:2px 26px 12px; overflow:visible; scrollbar-width:none; touch-action:pan-y pinch-zoom; }
.history-curves { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:0; }
.journey-curve { fill:none; stroke:url(#journeyGradient); stroke-width:1.4; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.journey-dot { fill:#70cec9; opacity:.75; }
.journey-arrow { fill:none; stroke:#79d9d2; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.about-history .history-timeline { position:relative; list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:32px 52px; width:100%; min-width:0; padding:0; margin:0; border:0; }
.about-history .history-timeline::before,
.about-history .history-milestone::before { content:none; }
.about-history .history-milestone,
.about-history .history-milestone:first-child,
.about-history .history-milestone:last-child { position:relative; display:block; flex:none; width:auto; min-width:0; padding:0; margin:0; border:0; z-index:1; }
.history-milestone:nth-child(1) { grid-column:1; grid-row:1; }
.history-milestone:nth-child(2) { grid-column:2; grid-row:1; padding-top:26px; }
.history-milestone:nth-child(3) { grid-column:3; grid-row:1; padding-top:8px; }
.history-milestone:nth-child(4) { grid-column:3; grid-row:2; padding-top:14px; }
.history-milestone:nth-child(5) { grid-column:2; grid-row:2; padding-top:38px; }
.history-milestone:nth-child(6) { grid-column:1; grid-row:2; padding-top:10px; }
.about-history .milestone-card { min-height:0; padding:19px 23px 23px; margin:0; border:1px solid #41677473; border-radius:17px; background:linear-gradient(145deg,#123342c7,#061b27eb); box-shadow:inset 0 1px 0 #c7fff60d,0 16px 38px #00111a17; overflow:visible; transition:border-color 200ms,background-color 200ms; }
.about-history .milestone-art { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 15px; }
.milestone-period { display:flex; align-items:baseline; flex-wrap:wrap; gap:10px; min-width:0; }
.about-history .milestone-step { display:inline; font-size:10px; line-height:1; color:#598593; letter-spacing:.13em; }
.about-history .milestone-year { display:inline; margin:0; font-family:Georgia,'Times New Roman',serif; font-size:clamp(26px,2.5vw,38px); line-height:1.15; color:#9de8e1; letter-spacing:-.04em; white-space:nowrap; }
.about-history .milestone-icon { display:block; flex:none; width:76px; height:68px; padding:0; border:0; border-radius:0; box-shadow:none; background:none; color:#81c7cc; }
.about-history .history-milestone h2 { font-size:19px; line-height:1.45; font-weight:400; color:#f0f7f7; overflow-wrap:anywhere; }
.about-history .history-milestone p { margin:10px 0 0; font-size:14px; line-height:1.85; color:#a6c3ce; max-width:none; overflow-wrap:break-word; }
html[lang=en] .about-history .history-milestone h2 { font-size:18px; line-height:1.4; }
html[lang=en] .about-history .history-milestone p { font-size:13.5px; line-height:1.75; }
.about-history .history-milestone:nth-child(6) .milestone-card { border-color:#568f897d; background:linear-gradient(145deg,#173d43c7,#08242feb); }
.history-reveal .history-milestone { animation:journey-card-reveal 380ms ease-out backwards; animation-delay:calc(var(--milestone-order)*110ms); }
.history-reveal .milestone-icon { animation:none; }
.history-reveal .journey-curve { stroke-dasharray:1; stroke-dashoffset:0; animation:journey-line-reveal 480ms ease-out backwards; animation-delay:calc(var(--connection-order)*110ms+160ms); }
.history-reveal .journey-dot,.history-reveal .journey-arrow { animation:journey-marker-reveal 240ms ease-out backwards; animation-delay:calc(var(--connection-order)*110ms+300ms); }
@keyframes journey-card-reveal { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes journey-line-reveal { from { opacity:0; stroke-dashoffset:1; } to { opacity:1; stroke-dashoffset:0; } }
@keyframes journey-marker-reveal { from { opacity:0; } }
@media (hover:hover) { .about-history .history-milestone:hover .milestone-card { border-color:#6fbfbbac; background:linear-gradient(145deg,#173e4cc7,#082532eb); } }
@media (min-width:1181px) {
 .history-view .site-header { height:90px; padding-block:14px; }
 .history-view .about-main { padding-top:20px; padding-bottom:16px; }
}
@media (min-width:1101px) and (max-width:1600px) and (max-height:960px) {
 html[lang=en] .history-view .about-chapters { margin-bottom:21px; }
 html[lang=en] .about-history .milestone-card { padding:14px 20px 18px; }
 html[lang=en] .about-history .milestone-art { margin-bottom:10px; }
 html[lang=en] .about-history .milestone-icon { width:62px; height:56px; }
 html[lang=en] .about-history .history-milestone h2 { font-size:17px; }
 html[lang=en] .about-history .history-milestone p { font-size:13px; line-height:1.65; margin-top:8px; }
 html[lang=en] .history-milestone:nth-child(5) { padding-top:25px; }
}
@media (min-width:1101px) and (max-height:820px) {
 .history-view .about-chapters { margin-bottom:20px; }
 .about-history .about-heading h1,html[lang=en] .about-history .about-heading h1 { font-size:37px; }
 .about-history .about-detail { margin-top:20px; }
 .about-history .history-timeline { row-gap:18px; column-gap:44px; }
 .about-history .milestone-card { padding:14px 19px 16px; }
 .about-history .milestone-art { margin-bottom:8px; }
 .about-history .milestone-icon { width:56px; height:50px; }
 .about-history .milestone-year { font-size:30px; }
 .about-history .history-milestone h2 { font-size:18px; }
 .about-history .history-milestone p { font-size:13.5px; line-height:1.75; margin-top:8px; }
 html[lang=en] .about-history .history-milestone h2 { font-size:17px; }
 html[lang=en] .about-history .history-milestone p { font-size:13px; line-height:1.6; }
 .about-history .history-milestone:nth-child(2) { padding-top:18px; }
 .about-history .history-milestone:nth-child(5) { padding-top:18px; }
}
@media (min-width:1181px) and (max-height:820px) {
 .history-view .site-header { height:76px; padding-block:8px; }
 .history-view .about-main { padding-top:12px; padding-bottom:12px; }
 .history-view .about-tabs button { min-height:44px; padding-block:8px; font-size:15px; }
 .history-view .about-chapters,
 html[lang=en] .history-view .about-chapters { margin-bottom:14px; }
 .about-history .about-heading h1,
 html[lang=en] .about-history .about-heading h1 { font-size:34px; }
 .about-history .about-heading .eyebrow { margin-bottom:6px; }
 .about-history .about-detail { margin-top:16px; }
 .about-history .history-timeline { row-gap:14px; }
 .about-history .history-milestone:nth-child(5),
 html[lang=en] .about-history .history-milestone:nth-child(5) { padding-top:10px; }
 html[lang=en] .about-history .milestone-icon { width:56px; height:50px; }
}
@media (max-width:1100px) {
 .history-viewport { --history-columns:2; padding:2px 24px 8px; }
 .about-history .history-timeline { grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 46px; }
 .about-history .history-milestone:nth-child(n) { padding:0; margin:0; }
 .history-milestone:nth-child(1) { grid-column:1; grid-row:1; }
 .history-milestone:nth-child(2) { grid-column:2; grid-row:1; padding-top:24px!important; }
 .history-milestone:nth-child(3) { grid-column:2; grid-row:2; }
 .history-milestone:nth-child(4) { grid-column:1; grid-row:2; padding-top:22px!important; }
 .history-milestone:nth-child(5) { grid-column:1; grid-row:3; }
 .history-milestone:nth-child(6) { grid-column:2; grid-row:3; padding-top:24px!important; }
 .history-intro { display:block; }
 .history-intro .about-summary { margin:13px 0 0; max-width:600px; font-size:14px; }
 .about-history .about-detail { margin-top:25px; }
 .about-history .milestone-card { padding:18px 20px 21px; }
 .about-history .history-milestone h2 { font-size:18px; }
 .about-history .history-milestone p { font-size:14px; line-height:1.8; }
 .history-view .about-mobile-footer { margin-top:24px; }
}
@media (max-width:700px) {
 .history-viewport { --history-columns:1; padding:2px 0 6px 27px; }
 .about-history .history-timeline { grid-template-columns:minmax(0,1fr); gap:24px; }
 .about-history .history-milestone:nth-child(n) { grid-column:1; grid-row:auto; padding:0!important; margin:0 13px 0 0; }
 .about-history .history-milestone:nth-child(2n) { margin:0 0 0 13px; }
 .history-view .about-main { padding-top:16px; }
 .history-view .about-chapters { margin-bottom:25px; }
 .about-history .about-heading h1 { font-size:clamp(29px,7.7vw,38px); }
 html[lang=en] .about-history .about-heading h1 { font-size:clamp(27px,7.2vw,35px); }
 .history-intro .about-summary { margin-top:13px; font-size:13px; line-height:1.8; }
 .about-history .about-detail { margin-top:24px; }
 .about-history .milestone-card { padding:16px 17px 20px; border-radius:15px; }
 .about-history .milestone-art { margin-bottom:12px; }
 .about-history .milestone-period { gap:8px; }
 .about-history .milestone-year { font-size:31px; }
 .about-history .milestone-icon { width:66px; height:60px; }
 .about-history .history-milestone h2 { font-size:19px; }
 .about-history .history-milestone p { font-size:14px; line-height:1.85; }
 html[lang=en] .about-history .history-milestone h2 { font-size:17px; }
 html[lang=en] .about-history .history-milestone p { font-size:13px; line-height:1.8; }
}
@media (max-width:360px) {
 .about-history .milestone-step { display:none; }
 .about-history .milestone-year { font-size:27px; }
 .about-history .milestone-icon { width:54px; height:50px; }
 .history-view .about-tabs { gap:3px; }
}
@media (prefers-reduced-motion:reduce) {
 .history-reveal .history-milestone,.history-reveal .journey-curve { animation:none!important; transform:none!important; opacity:1!important; stroke-dashoffset:0; }
}
/* Build the miniature scenes in sequence, then keep only their meaningful parts moving. */
.history-view .theme-structure { transform-box:fill-box; transform-origin:center bottom; animation:theme-assemble 650ms cubic-bezier(.2,.7,.3,1) backwards; animation-delay:calc(var(--milestone-order)*110ms+120ms); }
.history-view .theme-windows { animation:theme-window-light 5s ease-in-out infinite; }
.history-view .theme-smoke { animation:theme-smoke-rise 3s ease-out infinite; }
.history-view .theme-network-points circle { animation:theme-network-pulse 3.8s ease-in-out infinite; }
.history-view .theme-network-points circle:nth-child(2) { animation-delay:1s; }
.history-view .theme-network-points circle:nth-child(3) { animation-delay:2s; }
.history-view .theme-packet { animation:theme-packet-delivery 3.8s ease-in-out infinite; }
.history-view .theme-orbit { transform-origin:39px 29px; animation:theme-orbit-turn 18s linear infinite; }
.history-view .theme-link-flow { stroke-dasharray:4 5; animation:theme-connection-flow 3s linear infinite; }
.history-view .theme-network-beacon { animation:theme-network-pulse 3s ease-in-out infinite; }
.history-view .theme-gear { transform-box:fill-box; transform-origin:center; animation:theme-gear-turn 14s linear infinite; }
.history-view .theme-bars path { transform-box:fill-box; transform-origin:center bottom; animation:theme-bar-build 700ms cubic-bezier(.2,.7,.3,1) backwards; animation-delay:calc(var(--milestone-order)*110ms+180ms); }
.history-view .theme-bars path:nth-child(2) { animation-delay:calc(var(--milestone-order)*110ms+260ms); }
.history-view .theme-bars path:nth-child(3) { animation-delay:calc(var(--milestone-order)*110ms+340ms); }
.history-view .theme-growth { transform-box:fill-box; transform-origin:center bottom; animation:theme-leaf-grow 850ms cubic-bezier(.2,.7,.3,1) backwards; animation-delay:calc(var(--milestone-order)*110ms+220ms); }
.history-view .theme-star { animation:theme-window-light 4s ease-in-out infinite; }
@keyframes theme-assemble { from { opacity:0; transform:scaleY(.1) translateY(8px); } to { opacity:1; transform:none; } }
@keyframes theme-bar-build { from { transform:scaleY(.1); } to { transform:scaleY(1); } }
@keyframes theme-leaf-grow { from { opacity:0; transform:scale(.15); } to { opacity:1; transform:scale(1); } }
@keyframes theme-window-light { 0%,100% { opacity:.55; } 45%,65% { opacity:1; } }
@keyframes theme-smoke-rise { from { opacity:.65; transform:translateY(3px); } to { opacity:0; transform:translateY(-5px); } }
@keyframes theme-network-pulse { 0%,100% { opacity:.35; } 45%,65% { opacity:1; } }
@keyframes theme-packet-delivery { 0%,12% { opacity:0; transform:translateY(0); } 30% { opacity:1; } 85%,100% { opacity:0; transform:translateY(12px); } }
@keyframes theme-orbit-turn { to { transform:rotate(360deg); } }
@keyframes theme-connection-flow { to { stroke-dashoffset:-36; } }
@keyframes theme-gear-turn { from { transform:translate(58px,49px) rotate(0deg); } to { transform:translate(58px,49px) rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .history-view .history-theme-model * { animation:none!important; } }
