/* ==========================================================================
   ARCZIES — Arc-inspired navy/blue design system
   ========================================================================== */

:root{
  /* Arc network blues (sampled from the Arc reference) */
  --navy-900:#050d1a;
  --navy-800:#08172c;
  --navy-700:#0a2342;
  --navy-600:#0e3157;
  --navy-500:#14427a;
  --blue-400:#1f5fa8;
  --blue-300:#3b86d6;
  --blue-200:#6fb0ea;

  --ink:#eaf2ff;
  --ink-soft:#b6c8e4;
  --ink-dim:#8fa4c4;

  --panel:rgba(10,29,54,.72);
  --edge:rgba(126,176,235,.28);
  --edge-strong:rgba(150,196,245,.5);

  --lime:#c6f24d;
  --pink:#ff7bb0;
  --cyan:#63d7e6;
  --sun:#ffc633;
  --tangerine:#ff8a3d;
  --grape:#a97bff;
  --tomato:#ff5b4a;
  --leaf:#4fc07a;

  --line:2px;
  --radius:20px;

  --font-display:"Fredoka","Baloo 2",system-ui,sans-serif;
  --font-body:"Nunito",system-ui,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden}

html{
  background:var(--navy-900);
}

body{
  position:relative;
  min-height:100%;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.6;
  font-weight:600;
  background:
    radial-gradient(120% 70% at 50% 108%, rgba(111,176,234,.34) 0%, rgba(31,95,168,.18) 38%, rgba(10,35,66,0) 68%),
    radial-gradient(90% 55% at 12% -8%, rgba(20,66,122,.45) 0%, rgba(8,23,44,0) 62%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 26%, var(--navy-700) 52%, var(--navy-600) 74%, var(--navy-500) 100%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}

img{max-width:100%;display:block}

a{color:var(--blue-200);text-decoration:none}
a:hover{color:var(--ink)}

h1,h2,h3,h4{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.01em;
  color:#fff;
  text-wrap:pretty;
  overflow-wrap:break-word;
}
p{margin:0;text-wrap:pretty;overflow-wrap:break-word}

:focus-visible{outline:var(--line) solid var(--blue-200);outline-offset:3px}

.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- layout ---------- */

.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,32px)}
.section{padding:clamp(40px,7vw,84px) 0}
.section--tight{padding:clamp(26px,4vw,44px) 0}

/* bands become soft depth layers rather than flat color blocks */
.band{
  border-top:1px solid var(--edge);
  border-bottom:1px solid var(--edge);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  backdrop-filter:blur(2px);
}
.band--lime,.band--cyan,.band--sun,.band--pink{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015))}

.eyebrow{
  display:inline-block;
  font-family:var(--font-display);
  font-size:clamp(12px,2.6vw,14px);
  letter-spacing:.14em;
  text-transform:uppercase;
  background:rgba(111,176,234,.16);
  border:1px solid var(--edge-strong);
  color:var(--blue-200);
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:16px;
}

.h1{font-size:clamp(40px,11vw,96px);line-height:.95}
.h2{font-size:clamp(26px,6vw,48px)}
.h3{font-size:clamp(19px,3.6vw,26px)}

.body-text{font-size:clamp(17px,2.4vw,21px);line-height:1.55;font-weight:600;color:var(--ink-soft)}

/* ---------- surface primitives ---------- */

.panel{
  background:var(--panel);
  border:1px solid var(--edge);
  border-radius:var(--radius);
  box-shadow:0 18px 44px rgba(3,10,22,.5), inset 0 1px 0 rgba(255,255,255,.07);
  padding:clamp(18px,3.4vw,30px);
  backdrop-filter:blur(8px);
}
.panel--grape{border-color:rgba(169,123,255,.4)}
.panel--ink{background:rgba(5,13,26,.8)}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:56px;
  width:100%;
  max-width:100%;
  padding:14px 20px;
  font-family:var(--font-display);
  font-size:clamp(15px,3.2vw,19px);
  line-height:1.25;
  text-align:center;
  color:#06121f;
  background:linear-gradient(180deg,#8ec4f2,#3b86d6);
  border:1px solid rgba(255,255,255,.4);
  border-radius:999px;
  box-shadow:0 10px 24px rgba(4,12,26,.45), inset 0 1px 0 rgba(255,255,255,.55);
  cursor:pointer;
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
  word-break:break-word;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(4,12,26,.55), inset 0 1px 0 rgba(255,255,255,.6);color:#06121f;filter:brightness(1.06)}
.btn:active{transform:translateY(0);box-shadow:0 6px 16px rgba(4,12,26,.5)}

.btn--purple{background:linear-gradient(180deg,#d7f77e,#a7db3c);color:#12210a}
.btn--purple:hover{color:#12210a}

.btn--ghost{
  background:rgba(255,255,255,.07);
  color:var(--ink);
  border:1px solid var(--edge-strong);
  box-shadow:0 8px 20px rgba(4,12,26,.35);
}
.btn--ghost:hover{color:#fff;background:rgba(255,255,255,.12)}

.btn--small{min-height:46px;font-size:clamp(13px,2.6vw,15px);padding:10px 16px}

.btn[disabled],.btn[aria-disabled="true"]{
  background:rgba(255,255,255,.06);
  color:var(--ink-dim);
  border-color:rgba(143,164,196,.3);
  box-shadow:none;
  cursor:not-allowed;
}
.btn[disabled]:hover,.btn[aria-disabled="true"]:hover{transform:none;color:var(--ink-dim);filter:none;box-shadow:none}

.btn-row{display:grid;gap:clamp(16px,3vw,22px);grid-template-columns:1fr}
@media (min-width:640px){.btn-row{grid-template-columns:1fr 1fr}}

.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.field label{font-family:var(--font-display);font-size:clamp(14px,2.6vw,16px);letter-spacing:.02em;color:#fff}
.field input{
  width:100%;min-height:56px;padding:12px 16px;
  font-family:var(--font-body);font-size:17px;font-weight:700;
  color:var(--ink);background:rgba(4,12,24,.6);
  border:1px solid var(--edge);border-radius:14px;
}
.field input:focus{background:rgba(4,12,24,.8);outline:none;border-color:var(--blue-300);box-shadow:0 0 0 3px rgba(59,134,214,.25)}
.field input::placeholder{color:#7890b0;font-weight:600}
.field .hint{font-size:15px;line-height:1.4;color:var(--ink-dim)}
.field .err{font-size:16px;font-weight:700;color:#ff8f84}

/* accent strip — Arc blues with a single warm spark */
.rainbow-strip{display:flex;height:4px;width:100%}
.rainbow-strip i{flex:1}
.rainbow-strip i:nth-child(1){background:var(--navy-700)}
.rainbow-strip i:nth-child(2){background:var(--navy-600)}
.rainbow-strip i:nth-child(3){background:var(--navy-500)}
.rainbow-strip i:nth-child(4){background:var(--blue-400)}
.rainbow-strip i:nth-child(5){background:var(--blue-300)}
.rainbow-strip i:nth-child(6){background:var(--blue-200)}
.rainbow-strip i:nth-child(7){background:#cfe6fb}

/* ---------- Arc network logo ---------- */

.arc-logo{
  width:clamp(30px,5vw,42px);
  height:auto;
  aspect-ratio:1/1;
  object-fit:contain;
  flex:0 0 auto;
}
.arc-logo--hero{width:clamp(52px,8vw,72px);margin-bottom:14px}
.arc-chip{display:flex;align-items:center;gap:12px}

/* ---------- intro ---------- */

#intro{
  position:fixed;inset:0;z-index:9999;
  background:linear-gradient(180deg,var(--navy-900),var(--navy-600));
}
#intro canvas{display:block;width:100%;height:100%}
#intro.is-done{opacity:0;pointer-events:none;transition:opacity .4s ease}
body.intro-lock{overflow:hidden}

/* ---------- menu ---------- */

.topbar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:clamp(12px,2.4vw,18px) clamp(16px,4vw,32px);
  background:rgba(5,13,26,.72);
  border-bottom:1px solid var(--edge);
  backdrop-filter:blur(10px);
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);
  font-size:clamp(17px,3.4vw,22px);
  letter-spacing:.06em;
  color:#fff;
}
.brand:hover{color:#fff}
.menu-btn{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  padding:0 14px;width:auto;min-height:48px;
  background:rgba(255,255,255,.08);
  border:1px solid var(--edge-strong);
  border-radius:14px;
  cursor:pointer;
  transition:background .14s ease, transform .14s ease;
}
.menu-btn span{display:block;width:24px;height:3px;background:var(--ink);border-radius:4px}
.menu-btn:hover{background:rgba(255,255,255,.16);transform:translateY(-1px)}

.menu-panel{
  position:fixed;inset:0;z-index:200;display:none;
  background:rgba(3,9,18,.82);
  backdrop-filter:blur(6px);
  padding:clamp(16px,5vw,40px);overflow-y:auto;
}
.menu-panel.is-open{display:flex;align-items:flex-start;justify-content:center}
.menu-card{
  width:100%;max-width:420px;
  margin-top:clamp(20px,8vh,80px);
  background:linear-gradient(180deg,rgba(14,49,87,.96),rgba(8,23,44,.96));
  border:1px solid var(--edge-strong);
  border-radius:24px;
  box-shadow:0 30px 70px rgba(2,7,16,.6);
  overflow:hidden;
  animation:menuIn .2s ease both;
}
@keyframes menuIn{from{transform:translateY(-14px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.menu-card header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;
  background:rgba(255,255,255,.06);
  border-bottom:1px solid var(--edge);
  font-family:var(--font-display);font-size:18px;letter-spacing:.1em;color:#fff;
}
.menu-close{
  background:rgba(255,255,255,.1);color:var(--ink);
  border:1px solid var(--edge-strong);border-radius:999px;
  font-family:var(--font-display);font-size:14px;padding:8px 14px;min-height:42px;
  cursor:pointer;width:auto;
}
.menu-close:hover{background:rgba(255,255,255,.2)}
.menu-list{display:flex;flex-direction:column;gap:14px;padding:18px}
.menu-link{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;min-height:58px;padding:14px 18px;
  font-family:var(--font-display);font-size:clamp(17px,3.4vw,20px);
  background:rgba(255,255,255,.06);color:#fff;
  border:1px solid var(--edge);border-radius:16px;
  cursor:pointer;text-align:left;
  transition:transform .14s ease, background .14s ease, border-color .14s ease;
}
.menu-link:hover{color:#fff;transform:translateY(-2px);background:rgba(111,176,234,.18);border-color:var(--edge-strong)}
.menu-link .tag{font-family:var(--font-body);font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--ink-dim)}
.menu-link--locked{background:rgba(255,255,255,.03);color:var(--ink-dim);border-color:rgba(143,164,196,.22)}
.menu-link--locked:hover{background:rgba(255,255,255,.05);color:var(--ink-dim);transform:none}

/* ---------- toast ---------- */

#toast-layer{
  position:fixed;z-index:900;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:clamp(12px,3vw,24px);pointer-events:none;
}
.toast{
  width:100%;max-width:520px;
  background:linear-gradient(180deg,rgba(14,49,87,.97),rgba(6,17,33,.97));
  color:var(--ink);
  border:1px solid var(--edge-strong);border-radius:18px;
  box-shadow:0 20px 50px rgba(2,7,16,.6);
  padding:14px 18px;font-size:16px;line-height:1.4;
  animation:toastIn .2s ease both;
}
.toast strong{font-family:var(--font-display);font-size:15px;display:block;margin-bottom:6px;color:var(--blue-200)}
.toast.is-out{animation:toastOut .22s ease both}
@keyframes toastIn{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
@keyframes toastOut{to{transform:translateY(10px);opacity:0}}

/* ---------- hero / info ---------- */

.hero{padding-top:clamp(28px,5vw,58px)}
.hero .h1{margin-bottom:18px;text-shadow:0 8px 30px rgba(2,8,18,.5)}
.hero .lede{max-width:54ch}

.info-grid{
  display:grid;gap:clamp(14px,2.4vw,20px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  margin-top:clamp(26px,4vw,40px);
}
.info-cell{
  border:1px solid var(--edge);border-radius:18px;
  padding:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.info-cell .k{font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:8px}
.info-cell .v{font-family:var(--font-display);font-size:clamp(19px,3.6vw,24px);color:#fff}

/* ---------- NFT reveal ---------- */

.reveal-wrap{display:flex;flex-direction:column;align-items:center;gap:18px}
.reveal-stage{
  position:relative;width:100%;max-width:440px;aspect-ratio:1/1;
  border:1px solid var(--edge-strong);border-radius:24px;
  box-shadow:0 26px 60px rgba(2,8,18,.6), inset 0 1px 0 rgba(255,255,255,.1);
  background:rgba(4,12,24,.55);cursor:pointer;padding:0;overflow:hidden;
}
.reveal-stage img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;
}
.reveal-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.reveal-hint{font-family:var(--font-display);font-size:clamp(16px,3.2vw,20px);text-align:center;color:#fff}
.reveal-count{font-size:15px;color:var(--ink-dim);text-align:center}

/* ---------- terminal ---------- */

.terminal{
  background:rgba(4,12,24,.7);
  border:1px solid var(--edge);border-radius:24px;
  box-shadow:0 22px 54px rgba(2,8,18,.55);
  overflow:hidden;
  backdrop-filter:blur(8px);
}
.terminal__bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:14px 18px;
  background:linear-gradient(180deg,rgba(111,176,234,.18),rgba(111,176,234,.06));
  border-bottom:1px solid var(--edge);
  color:#fff;
  font-family:var(--font-display);font-size:clamp(15px,2.8vw,18px);letter-spacing:.06em;
}
.terminal__bar .dots{display:flex;gap:6px}
.terminal__bar .dots i{width:10px;height:10px;border-radius:50%;background:var(--blue-200);opacity:.8}
.terminal__bar span:not(.dots){white-space:nowrap}
.terminal__body{padding:18px;font-size:16px;line-height:1.5;color:var(--ink-soft)}
#term-boot{color:var(--ink-dim);font-weight:700}
.terminal__count{
  font-family:var(--font-display);
  font-size:clamp(22px,5.6vw,38px);
  color:#fff;margin:10px 0 16px;overflow-wrap:break-word;
}
.terminal__feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.terminal__feed li{
  background:rgba(255,255,255,.05);border:1px solid var(--edge);border-radius:12px;
  padding:8px 12px;overflow-wrap:break-word;font-weight:700;color:var(--ink-soft);
}
.terminal__feed li b{font-family:var(--font-display);font-weight:700;color:var(--blue-200)}
.caret{display:inline-block;width:9px;height:18px;background:var(--blue-200);vertical-align:-3px;animation:blink 1s steps(2,end) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- roadmap ---------- */

.roadmap-grid{
  display:grid;gap:clamp(18px,3vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));
}
.phase{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--edge);border-radius:22px;
  box-shadow:0 16px 40px rgba(2,8,18,.4), inset 0 1px 0 rgba(255,255,255,.08);
  padding:22px;opacity:0;transform:translateY(14px);
}
.phase.is-in{opacity:1;transform:none;transition:opacity .4s ease,transform .4s cubic-bezier(.2,1.3,.4,1)}
.phase__blocks{display:flex;gap:6px;margin-bottom:16px}
.phase__blocks i{width:12px;height:12px;border-radius:50%;background:var(--blue-300)}
.phase.is-in .phase__blocks i{animation:pop .4s cubic-bezier(.2,1.6,.4,1) both}
.phase__blocks i:nth-child(1){animation-delay:.03s}
.phase__blocks i:nth-child(2){animation-delay:.08s}
.phase__blocks i:nth-child(3){animation-delay:.13s}
.phase__blocks i:nth-child(4){animation-delay:.18s}
.phase__blocks i:nth-child(5){animation-delay:.23s}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.phase__no{font-family:var(--font-display);font-size:15px;letter-spacing:.1em;color:var(--blue-200);margin-bottom:8px}
.phase__title{font-size:clamp(21px,4vw,27px);margin-bottom:10px}
.phase__text{font-size:16px;line-height:1.5;color:var(--ink-soft)}
.phase:nth-child(5n+1) .phase__blocks i{background:var(--cyan)}
.phase:nth-child(5n+2) .phase__blocks i{background:var(--blue-200)}
.phase:nth-child(5n+3) .phase__blocks i{background:var(--lime)}
.phase:nth-child(5n+4) .phase__blocks i{background:var(--grape)}
.phase:nth-child(5n+5) .phase__blocks i{background:var(--sun)}

/* ---------- footer ---------- */

.footer{
  border-top:1px solid var(--edge);
  padding:clamp(28px,5vw,48px) 0 clamp(34px,6vw,60px);
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(5,13,26,.5));
}
.footer__links{display:grid;gap:16px;grid-template-columns:1fr;max-width:520px}
@media (min-width:560px){.footer__links{grid-template-columns:1fr 1fr}}
.footer__note{font-size:16px;color:var(--ink-dim);margin-top:22px;max-width:52ch}

/* ---------- page header (sub pages) ---------- */

.page-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:clamp(16px,3vw,24px) 0;
}
.page-head .btn{width:auto}
.page-head .eyebrow{margin:0;white-space:nowrap}
@media (max-width:479px){.page-head .btn{width:100%}}

/* ---------- whitelist ---------- */

.progress{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.progress i{
  flex:1 1 36px;height:14px;border-radius:999px;
  background:rgba(255,255,255,.08);border:1px solid var(--edge);
}
.progress i.is-active{background:var(--blue-300);border-color:var(--blue-200)}
.progress i.is-done{background:var(--leaf);border-color:var(--leaf)}
.progress-label{font-size:16px;color:var(--ink-dim);margin-bottom:24px;font-weight:700}

.step{display:none}
.step.is-current{display:block}
.step__no{font-family:var(--font-display);font-size:15px;letter-spacing:.12em;color:var(--blue-200);margin-bottom:10px}
.step__title{font-size:clamp(24px,5vw,36px);margin-bottom:14px}
.step__text{font-size:clamp(16px,2.4vw,19px);line-height:1.5;color:var(--ink-soft);margin-bottom:20px}
.step__text strong{color:#fff}
.step__text ul{margin:10px 0 0;padding-left:22px}
.step__actions{display:grid;gap:14px;grid-template-columns:1fr;margin-top:6px}
@media (min-width:600px){.step__actions{grid-template-columns:1fr 1fr}}

.task-note{
  background:rgba(99,215,230,.12);color:var(--ink);
  border:1px solid rgba(99,215,230,.4);border-radius:14px;
  padding:12px 16px;margin-bottom:20px;font-size:16px;line-height:1.4;font-weight:700;
}

.loadbar{display:flex;gap:6px;margin:18px 0}
.loadbar i{flex:1;height:16px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid var(--edge)}
.loadbar i.on{background:var(--blue-300);border-color:var(--blue-200)}
.loading-state{display:none;text-align:center}
.loading-state.is-on{display:block}
.loading-state p{font-family:var(--font-display);font-size:clamp(17px,3.2vw,21px);color:#fff}

.done-list{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.done-list li{font-size:16px;color:var(--ink-soft);display:flex;gap:10px;align-items:baseline;font-weight:700}
.done-list li .mark{font-family:var(--font-display);font-size:15px;color:var(--ink-dim)}
.done-list li.done{color:#fff}
.done-list li.done .mark{color:var(--leaf)}

#success-canvas{
  display:block;width:100%;height:180px;
  border:1px solid var(--edge-strong);border-radius:18px;
  background:var(--navy-700);margin-bottom:22px;
}

/* ---------- gallery ---------- */

.gallery-grid{
  display:grid;gap:clamp(14px,2.6vw,24px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr));
}
@media (min-width:700px){.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}}
.card{
  border:1px solid var(--edge);border-radius:20px;
  background:rgba(255,255,255,.05);overflow:hidden;
  box-shadow:0 14px 34px rgba(2,8,18,.4);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 22px 46px rgba(2,8,18,.55);border-color:var(--edge-strong)}
.card__img{aspect-ratio:1/1;background:rgba(4,12,24,.5);border-bottom:1px solid var(--edge)}
.card__img img{width:100%;height:100%;object-fit:contain}
.card__foot{
  display:flex;justify-content:space-between;gap:8px;padding:10px 14px;
  font-size:14px;font-weight:800;letter-spacing:.04em;color:#fff;
}
.card__foot span:last-child{color:var(--ink-dim)}

/* ---------- staking locked ---------- */

.locked{text-align:center;max-width:660px;margin:0 auto}
.lock-blocks{display:flex;justify-content:center;gap:10px;margin-bottom:26px}
.lock-blocks i{
  width:14px;height:14px;border-radius:50%;
  background:var(--blue-300);
  animation:wave 1.4s ease-in-out infinite;
}
.lock-blocks i:nth-child(2){background:var(--blue-200);animation-delay:.1s}
.lock-blocks i:nth-child(3){background:var(--cyan);animation-delay:.2s}
.lock-blocks i:nth-child(4){background:var(--blue-200);animation-delay:.3s}
.lock-blocks i:nth-child(5){background:var(--blue-300);animation-delay:.4s}
.lock-blocks i:nth-child(6){background:var(--blue-400);animation-delay:.5s}
@keyframes wave{50%{transform:translateY(-10px)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .phase{opacity:1;transform:none}
}