/* ============================================================
   ソクウリ v3 — HERO 強化レイヤー（ファーストビューのインパクト最大化）
   生きた「競り」を主役に：価格カウントアップ＋入札スライドイン＋
   ドリフトするオーロラ／微粒子グリッド。reduced-motion 完全対応。
   ============================================================ */

/* ---------- 背景：動くオーロラ＋ドットグリッド ---------- */
.hero{padding:150px 0 104px;}
.hero::after{display:none;}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.hero-bg .orb{position:absolute;border-radius:50%;filter:blur(46px);opacity:.55;mix-blend-mode:screen;}
.hero-bg .orb.o1{width:540px;height:540px;left:-120px;top:-160px;background:radial-gradient(circle,#3a64e8,transparent 66%);animation:drift1 17s ease-in-out infinite;}
.hero-bg .orb.o2{width:460px;height:460px;right:-120px;top:-80px;background:radial-gradient(circle,#22d3cf,transparent 66%);animation:drift2 20s ease-in-out infinite;}
.hero-bg .orb.o3{width:420px;height:420px;right:8%;bottom:-180px;background:radial-gradient(circle,#7c5cff,transparent 66%);animation:drift3 23s ease-in-out infinite;}
.hero-bg .orb.o4{width:360px;height:360px;left:18%;bottom:-160px;background:radial-gradient(circle,#0ea5e9,transparent 66%);animation:drift1 19s ease-in-out infinite reverse;}
.hero-bg .grid{position:absolute;inset:0;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.4px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 78%);
          mask-image:radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 78%);}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(46px,40px)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-50px,34px)}}
@keyframes drift3{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,-44px)}}

/* ---------- エントランス（staggered） ---------- */
.hero-copy>*{opacity:0;transform:translateY(20px);animation:heroIn .8s cubic-bezier(.22,.61,.36,1) forwards;}
.hero-copy>*:nth-child(1){animation-delay:.05s}
.hero-copy>*:nth-child(2){animation-delay:.14s}
.hero-copy>*:nth-child(3){animation-delay:.23s}
.hero-copy>*:nth-child(4){animation-delay:.32s}
.hero-copy>*:nth-child(5){animation-delay:.41s}
.hero-copy>*:nth-child(6){animation-delay:.50s}
.hero-stage{opacity:0;transform:translateY(26px) scale(.98);animation:heroIn .9s .30s cubic-bezier(.22,.61,.36,1) forwards;}
@keyframes heroIn{to{opacity:1;transform:none;}}

/* ---------- eyebrow：パルスドット ---------- */
.hero-eyebrow{backdrop-filter:blur(6px);}
.hero-eyebrow .dot{box-shadow:0 0 0 0 rgba(16,185,129,.6);animation:pulse 2.2s ease-out infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.55)}70%{box-shadow:0 0 0 8px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}

/* ---------- 見出し：特大＋アニメするハイライト ---------- */
.hero h1{font-size:clamp(38px,6vw,66px);line-height:1.16;font-weight:700;letter-spacing:-.01em;}
.hero h1 .hl{padding-inline:2px;}
.hero h1 .hl::after{height:.30em;top:84%;
  background-image:linear-gradient(90deg,#22d3cf,#4f7dff 45%,#7c5cff);
  background-size:200% 100%;animation:shimmer 4.5s linear infinite;}
@keyframes shimmer{to{background-position:200% 0;}}
.hero-sub{font-size:clamp(15.5px,1.7vw,18px);max-width:560px;}

/* ---------- CTA：光沢スイープ ---------- */
.hero-cta .btn-primary.lg{position:relative;overflow:hidden;}
.hero-cta .btn-primary.lg::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);
  animation:sweep 3.6s ease-in-out infinite;}
@keyframes sweep{0%,62%{left:-60%}82%,100%{left:130%}}

/* ============================================================
   生きた「競り」ステージ（写真の代わりに主役化）
   ============================================================ */
.hero-stage{position:relative;width:100%;max-width:436px;margin-inline:auto;}

/* 端末フレーム */
.live-phone{position:relative;z-index:2;margin-inline:auto;width:300px;max-width:100%;
  background:linear-gradient(160deg,#1b2a55,#0e1838);border-radius:40px;padding:12px;
  box-shadow:0 40px 80px -28px rgba(8,14,40,.8), 0 0 0 1px rgba(255,255,255,.08) inset;}
.live-phone .screen{position:relative;border-radius:30px;overflow:hidden;background:#f4f7fe;height:516px;display:flex;flex-direction:column;}
.live-phone .notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:104px;height:22px;background:#0e1838;border-radius:0 0 14px 14px;z-index:6;}

/* 上部：品物＋AI参考値 */
.lp-head{padding:26px 18px 14px;background:linear-gradient(160deg,#ffffff,#eef3ff);border-bottom:1px solid var(--line);}
.lp-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--blue);background:var(--c-blue-bg,#e8eeff);padding:4px 10px;border-radius:999px;}
.lp-tag .ic{font-size:12px;}
.lp-item{display:flex;align-items:center;gap:12px;margin-top:12px;}
.lp-thumb{width:54px;height:54px;border-radius:13px;flex:none;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,#7c5cff,#4f7dff);box-shadow:0 8px 18px -8px rgba(79,125,255,.7);}
.lp-thumb .ic{font-size:26px;stroke-width:1.7;}
.lp-name{font-size:14px;font-weight:700;color:var(--heading);}
.lp-ref{font-size:11.5px;color:var(--body-soft);margin-top:2px;}
.lp-ref b{color:var(--blue);font-weight:700;}

/* 現在価格カウンタ */
.lp-now{padding:14px 18px 8px;text-align:center;}
.lp-now .lbl{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--body-soft);}
.lp-now .amt{font-size:34px;font-weight:700;color:var(--heading);line-height:1.1;margin-top:2px;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.lp-now .amt .yen{font-size:20px;color:var(--blue);margin-right:1px;}
.lp-now .up{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--emerald);
  background:var(--c-emerald-bg,#d1fae5);padding:3px 9px;border-radius:999px;margin-top:6px;}
.lp-now .up .ic{font-size:12px;}

/* 入札リスト（下からスライドイン） */
.lp-bids{flex:1;padding:8px 14px 14px;display:flex;flex-direction:column;gap:8px;overflow:hidden;}
.bid-row{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:13px;padding:9px 12px;
  box-shadow:0 1px 2px rgba(15,23,42,.05);}
.bid-row .av{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;color:#fff;font-size:12px;font-weight:700;}
.bid-row .co{font-size:12.5px;font-weight:600;color:var(--heading);}
.bid-row .pr{margin-left:auto;font-size:15px;font-weight:700;color:var(--heading);font-variant-numeric:tabular-nums;}
.bid-row .new{font-size:9px;font-weight:700;color:var(--emerald);background:var(--c-emerald-bg,#d1fae5);padding:2px 6px;border-radius:5px;margin-left:8px;}
.bid-row.lead{border-color:#bcd0ff;background:linear-gradient(100deg,#eef4ff,#fff);}
.bid-row.lead .pr{color:var(--blue);}
.bid-row.enter{animation:bidIn .55s cubic-bezier(.22,.61,.36,1);}
@keyframes bidIn{from{opacity:0;transform:translateY(14px) scale(.96);}to{opacity:1;transform:none;}}

/* フローティングチップ（端末の外） */
.hero-pop{position:absolute;z-index:3;background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);
  padding:11px 13px;display:flex;align-items:center;gap:9px;color:var(--heading);}
.hero-pop .pi{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;color:#fff;}
.hero-pop .pi .ic{font-size:16px;stroke-width:2;}
.hero-pop .pl{font-size:10.5px;color:var(--body-soft);line-height:1.2;}
.hero-pop .pv{font-size:13px;font-weight:700;line-height:1.25;}
.hero-pop.p-ai{top:30px;left:-26px;animation:floaty 4.6s ease-in-out infinite;}
.hero-pop.p-ai .pi{background:linear-gradient(140deg,#22d3cf,#0ea5e9);}
.hero-pop.p-top3{bottom:64px;right:-22px;animation:floaty 5.4s ease-in-out .6s infinite;}
.hero-pop.p-top3 .pi{background:linear-gradient(140deg,#7c5cff,#4f7dff);}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

/* 端末の下に淡い反射台 */
.hero-stage::after{content:"";position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);
  width:240px;height:46px;border-radius:50%;background:radial-gradient(ellipse,rgba(34,211,207,.45),transparent 70%);filter:blur(8px);z-index:1;}

@media(max-width:980px){
  .hero-stage{margin-top:8px;}
  .hero-copy>*{animation-delay:0s;}
}
@media(max-width:520px){
  .hero{padding:118px 0 84px;}
  .live-phone{width:270px;}
  .live-phone .screen{height:486px;}
  .hero-pop.p-ai{left:-10px;top:18px;}
  .hero-pop.p-top3{right:-8px;bottom:48px;}
  .hero h1{font-size:clamp(34px,9vw,46px);}
}

/* ---------- reduced-motion：静的な決め画に ---------- */
@media (prefers-reduced-motion:reduce){
  .hero-bg .orb,.hero-eyebrow .dot,.hero h1 .hl::after,.hero-cta .btn-primary.lg::after,
  .hero-pop.p-ai,.hero-pop.p-top3,.bid-row.enter{animation:none !important;}
  .hero-copy>*,.hero-stage{opacity:1;transform:none;animation:none !important;}
  .hero h1 .hl::after{background-position:0 0;}
}