/* ============================================================
   The generators' step flow (Chris, 2026-10-03).
   Try on + the character generator, laid out one step at a time,
   phone portrait first. Ported from the sp-xr model maker and set
   in the EN¿GMA tokens from site.css (no new colours).
   ============================================================ */
[hidden]{display:none !important}

.gen{max-width:600px}
.gen .gen-head{display:grid;gap:14px}
.gen .gen-title{margin:6px 0 0;font-size:clamp(40px,11vw,92px);line-height:.88}

/* ---------- the step bar ---------- */
.gen-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:14px 0 0;padding:0;list-style:none;counter-reset:s}
.gen-steps li{
  position:relative;display:flex;align-items:center;gap:9px;padding:10px 0 0;
  font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
  border-top:2px solid var(--line);transition:color 300ms var(--ease),border-color 300ms var(--ease);
}
.gen-steps li::before{
  content:'';position:absolute;left:0;top:-2px;height:2px;width:0;background:var(--fg);
  transition:width 520ms var(--ease);
}
.gen-steps li.on,.gen-steps li.done{color:var(--fg)}
.gen-steps li.on::before,.gen-steps li.done::before{width:100%}
.gen-steps i{
  width:20px;height:20px;border-radius:50%;flex:0 0 20px;display:grid;place-items:center;
  border:1px solid var(--line);font-style:normal;font-size:10px;letter-spacing:0;
  transition:background 300ms var(--ease),color 300ms var(--ease),border-color 300ms var(--ease);
}
.gen-steps li.on i{background:var(--fg);color:var(--bg);border-color:var(--fg);animation:gen-pop 420ms var(--spring)}
.gen-steps li.done i{border-color:var(--fg);color:transparent;position:relative}
.gen-steps li.done i::after{content:'';position:absolute;left:6px;top:4px;width:5px;height:9px;border:solid var(--fg);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
@keyframes gen-pop{0%{transform:scale(.6)}100%{transform:scale(1)}}

/* ---------- one step at a time ---------- */
.gen-step{display:none;margin-top:clamp(22px,4vw,40px)}
.gen[data-step="photo"]  [data-for="photo"],
.gen[data-step="send"]   [data-for="send"],
.gen[data-step="result"] [data-for="result"]{display:block;animation:gen-in 420ms var(--ease) both}
@keyframes gen-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.gen-lede{
  margin:0;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(24px,6.4vw,36px);line-height:1;letter-spacing:.02em;
}
.gen-sub{margin:10px 0 0;max-width:46ch;font-size:13px;line-height:1.6;color:var(--muted)}
.gen-small{margin:14px 0 0;font-size:11px;line-height:1.6;color:var(--muted);max-width:44ch}

.gen #picker,.gen .picker-bar{margin-top:18px}

/* ---------- the photo box: sized by the screen's height, so the button stays in view ---------- */
.gen .gen-drop{
  margin:16px auto 0;padding:18px;
  height:min(46svh,520px);width:auto;max-width:100%;aspect-ratio:3/4;
}
.gen .gen-drop .cam{transform:none}
.gen .gen-drop .cam.mirror{transform:scaleX(-1)}
.gen .gen-drop.pop{animation:gen-photo 520ms var(--spring)}
@keyframes gen-photo{0%{transform:scale(.96);opacity:.6}100%{transform:none;opacity:1}}
#shutter{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:3;
  width:58px;height:58px;border-radius:50%;border:2px solid #fff;background:rgba(255,255,255,.18);cursor:pointer;padding:0;
  animation:gen-breathe 1.8s ease-in-out infinite;
}
#shutter::after{content:'';position:absolute;inset:5px;border-radius:50%;background:#fff}
@keyframes gen-breathe{50%{box-shadow:0 0 0 8px rgba(255,255,255,.12)}}
.gen .gen-ib{position:absolute;top:12px;z-index:3;background:rgba(0,0,0,.55);border-color:rgba(255,255,255,.35);color:#fff}
.gen #retake{right:12px}
.gen #flip{left:12px}

.gen-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.gen-row .btn{flex:1 1 140px}
.gen-row-quiet{margin-top:18px}

/* ---------- the direction trigger ---------- */
.gen-direct{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:12px;
  min-height:48px;padding:0 16px;border:1px dashed var(--line-strong);border-radius:2px;background:transparent;
  color:var(--fg);cursor:pointer;font-size:12px;letter-spacing:.06em;
  transition:border-color 220ms var(--ease),background 220ms var(--ease);
}
.gen-direct:hover{border-style:solid;background:var(--surface)}
.gen-direct svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex:0 0 16px}
.direct-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:0 0 7px;animation:gen-pop 420ms var(--spring)}

/* ---------- the CTA: stuck to the bottom of a phone screen while its step is up ---------- */
.gen-cta{
  position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;gap:8px;
  margin:22px calc(-1 * var(--gutter)) 0;padding:14px var(--gutter) calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to bottom,transparent,var(--bg) 26%);
}
.gen-cta .btn{flex:1 1 160px}
.gen-cta #back{flex:0 0 auto;padding:0 20px}
.gen-cta .btn:not(.btn-ghost):not([disabled]){animation:gen-ready 520ms var(--spring)}
@keyframes gen-ready{0%{transform:scale(.97)}60%{transform:scale(1.015)}100%{transform:none}}
.gen-cta.in-flow{position:static;background:none;margin:16px 0 0;padding:0}
.gen-why{flex:1 0 100%;margin:2px 0 0;min-height:1.4em;font-size:11px;color:var(--muted);text-align:center}
@media (min-width:760px){.gen-cta{position:static;background:none;margin-left:0;margin-right:0;padding-left:0;padding-right:0}}

/* ---------- step 2 ---------- */
.gen-summary{display:flex;gap:14px;align-items:center;margin-top:16px;padding:10px;border:1px solid var(--line);border-radius:3px;background:var(--surface)}
.gen-summary img{width:56px;height:74px;object-fit:cover;border-radius:2px;flex:0 0 56px;background:var(--img-bg)}
.gen-summary .sm-txt{flex:1 1 auto;min-width:0}
.gen-summary .sm-a{margin:0;font-size:12px;font-weight:600;letter-spacing:.04em}
.gen-summary .sm-b{margin:4px 0 0;font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.gen-summary .sm-edit{margin-top:6px;padding:0;border:0;background:none;color:var(--fg);font-size:10px;letter-spacing:.22em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

.gen-checks{margin-top:18px;display:grid;gap:2px}
.gen .gen-check{margin-top:0;padding:13px 12px;border:1px solid var(--line);border-radius:3px;transition:border-color 220ms var(--ease),background 220ms var(--ease)}
.gen .gen-check:has(input:checked){border-color:var(--line-strong);background:var(--surface)}
.gen .gen-check span{font-size:12px}
.gen .gen-check b{color:var(--fg);font-weight:600}

.gen-notice{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:12px;border-left:2px solid var(--bad);background:var(--surface)}
.gen-notice svg{width:16px;height:16px;flex:0 0 16px;margin-top:1px;fill:none;stroke:var(--bad);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.gen-notice p{margin:0;font-size:11px;line-height:1.6;color:var(--muted)}

/* ---------- step 3: the picture ---------- */
.gen .gen-result{margin:16px auto 0;height:min(60svh,680px);width:auto;max-width:100%;aspect-ratio:3/4}
.gen[data-mode="character"] .gen-result{aspect-ratio:9/16}
.gen .gen-result img.pic{object-fit:contain;transform:scale(1.03);transition:opacity 800ms var(--ease),transform 900ms var(--ease)}
.gen .gen-result img.pic.on{transform:none}
.gen-result.is-sending{animation:gen-sent 700ms var(--ease)}
@keyframes gen-sent{0%{box-shadow:0 0 0 0 rgba(242,243,247,.45)}100%{box-shadow:0 0 0 18px rgba(242,243,247,0)}}
.gen-fail{font-size:12.5px;max-width:28ch}
/* one flash as the picture lands */
.gen-burst{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.55),transparent 60%);animation:gen-burst 900ms var(--ease) forwards}
@keyframes gen-burst{from{opacity:1}to{opacity:0}}

/* ---------- the wait ---------- */
.gen-wait{
  position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:20px 16px;text-align:center;background:var(--scrim);
}
.gw-ring{position:relative;width:56px;height:56px}
.gw-ring::before,.gw-ring::after,.gw-ring i{content:'';position:absolute;inset:0;border-radius:50%;border:1px solid transparent}
.gw-ring::before{border-color:var(--line)}
.gw-ring::after{border-top-color:var(--fg);animation:spin 900ms linear infinite}
.gw-ring i{inset:9px;border-bottom-color:var(--muted);animation:spin 1.6s linear infinite reverse}
.gw-stage{margin:0;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--fg)}
.gw-stage.flash{animation:gen-in 360ms var(--ease)}
.gw-time{margin:0;font-size:11px;color:var(--muted);letter-spacing:.04em}
.gw-clock{color:var(--fg);font-variant-numeric:tabular-nums}
.gen-wait .progress-line{transition:width 1.2s var(--ease)}
.sayer{position:relative;width:100%;max-width:30ch;min-height:2.6em;margin:0 auto}
.sayer span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;line-height:1.35;color:var(--fg);opacity:0;transition:opacity .4s ease;pointer-events:none}
.sayer span.in{opacity:1}

/* ---------- sheets ---------- */
.gsheet{position:fixed;inset:0;z-index:140;display:flex;align-items:flex-end;justify-content:center;background:var(--scrim);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:gen-fade 180ms ease}
@keyframes gen-fade{from{opacity:0}}
.gsheet-card{
  position:relative;width:100%;max-width:560px;max-height:92svh;overflow-y:auto;background:var(--bg2);
  border:1px solid var(--line);border-radius:14px 14px 0 0;padding:22px var(--gutter);
  padding-bottom:calc(22px + env(safe-area-inset-bottom));animation:gen-rise 260ms cubic-bezier(.2,.7,.3,1);
}
@keyframes gen-rise{from{transform:translateY(24px)}}
@media (min-width:620px) and (min-height:620px){
  .gsheet{align-items:center;padding:20px}
  .gsheet-card{border-radius:4px;padding:26px}
}
.gsheet-card.is-narrow{max-width:420px}
.gsheet-title{margin:0;padding-right:64px;font-family:var(--font-display);font-weight:700;font-size:26px;text-transform:uppercase;line-height:1}
.gsheet-sub{margin:8px 0 16px;font-size:13px;line-height:1.6;color:var(--muted)}
.gsheet textarea{
  display:block;width:100%;min-height:110px;padding:13px 14px;resize:vertical;
  font:inherit;font-size:16px;line-height:1.45;color:var(--fg);background:transparent;
  border:1px solid var(--line);border-radius:2px;outline:none;transition:border-color 220ms var(--ease);
}
.gsheet textarea:focus{border-color:var(--line-strong)}
.gsheet textarea::placeholder{color:var(--dim)}
.gen-exs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.gen-ex{height:30px;padding:0 11px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--fg);font-size:11px;cursor:pointer;transition:border-color 200ms var(--ease)}
.gen-ex:hover{border-color:var(--line-strong)}
.gen-ex::before{content:'+ ';color:var(--muted)}
.gsheet .count{margin:8px 0 0;font-size:11px;color:var(--muted);text-align:right}
.gsheet .count.low{color:var(--bad)}
.gsheet-actions{margin-top:18px}
.gen-clear{position:absolute;right:18px;top:22px;padding:0;border:0;background:none;color:var(--muted);font-size:10px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer}

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

@media (prefers-reduced-motion:reduce){
  .gen-step,.gen-steps li.on i,.gen-drop.pop,#shutter,.gen-cta .btn,.gen-burst,.gsheet,.gsheet-card,.gw-stage.flash,.direct-dot{animation:none !important}
  .gw-ring::after,.gw-ring i{animation-duration:2.6s}
  .sayer span{transition:none}
}

/* The site's toast sits at the bottom edge, which is where the step's button is
   on a phone, so on these pages it rides above it. */
body:has(.gen) .toast{bottom:calc(104px + env(safe-area-inset-bottom))}
@media (min-width:760px){body:has(.gen) .toast{bottom:26px}}