/* =========================================================
   e2R Career LP：各セクションのアニメーション
   ① 選考プロセス（AIはここで働く）
   ② AI機能4つの画面イメージ
   ③ エージェント専用画面のダッシュボード（HTMLで再現）
   ④ ルート管理の画面イメージ
   ・画面に入ったときに1回だけ再生（JS：lp-anim.js）
   ・「視差効果を減らす」設定のときは動かさず完成状態を表示
   ========================================================= */

@property --mv-fill { syntax: '<percentage>'; inherits: false; initial-value: 0%; }

/* ---------- ① 選考プロセス ---------- */
.pflow__row { --pf-d: 2800ms; }
.pf-prog { position: absolute; z-index: 0; border-radius: 2px; pointer-events: none; opacity: 0.55;
  background: linear-gradient(var(--pf-dir, 90deg), var(--line-2), var(--p) 20%, var(--p) 80%, var(--ink));
  transform-origin: 0 0; transform: scale(var(--pf-sx, 1), var(--pf-sy, 1)); }
.pflow__row.pf-dim::before { opacity: 0.18; }
.pflow__row.pf-run .pf-prog { transition: transform var(--pf-d) cubic-bezier(0.65, 0, 0.35, 1); }
.pflow__node, .pflow__name, .pflow__chip { transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.4s ease; }
.pflow__step { z-index: 1; }
.pflow__row.pf-dim .pflow__step:not(.is-lit) .pflow__node { opacity: 0.35; transform: scale(0.72); filter: grayscale(1); }
.pflow__row.pf-dim .pflow__step:not(.is-lit) .pflow__name { opacity: 0.35; }
.pflow__row.pf-dim .pflow__step:not(.is-lit) .pflow__chip { opacity: 0; transform: translateY(10px) scale(0.86); }
/* AIが働くところ：光の輪と、チップのきらめき */
.pflow__step.is-ai .pflow__node::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--p); opacity: 0; pointer-events: none; }
.pflow__step.is-ai.is-glow .pflow__node::after { animation: pfRing 1.4s ease-out; }
@keyframes pfRing { 0% { opacity: 0.9; transform: scale(0.9); } 100% { opacity: 0; transform: scale(1.55); } }
.pflow__chip { position: relative; overflow: hidden; }
.pflow__step.is-ai .pflow__chip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.65) 50%, transparent 65%); transform: translateX(-120%); pointer-events: none; }
.pflow__step.is-ai.is-glow .pflow__chip::after { animation: pfShine 1s ease; }
@keyframes pfShine { to { transform: translateX(120%); } }
.pflow__step.is-ai.is-glow .pflow__chip > svg { animation: pfSpark 0.9s ease; }
@keyframes pfSpark { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(90deg) scale(1.35); } 100% { transform: rotate(180deg) scale(1); } }
.pflow__step.is-ai.is-glow .pflow__chip { box-shadow: 0 14px 30px -10px rgba(var(--p-rgb), 0.85); }
/* 人が最終判断：スタンプのように */
.pflow__step.is-human.is-lit .pflow__chip { animation: pfStamp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes pfStamp { 0% { transform: scale(1.25); opacity: 0; } 100% { transform: none; opacity: 1; } }
/* 流れ続ける光の粒 */
.pf-dot { position: absolute; z-index: 0; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; pointer-events: none; opacity: 0;
  background: #FFFFFF; box-shadow: 0 0 0 3px rgba(var(--p-rgb), 0.55), 0 0 14px 4px rgba(var(--p-rgb), 0.75); }
.pf-dot.is-run { animation: pfDot var(--pf-dd, 3600ms) cubic-bezier(0.45, 0, 0.55, 1) both; }
@keyframes pfDot { 0% { opacity: 0; transform: translate(var(--x0), var(--y0)); } 8% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x1), var(--y1)); } }

/* ---------- ② AI機能の画面イメージ：AIが生成していく様子 ---------- */
.ui .ai-status { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; margin-right: 8px; font-size: 10px; font-weight: 700; color: var(--p-d); background: var(--p-t); border-radius: 999px; padding: 2px 9px; opacity: 0; transform: translateY(-3px); transition: opacity 0.3s, transform 0.3s; white-space: nowrap; }
.ui .ai-status.is-on { opacity: 1; transform: none; }
.ui .ai-status i { display: inline-flex; gap: 2px; }
.ui .ai-status i b { width: 3px; height: 3px; border-radius: 50%; background: currentColor; animation: aiDots 1s infinite; }
.ui .ai-status i b:nth-child(2) { animation-delay: 0.15s; } .ui .ai-status i b:nth-child(3) { animation-delay: 0.3s; }
@keyframes aiDots { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
.ui .ai-status.is-done { color: #1E9E6B; background: #E8F6F0; }
.ui__head > span:first-child > svg { transition: transform 0.6s ease; }
.ui.ai-gen .ui__head > span:first-child > svg { animation: aiSpin 1.2s linear infinite; }
@keyframes aiSpin { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.25); } 100% { transform: rotate(360deg) scale(1); } }
/* パネル上端の青い線が「生成中」に流れる */
.ui__panel { position: relative; }
.ui__panel::before { content: ""; position: absolute; left: -1px; right: -1px; top: -3px; height: 3px; border-radius: 10px 10px 0 0; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, #1E88E5 0%, var(--g) 30%, #1E88E5 60%, var(--p) 90%); background-size: 200% 100%; }
.ui.ai-gen .ui__panel::before { opacity: 1; animation: aiBar 1s linear infinite; }
@keyframes aiBar { to { background-position: -200% 0; } }
/* 中身が上から順に現れる */
.ai-rv, .ui .ai-rv.ai-fx { transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--d, 0ms); }
.ui.ai-pre .ai-rv { opacity: 0; transform: translateY(8px); transition: none; }
.ai-pop { transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); transition-delay: var(--d, 0ms); }
.ui.ai-pre .ai-pop { opacity: 0; transform: scale(0.7); transition: none; }
/* 02の質問は左から少しすべり込む */
.ui.ai-pre .ai-q { transform: translateX(-8px); }
/* スケルトン（生成中のグレーの帯） */
.ai-skel { display: grid; gap: 6px; margin-top: 6px; }
.ai-skel i { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #EEF1F4 0%, #F7F9FB 50%, #EEF1F4 100%); background-size: 200% 100%; animation: aiSkel 1.1s linear infinite; }
.ai-skel i:nth-child(2) { width: 88%; } .ai-skel i:nth-child(3) { width: 64%; }
@keyframes aiSkel { to { background-position: -200% 0; } }
.ai-caret::after { content: ""; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: #1E88E5; animation: aiCaret 0.8s steps(1) infinite; }
@keyframes aiCaret { 50% { opacity: 0; } }
.ui__foot .is-primary.ai-cta { animation: aiCta 1.6s ease 2; }
@keyframes aiCta { 0% { box-shadow: 0 0 0 0 rgba(123,79,224,0.5); } 70% { box-shadow: 0 0 0 8px rgba(123,79,224,0); } 100% { box-shadow: 0 0 0 0 rgba(123,79,224,0); } }

/* ---------- ③ エージェント専用画面のダッシュボード（HTML版） ---------- */
.pool-frame .ag-fit { position: relative; width: 100%; aspect-ratio: 800 / 742; border-radius: 14px 14px 0 0; overflow: hidden; background: #F6F7FB; box-shadow: 0 28px 56px -30px rgba(11,22,34,0.38); }
.ag { position: absolute; left: 0; top: 0; width: 800px; padding: 14px 14px 16px; transform-origin: top left; font-family: var(--font); font-size: 11px; line-height: 1.5; color: #24313F; }
.ag p { margin: 0; }
.ag svg { flex: none; }
.ag-top { display: flex; align-items: center; justify-content: space-between; }
.ag-h1 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 900; color: #0B1622; }
.ag-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: #1E78D2; border: 1px solid #1E88E5; border-radius: 6px; padding: 4px 18px; background: #FFFFFF; }
.ag-time { margin-top: 3px !important; text-align: right; font-size: 9px; color: #8A94A0; }
.ag-note { font-size: 9.5px; color: #8A94A0; }
.ag-cols { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ag-col { display: flex; flex-direction: column; gap: 12px; }
.ag-h2 { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 900; color: #0B1622; margin-bottom: 6px !important; }
.ag-h2--mt { margin-top: 14px !important; }
.ag-link { margin-left: auto; font-size: 9.5px; font-weight: 700; color: #1E78D2; }
.ag-card { background: #FFFFFF; border-radius: 9px; padding: 10px 12px; box-shadow: 0 1px 3px rgba(11,22,34,0.06); }
.ag-card--msg { min-height: 100px; padding: 14px 20px; display: grid; gap: 12px; align-content: start; }
.ag-msg { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.ag-msg b { margin-left: auto; font-weight: 500; } .ag-msg b .ag-n { color: #1E78D2; font-weight: 700; }
.ag-tag { font-size: 9px; font-weight: 700; color: #1E78D2; background: #DCEBFA; border-radius: 4px; padding: 1px 0; width: 48px; text-align: center; }
.ag-tag--p { color: #7B61D9; background: #ECE7FB; }
.ag-news { display: flex; align-items: center; gap: 16px; padding: 8px 4px; font-size: 11px; border-bottom: 1px solid #EEF1F4; }
.ag-news:last-child { border-bottom: 0; }
.ag-news small { font-size: 10px; color: #5E6B78; }
.ag-news i { margin-left: auto; font-style: normal; color: #9AA4AE; }
.ag-new { font-style: normal; font-size: 8px; font-weight: 700; color: #FFFFFF; background: #F05A5A; border-radius: 3px; padding: 1px 6px; margin-left: auto; margin-right: -6px; }
.ag-card--task { display: grid; gap: 8px; padding: 10px 12px 12px; flex: 1; }
.ag-task { border: 1px solid #E2E8EE; border-radius: 7px; overflow: hidden; }
.ag-task__h { display: flex; align-items: center; gap: 6px; background: #F1F4F8; padding: 6px 10px; font-size: 11px; font-weight: 900; color: #0B1622; }
.ag-task__r { display: flex; align-items: center; padding: 6px 10px 6px 22px; position: relative; font-size: 11px; border-top: 1px solid #EEF1F4; }
.ag-task__r::before { content: ""; position: absolute; left: 10px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%; background: #F05A5A; }
.ag-task__r b { margin-left: auto; font-size: 13px; font-weight: 700; color: #E0474C; }
.ag-warn { display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding: 0 10px 6px; font-size: 9.5px; color: #E0474C; }
.ag-card--perf { padding: 12px 14px 12px; }
.ag-stages { display: grid; grid-template-columns: 1fr 14px 1fr 14px 1fr 14px 1fr; align-items: center; gap: 6px; }
.ag-st { border: 1px solid #E2E8EE; border-radius: 7px; padding: 8px 10px; }
.ag-st__h { font-size: 10.5px; font-weight: 900; color: #0B1622; }
.ag-st__n { display: flex; align-items: center; justify-content: space-between; margin-top: 4px !important; }
.ag-st__n small { font-size: 9px; font-weight: 700; } .ag-st__n small em { font-style: normal; color: #1E78D2; font-size: 11px; }
.ag-st__n b { font-family: var(--font-en); font-size: 21px; font-weight: 700; color: #1E78D2; line-height: 1.1; }
.ag-st__n b i { font-style: normal; font-size: 9px; color: #5E6B78; margin-left: 2px; font-family: var(--font); }
.ag-arr { text-align: center; color: #9AA4AE; font-size: 14px; }
.ag-rate { --mv-fill: var(--to, 100%); font-size: 8.5px; font-weight: 700; color: #1E78D2; border-radius: 999px; padding: 1px 8px;
  background: linear-gradient(90deg, #CFE3F8 0 var(--mv-fill), #EEF5FC var(--mv-fill)); transition: --mv-fill 1.3s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; }
.ag-rate.is-green { color: #1E9E6B; background: linear-gradient(90deg, #C9EBDB 0 var(--mv-fill), #EEF8F3 var(--mv-fill)); }
.ag-ng { margin-top: 5px !important; text-align: right; font-size: 9px; color: #8A94A0; }
.ag-legend { display: flex; justify-content: flex-end; gap: 10px; margin-top: 4px; font-size: 9px; color: #3A4757; }
.ag-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: -0.5px; }
.ag-chart { display: block; width: 100%; height: auto; margin-top: 4px; overflow: visible; }
.ag-chart text { font-family: var(--font-en), var(--font); font-size: 9px; fill: #5E6B78; }
.ag-chart .grid { stroke: #EEF1F4; stroke-width: 1; }
.ag-alert { margin-top: 8px !important; display: flex; align-items: center; gap: 6px; background: #FDF6DE; border-radius: 6px; padding: 7px 12px; font-size: 10.5px; }
.ag-alert b { color: #1E78D2; font-weight: 700; }
/* 動き */
.ag-rv { transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--d, 0ms); }
.ag.ag-pre .ag-rv { opacity: 0; transform: translateY(12px); transition: none; }
.ag.ag-pre .ag-rate { --mv-fill: 0%; transition: none; }
.ag-alert { transition: opacity 0.5s ease, transform 0.5s ease; }
.ag.ag-pre .ag-alert, .ag.ag-wait .ag-alert { opacity: 0; transform: translateY(6px); }
.ag-new.is-pop { animation: agNew 0.9s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes agNew { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.18); opacity: 1; } 100% { transform: none; } }
.ag-warn.is-blink { animation: agBlink 1.2s ease 2; }
@keyframes agBlink { 0%, 100% { background: transparent; } 40% { background: #FDECEC; } }
.ag-task__r.is-hl b { animation: agTick 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes agTick { 0% { transform: scale(1.5); } 100% { transform: none; } }

/* ---------- ④ ルート管理 ---------- */
.rt .rt-rv { transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--d, 0ms); }
.rt.rt-pre .rt-rv { opacity: 0; transform: translateX(-10px); transition: none; }
.rt .rt-side { transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: var(--d, 0ms); }
.rt.rt-pre .rt-side { opacity: 0; transform: translateX(14px); transition: none; }
.rt .rt-st i { transition: box-shadow 0.3s; }
.rt .rt-st.is-ping i { animation: rtPing 1s ease-out; }
@keyframes rtPing { 0% { box-shadow: 0 0 0 0 rgba(30,158,107,0.6); } 100% { box-shadow: 0 0 0 6px rgba(30,158,107,0); } }
.rt .rt-r.is-sel { transition: background-color 0.5s ease, box-shadow 0.5s ease; box-shadow: inset 0 0 0 1.5px #1E88E5; }

/* ---------- ① 案2：1ステップずつ進み、AIのステップを拡大 ---------- */
.pflow__row.pf-step .pf-prog { transition: transform 0.38s cubic-bezier(0.65, 0, 0.35, 1); }
.pflow__step { transition: transform 0.55s cubic-bezier(0.34, 1.3, 0.64, 1), opacity 0.4s ease; }
.pflow__step::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 28px; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--p-rgb), 0.22), rgba(var(--p-rgb), 0)); opacity: 0; transform: scale(0.6); transition: opacity 0.4s ease, transform 0.6s ease; }
.pflow__row.pf-focus .pflow__step:not(.pf-zoom) { opacity: 0.55; }
.pflow__step.pf-zoom { transform: scale(1.1); z-index: 3; }
.pflow__step.pf-zoom::before { opacity: 1; transform: none; }
.pflow__step.pf-zoom .pflow__chip { box-shadow: 0 18px 36px -12px rgba(var(--b-rgb), 0.85); }
.pflow__row.pf-v .pflow__step.pf-zoom { transform: scale(1.05); transform-origin: 28px 28px; }
.pflow__row.pf-v .pflow__step::before { left: 28px; }

/* ---------- ② 案2：表示される情報を1つずつ拡大 ---------- */
.ai-fx { position: relative; transform-origin: 30% 50%; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease, filter 0.45s ease; }
/* 枠や影はつけず、ほかの情報をうすく・ぼかして、注目する情報だけを少し大きく */
.ui.ai-focus .ai-fx:not(.is-focus), .ui.ai-focus .ui__sub:not(.is-lbl), .ui.ai-focus .ui__title, .ui.ai-focus .ui__note, .ui.ai-focus .ui__foot { opacity: 0.22; filter: blur(0.6px); transition: opacity 0.45s ease, filter 0.45s ease; }
.ui.ai-focus .ai-fx.is-focus { z-index: 2; transform: scale(1.05); }
.ui.ai-focus .ai-fx { transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease, filter 0.45s ease; transition-delay: 0s; }
.ui.ai-focus .ui__sub.is-lbl { color: #1E78D2; transition: color 0.3s ease; }

/* ---------- ④ 案2：階層が順に開く（実際の画面の操作） ---------- */
.rt { position: relative; }
.rt-r.rt-selroot { background: #FFFFFF; border-radius: 8px; box-shadow: inset 0 0 0 1.5px #1E88E5; }
.rt-kids.rt-closed { display: none; }
.rt-kids.rt-opening { overflow: hidden; transition: height 0.4s cubic-bezier(0.65, 0, 0.35, 1); }
.rt-kids.rt-opening > * { animation: rtIn 0.36s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: var(--d, 0ms); }
@keyframes rtIn { 0% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 1; transform: none; } }
.rt-tg { transition: background-color 0.2s ease, border-color 0.2s ease; }
.rt-r.rt-hover-tg .rt-tg { background: #DCEBFA; border-color: #1E88E5; }
.rt-r.rt-hover b { color: #1E78D2; text-decoration: underline; }
.rt-r.rt-hover { transition: background-color 0.3s; }
.rt-badge--gray { color: #3A4757; background: #EEF1F4; }
.rt-side dd.rt-link-num { color: #1E78D2; font-weight: 700; }
.rt .rt-cursor { z-index: 20; transition-duration: 0.7s, 0.3s; }

@media (prefers-reduced-motion: reduce) {
  .pf-prog, .pf-dot, .pflow__step, .ai-rv, .ai-pop, .ai-fx, .ag-rv, .ag-rate, .rt .rt-rv, .rt .rt-side, .rt-kids { transition: none !important; animation: none !important; }
}

/* ④ 案2：選択中の青い枠（行から行へ移動） */
.rt-selbox { position: absolute; z-index: 1; border-radius: 8px; box-shadow: inset 0 0 0 1.5px #1E88E5; background: rgba(255,255,255,0); pointer-events: none;
  transition: left 0.35s cubic-bezier(0.65, 0, 0.35, 1), top 0.35s cubic-bezier(0.65, 0, 0.35, 1), width 0.35s cubic-bezier(0.65, 0, 0.35, 1), height 0.35s cubic-bezier(0.65, 0, 0.35, 1); }
.rt-selbox.is-jump { transition: none; }
.rt-r.is-cur { background: #FFFFFF; border-radius: 8px; transition: background-color 0.3s ease; }
.rt-side .rt-side__in { transition: opacity 0.2s ease, transform 0.2s ease; }
.rt-side.is-swap .rt-side__in { opacity: 0; transform: translateY(4px); }
.rt-badge--blue { color: #1E78D2; background: #E3EFFB; }
.rt-badge--green { color: #1E9E6B; background: #E2F4EC; }

/* 02 面接質問の提案・案4：ブロックを1つずつ表示し、表示したブロックを少し拡大（ほかは少しうすく） */
.ui .ai-fx.ai-wait { opacity: 0 !important; transform: translateY(10px) !important; filter: none !important; }
.ui.ai-seq.ai-focus .ai-fx:not(.is-focus):not(.ai-wait) { opacity: 0.42; filter: blur(0.4px); }
.ui.ai-seq.ai-focus .ai-fx.is-focus { transform: scale(1.04); }