/* ========================================================= H2F — 作品紹介ページ（works/*.html）共通スタイル / HYPER版 tokens.css の上に載せる。--accent は各ページので指定。 「これはなに？」「あそびかた」を最短で伝えつつ、 マッドバーチャリストの検査報告書として組む。 ========================================================= */ @import url("https://fonts.googleapis.com/css2?family=Yomogi&display=swap"); *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--base); color: var(--text); font-family: var(--font-jp); line-height: var(--lh-body); overflow-x: hidden; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } ::selection { background: var(--accent); color: #0a0d08; } .mono { font-family: var(--font-mono); letter-spacing: var(--ls-mono); text-transform: uppercase; } .wrap { width: min(880px, 86vw); margin-inline: auto; } /* ambiance */ .amb { position: fixed; inset: 0; pointer-events: none; z-index: 0; } .amb-grad { background: radial-gradient(110% 70% at 85% -10%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%), radial-gradient(90% 60% at 0% 110%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%), radial-gradient(140% 120% at 50% 50%, transparent 55%, rgba(0,0,0,.72) 100%), var(--base); } .amb-scan { background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.2) 2px 3px); mix-blend-mode: multiply; opacity: .45; } /* ノイズ（うっすら明滅） */ .amb-grad::after { content: ""; position: absolute; inset: -50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); opacity: .05; animation: wp-noise .4s steps(3) infinite; } @keyframes wp-noise { 0% { transform: translate(0,0); } 33% { transform: translate(-2%,1%); } 66% { transform: translate(1%,-2%); } 100% { transform: translate(0,0); } } .page { position: relative; z-index: 1; } /* top bar */ .topbar { padding: 16px 0; border-bottom: 1px solid var(--line-soft); position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--base) 70%, transparent); backdrop-filter: blur(10px); } .topbar .wrap { display: flex; align-items: center; justify-content: space-between; } .brand { display: flex; align-items: baseline; gap: 10px; } .brand b { font-family: var(--font-disp); font-size: 20px; color: var(--label); line-height: 1; } .brand span { font-size: 9px; color: var(--text-mute); letter-spacing: .22em; } .back { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--text-soft); transition: color .2s, letter-spacing .3s; } .back:hover { color: var(--accent); letter-spacing: .22em; } /* hero band — 検体ラベル風 */ .hero-band { padding: clamp(48px, 7vw, 90px) 0 clamp(20px, 3vw, 36px); position: relative; } .hero-band .wrap { position: relative; } .hero-band .wrap::before { content: "SPECIMEN REPORT ／ 検体観察記録"; display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .3em; color: var(--accent); margin-bottom: 16px; animation: wp-blink 2.4s infinite; } @keyframes wp-blink { 0%,100%{opacity:1} 50%{opacity:.35} } .genre-chip { display: inline-flex; align-items: baseline; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #0a0d08; background: var(--accent); padding: 6px 11px; border-radius: 2px; margin-bottom: 18px; transform: rotate(-1deg); } .genre-chip small { font-size: 10px; letter-spacing: .08em; } /* 見出し：ずれた色版のグリッチ（hover/ロード時） */ h1 { font-family: var(--font-serif); font-weight: 900; color: var(--label); font-size: clamp(28px, 5.2vw, 52px); line-height: 1.22; letter-spacing: var(--ls-head); margin: 0 0 14px; text-wrap: balance; position: relative; animation: wp-glitch-in 1.1s var(--ease-out) both; } @keyframes wp-glitch-in { 0% { opacity: 0; transform: translateX(-8px) skewX(6deg); text-shadow: 6px 0 var(--accent), -6px 0 #2E6BFF; } 30% { opacity: 1; text-shadow: 3px 0 var(--accent), -3px 0 #2E6BFF; } 55% { transform: translateX(3px) skewX(-2deg); } 100% { opacity: 1; transform: none; text-shadow: none; } } h1:hover { text-shadow: 2px 0 var(--accent), -2px 0 rgba(46,107,255,.7); } .lead { color: var(--text-soft); font-size: clamp(14px, 1.6vw, 16.5px); margin: 0; max-width: 46ch; animation: wp-rise .9s .2s var(--ease-out) both; } @keyframes wp-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } /* art — 標本容器 */ .art { position: relative; margin: clamp(22px, 3.4vw, 40px) 0; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; background: #0a0e0c; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent), 0 0 44px -14px color-mix(in srgb, var(--accent) 55%, transparent); animation: wp-rise .9s .3s var(--ease-out) both; } .art img { width: 100%; aspect-ratio: 16/9; object-fit: cover; transition: transform 1.4s var(--ease-out), filter .5s; } .art:hover img { transform: scale(1.04) rotate(.4deg); filter: saturate(1.2); } .art .scan { position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, transparent 0 3px, rgba(0,0,0,.28) 3px 4px); mix-blend-mode: multiply; } /* 走査光 */ .art::after { content: ""; position: absolute; left: 0; right: 0; height: 90px; top: -120px; background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--accent) 22%, transparent), transparent); animation: wp-sweep 5s ease-in-out infinite; pointer-events: none; } @keyframes wp-sweep { 0%, 55% { top: -120px; } 85%, 100% { top: 110%; } } /* 容器ラベル */ .art::before { content: "DO NOT TAP THE GLASS ／ ガラスを叩かないでください"; position: absolute; z-index: 2; bottom: 10px; right: 12px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .18em; color: color-mix(in srgb, var(--accent) 80%, white); background: rgba(4,7,6,.6); padding: 4px 8px; border: 1px solid var(--line); } /* body sections */ .sec { margin-bottom: clamp(28px, 4vw, 44px); } .sec h2 { font-family: var(--font-disp); font-size: 19px; color: var(--label); letter-spacing: .02em; margin: 0 0 12px; display: flex; align-items: center; gap: 12px; } .sec h2::before { content: ""; width: 22px; height: 2px; background: var(--accent); box-shadow: 0 0 10px var(--accent); } .sec p { margin: 0 0 12px; max-width: 62ch; color: var(--text); } .sec p:last-child { margin-bottom: 0; } /* how-to steps */ .steps { list-style: none; counter-reset: st; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .steps li { counter-increment: st; display: flex; gap: 14px; align-items: baseline; border: 1px solid var(--line-soft); border-radius: 3px; padding: 12px 16px; background: var(--panel); transition: transform .3s var(--ease-out), border-color .3s, box-shadow .3s; } .steps li:hover { transform: translateX(6px) rotate(-.3deg); border-color: var(--accent); box-shadow: 0 0 24px -10px var(--accent); } .steps li::before { content: counter(st, decimal-leading-zero); font-family: var(--font-mono); font-size: 12px; color: var(--accent); letter-spacing: .1em; flex-shrink: 0; } /* fiction / env notes — 手書き注意書き */ .notes { display: flex; flex-direction: column; gap: 8px; margin-bottom: clamp(28px, 4vw, 44px); } .note { font-family: "Yomogi", var(--font-jp); font-size: 13px; color: var(--text-soft); border-left: 2px solid var(--line); padding: 6px 0 6px 14px; max-width: 62ch; } .note.fiction { border-left-color: var(--amber); color: var(--amber); } /* CTA */ .cta-block { margin-bottom: clamp(40px, 6vw, 64px); display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .play { font-family: var(--font-mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #0a0d08; background: var(--accent); padding: 16px 28px; border-radius: 2px; font-weight: 600; display: inline-flex; align-items: center; gap: 10px; position: relative; overflow: hidden; transition: transform .3s var(--ease-out), box-shadow .3s; animation: wp-pulse 2.6s infinite; } @keyframes wp-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 60% { box-shadow: 0 0 0 14px transparent; } } .play::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent); animation: wp-shine 3.2s ease-in-out infinite; } @keyframes wp-shine { 0%, 60% { left: -60%; } 100% { left: 130%; } } .play:hover { transform: translateY(-3px) rotate(-.6deg); box-shadow: 0 0 0 1px var(--accent), 0 0 44px -6px var(--accent); } .cta-block .free { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: var(--text-mute); } /* footer */ .footer { border-top: 1px solid var(--line-soft); padding: 26px 0 40px; } .footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .footer small { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: var(--text-mute); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }