.history-page { --history-purple:#7753FF; --history-purple-dark:#7753FF; --history-line:#9F72E9; overflow-x:clip; }
html:has(.history-page) { scroll-behavior:smooth; scroll-snap-type:y proximity; }
.history-hero { height:calc(100svh - 64px); min-height:600px; padding-bottom:63px; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:48px; scroll-snap-align:start; scroll-margin-top:64px; background:#f5f6f9; }
.history-hero-copy { width:min(972px,calc(100vw - 80px)); display:flex; flex-direction:column; align-items:center; gap:20px; text-align:center; }
.history-hero-copy>span { color:#7753FF; font-size:18px; line-height:normal; font-weight:600; letter-spacing:2px; }
.history-hero h1 { margin:0; color:#333; font-size:48px; line-height:normal; font-weight:600; }
.history-hero p { margin:-12px 0 0; color:#999; font-size:16px; line-height:24px; }
.history-hero figure { width:570px; height:340px; margin:0; overflow:hidden; border:0; border-radius:16px; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,.04); }
.history-hero figure img { width:100%; height:100%; display:block; object-fit:cover; border-radius:0; }
.history-scroll-cue { color:#999; font-size:16px; line-height:normal; }
.history-origin { height:101px; position:absolute; z-index:8; left:50%; bottom:0; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; }
.history-origin>img { width:68px; height:68px; display:block; filter:drop-shadow(0 4px 10px rgba(0,0,0,.1)); }
.history-origin i { width:2px; flex:1; background:var(--history-line); }

.history-timeline { position:relative; }
.history-timeline::before { content:""; width:2px; position:absolute; z-index:2; top:0; bottom:0; left:calc(50% - 1px); background:#e5e6ea; }
.history-slide { min-height:calc(100svh - 64px); position:relative; overflow:hidden; display:grid; grid-template-columns:minmax(360px,496px) 68px minmax(360px,496px); justify-content:center; align-items:center; column-gap:66px; padding:clamp(52px,7vh,82px) 80px; scroll-snap-align:start; scroll-margin-top:64px; }
.history-slide:nth-child(even) { background:#F8F8FF; }
.history-slide:last-child { background:#F8F8FF; }
.history-slide::before { content:""; width:2px; position:absolute; z-index:3; top:0; bottom:0; left:calc(50% - 1px); background:var(--history-line); transform:scaleY(0); transform-origin:top; transition:transform 2s cubic-bezier(.22,1,.36,1); will-change:transform; }
.history-slide.is-past::before { transform:scaleY(1); transition:none; }
.history-slide.is-active::before { transform:scaleY(1); }
.history-copy { width:496px; max-width:100%; position:relative; z-index:4; display:flex; flex-direction:column; gap:32px; opacity:.18; transform:translateY(22px); transition:opacity .68s cubic-bezier(.22,1,.36,1),transform .68s cubic-bezier(.22,1,.36,1); will-change:opacity,transform; }
.history-slide.reverse .history-copy { grid-column:3; }
.history-slide.reverse .history-media { grid-column:1; grid-row:1; }
.history-slide:not(.reverse) .history-copy { grid-column:1; }
.history-slide:not(.reverse) .history-media { grid-column:3; grid-row:1; }
.history-copy h2 { margin:0; color:#333; font-size:44px; line-height:normal; font-weight:600; }
.history-event-list { display:flex; flex-direction:column; gap:32px; }
.history-event { display:flex; flex-direction:column; gap:12px; }
.history-event h3 { margin:0; color:#333; font-size:28px; line-height:normal; font-weight:500; }
.history-event p { margin:0; color:#999; font-size:14px; line-height:1.45; }
.history-node { width:72px; height:72px; position:absolute; z-index:5; isolation:isolate; left:50%; top:50%; border-radius:50%; transform:translate(-50%,-50%); transition:filter .45s ease,transform .45s ease; }
.history-node img { width:72px; height:72px; display:block; opacity:.46; filter:grayscale(.42) saturate(.72); transition:opacity .45s ease,filter .45s ease; }
.history-media { width:496px; height:min(600px,calc(100svh - 124px)); margin:0; position:relative; z-index:4; display:flex; align-items:center; justify-content:center; opacity:.14; transform:translateY(24px); transition:opacity .72s cubic-bezier(.22,1,.36,1) .04s,transform .72s cubic-bezier(.22,1,.36,1) .04s; will-change:opacity,transform; }
.history-media img { width:100%; height:100%; display:block; object-fit:contain; }
.history-slide.is-active .history-copy,.history-slide.is-active .history-media { opacity:1; transform:none; }
.history-slide.is-past .history-node img,.history-slide.is-active .history-node img { opacity:1; filter:none; }
.history-slide.is-active .history-node { filter:drop-shadow(0 9px 16px rgba(91,58,170,.16)); transform:translate(-50%,-50%) scale(1.025); }
.history-chapter-number { position:absolute; top:36px; right:64px; color:#aca5b2; font-size:11px; letter-spacing:1px; }
.history-chapter-number b { color:var(--history-purple); }
/* Closing screen — Figma 5632:2087 */
.history-next { height:840px; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; background:linear-gradient(0deg,#f1f0ff 0%,#fff 74%); text-align:center; scroll-snap-align:start; scroll-margin-top:64px; }
.history-next-inner { width:min(972px,calc(100vw - 80px)); position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:48px; }
.history-next-mark { height:260px; display:flex; flex-direction:column; align-items:center; }
.history-next-line { width:2px; flex:1; background:var(--history-line); transform:scaleY(0); transform-origin:top; transition:transform 2s cubic-bezier(.22,1,.36,1); will-change:transform; }
.history-next.is-active .history-next-line { transform:scaleY(1); }
.history-next-logo { width:120px; height:120px; flex:0 0 120px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#fff; box-shadow:0 7px 18px rgba(0,0,0,.1); }
.history-next-logo img { width:60px; height:62px; display:block; object-fit:contain; }
.history-next-copy { display:flex; flex-direction:column; align-items:center; gap:20px; }
.history-next-copy span { color:#7753ff; font-size:18px; line-height:normal; font-weight:600; letter-spacing:2px; text-transform:uppercase; }
.history-next-copy>div { display:flex; flex-direction:column; gap:8px; }
.history-next-copy h2 { margin:0; color:#333; font-size:52px; line-height:normal; font-weight:600; }
.history-next-copy p { margin:0; color:#999; font-size:16px; line-height:24px; }
.history-next-building { position:absolute; left:50%; bottom:0; z-index:0; width:791px; max-width:100%; height:auto; transform:translate(-50%,18.67%); pointer-events:none; }

.history-years { position:fixed; z-index:45; right:22px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:7px; opacity:0; pointer-events:none; transition:opacity .2s ease; }
.history-page.timeline-visible .history-years { opacity:1; pointer-events:auto; }
.history-years button { width:8px; height:8px; padding:0; border:0; border-radius:5px; background:#d9d2e3; cursor:pointer; transition:height .25s ease,background .25s ease,border-radius .25s ease; }
.history-years button.active { height:24px; background:var(--history-purple); }
.history-years button:focus-visible { outline:2px solid var(--history-purple-dark); outline-offset:3px; }

@media (min-width:981px) {
  .history-scroll-cue { position:absolute; z-index:9; left:50%; bottom:118px; transform:translateX(-50%); white-space:nowrap; }
}

@media (max-height:780px) and (min-width:981px) {
  .history-slide { padding-top:44px; padding-bottom:44px; }
  .history-media { height:min(520px,calc(100svh - 110px)); }
  .history-copy { gap:24px; }
  .history-event-list { gap:22px; }
  .history-copy h2 { font-size:40px; }
  .history-event h3 { font-size:24px; }
}
@media (max-height:860px) and (min-width:981px) {
  .history-hero { height:auto; min-height:calc(100svh - 64px); padding:32px 0 155px; gap:32px; }
}
@media (max-width:980px) {
  .history-hero { height:auto; min-height:calc(100svh - 64px); padding:64px 44px 118px; }
  .history-hero-copy { width:100%; }
  .history-hero p br { display:none; }
  .history-hero figure { width:min(570px,100%); height:auto; aspect-ratio:570/340; padding:0; border:0; }
  .history-scroll-cue { margin-top:-14px; }
  .history-origin,.history-timeline::before,.history-slide::before,.history-node,.history-years,.history-next-line { display:none; }
  .history-next { height:auto; min-height:0; padding:0 34px 220px; }
  .history-next-inner { width:100%; gap:32px; padding-top:48px; box-sizing:border-box; }
  .history-next-mark { height:auto; }
  .history-next-copy h2 { font-size:36px; }
  .history-slide { min-height:calc(100svh - 64px); grid-template-columns:1fr; grid-template-rows:auto auto; gap:48px; padding:72px 34px; }
  .history-slide:not(.reverse) .history-copy,.history-slide.reverse .history-copy { grid-column:1; grid-row:1; width:min(100%,560px); }
  .history-slide:not(.reverse) .history-media,.history-slide.reverse .history-media { grid-column:1; grid-row:2; width:min(100%,560px); height:min(56vw,350px); }
  .history-chapter-number { top:24px; right:30px; }
}
@media (max-width:560px) {
  .history-hero { padding:52px 24px 98px; gap:48px; }
  .history-hero-copy>span { font-size:14px; }
  .history-hero h1 { font-size:40px; }
  .history-hero p { font-size:15px; line-height:22px; }
  .history-scroll-cue { font-size:14px; }
  .history-slide { padding:64px 24px; gap:48px; align-content:center; }
  .history-copy { gap:24px; }
  .history-event-list { gap:24px; }
  .history-copy h2 { font-size:36px; }
  .history-event h3 { font-size:24px; }
  .history-event p { font-size:15px; line-height:22px; }
  .history-media { height:auto; aspect-ratio:480 / 340; }
  .history-slide .history-copy,
  .history-slide .history-media { width:min(480px,100%); margin-inline:auto; }
  .history-next { padding-left:24px; padding-right:24px; }
  .history-next-copy span { font-size:14px; }
  .history-next-copy h2 { font-size:32px; }
  .history-next-copy p { font-size:15px; line-height:22px; }
}
@media (prefers-reduced-motion:reduce) {
  html:has(.history-page) { scroll-behavior:auto; }
  .history-slide::before,.history-copy,.history-media,.history-node,.history-node img,.history-next-line { transition:none; }
}