/* ==========================================================================
   WIZKET — time-machine.css · Final CTA (Software page, #start)
   js/time-machine.js sets --p (0 → 1 while the button is held) and data-phase
   (idle · charge · jump · future). The console is hardware: dark in both themes.
   Orange: the "?", the button rim + ring, the flux bar, the sticky note.
   Prefix: tx-
   ========================================================================== */
.tx {
  --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);
}
.tx::before {   /* the future: a warm horizon that rises when you arrive */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(70% 45% at 50% 100%, rgba(253, 95, 7, 0.22), transparent 70%),
    radial-gradient(60% 60% at 70% 40%, color-mix(in srgb, var(--petrol) 80%, #5fb3c4 20%), transparent 70%);
  opacity: 0;
  transition: opacity 1.2s var(--ease-io);
}
.tx[data-phase="future"]::before { opacity: 1; }

.tx__inner {
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(36px, 6vw, 96px);
}

/* ---- copy: before / after share one cell ---- */
.tx__copy { display: grid; }
.tx__pre, .tx__post { grid-area: 1 / 1; align-self: center; }
.tx__title {
  margin: 0;
  font: 400 clamp(3rem, min(7vw, 12.5vh), 7.4rem)/0.88 var(--font-display);
  text-transform: uppercase;
  color: var(--text);
}
.tx__line { display: block; }
.tx__text { margin: clamp(16px, 2.6vh, 26px) 0 0; max-width: 32ch; font: 500 clamp(1rem, 1.25vw, 1.15rem)/1.45 var(--font-body); color: var(--muted); }

.tx__pre > *, .tx__post > * { transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out); }
.tx__post { visibility: hidden; }
.tx__post > * { opacity: 0; transform: translateY(40px); }
.tx[data-phase="future"] .tx__pre { visibility: hidden; transition: visibility 0s 0.7s; }
.tx[data-phase="future"] .tx__pre > * { opacity: 0; transform: translateY(-40px); }
.tx[data-phase="future"] .tx__post { visibility: visible; }
.tx[data-phase="future"] .tx__post > * { opacity: 1; transform: none; }
.tx[data-phase="future"] .tx__post > :nth-child(2) { transition-delay: 0.12s; }
.tx[data-phase="future"] .tx__post > :nth-child(3) { transition-delay: 0.24s; }
.tx[data-phase="future"] .tx__post > :nth-child(4) { transition-delay: 0.7s; }
.tx[data-phase="future"] .tx__post > :nth-child(5) { transition-delay: 1s; }

.tx-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 10px clamp(18px, 3vw, 40px); margin: clamp(18px, 3vh, 28px) 0 0; padding: 0; list-style: none; }
.tx-stats li { display: grid; gap: 6px; }
.tx-stats b { font: 400 clamp(2.2rem, 3.6vw, 3.6rem)/1 var(--font-display); color: var(--text); font-variant-numeric: tabular-nums; }
.tx-stats li:first-child b { color: var(--accent); }
.tx-stats span { max-width: 14ch; font: 500 13px/1.3 var(--font-body); color: var(--muted); }
.tx-stats small { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; }

/* postcard from future you */
.tx-card {
  position: relative;
  max-width: 400px;
  margin-top: clamp(18px, 3vh, 28px);
  padding: 20px 24px 18px;
  border-radius: 6px;
  background:
    linear-gradient(transparent 31px, rgba(23, 26, 28, 0.08) 32px) 0 14px / 100% 32px,
    #fbf8f0;
  color: #2a2620;
  font: italic 500 16px/32px Georgia, "Times New Roman", serif;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
  rotate: -2deg;
}
.tx-card::after {   /* stamp */
  content: "+6 MO";
  position: absolute;
  right: 16px;
  top: 14px;
  padding: 8px 6px;
  border: 2px dashed var(--accent);
  border-radius: 4px;
  color: var(--accent);
  font: 400 13px/1 var(--font-display);
  font-style: normal;
  letter-spacing: 0.06em;
  rotate: 8deg;
}
.tx-card p { margin: 0; padding-right: 60px; }
.tx-card__sig { text-align: right; padding-right: 0 !important; font-weight: 700; }

.tx__end { margin-top: clamp(20px, 3.4vh, 30px); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.tx__cta { height: 56px; padding: 0 30px; font-size: 15px; }
.tx__back { font: 600 14px/1 var(--font-body); color: var(--muted); transition: color 0.4s var(--ease-io); }
@media (hover: hover) and (pointer: fine) { .tx__back:hover { color: var(--text); } }

/* ---- the console ---- */
.tx__stage { display: grid; justify-items: center; }
.tx-con {
  --shx: 0px;
  --shy: 0px;
  position: relative;
  width: min(560px, 100%);
  display: grid;
  gap: 18px;
  padding: 20px 22px 24px;
  border-radius: 28px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.06), transparent 60%),
    linear-gradient(180deg, #1d2428, #11161a);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 50px 100px -40px rgba(0, 0, 0, 0.8),
    0 0 calc(var(--p) * 90px) calc(var(--p) * 10px) rgba(253, 95, 7, calc(var(--p) * 0.35));
  color: #e9eef1;
  translate: var(--shx) var(--shy);
  font-family: var(--font-body);
}
.tx-con__top { display: flex; align-items: center; justify-content: space-between; font: 700 11px/1 var(--font-body); letter-spacing: 0.22em; text-transform: uppercase; color: #7d8a91; }
.tx-con__led { display: inline-flex; align-items: center; gap: 8px; color: #c3ccd1; }
.tx-con__led i { width: 8px; height: 8px; border-radius: 50%; background: #e9a83a; box-shadow: 0 0 10px #e9a83a; }
.tx[data-phase="charge"] .tx-con__led i { background: var(--accent); box-shadow: 0 0 14px var(--accent); animation: tx-blink 0.25s steps(1) infinite; }
.tx[data-phase="future"] .tx-con__led i { background: #2ecc71; box-shadow: 0 0 12px #2ecc71; }
@keyframes tx-blink { 50% { opacity: 0.2; } }

/* flip displays */
.tx-disp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tx-d { display: grid; gap: 8px; padding: 10px 10px 12px; border-radius: 12px; background: #0b0f12; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6); }
.tx-d__k { font: 700 10px/1 var(--font-body); letter-spacing: 0.22em; text-transform: uppercase; color: #6c7a82; }
.tx-d--go .tx-d__k { color: var(--accent); }
.tx-d__v { display: flex; flex-wrap: nowrap; justify-content: center; gap: 2px; min-height: 26px; }
.tx-ch {
  position: relative;
  display: grid;
  place-items: center;
  flex: 1 1 0;
  min-width: 0;
  max-width: 20px;
  height: 26px;
  border-radius: 3px;
  background: linear-gradient(180deg, #1f272c 50%, #192025 50%);
  font: 400 clamp(12px, 1.15vw, 15px)/1 var(--font-display);
  color: #f2f1ed;
}
.tx-ch::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, 0.6); }
.tx-ch.is-sp { background: transparent; flex-basis: 4px; flex-grow: 0.35; }
.tx-ch.is-sp::after { display: none; }
.tx-ch.is-flip { animation: tx-flip 0.22s var(--ease-io); }
@keyframes tx-flip { 50% { transform: scaleY(0.1); } }
.tx-d--go .tx-ch { color: #ffb184; }
.tx[data-phase="future"] .tx-ch { color: #9df0c0; }

/* dials */
.tx-dials { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tx-dial {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: ns-resize;
  touch-action: none;
  outline: none;
}
.tx-dial:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.tx-dial__knob {
  --a: 0deg;
  position: relative;
  flex: 0 0 auto;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 35%, #3a454c, #1a2125 70%),
    #1a2125;
  box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 5px #0b0f12, 0 0 0 6px rgba(255, 255, 255, 0.06);
}
.tx-dial__knob::before {   /* tick ring */
  content: "";
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: repeating-conic-gradient(from -135deg, rgba(255, 255, 255, 0.25) 0 1.4deg, transparent 1.4deg 13.5deg);
  -webkit-mask: radial-gradient(circle, transparent 41px, #000 42px, #000 45px, transparent 46px);
  mask: radial-gradient(circle, transparent 41px, #000 42px, #000 45px, transparent 46px);
  clip-path: polygon(50% 50%, 0 100%, 0 0, 100% 0, 100% 100%);
}
.tx-dial__knob i { position: absolute; inset: 0; transform: rotate(var(--a)); transition: transform 0.15s var(--ease-out); }
.tx-dial__knob i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 4px; height: 16px; margin-left: -2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 8px rgba(253, 95, 7, 0.7); }
.tx-dial__txt { display: grid; gap: 4px; }
.tx-dial__txt b { font: 400 30px/1 var(--font-display); color: #fff; font-variant-numeric: tabular-nums; }
.tx-dial__txt em { font: 500 11.5px/1.25 var(--font-body); font-style: normal; color: #8b979e; }
.tx[data-phase="future"] .tx-dial, .tx[data-phase="jump"] .tx-dial { opacity: 0.4; pointer-events: none; }

.tx-calc { margin: -4px 0 0; text-align: center; font: 500 13.5px/1.3 var(--font-body); color: #9aa6ad; }
.tx-calc b { font: 400 20px/1 var(--font-display); color: #fff; letter-spacing: 0.02em; }
.tx-calc small { font-size: 11px; opacity: 0.75; }

/* the big button + flux bar */
.tx-go { display: grid; justify-items: center; gap: 12px; padding-top: 4px; }
.tx-btn {
  position: relative;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.tx-btn__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--p) * 360deg), rgba(255, 255, 255, 0.08) 0);
  box-shadow: 0 0 0 1px rgba(253, 95, 7, 0.4), 0 0 calc(10px + var(--p) * 40px) rgba(253, 95, 7, calc(0.25 + var(--p) * 0.5));
}
.tx-btn__face {
  position: absolute;
  inset: 9px;
  display: grid;
  place-items: center;
  padding: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #2c353b, #12181b 75%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.08), inset 0 -6px 14px rgba(0, 0, 0, 0.6);
  transition: transform 0.15s var(--ease-out);
  transform: scale(calc(1 - var(--p) * 0.05));
}
.tx-btn__face b { font: 400 17px/1.05 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; color: #fff; text-align: center; }
.tx[data-phase="charge"] .tx-btn__face { background: radial-gradient(circle at 50% 30%, #4a2b1a, #1d1410 75%); }
.tx-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.tx-btn:not(:disabled) { cursor: pointer; }
.tx-flux { position: relative; width: min(320px, 90%); height: 6px; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, 0.08); }
.tx-flux i { position: absolute; inset: 0; transform: scaleX(var(--p)); transform-origin: left; background: linear-gradient(90deg, #ff9a5c, var(--accent)); box-shadow: 0 0 12px var(--accent); }
.tx-hint { margin: 0; font: 500 12px/1 var(--font-body); color: #7d8a91; letter-spacing: 0.04em; }
.tx-hint b { color: #c3ccd1; }
.tx[data-phase="future"] .tx-hint, .tx[data-phase="future"] .tx-flux { visibility: hidden; }

/* the sticky note stuck on the console */
.tx-note {
  --rot: -9deg;
  position: absolute;
  left: -30px;
  top: -34px;
  width: 104px;
  height: 104px;
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 2px 2px 14px 2px;
  background: linear-gradient(160deg, #ff8a3d, var(--accent));
  box-shadow: 0 18px 30px -14px rgba(0, 0, 0, 0.6);
  color: #fff;
  font: italic 600 14px/1.25 var(--font-body);
  transform-origin: 50% 0;
  rotate: var(--rot);
  pointer-events: none;
}
.tx[data-phase="charge"] .tx-note { animation: tx-flutter calc(0.5s - var(--p) * 0.4s) ease-in-out infinite alternate; }
@keyframes tx-flutter { from { rotate: calc(var(--rot) - 6deg); } to { rotate: calc(var(--rot) + 8deg); } }

/* ---- warp canvas + flash (fixed overlays, only shown while travelling) ---- */
.tx-warp { position: fixed; inset: 0; z-index: 8500; width: 100vw; height: 100vh; pointer-events: none; display: none; }
.tx-warp.is-on { display: block; }
.tx-flash { position: fixed; inset: 0; z-index: 8600; background: #fff; opacity: 0; visibility: hidden; pointer-events: none; }

/* ---- small screens ---- */
@media (max-width: 899px) {
  .tx__inner { grid-template-columns: 1fr; }
  /* stacked: the hidden copy must not hold its space */
  .tx:not([data-phase="future"]) .tx__post { display: none; }
  .tx[data-phase="future"] .tx__pre { display: none; }
  .tx__copy { order: 0; }
  .tx-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
  .tx-con { padding: 18px 14px 20px; gap: 14px; border-radius: 22px; }
  .tx-disp { grid-template-columns: 1fr; }
  .tx-d { grid-template-columns: 70px 1fr; align-items: center; }
  .tx-dials { grid-template-columns: 1fr; }
  .tx-note { width: 84px; height: 84px; font-size: 12px; left: -6px; top: -40px; }
  .tx-card { font-size: 15px; }
}

/* arrived: the machine calms down (green, no orange halo) */
.tx[data-phase="future"] .tx-con { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 50px 100px -40px rgba(0, 0, 0, 0.8), 0 0 70px rgba(46, 204, 113, 0.14); }
.tx[data-phase="future"] .tx-btn__ring { background: conic-gradient(#2ecc71 360deg, transparent 0); box-shadow: 0 0 24px rgba(46, 204, 113, 0.35); }