.path-section {
  position: relative;
  overflow: hidden;
}
.golden-time-copy {
  max-width: 900px;
  margin: 28px 0 0;
  color: #9db3ad;
  font-size: 18px;
  line-height: 1.8;
}
.time-motion {
  position: relative;
  height: 172px;
  margin-top: 58px;
  overflow: hidden;
  border: 1px solid rgba(62,240,178,.16);
  background:
    radial-gradient(circle at 78% 50%, rgba(62,240,178,.09), transparent 24%),
    repeating-linear-gradient(90deg, rgba(213,250,239,.14) 0 1px, transparent 1px 12px),
    linear-gradient(90deg, rgba(5,16,20,.96), rgba(8,29,29,.72), rgba(5,16,20,.96));
  background-size: auto, 240px 28px, auto;
  background-position: 0 0, 0 100%, 0 0;
  animation: time-ruler-flow 1.4s linear infinite;
}
.time-motion:before,
.time-motion:after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.time-motion:before {
  background: repeating-linear-gradient(180deg, transparent 0 33px, rgba(62,240,178,.055) 34px 35px);
}
.time-motion:after {
  background: linear-gradient(90deg, var(--bg), transparent 13%, transparent 86%, var(--bg));
}
.time-ruler {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 10px;
  display: flex;
  justify-content: space-between;
  color: rgba(146,170,165,.58);
  font: 9px ui-monospace, monospace;
  letter-spacing: .08em;
  z-index: 2;
}
.time-stream {
  position: absolute;
  left: 27%;
  right: 23%;
  top: 50%;
  height: 1px;
  background: rgba(62,240,178,.18);
  z-index: 1;
}
.golden-window {
  position: absolute;
  left: 27%;
  right: 23%;
  top: 112px;
  height: 9px;
  z-index: 4;
  overflow: visible;
  border: 1px solid rgba(213,250,239,.18);
  background: #f0505c;
  box-shadow: inset 0 0 12px rgba(0,0,0,.32), 0 0 18px rgba(240,80,92,.12);
}
.golden-window:before {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  width: 18%;
  background: linear-gradient(90deg, #f4bd5a 0, #3ef0b2 24%, #17c990 100%);
  box-shadow: -3px 0 12px rgba(244,189,90,.5), 0 0 18px rgba(62,240,178,.2);
  animation: seize-golden-time 2.8s cubic-bezier(.35,0,.2,1) infinite;
}
.golden-window:after {
  content: '';
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  left: 82%;
  background: #fff2b2;
  box-shadow: 0 0 10px #f4bd5a, 0 0 22px rgba(244,189,90,.55);
  animation: golden-boundary 2.8s cubic-bezier(.35,0,.2,1) infinite;
}
.golden-window span,.golden-window b,.golden-window em {
  position: absolute;
  top: 14px;
  white-space: nowrap;
  font: 9px ui-monospace,monospace;
  letter-spacing: .08em;
  font-style: normal;
  font-weight: 500;
}
.golden-window span { left: 0; color: #ef7a82; }
.golden-window b { left: 39%; color: var(--gold); }
.golden-window em { right: 0; color: var(--green); }
.time-stream i {
  position: absolute;
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px rgba(62,240,178,.9);
  animation: packet-run 2.1s linear infinite;
}
.time-stream i:nth-child(2){animation-delay:-.35s}.time-stream i:nth-child(3){animation-delay:-.7s}.time-stream i:nth-child(4){animation-delay:-1.05s}.time-stream i:nth-child(5){animation-delay:-1.4s}.time-stream i:nth-child(6){animation-delay:-1.75s}
.time-readout {
  position: absolute;
  left: 34px;
  top: 31px;
  z-index: 3;
  display: grid;
  gap: 1px;
  font-family: ui-monospace, monospace;
}
.time-readout small { color: #6f8c84; font-size: 9px; letter-spacing: .16em; }
.time-readout strong { font-size: clamp(25px,3vw,42px); font-weight: 400; letter-spacing: -.06em; }
.time-readout strong b { color: var(--green); font-weight: 500; text-shadow: 0 0 18px rgba(62,240,178,.38); }
.time-readout em { color: var(--gold); font-size: 9px; font-style: normal; letter-spacing: .14em; }
.stopwatch {
  position: absolute;
  right: 76px;
  top: 17px;
  width: 138px;
  height: 138px;
  border-radius: 50%;
  z-index: 3;
  border: 1px solid rgba(62,240,178,.4);
  background:
    radial-gradient(circle, rgba(62,240,178,.11) 0 3%, transparent 4%),
    repeating-conic-gradient(from -1deg, rgba(213,250,239,.46) 0 1deg, transparent 1deg 15deg),
    radial-gradient(circle, rgba(4,15,18,.94) 0 66%, transparent 67%);
  box-shadow: inset 0 0 30px rgba(62,240,178,.07), 0 0 28px rgba(62,240,178,.08);
}
.stopwatch:before { content:''; position:absolute; inset:13px; border:1px solid rgba(213,250,239,.12); border-radius:50%; }
.watch-crown { position:absolute; width:24px; height:9px; border:1px solid rgba(62,240,178,.38); border-bottom:0; top:-10px; left:56px; }
.watch-center { position:absolute; width:9px; height:9px; border-radius:50%; background:var(--green); left:64px; top:64px; z-index:5; box-shadow:0 0 12px var(--green); }
.watch-hand { position:absolute; left:68px; bottom:69px; width:1px; transform-origin:50% 100%; background:var(--green); z-index:4; }
.watch-hand.long { height:49px; animation: watch-spin .95s linear infinite; box-shadow:0 0 8px var(--green); }
.watch-hand.short { height:34px; background:var(--gold); animation: watch-spin 7.5s linear infinite; }
.stopwatch>b { position:absolute; left:0; right:0; bottom:27px; text-align:center; color:#75928a; font:10px ui-monospace,monospace; }
.time-scan {
  position: absolute;
  z-index: 6;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #d5faef;
  box-shadow: 0 0 7px #fff, 0 0 18px var(--green), -35px 0 45px rgba(62,240,178,.2);
  animation: scan-time 1.7s cubic-bezier(.35,0,.65,1) infinite;
}
.path-grid {
  position: relative;
  margin-top: 24px;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(62,240,178,.035) 80px 81px),
    linear-gradient(90deg, rgba(62,240,178,.02), transparent 45%);
  background-position: 0 0;
  animation: path-time-drift 4s linear infinite;
}
.path-grid:after {
  content: '';
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  width: 1px;
  pointer-events: none;
  background: rgba(62,240,178,.8);
  box-shadow: 0 0 14px rgba(62,240,178,.7), -24px 0 35px rgba(62,240,178,.12);
  animation: scan-grid 2.6s linear infinite;
}
.path-grid article { overflow: hidden; background: rgba(6,16,20,.38); }
.path-grid article:before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(110deg, transparent 15%, rgba(62,240,178,.1), transparent 65%);
  transform: translateX(-100%);
  animation: card-time-pass 2.6s linear infinite;
  pointer-events: none;
}
.path-grid article:nth-child(2):before{animation-delay:.22s}.path-grid article:nth-child(3):before{animation-delay:.44s}.path-grid article:nth-child(4):before{animation-delay:.66s}.path-grid article:nth-child(5):before{animation-delay:.88s}.path-grid article:nth-child(6):before{animation-delay:1.1s}
.path-grid .dot { animation: time-pulse 1.3s ease-in-out infinite; }
.path-grid article:nth-child(2) .dot{animation-delay:.16s}.path-grid article:nth-child(3) .dot{animation-delay:.32s}.path-grid article:nth-child(4) .dot{animation-delay:.48s}.path-grid article:nth-child(5) .dot{animation-delay:.64s}.path-grid article:nth-child(6) .dot{animation-delay:.8s}
@keyframes time-ruler-flow { to { background-position:0 0,240px 100%,0 0; } }
@keyframes packet-run { from{left:-3%} to{left:103%} }
@keyframes watch-spin { to{transform:rotate(360deg)} }
@keyframes scan-time {
  0%{left:-3%;opacity:0;background:#ff4d5a;box-shadow:0 0 7px #fff,0 0 18px #ff4d5a,-35px 0 45px rgba(255,77,90,.2)}
  8%{opacity:1}
  42%{background:#f4bd5a;box-shadow:0 0 7px #fff,0 0 18px #f4bd5a,-35px 0 45px rgba(244,189,90,.2)}
  68%{background:#3ef0b2;box-shadow:0 0 7px #fff,0 0 18px #3ef0b2,-35px 0 45px rgba(62,240,178,.2)}
  92%{opacity:1}
  100%{left:103%;opacity:0;background:#3ef0b2}
}
@keyframes path-time-drift { to{background-position:162px 0,0 0} }
@keyframes scan-grid { from{left:-2%} to{left:102%} }
@keyframes card-time-pass { 0%,15%{opacity:0;transform:translateX(-100%)} 28%{opacity:1} 58%,100%{opacity:0;transform:translateX(100%)} }
@keyframes time-pulse { 0%,100%{transform:scale(.75);opacity:.45} 45%{transform:scale(1.15);opacity:1} }
@keyframes seize-golden-time { 0%,12%{width:18%} 72%,100%{width:76%} }
@keyframes golden-boundary { 0%,12%{left:82%} 72%,100%{left:24%} }
@media(max-width:600px){
  .golden-time-copy{font-size:15px;line-height:1.75}.time-motion{height:178px;margin-top:40px}.stopwatch{width:108px;height:108px;right:24px;top:19px}.stopwatch:before{inset:10px}.watch-crown{left:42px}.watch-center{left:50px;top:50px}.watch-hand{left:54px;bottom:54px}.watch-hand.long{height:38px}.watch-hand.short{height:26px}.stopwatch>b{bottom:19px}.time-readout{left:20px;top:32px}.time-stream{left:20%;right:20%;top:66%}.golden-window{left:8%;right:8%;top:128px}.golden-window span,.golden-window b,.golden-window em{font-size:8px}
}
@media(prefers-reduced-motion:reduce){
  .time-motion,.time-stream i,.watch-hand,.time-scan,.golden-window:before,.golden-window:after,.path-grid,.path-grid:after,.path-grid article:before,.path-grid .dot{animation:none!important}
}