/* terms of service: glowing timeline (js/tos.js) */
.tos-body h3 { margin: 0 0 8px; font-size: var(--text-xl); letter-spacing: .06em; text-transform: uppercase; color: var(--cyber-cyan-500); }
.tos-body p { margin: 0; color: var(--cyber-chrome-300); line-height: 1.6; }
.tos-body ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; color: var(--cyber-chrome-300); }
.tos-body ul li { position: relative; padding-left: 18px; }
.tos-body ul li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; transform: rotate(45deg); background: var(--cyber-cyan-500); }

.tos-time { position: relative; list-style: none; margin: 0; padding: 10px 0; }
.tos-time::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; transform: translateX(-50%);
  background: linear-gradient(transparent, var(--cyber-cyan-500) 6%, var(--cyber-cyan-500) 94%, transparent); box-shadow: 0 0 10px rgba(255,43,63,.5); }
.tos-time > li { position: relative; display: flex; padding: 14px 0; }
.tos-time > li.l { justify-content: flex-start; } .tos-time > li.r { justify-content: flex-end; }
.tos-time .card { width: calc(50% - 40px); box-sizing: border-box; padding: 18px 22px; background: rgba(18,20,29,.9); border: 1px solid var(--color-border-default);
  opacity: 0; transition: opacity .5s ease, transform .6s cubic-bezier(.2, 1.2, .4, 1); }
.tos-time > li.l .card { transform: translateX(-60px); } .tos-time > li.r .card { transform: translateX(60px); }
.tos-time > li.in .card { opacity: 1; transform: none; }
.tos-time .node { position: absolute; left: 50%; top: 34px; width: 14px; height: 14px; transform: translate(-50%, 0) rotate(45deg);
  background: var(--color-bg-primary); border: 2px solid var(--cyber-cyan-500); transition: background .4s, box-shadow .4s; }
.tos-time > li.in .node { background: var(--cyber-cyan-500); box-shadow: 0 0 14px rgba(255,43,63,.8); }
@media (max-width: 760px) {
  .tos-time::before, .tos-time .node { left: 12px; }
  .tos-time > li { justify-content: flex-end !important; } .tos-time .card { width: calc(100% - 40px); padding: 16px 16px; }
  .tos-time > li.l .card, .tos-time > li.r .card { transform: translateY(30px); }   /* rise in from below: a sideways slide would hang off a phone screen */
  .tos-time > li.in .card { transform: none; }
  .agree-card { padding: 18px 16px; }
}
@media (prefers-reduced-motion: reduce) { .tos-time .card, .tos-time .node { transition: none; } .tos-time .card { opacity: 1; transform: none; } }

/* ---- the I agree step at the end of the line */
.tos-time > li.agree { justify-content: center; padding-top: 40px; }
.tos-time .node.end { top: 18px; width: 20px; height: 20px; }
.agree-card { position: relative; z-index: 1; margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 22px;
  padding: 20px 26px; background: rgba(18,20,29,.94); border: 1px solid var(--color-border-default); border-radius: 14px; transition: border-color .4s, box-shadow .4s; }
.agree-check { display: flex; align-items: center; gap: 12px; cursor: pointer; font-size: var(--text-base); color: var(--color-text-primary); }
.agree-check input { position: absolute; opacity: 0; pointer-events: none; }
.agree-check .box { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border: 2px solid var(--cyber-cyan-500); border-radius: 5px; transition: background .2s, box-shadow .2s; }
.agree-check input:checked + .box { background: var(--cyber-cyan-500); box-shadow: 0 0 12px rgba(255,43,63,.6); }
.agree-check input:checked + .box::after { content: "✓"; color: #fff; font: 700 16px/1 var(--font-display); }
.agree-check input:focus-visible + .box { outline: 2px solid #fff; outline-offset: 2px; }
.confirm[disabled]:not(.agree.done .confirm) { opacity: .35; cursor: not-allowed; }
.confirm:not([disabled]) { animation: confirm-pulse 1.4s ease-in-out infinite; }
@keyframes confirm-pulse { 50% { box-shadow: 0 0 22px rgba(255,43,63,.75); } }
.agree.done .agree-card { border-color: var(--cyber-cyan-500); box-shadow: 0 0 28px rgba(255,43,63,.35); }
.agree.done .confirm { animation: none; opacity: 1; cursor: default; color: #fff; background: var(--cyber-cyan-500); box-shadow: 0 0 18px rgba(255,43,63,.6); filter: none; }

/* 1. pulse running down the line */
.tos-time.charged::after { content: ""; position: absolute; left: 50%; top: 0; width: 6px; height: 160px; transform: translateX(-50%); border-radius: 3px; pointer-events: none;
  background: linear-gradient(transparent, #fff, var(--cyber-cyan-500), transparent); box-shadow: 0 0 18px #ff2b3f, 0 0 40px rgba(255,43,63,.6);
  animation: line-pulse .9s cubic-bezier(.5, 0, .8, .6) forwards; }
@keyframes line-pulse { from { top: calc(100% - 900px); opacity: 0; } 12% { opacity: 1; } 90% { opacity: 1; } to { top: calc(100% - 60px); opacity: 0; } }   /* the last stretch, the part you can see */
.tos-time.charged::before { animation: line-glow 1.6s ease .7s forwards; }
@keyframes line-glow { 40% { box-shadow: 0 0 22px rgba(255,43,63,1); filter: brightness(1.6); } to { box-shadow: 0 0 12px rgba(255,43,63,.7); } }

/* 2. shockwave + hex burst at the last node */
.burst { position: absolute; left: 50%; top: 28px; width: 0; height: 0; pointer-events: none; z-index: 2; }
.burst .ring { position: absolute; left: -30px; top: -30px; width: 60px; height: 60px; border-radius: 50%; border: 2px solid var(--cyber-cyan-500); opacity: 0;
  box-shadow: 0 0 20px rgba(255,43,63,.7), inset 0 0 14px rgba(255,43,63,.5); }
.burst.go .ring { animation: ring 1s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes ring { from { transform: scale(.2); opacity: 1; } to { transform: scale(7); opacity: 0; } }
.burst i { position: absolute; left: -11px; top: -12px; width: 22px; height: 25px; background: var(--cyber-cyan-500); opacity: 0;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); filter: drop-shadow(0 0 6px #ff2b3f); }
.burst.go i { animation: hexfly 1.1s cubic-bezier(.15, .8, .3, 1) forwards; }
@keyframes hexfly { from { transform: rotate(var(--a)) translateY(0) rotate(0deg) scale(var(--s)); opacity: 1; }   /* same steps on both ends, or they collapse */
  70% { opacity: .9; }
  to { transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) rotate(180deg) scale(.55); opacity: 0; } }

/* 4. the unlocked sections rise in one after another */
.part { max-width: 980px; margin: 0 auto; padding: 60px max(16px, env(safe-area-inset-right, 0px)) 60px max(16px, env(safe-area-inset-left, 0px)); scroll-margin-top: 90px; }
.part h2 { font-size: var(--text-4xl); margin: 0 0 20px; }
.part .soon { margin: 0; padding: 40px; text-align: center; font: 500 15px var(--font-mono); color: var(--cyber-chrome-300);
  background: rgba(18,20,29,.85); border: 1px dashed rgba(255,43,63,.4); }
#unlocked.revealing .part { animation: part-in .8s cubic-bezier(.2, 1.1, .4, 1) backwards;   /* not "both": a kept transform traps the receipt under the scanlines */ animation-delay: calc(var(--k) * .18s + .2s); }
@keyframes part-in { from { opacity: 0; transform: translateY(60px) scale(.97); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

@media (prefers-reduced-motion: reduce) {
  .tos-time.charged::after, .burst { display: none; } .confirm:not([disabled]) { animation: none; } #unlocked.revealing .part { animation: none; }
}
@media (max-width: 760px) { .tos-time.charged::after { left: 12px; } }   /* phones: the pulse runs down the line where it is */