/* 3-minute hackathon deck — 握手deペルソナ */
:root {
  --red:#e60012;
  --purple:#7458ff;
  --cyan:#27d7ff;
  --yellow:#ffd700;
  --white:#fff;
  --black:#050508;
  --panel:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.16);
  --muted:rgba(255,255,255,.66);
  --display:"Bebas Neue","Impact",sans-serif;
  --en:"Oswald",sans-serif;
  --jp:"Noto Sans JP",sans-serif;
}
* { box-sizing:border-box; }
html,body { width:100%; height:100%; }
body { margin:0; overflow:hidden; color:var(--white); background:#000; font-family:var(--jp); }
button,a { color:inherit; font:inherit; }
button { cursor:pointer; }
.deck { min-height:100%; background:radial-gradient(circle at 80% 20%,rgba(116,88,255,.2),transparent 34%),#07070b; }
.deck::after {
  content:""; position:fixed; z-index:20; inset:0; pointer-events:none; opacity:.035;
  background-image:repeating-linear-gradient(-62deg,transparent 0 4px,#fff 4px 5px);
}
.deck-header {
  position:fixed; z-index:30; top:0; right:0; left:0; display:flex; align-items:center;
  min-height:58px; padding:0 clamp(16px,3vw,44px); background:rgba(0,0,0,.92);
  border-bottom:2px solid var(--red);
}
.deck-brand { display:flex; align-items:center; gap:10px; margin-right:auto; text-decoration:none; font:19px var(--display); letter-spacing:.1em; }
.deck-brand>span:last-child>span { margin-left:3px; color:var(--red); font:900 11px var(--jp); }
.deck-mark { display:flex; width:30px; height:30px; align-items:center; justify-content:center; gap:3px; background:var(--red); clip-path:polygon(12% 0,88% 0,100% 12%,100% 88%,88% 100%,12% 100%,0 88%,0 12%); }
.deck-mark i { width:2px; background:#fff; }
.deck-mark i:nth-child(1){height:7px}.deck-mark i:nth-child(2){height:14px}.deck-mark i:nth-child(3){height:9px}
.deck-header>p { margin:0 24px; color:var(--cyan); font:800 11px var(--en); letter-spacing:.16em; }
.deck-actions { display:flex; gap:8px; }
.deck-actions button,.deck-actions a { padding:7px 10px; background:transparent; border:1px solid rgba(255,255,255,.2); text-decoration:none; font-size:11px; font-weight:700; }
.slides { position:fixed; inset:58px 0; }
.slide {
  position:absolute; inset:0; padding:clamp(30px,4.5vw,68px) clamp(34px,6.5vw,104px);
  overflow:hidden; background:radial-gradient(circle at 80% 15%,rgba(116,88,255,.16),transparent 38%);
  animation:slide-in .32s ease both;
}
.slide[hidden] { display:none !important; }
.slide::before { content:""; position:absolute; top:0; right:5%; width:32%; height:6px; background:linear-gradient(90deg,var(--cyan),var(--purple)); }
.slide-index { position:absolute; z-index:5; top:25px; right:clamp(34px,6.5vw,104px); color:rgba(255,255,255,.23); font:34px var(--display); letter-spacing:.08em; }
.kicker { position:relative; z-index:4; display:flex; align-items:center; gap:10px; margin:0 0 clamp(15px,2.3vh,25px); color:var(--cyan); font:800 12px var(--en); letter-spacing:.18em; }
.kicker span { width:34px; height:3px; background:var(--red); }
h1,h2 { position:relative; z-index:4; margin:0; letter-spacing:-.04em; line-height:1.08; }
h1 { font-size:clamp(42px,6.1vw,92px); }
h2 { font-size:clamp(38px,5vw,72px); }
h1 em,h2 em { color:var(--red); font-style:normal; }
.lead { color:var(--muted); font-size:clamp(15px,1.45vw,21px); line-height:1.75; }
.lead strong { color:#fff; font-size:1.18em; }

/* 01 — cover */
.slide--cover { display:flex; align-items:center; }
.slide--cover::before { z-index:4; }
.cover-image { position:absolute; z-index:0; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.cover-team-memories { position:absolute; z-index:1; top:3%; right:1.5%; bottom:3%; width:48%; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:7px; padding:7px; overflow:hidden; opacity:.82; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.2); transform:rotate(.7deg); box-shadow:0 0 42px rgba(0,0,0,.55); }
.cover-team-memories::after { content:""; position:absolute; inset:-2px; background:linear-gradient(90deg,rgba(4,4,10,.72),transparent 22%),linear-gradient(0deg,rgba(4,4,10,.32),transparent 25%); pointer-events:none; }
.cover-team-memories figure { min-width:0; min-height:0; margin:0; overflow:hidden; border:2px solid rgba(255,255,255,.34); background:#09090d; }
.cover-team-memories figure:nth-child(3n+2) { transform:translateY(4px); }
.cover-team-memories img { width:100%; height:100%; object-fit:cover; filter:saturate(.95) contrast(1.06) brightness(1.03); transform:scale(1.025); }
.cover-team-memories>span { position:absolute; z-index:2; right:12px; bottom:10px; padding:5px 8px; color:#fff; background:rgba(0,0,0,.72); font:700 9px var(--en); letter-spacing:.16em; }
.cover-shade { position:absolute; z-index:2; inset:0; background:linear-gradient(90deg,rgba(4,4,10,.99) 0%,rgba(4,4,10,.93) 38%,rgba(4,4,10,.2) 58%,rgba(4,4,10,.06) 72%),linear-gradient(0deg,rgba(4,4,10,.5),transparent 31%); }
.cover-copy { position:relative; z-index:3; max-width:790px; }
.cover-copy .lead { margin:3vh 0 0; }
.team-note { width:fit-content; margin:2.2vh 0 0; padding:8px 12px; color:rgba(255,255,255,.7); background:rgba(0,0,0,.42); border-left:3px solid var(--yellow); font-size:clamp(11px,1vw,14px); font-weight:700; }
.cover-signal { position:absolute; z-index:5; min-width:132px; padding:11px 14px; background:rgba(0,0,0,.84); border-left:4px solid var(--cyan); color:rgba(255,255,255,.58); font:700 10px var(--en); letter-spacing:.14em; backdrop-filter:blur(5px); }
.cover-signal b { display:inline-block; margin:0 4px 0 10px; color:#fff; font-size:25px; }
.cover-signal small { color:var(--cyan); }
.signal--heart { top:14%; right:45%; }
.signal--gsr { right:45%; bottom:12%; border-color:var(--purple); }
.slide footer { position:absolute; z-index:5; right:clamp(34px,6.5vw,104px); bottom:20px; left:clamp(34px,6.5vw,104px); display:flex; justify-content:space-between; color:rgba(255,255,255,.42); font:700 10px var(--en); letter-spacing:.14em; }

/* 02 — body data */
.sensor-story { display:grid; grid-template-columns:.72fr 1fr 1.25fr; gap:clamp(18px,3vw,48px); align-items:center; margin-top:4vh; }
.handshake-node { position:relative; display:grid; min-height:250px; place-items:center; align-content:center; padding:24px; background:linear-gradient(145deg,rgba(39,215,255,.18),rgba(116,88,255,.08)); border:1px solid rgba(39,215,255,.38); text-align:center; }
.node-label { position:absolute; top:13px; left:16px; color:var(--cyan); font:800 10px var(--en); letter-spacing:.18em; }
.handshake-node strong { font-size:clamp(40px,5vw,74px); }
.handshake-node p { margin:10px 0 0; color:var(--muted); line-height:1.7; }
.sensor-lines { display:grid; gap:8px; }
.sensor-lines span { display:flex; align-items:center; padding:10px 14px; background:var(--panel); border-left:3px solid var(--red); font-weight:800; }
.sensor-lines i { width:32px; color:var(--cyan); font:20px var(--display); font-style:normal; }
.persona-node { position:relative; display:grid; grid-template-columns:.8fr 1fr; min-height:270px; align-items:center; overflow:hidden; background:linear-gradient(145deg,rgba(230,0,18,.2),rgba(116,88,255,.11)); border:1px solid rgba(255,255,255,.18); }
.persona-node img { width:100%; height:260px; object-fit:contain; filter:drop-shadow(0 12px 18px rgba(0,0,0,.55)); mix-blend-mode:screen; }
.persona-node>div { padding:28px 24px 28px 0; }
.persona-node strong { font-size:clamp(19px,2vw,29px); }
.persona-node p { margin:10px 0 0; color:var(--muted); line-height:1.75; }
.slide-claim { margin:3vh 0 0; color:var(--muted); font-size:clamp(17px,1.8vw,26px); font-weight:600; text-align:center; }
.slide-claim b { color:var(--yellow); }

/* 03 — experience */
.experience-grid { display:grid; grid-template-columns:1fr auto 1.35fr auto 1fr; gap:clamp(12px,2vw,28px); align-items:center; margin-top:4vh; }
.experience-step { position:relative; min-height:280px; padding:22px; background:var(--panel); border:1px solid var(--line); text-align:center; }
.experience-step>b { position:absolute; top:12px; right:15px; color:rgba(255,255,255,.15); font:42px var(--display); }
.step-icon { display:grid; width:84px; height:84px; place-items:center; margin:30px auto 26px; background:linear-gradient(145deg,var(--red),#7a0012); border-radius:50%; font-size:30px; font-weight:900; }
.experience-step h3 { margin:0 0 8px; font-size:clamp(21px,2vw,29px); }
.experience-step p { margin:0; color:var(--muted); line-height:1.65; }
.experience-grid>i { color:var(--cyan); font-size:30px; font-style:normal; }
.step--hero { border-color:rgba(116,88,255,.6); box-shadow:0 0 45px rgba(116,88,255,.12); }
.summon-visual { position:relative; height:155px; margin:-4px 0 4px; overflow:hidden; background:radial-gradient(circle at 50% 52%,rgba(116,88,255,.5),transparent 50%); }
.summon-visual img { position:absolute; top:-10px; left:50%; width:155px; height:180px; object-fit:contain; opacity:.84; transform:translateX(-50%); mix-blend-mode:screen; }
.person-silhouette { position:absolute; bottom:-65px; left:50%; width:86px; height:135px; background:#020205; border-radius:48% 48% 12% 12%; transform:translateX(-50%); box-shadow:0 0 0 1px rgba(255,255,255,.12); }
.person-silhouette::before { content:""; position:absolute; top:-34px; left:25px; width:38px; height:42px; background:#020205; border-radius:50%; }
.experience-line { display:flex; gap:10px; align-items:center; justify-content:center; margin-top:3vh; color:var(--muted); font-size:clamp(15px,1.5vw,21px); }
.experience-line span { width:34px; height:3px; background:var(--red); }
.experience-line strong { color:#fff; }

/* 04 — technology */
.technology-layout { display:grid; grid-template-columns:1.55fr .72fr; gap:24px; align-items:stretch; margin-top:3.6vh; }
.architecture { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:14px; }
.architecture article { display:grid; min-height:205px; place-items:center; align-content:center; gap:10px; padding:18px; background:var(--panel); border:1px solid var(--line); border-top:5px solid var(--purple); text-align:center; }
.architecture article:first-child { border-top-color:var(--cyan); }
.architecture article:last-child { border-top-color:var(--red); }
.architecture small { color:var(--cyan); font:800 10px var(--en); letter-spacing:.17em; }
.architecture strong { font-size:clamp(18px,1.8vw,29px); white-space:nowrap; }
.architecture span { color:var(--muted); font-size:13px; line-height:1.55; }
.architecture i { color:var(--yellow); font-size:25px; font-style:normal; }
.hardware-proof { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.hardware-proof figure { position:relative; min-height:205px; margin:0; overflow:hidden; border:1px solid var(--line); }
.hardware-proof img { width:100%; height:100%; object-fit:cover; filter:saturate(.88) contrast(1.05); }
.hardware-proof figcaption { position:absolute; right:0; bottom:0; left:0; padding:22px 10px 9px; background:linear-gradient(transparent,rgba(0,0,0,.92)); font-size:11px; font-weight:800; text-align:center; }
.tech-points { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:2.4vh; }
.tech-points span { padding:11px 14px; background:rgba(0,0,0,.34); border-left:3px solid var(--red); color:var(--muted); font-size:12px; }
.tech-points b { display:block; margin-bottom:3px; color:var(--cyan); font:800 10px var(--en); letter-spacing:.15em; }

/* 05 — final */
.slide--final { background:radial-gradient(circle at 20% 105%,rgba(230,0,18,.5),transparent 43%),radial-gradient(circle at 86% 12%,rgba(116,88,255,.28),transparent 35%),#07070b; }
.final-grid { display:grid; grid-template-columns:.78fr 1.22fr; gap:6vw; align-items:center; min-height:55vh; }
.final-number { margin:0; color:var(--yellow); font:clamp(90px,14vw,210px)/.72 var(--display); letter-spacing:-.035em; text-shadow:0 0 40px rgba(255,215,0,.15); }
.final-number small { margin-left:8px; color:#fff; font:900 clamp(22px,3vw,42px) var(--jp); }
.final-number-note { max-width:430px; margin:25px 0 0; color:var(--muted); font-size:clamp(14px,1.4vw,20px); line-height:1.75; }
.final-copy h2 { font-size:clamp(38px,5.4vw,78px); }
.final-copy p { margin:3vh 0 0; color:var(--muted); font-size:clamp(17px,1.7vw,24px); font-weight:600; line-height:1.8; }
.after-experience { display:flex; gap:20px; align-items:center; justify-content:center; margin-top:1vh; color:#fff; font-size:clamp(18px,2vw,28px); font-weight:800; }
.after-experience i { color:var(--red); font-style:normal; }
.final-brand { position:absolute; right:clamp(34px,6.5vw,104px); bottom:22px; left:clamp(34px,6.5vw,104px); display:flex; align-items:center; justify-content:space-between; }
.final-brand strong { color:var(--red); font-size:20px; }
.final-brand span { color:rgba(255,255,255,.46); font:800 11px var(--en); letter-spacing:.14em; }

/* controls */
.deck-controls { position:fixed; z-index:31; right:0; bottom:0; left:0; display:flex; height:58px; align-items:center; justify-content:center; gap:16px; background:#000; border-top:1px solid rgba(255,255,255,.13); }
.deck-controls button { width:38px; height:32px; background:transparent; border:1px solid rgba(255,255,255,.18); }
.deck-controls button:hover { background:var(--red); border-color:var(--red); }
.deck-controls button:disabled { opacity:.25; cursor:default; }
.progress { width:min(30vw,320px); height:3px; background:rgba(255,255,255,.15); }
.progress i { display:block; width:20%; height:100%; background:linear-gradient(90deg,var(--cyan),var(--purple)); transition:width .25s ease; }
.deck-controls>span { font:12px var(--en); letter-spacing:.12em; }
.deck-controls b { color:var(--cyan); font-size:16px; }
.deck-hint { position:fixed; z-index:32; right:22px; bottom:20px; margin:0; color:rgba(255,255,255,.33); font:9px var(--en); letter-spacing:.12em; }
.overview { position:fixed; z-index:50; inset:0; overflow:auto; padding:26px; background:rgba(0,0,0,.97); }
.overview header { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; font:18px var(--en); letter-spacing:.12em; }
.overview button { padding:8px 12px; background:transparent; border:1px solid rgba(255,255,255,.25); }
.overview-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.overview-card { position:relative; aspect-ratio:16/9; padding:18px; background:#121218; border:1px solid rgba(255,255,255,.16); text-align:left; }
.overview-card:hover { border-color:var(--cyan); }
.overview-card b { display:block; color:var(--red); font:32px var(--display); }
.overview-card span { font-weight:800; }
@keyframes slide-in { from{opacity:0;transform:translateX(24px)} to{opacity:1;transform:none} }

@media (max-width:900px) {
  .deck-header>p,.deck-actions [data-overview],.deck-hint { display:none; }
  .slide { padding:28px 24px; overflow:auto; }
  .slide-index { top:16px; right:24px; font-size:24px; }
  .sensor-story { grid-template-columns:1fr 1fr; }
  .persona-node { grid-column:1/-1; min-height:210px; }
  .persona-node img { height:200px; }
  .technology-layout { grid-template-columns:1fr; }
  .hardware-proof { display:none; }
  .tech-points { grid-template-columns:1fr 1fr 1fr; }
  .overview-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  .deck-brand>span:last-child { display:none; }
  .deck-actions button,.deck-actions a { padding:6px 8px; }
  .slide { padding:22px 16px; }
  .slide-index { right:16px; }
  h1 { font-size:39px; }
  h2 { font-size:34px; }
  .cover-shade { background:rgba(4,4,10,.68); }
  .cover-team-memories { inset:0; width:100%; opacity:.42; transform:none; }
  .cover-team-memories>span { display:none; }
  .cover-signal { display:none; }
  .sensor-story,.experience-grid,.final-grid { grid-template-columns:1fr; }
  .handshake-node { min-height:150px; }
  .persona-node { grid-column:auto; }
  .experience-grid>i { display:none; }
  .experience-step { min-height:180px; }
  .architecture { grid-template-columns:1fr; }
  .architecture i { display:none; }
  .architecture article { min-height:110px; }
  .tech-points { grid-template-columns:1fr; }
  .after-experience { flex-wrap:wrap; gap:9px; }
  .final-number { font-size:94px; }
  .final-grid { min-height:auto; }
  .overview-grid { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .slide { animation:none; }
  .progress i { transition:none; }
}