/* ============================================================
   RafifOS · 40 gate, wizard, lock
   Bagian ini yang dinilai di 5 detik pertama. Tidak boleh berisik.
   ============================================================ */

.gate{
  position: absolute;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s8) var(--s6);
  background:
    radial-gradient(720px 420px at 50% 18%, var(--a-14), transparent 68%),
    var(--bg);
  transition: opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out);
}
.gate.leaving{ opacity: 0; transform: scale(1.02); pointer-events: none; }

.gate .mark{
  width: 84px; height: 84px;
  margin-bottom: var(--s6);
  animation: mark-in 720ms var(--ease-out) both;
}
@keyframes mark-in{
  from{ opacity: 0; transform: translate3d(0, 10px, 0) scale(.9) rotate(-4deg); }
  to{ opacity: 1; transform: none; }
}
.gate h1{
  font-size: var(--t-h1);
  font-weight: 300;
  letter-spacing: -.035em;
  margin-bottom: var(--s2);
  animation: rise 620ms 80ms var(--ease-out) both;
}
.gate h1 b{ font-weight: 700; }
.gate .tagline{
  font-size: var(--t-sm);
  color: var(--ink-3);
  margin-bottom: var(--s8);
  animation: rise 620ms 140ms var(--ease-out) both;
}

/* kotak kunci: 4 grup x 5 karakter, seperti yang dicetak keygen */
.keybox{
  display: flex;
  gap: var(--s2);
  margin-bottom: var(--s4);
  animation: rise 620ms 200ms var(--ease-out) both;
}
.keybox .kg{
  display: flex;
  gap: 2px;
  padding: var(--s2) var(--s2);
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color var(--d-fast) linear, box-shadow var(--d-fast) linear;
}
.keybox .kg.act{ border-color: var(--a-40); box-shadow: 0 0 0 3px var(--a-08); }
.keybox .kc{
  width: 22px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink);
  line-height: 30px;
  text-transform: uppercase;
}
.keybox .kc.blank{ color: var(--ink-4); }
.keybox .kc.blank::after{ content: "·"; }

.gate .hint{
  font-size: var(--t-xs);
  color: var(--ink-4);
  min-height: 20px;
  margin-bottom: var(--s5);
  text-align: center;
  transition: color var(--d-fast) linear;
}
.gate .hint.bad{ color: #E2685A; }
.gate .hint.good{ color: var(--a); }

/* keyboard angka yang besar, karena ini tablet tanpa keyboard */
.keypad{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s2);
  width: min(520px, 100%);
  animation: rise 620ms 260ms var(--ease-out) both;
}
.keypad button{
  height: calc(var(--u) * 12);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  transition: transform var(--d-instant) linear, background var(--d-instant) linear;
}
.keypad button:active{ transform: scale(.94); background: var(--a-14); }
.keypad button.wide{ grid-column: span 2; font-family: var(--font-ui); font-size: var(--t-sm); }
.keypad button.accent{ background: var(--a-14); color: var(--ink); border-color: var(--a-24); }

.gate .foot{
  position: absolute;
  bottom: calc(var(--s5) + env(safe-area-inset-bottom, 0px));
  font-size: var(--t-micro);
  color: var(--ink-4);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* kilau saat kunci diterima */
.bloom{
  position: absolute;
  left: 50%; top: 50%;
  width: 220px; height: 220px;
  margin: -110px 0 0 -110px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--a-40), transparent 66%);
  pointer-events: none;
  animation: bloom 900ms var(--ease-out) forwards;
}

/* ============================================================
   WIZARD KALIBRASI
   ============================================================ */
.wiz{
  position: absolute;
  inset: 0;
  z-index: 190;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(760px 520px at 50% 34%, var(--a-08), transparent 70%),
    var(--bg);
  transition: opacity var(--d-slow) var(--ease-out);
}
.wiz.leaving{ opacity: 0; pointer-events: none; }
.wiz .wiz-top{
  padding: calc(var(--s6) + env(safe-area-inset-top, 0px)) var(--s6) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wiz .dots{ display: flex; gap: 6px; }
.wiz .dots i{
  width: 22px; height: 3px; border-radius: 99px;
  background: var(--line-strong);
  transition: background var(--d-base) linear, transform var(--d-base) var(--ease-out);
}
.wiz .dots i.on{ background: var(--a); transform: scaleY(1.6); }
.wiz .skip{ font-size: var(--t-xs); color: var(--ink-4); }

.wiz .panes{ flex: 1 1 auto; position: relative; overflow: hidden; }
.wiz .pane{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s6);
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  pointer-events: none;
  transition: opacity var(--d-base) var(--ease-out), transform var(--d-slow) var(--ease-out);
}
.wiz .pane.on{ opacity: 1; transform: none; pointer-events: auto; }
.wiz .pane.out{ opacity: 0; transform: translate3d(0, -18px, 0); }
.wiz .pane h2{
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 300;
  letter-spacing: -.035em;
  margin-bottom: var(--s2);
  text-align: center;
}
.wiz .pane h2 b{ font-weight: 700; }
.wiz .pane p{
  font-size: var(--t-sm);
  color: var(--ink-3);
  max-width: 46ch;
  text-align: center;
  line-height: 1.65;
  margin-bottom: var(--s6);
}

/* kalibrasi kartu */
.calib{ width: min(560px, 100%); text-align: center; }
.calib .card-visual{
  position: relative;
  margin: 0 auto var(--s5);
  border-radius: calc(var(--u) * 2.2);
  background: var(--a-08);
  border: 1px solid var(--a-24);
  display: grid;
  place-items: center;
  transition: width 90ms linear, height 90ms linear;
}
.calib .card-visual::before,
.calib .card-visual::after{
  content: "";
  position: absolute;
  top: -7px; bottom: -7px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--a-40), transparent);
}
.calib .card-visual::before{ left: -1px; }
.calib .card-visual::after{ right: -1px; }
.calib .card-visual span{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--ink-3);
  text-transform: uppercase;
  white-space: nowrap;
}
.calib .card-cap{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: var(--s3);
}
.calib .ruler{
  display: flex; align-items: center; gap: var(--s3);
  justify-content: center;
  margin-bottom: var(--s5);
}
.calib .ruler input{
  -webkit-appearance: none; appearance: none;
  width: min(360px, 64vw); height: 26px; background: transparent;
}
.calib .ruler input::-webkit-slider-runnable-track{ height: 5px; border-radius: 99px; background: var(--line-strong); }
.calib .ruler input::-webkit-slider-thumb{
  -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px;
  border-radius: 50%; background: var(--a); box-shadow: var(--sh-2);
}
.calib .readout{ font-family: var(--font-mono); font-size: var(--t-xs); color: var(--ink-3); }

/* pilihan mood */
.moods{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); width: min(560px, 100%); }
.mood{
  padding: var(--s4) var(--s3);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: center;
  transition: transform var(--d-fast) var(--ease-out), border-color var(--d-fast) linear;
}
.mood:active{ transform: scale(.96); }
.mood.on{ border-color: var(--a-40); box-shadow: 0 0 0 3px var(--a-08); }
.mood .sw{
  width: 100%; height: 46px; border-radius: var(--r-sm);
  margin-bottom: var(--s3);
  border: 1px solid var(--line);
}
.mood .nm{ font-size: var(--t-sm); font-weight: 650; }
.mood .ds{ font-size: 10.5px; color: var(--ink-4); margin-top: 2px; }
.mood[data-mood="loom"] .sw{ background: linear-gradient(150deg, #14161A, #0B0C0E 70%, rgba(224,178,100,.22)); }
.mood[data-mood="vellum"] .sw{ background: linear-gradient(150deg, #FBF9F4, #EDE7DA 70%, rgba(224,178,100,.20)); }
.mood[data-mood="dusk"] .sw{ background: linear-gradient(150deg, #2A2320, #171310 55%, rgba(217,140,122,.28)); }

/* langkah akhir */
.done-mark{ width: 96px; height: 96px; margin-bottom: var(--s5); }
.wiz .wiz-foot{
  padding: 0 var(--s6) calc(var(--s6) + env(safe-area-inset-bottom, 0px));
  display: flex; gap: var(--s3); justify-content: center;
}
.wiz .wiz-foot .btn{ min-width: 130px; }

/* ============================================================
   LAYAR KUNCI
   ============================================================ */
.lock{
  position: absolute;
  inset: 0;
  z-index: 180;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(680px 400px at 50% 30%, var(--a-08), transparent 70%), var(--bg-deep);
  transition: opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out);
}
.lock.leaving{ opacity: 0; transform: scale(1.03); pointer-events: none; }
.lock .lt{
  font-size: clamp(52px, 12vw, 86px);
  font-weight: 250;
  letter-spacing: -.055em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  animation: rise 700ms var(--ease-out) both;
}
.lock .lt b{ font-weight: 640; }
.lock .ld{
  font-size: var(--t-sm);
  color: var(--ink-3);
  margin-top: var(--s2);
  animation: rise 700ms 90ms var(--ease-out) both;
}
.lock .lkey{
  margin-top: var(--s8);
  display: flex; align-items: center; gap: var(--s2);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--ink-4);
  letter-spacing: .12em;
  animation: rise 700ms 160ms var(--ease-out) both;
}
.lock .lift{
  position: absolute;
  bottom: calc(var(--s8) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: center; gap: var(--s2);
  font-size: var(--t-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  animation: floaty 2.6s var(--ease-inout) infinite;
}
@keyframes floaty{
  0%,100%{ transform: translate3d(0,0,0); opacity: .65; }
  50%{ transform: translate3d(0,-6px,0); opacity: 1; }
}