/* AIQs Component Lab — 驚き重視のボタン&カード見本 */
:root{
  --bg:#060410; --ink:#f6f2ff; --muted:#a99fcf;
  --violet:#b78cff; --pink:#ff8fe0; --blue:#74c8ff; --teal:#6ff0d0; --warm:#f0cd83;
  --line:rgba(184,156,255,.16); --glass:rgba(122,92,200,.08);
  --serif:"Shippori Mincho","Zen Kaku Gothic New",serif;
  --font:"Zen Kaku Gothic New",ui-sans-serif,-apple-system,"Segoe UI",sans-serif;
}
@property --a{syntax:"<angle>";initial-value:0deg;inherits:false}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{min-height:100dvh;background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* 背景 */
.fx-aurora,.fx-grain{position:fixed;inset:0;pointer-events:none;z-index:0}
.fx-aurora{
  background:
    radial-gradient(38% 44% at 16% 12%,rgba(123,92,255,.4),transparent 60%),
    radial-gradient(34% 40% at 84% 16%,rgba(116,200,255,.3),transparent 60%),
    radial-gradient(44% 50% at 72% 90%,rgba(255,143,224,.32),transparent 60%),
    linear-gradient(180deg,#0c0722,#060410 60%);
  filter:saturate(1.15) blur(8px);background-size:200% 200%,200% 200%,200% 200%,100% 100%;
  animation:aurora 26s ease-in-out infinite}
@keyframes aurora{0%,100%{background-position:0% 0%,100% 0%,70% 100%,0 0}50%{background-position:60% 40%,30% 60%,40% 70%,0 0}}
.fx-grain{z-index:1;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.wrap{position:relative;z-index:2;width:min(100%,940px);margin:0 auto;padding:40px clamp(18px,5vw,32px) 80px}
.head{text-align:center;margin-bottom:40px}
.eyebrow{color:var(--violet);font-size:12px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;margin:0 0 10px}
.head h1{font-family:var(--serif);font-size:clamp(30px,7vw,52px);font-weight:700;margin:0;background:linear-gradient(100deg,#fff,var(--violet) 60%,var(--pink));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lead{color:var(--muted);margin:14px auto 0;max-width:30rem;line-height:1.8}
.sec{font-size:13px;letter-spacing:.3em;color:var(--muted);font-weight:700;margin:48px 0 18px;text-align:center}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:26px 18px;justify-items:center}
.grid.cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
figure{margin:0;display:grid;gap:12px;justify-items:center;width:100%}
figcaption{color:var(--muted);font-size:12.5px;text-align:center;line-height:1.6}

/* ===== ボタン共通 ===== */
.btn{position:relative;display:inline-grid;place-items:center;min-width:172px;min-height:62px;padding:0 28px;border:none;border-radius:16px;cursor:pointer;color:#fff;font-family:var(--font);font-size:17px;font-weight:700;letter-spacing:.04em;overflow:hidden;background:#15102a;-webkit-tap-highlight-color:transparent;transition:transform .15s ease,box-shadow .3s ease}
.btn span{position:relative;z-index:3}
.btn:active{transform:scale(.97)}

/* ① マグネティック */
.b-magnetic{background:linear-gradient(120deg,#2a1b55,#1a1030);box-shadow:0 10px 30px rgba(0,0,0,.5),0 0 0 1px var(--line) inset;transition:transform .12s ease,box-shadow .3s ease}
.b-magnetic::before{content:"";position:absolute;inset:-2px;background:radial-gradient(120px circle at var(--bx,50%) var(--by,50%),rgba(183,140,255,.55),transparent 60%);opacity:0;transition:opacity .3s}
.b-magnetic:hover{box-shadow:0 18px 44px rgba(150,90,255,.45),0 0 0 1px rgba(183,140,255,.5) inset}
.b-magnetic:hover::before{opacity:1}

/* ② ボーダービーム */
.b-beam{background:#120c26}
.b-beam::before{content:"";position:absolute;inset:0;padding:2px;border-radius:inherit;background:conic-gradient(from var(--a),transparent 0 70%,var(--violet) 80%,var(--pink) 88%,transparent 96%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:rot 3s linear infinite}
@keyframes rot{to{--a:360deg}}

/* ③ ホログラフィック */
.b-holo{background:linear-gradient(115deg,#7b5cff,#ff8fe0,#74c8ff,#6ff0d0,#7b5cff);background-size:300% 300%;color:#16092b;animation:holo 5s ease infinite;box-shadow:0 12px 36px rgba(170,110,255,.45)}
@keyframes holo{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.b-holo::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);transform:translateX(-120%);animation:sweep 3.4s ease-in-out infinite}
@keyframes sweep{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

/* ④ リップル */
.b-ripple{background:linear-gradient(120deg,#2a1b55,#3a1f63);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.ripple{position:absolute;border-radius:999px;background:radial-gradient(circle,rgba(255,255,255,.7),rgba(183,140,255,.3) 50%,transparent 70%);transform:translate(-50%,-50%) scale(0);animation:rip .65s ease-out forwards;z-index:2;pointer-events:none}
@keyframes rip{to{transform:translate(-50%,-50%) scale(14);opacity:0}}

/* ⑤ リキッド充填 */
.b-fill{background:transparent;box-shadow:0 0 0 1px var(--violet) inset;color:var(--violet);transition:color .4s ease}
.b-fill::before{content:"";position:absolute;left:50%;bottom:-140%;width:160%;aspect-ratio:1;border-radius:42%;background:linear-gradient(120deg,var(--violet),var(--pink));transform:translateX(-50%);transition:bottom .55s cubic-bezier(.5,0,.2,1)}
.b-fill:hover{color:#16092b}
.b-fill:hover::before{bottom:-30%}

/* ⑥ ネオンパルス */
.b-neon{background:#0d0820;color:#fff;box-shadow:0 0 0 1px var(--pink) inset;animation:neon 1.8s ease-in-out infinite}
@keyframes neon{0%,100%{box-shadow:0 0 0 1px var(--pink) inset,0 0 8px rgba(255,143,224,.5),0 0 22px rgba(255,143,224,.25)}50%{box-shadow:0 0 0 1px var(--violet) inset,0 0 18px rgba(183,140,255,.8),0 0 48px rgba(183,140,255,.5)}}

/* ⑦ スパーク（JSで粒子追加） */
.b-spark{background:linear-gradient(120deg,#241650,#160f30);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.spark{position:absolute;width:4px;height:4px;border-radius:999px;background:var(--warm);box-shadow:0 0 8px var(--warm);pointer-events:none;z-index:4;animation:fly .7s ease-out forwards}
@keyframes fly{to{transform:translate(var(--tx),var(--ty)) scale(0);opacity:0}}

/* ⑧ グリッチ */
.b-glitch{background:#0e0a22;box-shadow:0 0 0 1px var(--line) inset}
.b-glitch span{animation:none}
.b-glitch:hover span{animation:glitch .35s steps(2) infinite;text-shadow:2px 0 var(--pink),-2px 0 var(--blue)}
@keyframes glitch{0%{transform:translate(0)}25%{transform:translate(-2px,1px)}50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,-1px)}100%{transform:translate(1px,1px)}}

/* ===== カード共通 ===== */
.card{position:relative;width:100%;min-height:170px;padding:22px;border-radius:20px;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(14px);box-shadow:0 18px 50px rgba(0,0,0,.5);overflow:hidden;display:grid;align-content:start;gap:8px}
.card .badge{justify-self:start;font-size:11px;font-weight:700;letter-spacing:.1em;color:#16092b;background:linear-gradient(120deg,var(--violet),var(--pink));padding:3px 10px;border-radius:999px}
.card strong{font-family:var(--serif);font-size:22px;font-weight:600;margin-top:6px}
.card p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.7}

/* ① 3Dチルト＋グレア */
.c-tilt{transition:transform .15s ease;transform-style:preserve-3d;will-change:transform}
.c-tilt .glare{position:absolute;inset:0;background:radial-gradient(200px circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.28),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none}
.c-tilt:hover .glare{opacity:1}

/* ② ボーダービーム カード */
.c-beam::before{content:"";position:absolute;inset:0;padding:1.5px;border-radius:inherit;background:conic-gradient(from var(--a),transparent 0 62%,var(--violet) 74%,var(--pink) 84%,transparent 94%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:rot 6s linear infinite;pointer-events:none}

/* ③ スポットライト追従 */
.c-spot::before{content:"";position:absolute;inset:0;background:radial-gradient(240px circle at var(--gx,50%) var(--gy,50%),rgba(183,140,255,.22),transparent 55%);opacity:0;transition:opacity .3s;pointer-events:none}
.c-spot:hover::before{opacity:1}
.c-spot:hover{border-color:rgba(183,140,255,.4)}

/* ④ ホログラフィック カード */
.c-holo{background:linear-gradient(125deg,rgba(123,92,255,.25),rgba(255,143,224,.18),rgba(116,200,255,.22),rgba(111,240,208,.16));background-size:300% 300%;animation:holo 7s ease infinite}
.c-holo::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.22) 50%,transparent 65%);transform:translateX(-100%);animation:sweep 5s ease-in-out infinite}

.foot{margin-top:54px;text-align:center;color:var(--muted);font-size:13px}

@media (prefers-reduced-motion:reduce){.fx-aurora,.b-beam::before,.b-holo,.b-holo::after,.b-neon,.c-beam::before,.c-holo,.c-holo::after{animation:none!important}}