.intro{
  position:fixed;
  inset:0;
  z-index:100;
  background:#030405;
  color:#f2f4f3;
  overflow:hidden;
  transition:1s opacity,1s visibility
}
.intro.hide{
  opacity:0;
  visibility:hidden;
  pointer-events:none
}
.intro-noise{
  display:none
}
.intro-grid{
  position:absolute;
  inset:0;
  opacity:.035;
  background:linear-gradient(90deg,transparent 49.96%,#d7edf414 50%,transparent 50.04%),linear-gradient(transparent 49.96%,#d7edf410 50%,transparent 50.04%)
}
.intro-corner{
  position:absolute;
  font:500 9px/1.5 ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.18em;
  color:#647078
}
.intro-corner.tl{
  top:28px;
  left:30px
}
.intro-corner.tr{
  top:28px;
  right:30px;
  text-align:right
}
.intro-corner.bl{
  bottom:27px;
  left:30px
}
.intro-stage{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  text-align:center
}
.intro-first>div{
  position:absolute;
  left:7vw;
  bottom:18vh;
  text-align:left;
  width:min(900px,86vw)
}
.intro-first{
  animation:firstOut 2.35s forwards
}
.first-date{
  font:500 10px ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.32em;
  color:#7e8a8f;
  margin-bottom:18px
}
.first-title{
  font-size:clamp(64px,11vw,150px);
  font-weight:800;
  letter-spacing:-.07em;
  line-height:.78
}
.first-sub{
  margin-top:22px;
  font:500 9px ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.2em;
  color:#68747a
}
.intro-years{
  opacity:0;
  animation:yearsIn .35s 2.05s forwards;
  overflow:hidden
}
.intro-years.done{
  opacity:0!important;
  transition:opacity .55s ease
}
.chronology{
  position:absolute;
  inset:0
}
.era-title{
  position:absolute;
  z-index:2;
  left:4vw;
  right:4vw;
  top:8vh;
  font-size:clamp(62px,12vw,190px);
  font-weight:900;
  letter-spacing:-.07em;
  color:#ffffff10;
  line-height:.75;
  opacity:0;
  transform:translateY(22px);
  transition:.2s
}
.era-title.show{
  opacity:1;
  transform:none
}
.era-title small{
  display:block;
  margin-top:20px;
  color:#ffffff62;
  font:700 9px ui-monospace,monospace;
  letter-spacing:.32em
}
.timeline-rail{
  position:absolute;
  z-index:4;
  inset:13vh 0 11vh;
  overflow:hidden;
  pointer-events:none;
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)
}
.timeline-track{
  transition:transform .22s linear;
  position:absolute;
  left:50%;
  top:50%;
  width:18000px;
  height:3px;
  background:#3e484d;
  will-change:transform
}
.timeline-track:before{
  content:"";
  position:absolute;
  left:0;
  top:-1px;
  width:var(--progress,0px);
  height:5px;
  background:#d9edf3;
  box-shadow:0 0 24px #d2f5ff45
}
.timeline-track.post:before{
  background:linear-gradient(90deg,#d9edf3 0 19%,#ff4938 19% 55%,#b6d2da 73%,#e5f3f6 100%)
}
.tl-mark{
  position:absolute;
  top:-14px;
  width:1px;
  height:29px;
  background:#647177
}
.tl-mark.major{
  top:-23px;
  height:47px;
  background:#d8e6e9
}
.tl-mark.rupture{
  top:-45px;
  height:91px;
  background:#ff4937;
  box-shadow:0 0 25px #ff382a
}
.tl-year{
  position:absolute;
  top:30px;
  transform:translateX(-50%);
  color:#758187;
  font:700 11px ui-monospace,monospace;
  letter-spacing:.12em;
  white-space:nowrap
}
.tl-year.major{
  color:#e0eaed;
  font-size:15px
}
.tl-year.rupture{
  color:#ff776b;
  font-size:18px
}
.tl-event{
  position:absolute;
  width:max-content;
  max-width:360px;
  transform:translateX(-50%);
  padding:9px 11px 8px;
  border-left:2px solid #6c797e;
  color:#e3e8e9;
  background:linear-gradient(90deg,#0b0d0ee8 0,#0b0d0eaa 70%,transparent);
  font:700 12px/1.2 ui-monospace,monospace;
  letter-spacing:.025em;
  white-space:nowrap;
  opacity:.72
}
.tl-event:before{
  content:attr(data-year);
  display:block;
  margin-bottom:5px;
  color:#829096;
  font-size:8px;
  letter-spacing:.18em
}
.tl-event:after{
  content:"";
  position:absolute;
  left:0;
  width:1px;
  background:#59666b
}
.tl-event.up:after{
  top:100%;
  height:var(--stem)
}
.tl-event.down:after{
  bottom:100%;
  height:var(--stem)
}
.tl-event.hot{
  color:#fff;
  border-color:#ff4937;
  background:linear-gradient(90deg,#260806e8,transparent)
}
.tl-event.rank-a{
  font-size:13px;
  opacity:.9
}
.tl-event.rank-b{
  opacity:.72
}
.tl-event.rank-c{
  font-size:10px;
  opacity:.5
}
.tl-event.hot:before{
  color:#ff7165
}
.tl-event.active{
  z-index:8;
  opacity:1;
  color:#fff;
  border-color:#eaf9fc;
  transform:translateX(-50%) scale(1.14);
  box-shadow:-10px 0 28px #dff8ff12
}
.tl-event.active.hot{
  border-color:#ff4937;
  box-shadow:-10px 0 35px #ff493728
}
.timeline-now{
  position:absolute;
  z-index:9;
  left:50%;
  top:13%;
  bottom:12%;
  width:1px;
  background:linear-gradient(transparent,#f2fdff 15%,#f2fdff 85%,transparent);
  box-shadow:0 0 15px #d9f7ff
}
.timeline-now:before{
  content:"ARCHIVE CURSOR";
  position:absolute;
  left:10px;
  top:8px;
  color:#dce9ed;
  font:700 8px ui-monospace,monospace;
  letter-spacing:.18em;
  white-space:nowrap
}
.timeline-year{
  position:absolute;
  z-index:14;
  left:50%;
  top:calc(50% - 126px);
  transform:translateX(-50%);
  font:900 clamp(38px,5.6vw,76px)/.8 ui-monospace,monospace;
  letter-spacing:-.08em;
  color:#f4f7f8;
  text-shadow:0 0 30px #000
}
.timeline-year.flip{
  animation:yearFlip .22s cubic-bezier(.2,.7,.2,1)
}
.timeline-era{
  position:absolute;
  z-index:14;
  left:50%;
  top:calc(50% + 118px);
  transform:translateX(-50%);
  color:#8f9ba0;
  font:700 8px ui-monospace,monospace;
  letter-spacing:.22em;
  white-space:nowrap
}
.record-window{
  position:absolute;
  z-index:13;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(760px,82vw);
  height:132px;
  border-top:1px solid #637076;
  border-bottom:1px solid #30383c;
  background:linear-gradient(90deg,transparent,#07090ae8 15%,#07090af4 50%,#07090ae8 85%,transparent);
  overflow:hidden;
  text-align:center;
  display:grid;
  place-items:center;
  pointer-events:none
}
.record-window:before,.record-window:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:1px;
  background:#ffffff08
}
.record-window:before{
  top:44px
}
.record-window:after{
  bottom:32px
}
.record-status{
  position:absolute;
  top:10px;
  left:0;
  right:0;
  color:#718087;
  font:700 7px ui-monospace,monospace;
  letter-spacing:.28em
}
.record-event{
  position:absolute;
  left:3%;
  right:3%;
  top:45px;
  font-size:clamp(25px,4.4vw,58px);
  font-weight:900;
  line-height:.9;
  letter-spacing:-.05em;
  color:#edf2f3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.record-event.roll{
  animation:recordRoll .3s cubic-bezier(.18,.8,.22,1)
}
.record-eng{
  position:absolute;
  left:0;
  right:0;
  bottom:10px;
  color:#758187;
  font:700 7px ui-monospace,monospace;
  letter-spacing:.18em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.record-window.war{
  border-top-color:#ff5a4e66
}
.record-window.war .record-status{
  color:#ff655a
}
.record-window.impact{
  animation:recordJam .48s steps(2)
}
@keyframes recordRoll{
  0%{
    opacity:0;
    transform:translateY(46px) rotateX(-72deg)
  }
  42%{
    opacity:1;
    transform:translateY(-3px) rotateX(7deg)
  }
  100%{
    opacity:1;
    transform:none
  }
  
}
@keyframes yearFlip{
  0%{
    opacity:.15;
    transform:translateX(-50%) translateY(14px) rotateX(-75deg)
  }
  100%{
    opacity:1;
    transform:translateX(-50%) none
  }
  
}
@keyframes recordJam{
  0%{
    transform:translate(-50%,-50%)
  }
  25%{
    transform:translate(calc(-50% - 7px),calc(-50% + 2px))
  }
  50%{
    transform:translate(calc(-50% + 10px),calc(-50% - 1px))
  }
  75%{
    transform:translate(calc(-50% - 3px),-50%)
  }
  
}
.rupture-note{
  position:absolute;
  z-index:18;
  left:4vw;
  top:8vh;
  width:min(520px,72vw);
  color:#ff6255;
  font:800 9px ui-monospace,monospace;
  letter-spacing:.28em;
  opacity:0;
  pointer-events:none;
  text-align:left;
  transform-origin:left top
}
.rupture-note:before{
  content:"";
  position:fixed;
  inset:0;
  background:#f4f7f7;
  opacity:0
}
.intro-years.ruptured .rupture-note:before{
  animation:whiteHit .48s steps(2) both
}
.rupture-note b{
  display:block;
  margin-top:8px;
  color:#fff;
  font-size:clamp(58px,9.5vw,132px);
  line-height:.72;
  letter-spacing:-.075em;
  text-shadow:9px 0 0 #ff3c2c22,-7px 0 0 #75d8ff18
}
.rupture-note:after{
  content:"2031 // SYSTEM RUPTURE";
  display:block;
  margin-top:14px;
  padding-top:8px;
  border-top:1px solid #ff514644;
  color:#a64f49;
  font:700 7px ui-monospace,monospace;
  letter-spacing:.22em
}
.intro-years.ruptured .rupture-note{
  animation:ruptureFlash 1.25s steps(2) both
}
.intro-years.ruptured .timeline-rail{
  animation:railBreak .4s steps(2) 2
}
.signal-fault{
  position:absolute;
  z-index:10;
  height:2px;
  background:#ff4937;
  opacity:0;
  box-shadow:0 0 10px #ff4937
}
.intro-years.ruptured .signal-fault{
  animation:fault .8s steps(2) forwards
}
.f1{
  left:4%;
  right:54%;
  top:48%
}
.f2{
  left:53%;
  right:5%;
  top:52%;
  animation-delay:.08s!important
}
.f3{
  left:22%;
  right:26%;
  top:50%;
  animation-delay:.16s!important
}
@keyframes fault{
  0%{
    opacity:0;
    transform:translateX(-30px)
  }
  35%{
    opacity:1
  }
  100%{
    opacity:0;
    transform:translateX(45px)
  }
  
}
@keyframes ruptureFlash{
  0%,7%{
    opacity:0;
    transform:translate(-36px,-8px) skewX(-8deg)
  }
  8%{
    opacity:1;
    transform:translate(12px,0) skewX(3deg)
  }
  13%{
    opacity:.16;
    transform:translate(-8px,2px)
  }
  18%,67%{
    opacity:1;
    transform:none
  }
  73%{
    opacity:.28;
    transform:translate(18px,-2px) skewX(-4deg)
  }
  100%{
    opacity:0;
    transform:translate(-18px,0)
  }
  
}
@keyframes whiteHit{
  0%,8%{
    opacity:0
  }
  9%,15%{
    opacity:.96
  }
  16%,26%{
    opacity:0
  }
  27%,31%{
    opacity:.42
  }
  32%,100%{
    opacity:0
  }
  
}
@keyframes railBreak{
  0%{
    transform:none
  }
  25%{
    transform:translateX(-10px)
  }
  50%{
    transform:translateX(14px)
  }
  75%{
    transform:translateX(-5px)
  }
  
}
@keyframes yearsIn{
  from{
    opacity:0
  }
  to{
    opacity:1
  }
  
}
.intro-years.braking .record-window,.intro-years.braking .timeline-rail,.intro-years.braking .timeline-era{
  opacity:.16;
  filter:blur(1px);
  transition:.5s cubic-bezier(.2,.7,.2,1)
}
.intro-years.braking .timeline-year{
  transform:translateX(-50%) scale(1.08);
  letter-spacing:-.11em;
  transition:.5s cubic-bezier(.2,.8,.2,1)
}
.final-blackout{
  position:absolute;
  z-index:25;
  inset:0;
  background:#000;
  display:grid;
  place-content:center;
  text-align:center;
  opacity:0;
  pointer-events:none;
  overflow:hidden
}
.final-blackout:before,.final-blackout:after{
  content:"";
  position:absolute;
  z-index:1;
  left:0;
  right:0;
  height:50%;
  background:#050607
}
.final-blackout:before{
  top:0;
  transform:translateY(-102%)
}
.final-blackout:after{
  bottom:0;
  transform:translateY(102%)
}
.final-lock{
  position:relative;
  z-index:2;
  width:100vw;
  display:grid;
  place-items:center;
  isolation:isolate
}
.final-lock:before{
  content:"";
  position:fixed;
  z-index:-1;
  inset:0;
  background:radial-gradient(circle at 50% 52%,#dff7ff12 0,transparent 28%),repeating-linear-gradient(0deg,#ffffff05 0 1px,transparent 1px 5px);
  opacity:0
}
.final-lock:after{
  content:"";
  position:fixed;
  z-index:3;
  top:0;
  bottom:0;
  left:-12vw;
  width:9vw;
  background:linear-gradient(90deg,transparent,#e8fbff1c,transparent);
  filter:blur(5px);
  opacity:0;
  transform:skewX(-12deg);
  pointer-events:none
}
.final-blackout span{
  font:700 8px ui-monospace,monospace;
  letter-spacing:.36em;
  color:#7c898e;
  opacity:0
}
.final-blackout b{
  display:block;
  margin-top:24px;
  font-size:clamp(150px,31vw,430px);
  line-height:.58;
  letter-spacing:-.105em;
  color:#f2f5f5;
  opacity:0;
  transform:scale(2.28);
  filter:blur(16px);
  text-shadow:0 0 42px #dff8ff12
}
.final-blackout em{
  display:block;
  margin-top:34px;
  font:700 8px ui-monospace,monospace;
  letter-spacing:.28em;
  color:#657176;
  font-style:normal;
  opacity:0
}
.final-blackout.hit{
  opacity:1;
  animation:finalFade 3.9s cubic-bezier(.2,.7,.2,1) both
}
.final-blackout.hit:before{
  animation:shutterTop .32s cubic-bezier(.72,0,.18,1) forwards
}
.final-blackout.hit:after{
  animation:shutterBottom .32s cubic-bezier(.72,0,.18,1) forwards
}
.final-blackout.hit .final-lock:before{
  animation:impactField 3.45s .28s ease-out both
}
.final-blackout.hit .final-lock:after{
  animation:scanSweep 1.15s 1.05s cubic-bezier(.16,.72,.2,1) both
}
.final-blackout.hit b{
  animation:titleLock 1.08s .42s cubic-bezier(.1,.82,.12,1) forwards
}
.final-blackout.hit span{
  animation:smallReveal .42s 1.78s forwards
}
.final-blackout.hit em{
  animation:smallReveal .46s 1.96s forwards
}
@keyframes shutterTop{
  0%{
    transform:translateY(-102%)
  }
  88%,100%{
    transform:translateY(0)
  }
  
}
@keyframes shutterBottom{
  0%{
    transform:translateY(102%)
  }
  88%,100%{
    transform:translateY(0)
  }
  
}
@keyframes impactField{
  0%{
    opacity:0;
    background-color:#fff
  }
  2%{
    opacity:.88
  }
  5%{
    opacity:.05
  }
  9%{
    opacity:.26
  }
  13%{
    opacity:.07
  }
  22%,100%{
    opacity:1
  }
  
}
@keyframes scanSweep{
  0%{
    left:-12vw;
    opacity:0
  }
  14%{
    opacity:.9
  }
  72%{
    opacity:.35
  }
  100%{
    left:108vw;
    opacity:0
  }
  
}
@keyframes smallReveal{
  from{
    opacity:0;
    transform:translateY(10px);
    letter-spacing:.48em
  }
  to{
    opacity:1;
    transform:none
  }
  
}
@keyframes titleLock{
  0%{
    opacity:0;
    transform:scale(2.28);
    filter:blur(16px)
  }
  18%{
    opacity:1;
    filter:blur(2px);
    transform:scale(1.12)
  }
  48%{
    opacity:1;
    transform:scale(.975);
    filter:none
  }
  63%{
    transform:scale(1.014)
  }
  76%{
    transform:scale(.996)
  }
  100%{
    opacity:1;
    transform:scale(1);
    filter:none
  }
  
}
@keyframes finalFade{
  0%,89%{
    opacity:1
  }
  100%{
    opacity:0
  }
  
}
.intro-final{
  opacity:0;
  pointer-events:none
}
.intro-final.ready{
  animation:finalIn .9s forwards
}
@media(max-width:650px){
  .rupture-note{
    left:5vw;
    top:9vh;
    width:82vw
  }
  .rupture-note b{
    font-size:clamp(52px,17vw,92px)
  }
  .record-window{
    width:90vw;
    height:120px
  }
  .record-event{
    font-size:clamp(25px,8vw,42px)
  }
  .timeline-year{
    top:calc(50% - 116px)
  }
  .timeline-era{
    top:calc(50% + 108px)
  }
  .intro-first>div{
    left:6vw;
    bottom:20vh;
    width:88vw
  }
  .first-title{
    font-size:clamp(58px,18vw,96px)
  }
  .tl-event{
    font-size:10px;
    max-width:210px
  }
  .timeline-rail{
    inset:15vh 0 13vh
  }
  .era-title{
    top:10vh
  }
  .timeline-now{
    top:15%;
    bottom:14%
  }
  
}
.final-wrap{
  position:relative;
  z-index:6;
  width:min(1100px,calc(100% - 42px));
  text-align:left;
  transition:opacity .28s ease,transform .45s cubic-bezier(.2,.75,.2,1)
}
.final-code{
  font:500 10px ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.25em;
  color:#75848a
}
.final-title{
  font-size:clamp(120px,25vw,330px);
  font-weight:800;
  letter-spacing:-.095em;
  line-height:.66;
  margin:52px 0 48px;
  transform:scale(1);
  transform-origin:45% 55%;
  transition:filter .18s ease;
  text-shadow:0 0 0 transparent
}
.final-rule{
  height:1px;
  background:linear-gradient(90deg,#d4eef5 0 18%,#31393d 18% 100%)
}
.final-bottom{
  display:grid;
  grid-template-columns:1fr minmax(250px,330px);
  align-items:end;
  gap:54px;
  padding-top:24px
}
.final-copy{
  font-size:clamp(16px,2vw,23px);
  line-height:1.55;
  color:#c5cbcd
}
.final-copy small{
  display:block;
  margin-top:12px;
  font:500 9px ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.18em;
  color:#657177
}
.access-console{
  text-align:right;
  font-family:ui-monospace,SFMono-Regular,monospace;
  user-select:none
}
.access-status{
  font-size:8px;
  letter-spacing:.23em;
  color:#68757a;
  transition:.18s
}
.access-percent{
  margin:8px 0 7px;
  font-size:clamp(24px,3vw,40px);
  font-weight:800;
  letter-spacing:-.055em;
  color:#dcecef;
  font-variant-numeric:tabular-nums
}
.access-hint{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:11px;
  color:#8a979c;
  user-select:none
}
.hold-copy{
  display:flex;
  flex-direction:column;
  gap:4px
}
.hold-copy b{
  font:700 8px ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.18em;
  color:#aab7bb
}
.hold-copy small{
  font:500 10px/1.35 "Pretendard","Noto Sans KR",system-ui,sans-serif;
  letter-spacing:0;
  color:#69757a
}
.hold-pulse{
  position:relative;
  display:block;
  width:24px;
  height:24px;
  flex:0 0 24px;
  border:1px solid #82909655;
  border-radius:50%
}
.hold-pulse:before,.hold-pulse:after{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid #c9e4eb88;
  border-radius:50%;
  animation:holdPulse 1.65s ease-out infinite
}
.hold-pulse:after{
  animation-delay:.55s
}
.hold-pulse i{
  position:absolute;
  left:50%;
  top:50%;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#dceff3;
  transform:translate(-50%,-50%);
  box-shadow:0 0 8px #d7f4ff88
}
@keyframes holdPulse{
  0%{
    opacity:.9;
    transform:scale(.45)
  }
  70%{
    opacity:.12;
    transform:scale(1.75)
  }
  100%{
    opacity:0;
    transform:scale(2)
  }
  
}
.intro-final{
  cursor:crosshair;
  touch-action:none;
  outline:none
}
.intro-final:focus-visible .access-hint{
  color:#e8f5f7
}
.access-frame{
  position:fixed;
  z-index:8;
  inset:13px;
  width:calc(100% - 26px);
  height:calc(100% - 26px);
  pointer-events:none;
  overflow:visible
}
.access-frame rect{
  fill:none;
  vector-effect:non-scaling-stroke
}
.access-frame-base{
  stroke:#75828822;
  stroke-width:1
}
.access-frame-progress{
  stroke:#d8edf3;
  stroke-width:1.35;
  stroke-dasharray:100;
  stroke-dashoffset:100;
  filter:drop-shadow(0 0 5px #d9f6ff55)
}
.access-gate{
  position:fixed;
  z-index:2;
  inset:0;
  pointer-events:none
}
.access-gate i{
  position:absolute;
  left:0;
  width:100%;
  height:50%;
  background:#030405;
  will-change:transform
}
.gate-top{
  top:0
}
.gate-bottom{
  bottom:0
}
.access-divider{
  position:fixed;
  z-index:10;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background:#e8f8fb;
  box-shadow:0 0 14px #dff9ff77;
  transform:scaleX(0);
  opacity:0;
  transform-origin:center;
  pointer-events:none
}
.access-granted{
  position:fixed;
  z-index:12;
  inset:0;
  display:grid;
  place-content:center;
  text-align:center;
  opacity:0;
  pointer-events:none
}
.access-granted span,.access-granted em{
  font:700 8px ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.3em;
  color:#758287;
  font-style:normal
}
.access-granted b{
  display:block;
  margin:16px 0 14px;
  font-size:clamp(34px,6vw,84px);
  line-height:.9;
  letter-spacing:-.055em;
  color:#f2f6f7
}
.intro-final.holding .access-status{
  color:#b9d9e5
}
.intro-final.holding .hold-copy b{
  color:#edf8fa
}
.intro-final.holding .hold-copy small{
  color:#9eacb0
}
.intro-final.holding .hold-pulse:before,.intro-final.holding .hold-pulse:after{
  animation-duration:.72s
}
.intro-final.holding .final-title{
  text-shadow:0 0 34px #dff8ff18
}
.intro-final.granted .final-wrap{
  opacity:.08;
  transform:scale(.985)
}
.intro-final.granted .access-frame{
  opacity:.35;
  transition:opacity .2s
}
.intro-final.granted .access-divider{
  animation:accessLine .3s cubic-bezier(.1,.8,.2,1) forwards
}
.intro-final.granted .access-granted{
  animation:grantIn .34s .08s ease forwards
}
.intro-final.unsealed .access-granted{
  opacity:0;
  transition:opacity .18s
}
.intro-final.unsealed .gate-top{
  transform:translateY(-101%);
  transition:transform .78s cubic-bezier(.72,0,.18,1)
}
.intro-final.unsealed .gate-bottom{
  transform:translateY(101%);
  transition:transform .78s cubic-bezier(.72,0,.18,1)
}
.intro-final.unsealed .final-wrap,.intro-final.unsealed .access-frame,.intro-final.unsealed .access-divider{
  opacity:0;
  transition:opacity .2s
}
.intro.unsealing{
  background:transparent;
  transition:none
}
.intro-skip{
  position:absolute;
  z-index:30;
  right:28px;
  bottom:26px;
  border:0;
  border-bottom:1px solid #566268;
  background:transparent;
  color:#8b989d;
  padding:7px 2px;
  font:700 8px ui-monospace,monospace;
  letter-spacing:.2em;
  cursor:pointer;
  transition:.2s
}
.intro-skip:hover{
  color:#eef5f7;
  border-color:#eef5f7
}
.intro.final-visible .intro-skip{
  opacity:0;
  pointer-events:none
}
@keyframes accessLine{
  0%{
    opacity:0;
    transform:scaleX(0)
  }
  25%{
    opacity:1
  }
  100%{
    opacity:1;
    transform:scaleX(1)
  }
  
}
@keyframes grantIn{
  from{
    opacity:0;
    transform:scale(1.035);
    filter:blur(5px)
  }
  to{
    opacity:1;
    transform:none;
    filter:none
  }
  
}
@keyframes firstOut{
  0%,62%{
    opacity:1
  }
  78%{
    opacity:.12;
    filter:blur(0)
  }
  80%{
    opacity:.8;
    transform:translateX(5px)
  }
  83%{
    opacity:.05;
    transform:translateX(-7px)
  }
  100%{
    opacity:0;
    visibility:hidden
  }
  
}
@keyframes finalIn{
  to{
    opacity:1;
    pointer-events:auto
  }
  
}
@media(max-width:650px){
  .intro-skip{
    right:18px;
    bottom:18px
  }
  .intro-corner.tr{
    display:none
  }
  .final-title{
    font-size:clamp(105px,37vw,180px);
    margin:44px 0 40px
  }
  .final-bottom{
    grid-template-columns:1fr;
    gap:28px
  }
  .access-console{
    text-align:left
  }
  .access-frame{
    inset:9px;
    width:calc(100% - 18px);
    height:calc(100% - 18px)
  }
  .access-percent{
    font-size:30px
  }
  .intro-corner.tl{
    top:20px;
    left:20px
  }
  .intro-corner.bl{
    left:20px;
    bottom:18px
  }
  
}
@media(prefers-reduced-motion:reduce){
  .intro-first,.intro-years{
    display:none
  }
  .intro-final{
    opacity:1;
    pointer-events:auto;
    animation:none
  }
  .intro-noise{
    animation:none
  }
  
}