/* ==========================================================================
   WIZKET — Final CTA · hold to deploy. Prefix: dp-
   js/deploy.js sets --p (0 → 1 while the key is held) and data-phase
   (idle → live). The terminal is always dark; the key is Wizket orange.
   ========================================================================== */
.dp {
  --side: clamp(20px, 6vw, 110px);
  --p: 0;
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(90px, 14vh, 150px) var(--side);
  background:
    radial-gradient(60% 55% at 70% 50%, var(--petrol) 0%, transparent 70%),
    var(--bg);
}
.dp__inner {
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: clamp(36px, 6vw, 96px);
}

/* copy: before (ready to ship?) and after (it's live.) share one cell */
.dp__copy { display: grid; }
.dp__pre, .dp__post { grid-area: 1 / 1; align-self: center; }
.dp__title {
  margin: 0;
  font: 400 clamp(3rem, min(7.4vw, 13vh), 7.8rem)/0.88 var(--font-display);
  text-transform: uppercase;
  color: var(--text);
}
.dp__line { display: block; }
.dp__text { margin: clamp(16px, 2.6vh, 26px) 0 0; max-width: 30ch; font: 500 clamp(1rem, 1.25vw, 1.15rem)/1.45 var(--font-body); color: var(--muted); }
.dp__end { margin-top: clamp(22px, 3.6vh, 34px); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.dp__cta { height: 56px; padding: 0 30px; font-size: 15px; }
.dp__again { font: 600 14px/1 var(--font-body); color: var(--muted); transition: color 0.4s var(--ease-io); }
@media (hover: hover) and (pointer: fine) { .dp__again:hover { color: var(--text); } }

.dp__pre > *, .dp__post > * { transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out); }
.dp__post { visibility: hidden; }
.dp__post > * { opacity: 0; transform: translateY(40px); }
.dp[data-phase="live"] .dp__pre { visibility: hidden; transition: visibility 0s 0.7s; }
.dp[data-phase="live"] .dp__pre > * { opacity: 0; transform: translateY(-40px); }
.dp[data-phase="live"] .dp__post { visibility: visible; }
.dp[data-phase="live"] .dp__post > * { opacity: 1; transform: none; }
.dp[data-phase="live"] .dp__post > :nth-child(2) { transition-delay: 0.15s; }
.dp[data-phase="live"] .dp__post > :nth-child(3) { transition-delay: 0.28s; }
.dp[data-phase="live"] .dp__post > :nth-child(4) { transition-delay: 0.4s; }

/* stage: one console — the deploy log on top, the key docked in the strip below */
.dp__stage { display: grid; justify-items: center; }
.dp__console {
  width: min(600px, 100%);
  overflow: hidden;
  border-radius: 24px;
  background: #0b0e10;
  text-align: left;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 50px 100px -40px rgba(0, 0, 0, 0.55),
    0 0 calc(var(--p) * 120px) calc(var(--p) * -10px) rgba(253, 95, 7, calc(var(--p) * 0.45));
  transition: box-shadow 0.3s var(--ease-out);
}
.dp__term { color: #c9d1d9; font: 500 15px/1.75 ui-monospace, "SFMono-Regular", Consolas, monospace; }
.dp__bar { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; background: #12171b; border-bottom: 1px solid #1d2428; }
.dp__bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.dp__bar i:nth-child(2) { background: #febc2e; }
.dp__bar i:nth-child(3) { background: #28c840; }
.dp__bar span { margin-left: 12px; font-size: 12.5px; color: #6b7378; }
.dp__log { padding: 22px 26px 8px; }
.dp__ln { margin: 0; opacity: 0.22; transform: translateX(-6px); transition: opacity 0.35s, transform 0.45s var(--ease-out); white-space: nowrap; }
.dp__ln b { display: inline-block; width: 1.5em; color: #5cd68a; font-weight: 700; }
.dp__ln:first-child b { color: #fd5f07; }
.dp__ln.is-on { opacity: 1; transform: none; }
.dp__ln--live { color: #fff; }
.dp__ln--live b { color: #fd5f07; animation: dp-blink 1.2s steps(1) infinite; }
@keyframes dp-blink { 50% { opacity: 0.2; } }
.dp__prog { display: flex; align-items: center; gap: 14px; padding: 12px 26px 24px; }
.dp__track { position: relative; flex: 1; height: 6px; overflow: hidden; border-radius: 6px; background: #1d2428; }
.dp__track i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #ff9a4a, #fd5f07); transform: scaleX(var(--p)); transform-origin: left center; }
.dp__prog b { width: 3.2em; text-align: right; color: #fff; font-weight: 700; }
.dp[data-phase="live"] .dp__track i { background: #22c55e; }

/* the dock: key + hint */
.dp__dock {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 20px 26px 24px;
  background: linear-gradient(180deg, #12171b, #0f1316);
  border-top: 1px solid #1d2428;
}
.dp__hint { display: grid; color: #f2f1ed; }
.dp__hint p { grid-area: 1 / 1; display: grid; gap: 6px; margin: 0; transition: opacity 0.45s var(--ease-io), transform 0.6s var(--ease-out); }
.dp__hint b { font: 400 24px/1 var(--font-display); letter-spacing: 0.02em; text-transform: uppercase; }
.dp__hint span { font: 500 13px/1.3 var(--font-body); color: #8d9295; }
.dp__hint-live { opacity: 0; transform: translateY(10px); }
.dp__hint-live b { color: #5cd68a; }
.dp[data-phase="live"] .dp__hint-idle { opacity: 0; transform: translateY(-10px); }
.dp[data-phase="live"] .dp__hint-live { opacity: 1; transform: none; }

/* the key */
.dp__keywrap { position: relative; flex: none; display: grid; place-items: center; }
.dp__key {
  position: relative;
  width: clamp(104px, 9vw, 128px);
  aspect-ratio: 1.15;
  border-radius: 20px;
  background: linear-gradient(180deg, #ff8436 0%, #f15c0a 60%, #e04f00 100%);
  color: #fff;
  box-shadow:
    0 8px 0 #8f3400,
    0 16px 34px -8px rgba(253, 95, 7, 0.55),
    0 0 calc(var(--p) * 60px) calc(var(--p) * 12px) rgba(253, 95, 7, calc(var(--p) * 0.55)),
    inset 0 2px 0 rgba(255, 255, 255, 0.4),
    inset 0 -8px 16px rgba(0, 0, 0, 0.18);
  transform: translateY(calc(var(--p) * 3px));
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  -webkit-touch-callout: none;
}
.dp__key.is-down {
  transform: translateY(7px);
  box-shadow:
    0 2px 0 #8f3400,
    0 8px 20px -8px rgba(253, 95, 7, 0.6),
    0 0 calc(var(--p) * 70px) calc(var(--p) * 16px) rgba(253, 95, 7, calc(0.15 + var(--p) * 0.55)),
    inset 0 2px 0 rgba(255, 255, 255, 0.3),
    inset 0 -5px 12px rgba(0, 0, 0, 0.2);
}
.dp__key.is-charged { animation: dp-shake 0.09s linear infinite; }
@keyframes dp-shake { 25% { translate: -1.5px 0; } 75% { translate: 1.5px 0; } }
.dp__key:focus-visible { outline: 2px solid #f2f1ed; outline-offset: 6px; }
.dp__key-face { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2px; transition: opacity 0.4s, transform 0.5s var(--ease-out); }
.dp__key-face svg { width: 28px; height: 28px; margin-bottom: 4px; }
.dp__key-face b { font: 400 22px/1 var(--font-display); letter-spacing: 0.05em; text-transform: uppercase; }
.dp__key-face--live { opacity: 0; transform: scale(0.6); }
.dp[data-phase="live"] .dp__key { background: linear-gradient(180deg, #2fd16c, #16a34a); box-shadow: 0 4px 0 #0d6b30, 0 16px 34px -8px rgba(34, 197, 94, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.4); transform: translateY(5px); }
.dp[data-phase="live"] .dp__key-face--hold { opacity: 0; transform: scale(0.6); }
.dp[data-phase="live"] .dp__key-face--live { opacity: 1; transform: none; }

/* shockwave on launch */
.dp__wave { position: absolute; width: 120%; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; pointer-events: none; }
.dp[data-phase="live"] .dp__wave { animation: dp-wave 1.2s var(--ease-out) forwards; }
@keyframes dp-wave { 0% { opacity: 0.9; transform: scale(0.6); } 100% { opacity: 0; transform: scale(6); } }

.dp__fx { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; pointer-events: none; }

@media (max-width: 860px) {
  .dp__inner { grid-template-columns: 1fr; text-align: center; }
  .dp__copy .ws-eyebrow { justify-content: center; }
  .dp__text { margin-left: auto; margin-right: auto; }
  .dp__end { justify-content: center; }
  .dp__title { font-size: clamp(3rem, 15vw, 5.4rem); }
}
@media (max-width: 480px) {
  .dp__term { font-size: 12.5px; }
  .dp__log { padding: 18px 18px 6px; }
  .dp__prog { padding: 10px 18px 20px; }
  .dp__dock { padding: 18px; gap: 16px; }
  .dp__hint b { font-size: 20px; }
}