/* ============================================================
   使い方3ステップ アニメーション / スタイル
   ------------------------------------------------------------
   ・すべて .uf- プレフィックス。既存CSSと衝突しません。
   ・色と再生速度は下の :root ではなく .uf-flow の変数で調整します。
   ・再生時間を変えるときは --uf-duration だけ書き換えればOK。
     （各パーツの遅延はこの値からの相対計算。JS側も同じ値を読みます）
   ============================================================ */

.uf-flow {
  /* ▼ ここだけ触ればテーマ変更できます ------------------------- */
  --uf-duration: 3.6s;        /* 1ステップの再生時間 */
  --uf-accent: #bdd000;       /* アクセント色（進行バー・チェック・完成品） */
  --uf-ink: #161718;          /* 文字・選択された枠 */
  --uf-muted: #8f938b;        /* 待機中の文字 */
  --uf-note: #6b6e68;         /* 補足文の色 */
  --uf-line: #e2e3dd;         /* 罫線 */
  --uf-frame: #d9dad3;        /* パーツの枠線 */
  --uf-fill: #ebece6;         /* ダミーの文字組み */
  --uf-surface: #ffffff;      /* パーツの背景 */
  --uf-active-bg: #fdfff0;    /* 再生中のステップの背景 */
  /* ------------------------------------------------------------ */

  display: grid;
  max-width: 960px;
  margin: 26px auto 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--uf-line);
  list-style: none;
  font-family: inherit;
}

.uf-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 20px 24px;
  overflow: hidden;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 320ms ease;
}

.uf-step + .uf-step {
  border-top: 1px solid var(--uf-line);
}

.uf-step.is-active {
  background: var(--uf-active-bg);
}

@media (min-width: 640px) {
  .uf-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .uf-step + .uf-step {
    border-top: 0;
    border-left: 1px solid var(--uf-line);
  }
}

/* --- 見出し部分 --------------------------------------------- */
.uf-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 15px;
}

.uf-head > div {
  min-width: 0;
}

.uf-num {
  color: #dedfd6;
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
  transition: color 300ms ease;
}

.uf-step.is-active .uf-num {
  color: var(--uf-accent);
}

.uf-title {
  display: block;
  color: var(--uf-muted);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  text-wrap: balance;
  transition: color 300ms ease;
}

.uf-step.is-active .uf-title {
  color: var(--uf-ink);
}

.uf-note {
  margin: 3px 0 0;
  color: var(--uf-note);
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

@media (min-width: 640px) {
  .uf-head {
    align-items: start;
    min-height: 62px;
  }

  .uf-step:nth-child(3) .uf-title {
    font-size: clamp(13px, 1.35vw, 15px);
  }

  .uf-step:nth-child(3) .uf-note {
    font-size: 10px;
  }
}

/* --- 下端の進行バー ----------------------------------------- */
.uf-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  overflow: hidden;
}

.uf-progress i {
  display: block;
  height: 100%;
  background: var(--uf-accent);
  transform: scaleX(0);
  transform-origin: left center;
}

.uf-step.is-active .uf-progress i {
  animation: uf-progress var(--uf-duration) linear forwards;
}

@keyframes uf-progress {
  to { transform: scaleX(1); }
}

/* --- 共通ステージ（固定サイズのミニ画面） ------------------- */
.uf-stage {
  position: relative;
  width: 240px;
  height: 116px;
  margin: 2px auto 0;
  overflow: hidden;
}

/* 待機中はうすく「これから起きること」を見せておく */
.uf-step:not(.is-active) .uf-stage {
  opacity: 0.5;
}

.uf-step:not(.is-active) .uf-file,
.uf-step:not(.is-active) .uf-chip,
.uf-step:not(.is-active) .uf-out,
.uf-step:not(.is-active) .uf-cursor {
  opacity: 1;
}

.uf-step:not(.is-active) .uf-cursor {
  transform: translate(104px, 72px);
}

/* ============================================================
   STEP 1：たくさんの中から1つ選ぶ
   ============================================================ */
.uf-pick {
  position: absolute;
  top: 10px;
  left: 19px;
  width: 202px;
  height: 96px;
}

.uf-card {
  position: absolute;
  width: 62px;
  height: 44px;
  border: 1px solid var(--uf-line);
  background: var(--uf-surface);
}

.uf-card::before,
.uf-card::after {
  content: "";
  position: absolute;
  left: 8px;
  background: var(--uf-fill);
}

.uf-card::before {
  top: 9px;
  width: 34px;
  height: 7px;
  background: #d7d9d1;
}

.uf-card::after {
  top: 22px;
  width: 46px;
  height: 4px;
  box-shadow: 0 8px 0 -1px #eceee7;
}

.uf-card:nth-child(1) { top: 0;    left: 0; }
.uf-card:nth-child(2) { top: 0;    left: 70px; }
.uf-card:nth-child(3) { top: 0;    left: 140px; }
.uf-card:nth-child(4) { top: 52px; left: 0; }
.uf-card:nth-child(5) { top: 52px; left: 70px; }
.uf-card:nth-child(6) { top: 52px; left: 140px; }

.uf-check {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--uf-accent);
  color: var(--uf-ink);
  font-size: 11px;
  font-weight: 700;
  transform: scale(0);
}

.uf-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 15px;
  height: 20px;
  fill: var(--uf-ink);
  stroke: #ffffff;
  stroke-width: 1.1;
  opacity: 0;
}

.uf-step.is-active .uf-card {
  animation: uf-card-in 420ms ease both;
}

.uf-step.is-active .uf-card:nth-child(1) { animation-delay: 0.02s; }
.uf-step.is-active .uf-card:nth-child(2) { animation-delay: 0.08s; }
.uf-step.is-active .uf-card:nth-child(3) { animation-delay: 0.14s; }
.uf-step.is-active .uf-card:nth-child(4) { animation-delay: 0.2s; }
.uf-step.is-active .uf-card:nth-child(5) { animation-delay: 0.26s; }
.uf-step.is-active .uf-card:nth-child(6) { animation-delay: 0.32s; }

.uf-step.is-active .uf-card:not(.is-target) {
  animation:
    uf-card-in 420ms ease both,
    uf-card-dim 400ms ease calc(var(--uf-duration) * 0.694) forwards;
}

.uf-step.is-active .uf-card.is-target {
  animation:
    uf-card-in 420ms ease both,
    uf-card-select 480ms cubic-bezier(0.2, 0.9, 0.25, 1.45) calc(var(--uf-duration) * 0.68) forwards;
}

.uf-step.is-active .uf-check {
  animation: uf-pop 460ms cubic-bezier(0.2, 0.9, 0.25, 1.5) calc(var(--uf-duration) * 0.728) forwards;
}

.uf-step.is-active .uf-cursor {
  animation: uf-cursor calc(var(--uf-duration) * 0.944) cubic-bezier(0.45, 0, 0.2, 1) both;
}

@keyframes uf-card-in {
  from { opacity: 0; transform: translateY(7px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

@keyframes uf-card-dim {
  to { opacity: 0.32; }
}

@keyframes uf-card-select {
  to {
    transform: scale(1.11);
    border-color: var(--uf-ink);
    box-shadow: 0 10px 22px rgb(20 22 23 / 14%);
  }
}

@keyframes uf-cursor {
  0%   { opacity: 0; transform: translate(44px, 116px); }
  9%   { opacity: 1; }
  27%  { transform: translate(38px, 18px); }
  33%  { transform: translate(38px, 18px); }
  50%  { transform: translate(178px, 24px); }
  56%  { transform: translate(178px, 24px); }
  73%  { transform: translate(104px, 72px); }
  78%  { transform: translate(104px, 72px) scale(0.82); }
  84%  { transform: translate(104px, 72px) scale(1); }
  100% { opacity: 1; transform: translate(104px, 72px); }
}

/* ============================================================
   STEP 2：TXTファイルをダウンロード
   ============================================================ */
.uf-file {
  position: absolute;
  top: 0;
  left: 50%;
  width: 56px;
  height: 66px;
  margin-left: -28px;
  border: 1px solid var(--uf-frame);
  background: var(--uf-surface);
  opacity: 0;
}

.uf-file::before,
.uf-file::after {
  content: "";
  position: absolute;
  left: 9px;
  height: 4px;
  background: #e6e7e1;
}

.uf-file::before {
  top: 12px;
  width: 30px;
  background: #d5d7cf;
}

.uf-file::after {
  top: 24px;
  width: 38px;
  box-shadow: 0 9px 0 0 var(--uf-fill), 0 18px 0 0 var(--uf-fill);
}

.uf-file-label {
  position: absolute;
  bottom: 7px;
  left: 9px;
  color: #7c8800;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.uf-tray {
  position: absolute;
  bottom: 6px;
  left: 50%;
  display: grid;
  align-items: center;
  width: 164px;
  height: 32px;
  margin-left: -82px;
  padding: 0 12px;
  border: 1px solid var(--uf-frame);
  background: var(--uf-surface);
}

.uf-bar {
  display: block;
  height: 5px;
  background: #eff0ea;
}

.uf-bar i {
  display: block;
  height: 100%;
  background: var(--uf-accent);
  transform: scaleX(0);
  transform-origin: left center;
}

.uf-done {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--uf-surface);
  color: var(--uf-ink);
  font-size: 11px;
  font-weight: 700;
  opacity: 0;
}

.uf-step.is-active .uf-file {
  animation: uf-file calc(var(--uf-duration) * 0.972) cubic-bezier(0.4, 0, 0.25, 1) both;
}

.uf-step.is-active .uf-bar i {
  animation: uf-bar calc(var(--uf-duration) * 0.278) linear calc(var(--uf-duration) * 0.542) forwards;
}

.uf-step.is-active .uf-tray {
  animation: uf-tray 500ms ease calc(var(--uf-duration) * 0.82) forwards;
}

.uf-step.is-active .uf-done {
  animation: uf-done 420ms ease calc(var(--uf-duration) * 0.847) forwards;
}

@keyframes uf-file {
  0%   { opacity: 0; transform: translateY(-16px) scale(0.9); }
  12%  { opacity: 1; transform: translateY(0) scale(1); }
  38%  { opacity: 1; transform: translateY(0) scale(1); }
  60%  { opacity: 1; transform: translateY(28px) scale(0.94); }
  70%  { opacity: 0; transform: translateY(38px) scale(0.7); }
  100% { opacity: 0; transform: translateY(38px) scale(0.7); }
}

@keyframes uf-bar {
  to { transform: scaleX(1); }
}

@keyframes uf-tray {
  to { border-color: var(--uf-accent); }
}

@keyframes uf-done {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   STEP 3：AIに渡してチラシができあがる
   ============================================================ */
.uf-chip {
  position: absolute;
  left: 0;
  display: grid;
  place-items: center;
  width: 112px;
  height: 25px;
  padding: 0 6px;
  overflow: hidden;
  border: 1px solid var(--uf-frame);
  background: var(--uf-surface);
  color: #5d605a;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: -0.025em;
  white-space: nowrap;
  opacity: 0;
}

.uf-chip-a { top: 24px; }
.uf-chip-b { top: 64px; }

.uf-core {
  position: absolute;
  top: 34px;
  left: 122px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  background: var(--uf-ink);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.uf-out {
  position: absolute;
  top: 26px;
  right: 2px;
  width: 46px;
  height: 63px;
  border: 1px solid var(--uf-frame);
  background: var(--uf-surface);
  opacity: 0;
}

.uf-out::before,
.uf-out::after {
  content: "";
  position: absolute;
  left: 7px;
  background: var(--uf-fill);
}

.uf-out::before {
  top: 8px;
  width: 26px;
  height: 8px;
  background: var(--uf-accent);
}

.uf-out::after {
  top: 24px;
  width: 32px;
  height: 4px;
  box-shadow: 0 8px 0 0 var(--uf-fill), 0 16px 0 0 var(--uf-fill), 0 24px 0 -1px #d7d9d1;
}

.uf-spark {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--uf-accent);
  opacity: 0;
}

.uf-spark-1 { top: 18px; right: 52px; }
.uf-spark-2 { top: 46px; right: 42px; }
.uf-spark-3 { top: 90px; right: 56px; }

.uf-step.is-active .uf-chip-a {
  animation: uf-chip calc(var(--uf-duration) * 0.833) cubic-bezier(0.4, 0, 0.2, 1) calc(var(--uf-duration) * 0.028) both;
}

.uf-step.is-active .uf-chip-b {
  animation: uf-chip calc(var(--uf-duration) * 0.833) cubic-bezier(0.4, 0, 0.2, 1) calc(var(--uf-duration) * 0.111) both;
}

.uf-step.is-active .uf-core {
  animation: uf-pulse 900ms ease calc(var(--uf-duration) * 0.514);
}

.uf-step.is-active .uf-out {
  animation: uf-out 620ms cubic-bezier(0.2, 0.9, 0.25, 1.4) calc(var(--uf-duration) * 0.639) forwards;
}

.uf-step.is-active .uf-spark-1 { animation: uf-pop 700ms ease calc(var(--uf-duration) * 0.694) forwards; }
.uf-step.is-active .uf-spark-2 { animation: uf-pop 700ms ease calc(var(--uf-duration) * 0.736) forwards; }
.uf-step.is-active .uf-spark-3 { animation: uf-pop 700ms ease calc(var(--uf-duration) * 0.778) forwards; }

@keyframes uf-chip {
  0%   { opacity: 0; transform: translateX(-30px) scale(0.9); }
  14%  { opacity: 1; transform: translateX(0) scale(1); }
  42%  { opacity: 1; transform: translateX(0) scale(1); }
  66%  { opacity: 0; transform: translateX(78px) scale(0.42); }
  100% { opacity: 0; transform: translateX(78px) scale(0.42); }
}

@keyframes uf-pulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgb(189 208 0 / 65%); }
  55%  { transform: scale(1.14); box-shadow: 0 0 0 12px rgb(189 208 0 / 0%); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgb(189 208 0 / 0%); }
}

@keyframes uf-out {
  from { opacity: 0; transform: translateX(-16px) scale(0.82); }
  to   { opacity: 1; transform: none; }
}

@keyframes uf-pop {
  0%   { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; transform: scale(1.18); }
  100% { opacity: 1; transform: scale(1); }
}

/* ============================================================
   動きを減らす設定の端末では、完成形を静止表示する
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .uf-step,
  .uf-step *,
  .uf-step *::before,
  .uf-step *::after {
    animation: none !important;
    transition: none !important;
  }

  .uf-step { background: transparent; cursor: default; }
  .uf-step .uf-title { color: var(--uf-ink); }
  .uf-step .uf-num { color: var(--uf-accent); }
  .uf-progress { display: none; }
  .uf-stage { opacity: 1 !important; }
  .uf-cursor { opacity: 1; transform: translate(104px, 72px); }
  .uf-card:not(.is-target) { opacity: 0.32; }
  .uf-card.is-target { border-color: var(--uf-ink); }
  .uf-check { transform: scale(1); }
  .uf-file { opacity: 1; }
  .uf-bar i { transform: scaleX(1); }
  .uf-chip { opacity: 1; }
  .uf-out { opacity: 1; }
  .uf-spark { opacity: 1; }
}

@media (max-width: 400px) {
  .uf-step { padding: 18px 14px 22px; }
}