/* 色、余白、動きの基準をページ全体で共有します。 */
:root {
  --void: #080a0b;
  --paper: #f2f0e8;
  --lime: #d9ff45;
  --blue: #5d72ff;
  --coral: #ff5f41;
  --line: rgba(242, 240, 232, 0.22);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; background: var(--void); color: var(--paper); }
h1, h2, h3, .project__name { font-family: 'Space Grotesk', sans-serif; }
a { text-decoration: none; }

/* Canvas とグレインは情報を邪魔しない背景レイヤーです。 */
#ambient-canvas { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.7; }
.grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.08; background-image: radial-gradient(rgba(255,255,255,.72) .55px, transparent .75px); background-size: 4px 4px; mix-blend-mode: soft-light; }
.site-header, main { position: relative; z-index: 2; }
.site-header { border-bottom: 1px solid rgba(242,240,232,.14); background: rgba(8,10,11,.65); backdrop-filter: blur(16px); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.version-link { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; background: transparent; color: var(--paper); font: .67rem 'DM Mono', monospace; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); }
.version-link:hover, .version-link:focus-visible { border-color: var(--lime); background: var(--lime); color: var(--void); }
.version-link span { font-size: .85rem; }

.wordmark, .nav-item, .motion-switch, .hero__topline, .hero__eyebrow, .hero__aside, .hero__bottomline, .section-intro p, .section-intro span, .about-section__index, .contact-section > p, .contact-section__bottom { font-family: 'DM Mono', monospace; font-size: .67rem; letter-spacing: .09em; text-transform: uppercase; }
.wordmark { display: inline-flex; align-items: center; gap: 7px; color: var(--paper); font-size: .73rem; font-weight: 500; }
.wordmark i { display: inline-block; width: 9px; height: 9px; background: var(--lime); border-radius: 50%; box-shadow: 0 0 18px rgba(217,255,69,.7); }
.nav-item { color: rgba(242,240,232,.62); transition: color .25s var(--ease); }
.nav-item:hover { color: var(--lime); }
.motion-switch { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; padding: 8px 11px; color: var(--paper); background: transparent; cursor: pointer; }
.motion-switch__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); }
.motion-switch[aria-pressed='false'] .motion-switch__dot { background: var(--coral); box-shadow: none; }

/* Hero の文字は画面幅に合わせて大きくし、画像より先に作者性を伝えます。 */
.hero { min-height: calc(100svh - 70px); max-width: 1600px; margin: 0 auto; padding: 23px 20px 35px; display: flex; flex-direction: column; justify-content: space-between; }
.hero__topline, .hero__bottomline { display: flex; align-items: start; justify-content: space-between; gap: 20px; color: rgba(242,240,232,.56); }
.hero__title-wrap { position: relative; z-index: 3; margin-top: 7vh; }
.hero__eyebrow { margin-bottom: 11px; color: var(--lime); }
.hero__title { margin: 0; font-size: clamp(3.2rem, 6.5vw, 7rem); font-weight: 700; letter-spacing: -.085em; line-height: .88; }
.split-line { display: block; overflow: hidden; }
.split-line > span { display: inline-block; transform: translateY(118%); animation: letter-rise .9s var(--ease) forwards; animation-delay: calc(var(--char-index) * 35ms + 100ms); }
.split-line--outline { color: transparent; -webkit-text-stroke: clamp(1px,.11vw,2px) var(--paper); }
@keyframes letter-rise { to { transform: translateY(0); } }

/* 写真カード、軌道、見出しを重ね、動くポスターのような中心部を作ります。 */
.hero__stage { position: relative; min-height: clamp(260px, 26vw, 400px); margin-top: -2.5vw; }
.float-card { position: absolute; z-index: 2; margin: 0; overflow: hidden; background: var(--blue); box-shadow: 14px 14px 0 var(--void), 15px 15px 0 rgba(242,240,232,.45); transition: transform .5s var(--ease); }
.float-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.2) contrast(1.08); }
.float-card figcaption { position: absolute; right: 9px; bottom: 8px; color: var(--paper); mix-blend-mode: difference; font: .59rem 'DM Mono', monospace; letter-spacing: .07em; }
.float-card--one { top: 2%; left: 42%; width: clamp(115px, 14vw, 205px); aspect-ratio: .75; transform: rotate(9deg); }
.float-card--two { top: 37%; left: 18%; width: clamp(96px, 11vw, 166px); aspect-ratio: 1; transform: rotate(-10deg); }
.float-card--three { right: 12%; bottom: -3%; width: clamp(104px, 12.5vw, 188px); aspect-ratio: 1.15; transform: rotate(7deg); }
.orbit { position: absolute; border: 1px solid rgba(217,255,69,.7); border-radius: 50%; animation: pulse-orbit 5s ease-in-out infinite; }
.orbit--one { width: clamp(160px,26vw,360px); aspect-ratio: 1; top: -10%; right: 19%; }
.orbit--two { width: clamp(100px,15vw,230px); aspect-ratio: 1; top: 35%; left: 35%; border-color: rgba(255,95,65,.7); animation-delay: -2.5s; }
@keyframes pulse-orbit { 50% { transform: scale(1.15) rotate(20deg); opacity: .35; } }
.hero-registration { position: absolute; z-index: 4; right: 28%; bottom: 6%; display: grid; grid-template-columns: repeat(2,12px); gap: 4px; padding: 8px; border: 1px solid rgba(242,240,232,.55); background: rgba(8,10,11,.35); backdrop-filter: blur(4px); transform: rotate(-8deg); animation: registration-jump 3.8s steps(2) infinite; }
.hero-registration i { width: 12px; height: 12px; border-radius: 50%; background: var(--coral); }
.hero-registration i:nth-child(2) { background: var(--blue); }.hero-registration i:nth-child(3) { background: var(--lime); }.hero-registration i:nth-child(4) { background: var(--paper); }
.hero-registration b { grid-column: 1 / -1; margin-top: 4px; color: var(--paper); font: .48rem/1.15 'DM Mono', monospace; letter-spacing: .08em; }
@keyframes registration-jump { 50% { translate: 4px -5px; } }
.hero-stamp { position: absolute; z-index: 4; left: 35%; bottom: 5%; display: grid; width: 96px; aspect-ratio: 1; place-content: center; border: 1px dashed var(--lime); border-radius: 50%; color: var(--lime); font: .58rem/1 'DM Mono', monospace; text-align: center; animation: stamp-spin 13s linear infinite; }
.hero-stamp b { margin: 4px 0; color: var(--coral); font-size: 1.1rem; line-height: .8; }
@keyframes stamp-spin { to { rotate: 360deg; } }
.hero__aside { position: absolute; right: 0; top: 28%; color: var(--lime); line-height: 1.45; text-align: right; }
.hero__bottomline { margin-top: 22px; line-height: 1.45; }
.hero__bottomline p { margin: 0; }
.hero__availability { text-align: right; }
.hero__availability strong { color: var(--paper); font-weight: 400; }
.scroll-link { display: inline-flex; align-items: center; gap: 15px; color: var(--paper); font: .69rem 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.scroll-link b { display: grid; width: 37px; height: 37px; place-content: center; border: 1px solid var(--lime); border-radius: 50%; color: var(--lime); transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease); }
.scroll-link:hover b { background: var(--lime); color: var(--void); transform: translateY(5px); }

/* Ticker はセクションの切り替わりを明確にする強い色面です。 */
.ticker { position: relative; z-index: 3; overflow: hidden; background: var(--lime); color: var(--void); border-top: 1px solid var(--void); border-bottom: 1px solid var(--void); }
.ticker__track { display: flex; width: max-content; align-items: center; padding: 12px 0; font: 700 clamp(1rem,2vw,1.6rem) 'Space Grotesk', sans-serif; letter-spacing: -.045em; animation: ticker-run 35s linear infinite; }
.ticker__group { display: flex; flex: none; min-width: 100vw; align-items: center; justify-content: space-between; gap: 26px; padding-right: 26px; }
.ticker__track i { color: var(--coral); font-style: normal; }
@keyframes ticker-run { to { transform: translateX(-50%); } }

/* Work は不均一なグリッドで、画面ごとにポスターを貼ったようなリズムを作ります。 */
.work-section { max-width: 1600px; margin: 0 auto; padding: 125px 20px 145px; }
.section-intro { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: end; margin-bottom: 48px; }
.section-intro p, .section-intro span { margin: 0; color: rgba(242,240,232,.55); }
.section-intro span { text-align: right; color: var(--lime); }
.section-intro h2 { grid-column: 1 / -1; margin: 0; font-size: clamp(3rem, 4.6vw, 5rem); font-weight: 700; letter-spacing: -.075em; line-height: .94; }
.project-wall { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: clamp(15px,2vw,28px); align-items: start; perspective: 1300px; }
.project { position: relative; z-index: 1; transition: z-index .2s; }
.project:hover { z-index: 5; }
.project--wide { grid-column: 1 / span 7; }
.project--tall { grid-column: 8 / span 5; margin-top: 18%; }
.project--square { grid-column: 2 / span 4; margin-top: -5%; }
.project--long { grid-column: 6 / span 7; margin-top: 9%; }
.project--blue { grid-column: 2 / span 5; margin-top: 14%; }
.project__open { display: block; width: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; text-align: left; }
.project__surface { position: relative; display: block; overflow: hidden; min-height: 240px; background: var(--coral); transform-style: preserve-3d; transition: transform .2s ease-out, box-shadow .35s var(--ease); }
.project--wide .project__surface { aspect-ratio: 1.38; }
.project--tall .project__surface { aspect-ratio: .75; }
.project--square .project__surface { aspect-ratio: 1; }
.project--long .project__surface { aspect-ratio: 1.65; }
.project__surface img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.95) contrast(1.08); transition: transform .7s var(--ease), filter .5s var(--ease); }
.project__wash { position: absolute; inset: 0; background: linear-gradient(125deg, rgba(8,10,11,.7), transparent 48%, rgba(93,114,255,.5)); mix-blend-mode: multiply; transition: opacity .35s var(--ease); }
.project--blue .project__wash { background: linear-gradient(150deg, rgba(93,114,255,.8), transparent 60%, rgba(217,255,69,.55)); }
.project__name { position: absolute; z-index: 2; left: clamp(17px,2vw,30px); bottom: clamp(15px,2vw,28px); color: var(--paper); font-size: clamp(2rem,3.5vw,4rem); font-weight: 700; letter-spacing: -.08em; line-height: .94; transform: translateZ(45px); }
.project__hint { position: absolute; z-index: 3; right: 14px; top: 14px; display: grid; width: 78px; aspect-ratio: 1; place-content: center; border-radius: 50%; background: var(--lime); color: var(--void); font: .52rem/1.12 'DM Mono', monospace; letter-spacing: .04em; text-align: center; text-transform: uppercase; opacity: 0; transform: translate(12px,-12px) scale(.5); transition: opacity .25s var(--ease), transform .45s var(--ease); }
.project:hover .project__surface { box-shadow: 18px 22px 0 var(--lime); }
.project:hover img { filter: saturate(1.4) contrast(1.12); transform: scale(1.11); }
.project:hover .project__wash { opacity: .35; }
.project:hover .project__hint, .project__open:focus-visible .project__hint { opacity: 1; transform: translate(0,0) scale(1); }
.project__open:focus-visible { outline: 2px solid var(--lime); outline-offset: 7px; }

/* About、Skills、Contact は同じ暗いポスター言語でつなぎ、色の切り替えを抑えます。 */
.about-section { position: relative; z-index: 3; overflow: hidden; min-height: 92vh; padding: 0 20px; border-top: 1px solid var(--line); background: var(--void); color: var(--paper); display: flex; flex-direction: column; justify-content: space-between; }
.about-section::before { position: absolute; top: 15%; right: -16vw; width: 55vw; aspect-ratio: 1; border: 1px solid rgba(217,255,69,.48); border-radius: 50%; content: ''; animation: slow-spin 18s linear infinite; }
.about-section::after { position: absolute; left: 9%; bottom: 17%; width: 36vw; aspect-ratio: 1; border: 1px solid rgba(93,114,255,.64); border-radius: 50%; content: ''; animation: slow-spin 15s linear infinite reverse; }
@keyframes slow-spin { to { transform: rotate(360deg) scale(.96); } }
.about-section__rail, .about-section__footer { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 17px 0; color: rgba(242,240,232,.6); font: .64rem 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.about-section__rail { border-bottom: 1px solid var(--line); }.about-section__footer { border-top: 1px solid var(--line); }
.about-section__footer { gap: 14px; color: var(--lime); font-size: .57rem; }
.about-section__content { position: relative; z-index: 1; display: grid; grid-template-columns: 1.25fr .75fr; gap: 40px; align-items: end; margin: auto 0; }
.about-section h2 { margin: 0; font-size: clamp(3.5rem,6vw,7rem); font-weight: 700; letter-spacing: -.09em; line-height: .86; }
.about-section h2 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px var(--lime); }
.about-section__statement { display: flex; align-items: end; gap: 14px; max-width: 340px; padding-bottom: 10px; }
.about-section__statement-mark { color: var(--coral); font-size: 2.3rem; line-height: .8; }.about-section__statement p { margin: 0; font-size: clamp(1rem,1.7vw,1.35rem); font-weight: 500; line-height: 1.3; }

/* 経歴と能力：時間軸とカードを同じ細い罫線でつなぎ、作品壁から自然に続けます。 */
.experience-section { position: relative; z-index: 3; overflow: hidden; max-width: 1600px; margin: 0 auto; border-top: 1px solid var(--line); background: var(--void); color: var(--paper); }
.experience-section::before { position: absolute; right: -15%; top: 0; width: 48%; aspect-ratio: 1; border: 1px solid rgba(217,255,69,.17); border-radius: 50%; content: ''; pointer-events: none; }
.experience-section__head { position: relative; display: flex; justify-content: space-between; gap: 20px; margin-bottom: clamp(60px,8vw,110px); border-bottom: 1px solid var(--line); padding-bottom: 16px; color: rgba(242,240,232,.55); font: .65rem 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.experience-section__head p, .experience-section__title p { margin: 0; }
.experience-section__grid { position: relative; z-index: 1; }
.experience-section__title { min-height: 190px; }
.experience-section__title p { margin-bottom: 19px; color: var(--lime); font: .72rem 'DM Mono', monospace; letter-spacing: .11em; }
.experience-section__title h2 { margin: 0; font-size: clamp(2.3rem,3.5vw,4rem); font-weight: 700; letter-spacing: -.07em; line-height: 1; }
.career-list { margin: 0; padding: 0 0 0 23px; list-style: none; }
.career-item { position: relative; min-height: 176px; border-left: 1px solid var(--line); padding: 2px 0 32px 25px; transition: border-color .35s var(--ease); }
.career-item:last-child { border-left-color: transparent; padding-bottom: 0; }
.career-item::before { position: absolute; left: -7px; top: 3px; width: 13px; height: 13px; border: 2px solid var(--lime); border-radius: 50%; background: var(--void); box-shadow: 0 0 0 5px var(--void); content: ''; transition: transform .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease); }
.career-item:hover::before { transform: scale(1.35); background: var(--lime); box-shadow: 0 0 0 5px var(--void), 0 0 22px var(--lime); }
.career-item__period { color: var(--lime); font: .67rem 'DM Mono', monospace; letter-spacing: .07em; }
.career-item h3 { margin: 11px 0 8px; font-size: clamp(1.05rem,1.45vw,1.4rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.25; }
.career-item h3 small { display: block; margin-top: 5px; color: rgba(242,240,232,.55); font-size: .65em; font-weight: 400; letter-spacing: -.02em; }
.career-item p, .capability-card p { max-width: 550px; margin: 0; color: rgba(242,240,232,.65); font-size: .88rem; line-height: 1.55; }
.capability-list { display: grid; gap: 11px; }
.capability-card { border: 1px solid var(--line); border-radius: 8px; padding: 20px; background: rgba(255,255,255,.025); transition: border-color .4s var(--ease), border-radius .55s var(--ease), transform .4s var(--ease), background .4s var(--ease); }
.capability-card:hover { border-color: var(--lime); border-radius: 25px 8px 25px 8px; background: rgba(217,255,69,.055); transform: translateY(-3px); }
.capability-card > div { display: flex; align-items: start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.capability-card h3 { margin: 0; font-size: clamp(1rem,1.3vw,1.22rem); font-weight: 600; letter-spacing: -.035em; line-height: 1.25; }
.capability-card span { flex: 0 0 auto; border: 1px solid rgba(217,255,69,.35); border-radius: 999px; padding: 6px 8px; color: var(--lime); font: .56rem/1.2 'DM Mono', monospace; letter-spacing: .03em; text-align: center; text-transform: uppercase; }
.capability-card p { font-size: .8rem; }
/* お問い合わせ：タイポグラフィーと実用的な連絡カードを一画面で見せます。 */
.contact-section { position: relative; z-index: 3; overflow: hidden; min-height: 720px; padding: 30px 20px 24px; background: var(--void); color: var(--paper); border-top: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; gap: 45px; }
.contact-section::before { position: absolute; right: -11vw; bottom: -16vw; width: 47vw; aspect-ratio: 1; border-radius: 50%; background: var(--coral); filter: blur(4px); opacity: .26; content: ''; pointer-events: none; }
.contact-section::after { position: absolute; right: 10%; top: 18%; width: 12vw; aspect-ratio: 1; border: 1px solid var(--lime); border-radius: 50%; content: ''; animation: pulse-orbit 4s ease-in-out infinite; pointer-events: none; }
.contact-section__header { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: rgba(242,240,232,.6); font: .64rem 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.contact-section__header p { margin: 0; }.contact-section__header span { color: var(--lime); }
.contact-section__layout { position: relative; z-index: 1; width: min(100%,1450px); margin: auto; padding: 40px 0; }
.contact-section h2 { margin: 0; font-size: clamp(3.5rem,6vw,6.5rem); font-weight: 700; letter-spacing: -.09em; line-height: .87; }
.contact-section h2 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px var(--lime); }
.contact-panel { border: 1px solid var(--line); border-radius: 25px; padding: clamp(22px,3.5vw,46px); background: rgba(22,25,30,.88); box-shadow: 0 18px 50px rgba(0,0,0,.22); backdrop-filter: blur(12px); }
.contact-panel__eyebrow { display: inline-flex; align-items: center; border: 1px solid var(--lime); border-radius: 999px; padding: 7px 11px; color: var(--lime); font: .62rem 'DM Mono', monospace; letter-spacing: .07em; }
.contact-panel h3 { margin: 25px 0 17px; font-size: clamp(1.6rem,2.6vw,2.7rem); font-weight: 700; letter-spacing: -.06em; line-height: 1.13; }
.contact-panel > p:not(.contact-panel__feedback) { margin: 0; color: rgba(242,240,232,.7); font-size: .92rem; line-height: 1.65; }
.contact-panel__actions { margin-top: 28px; }
.contact-copy, .contact-direct { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 45px; border: 1px solid var(--lime); border-radius: 11px; padding: 11px 14px; font: 600 .82rem/1.3 'Plus Jakarta Sans',sans-serif; text-align: center; cursor: pointer; transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease); overflow-wrap: anywhere; }
.contact-copy { background: var(--lime); color: var(--void); }
.contact-direct { background: transparent; color: var(--lime); }
.contact-copy:hover, .contact-direct:hover { transform: translateY(-3px); box-shadow: 0 9px 20px rgba(217,255,69,.16); }
.contact-direct:hover { background: var(--lime); color: var(--void); }
.contact-copy:focus-visible, .contact-direct:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.contact-panel__feedback { min-height: 1.2em; margin: 12px 0 0; color: var(--lime); font-size: .7rem; }
.contact-section__bottom { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding-top: 15px; color: rgba(242,240,232,.58); font: .64rem 'DM Mono', monospace; letter-spacing: .08em; text-transform: uppercase; }
.contact-section__bottom div { display: flex; gap: 17px; }.contact-section__bottom a { color: var(--paper); transition: color .2s var(--ease); }.contact-section__bottom a:hover { color: var(--lime); }

/* Viewer は画面中央のダイアログです。画像は縦横比を変えず、段組みで自然に並べます。 */
.project-viewer { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: clamp(8px,1.5vw,20px); visibility: hidden; opacity: 0; transition: opacity .35s var(--ease), visibility .35s var(--ease); }
.project-viewer.is-open { visibility: visible; opacity: 1; }
.project-viewer__backdrop { position: absolute; inset: 0; background: rgba(8,10,11,.83); backdrop-filter: blur(10px); }
.project-viewer__panel { position: relative; width: min(100%,1320px); height: min(96vh,1200px); height: min(96dvh,1200px); overflow-y: auto; overscroll-behavior: contain; border: 1px solid rgba(242,240,232,.25); border-radius: 20px; background: var(--paper); color: var(--void); box-shadow: 0 32px 100px rgba(0,0,0,.45); transform: translateY(24px) scale(.97); transition: transform .5s var(--ease); }
.project-viewer.is-open .project-viewer__panel { transform: translateY(0) scale(1); }
.project-viewer__header { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 1px solid rgba(8,10,11,.18); background: rgba(242,240,232,.95); backdrop-filter: blur(10px); }
.project-viewer__header h2 { margin: 0; font-size: clamp(1.8rem,4vw,4rem); letter-spacing: -.09em; line-height: 1; }
.project-viewer__header button { border: 1px solid var(--void); border-radius: 999px; padding: 8px 12px; background: transparent; color: var(--void); font: .65rem 'DM Mono', monospace; text-transform: uppercase; cursor: pointer; }
.project-viewer__images { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-flow: dense; grid-auto-rows: 4px; gap: 12px; padding: 20px 24px 24px; }
.project-viewer__images figure { width: 100%; margin: 0; overflow: hidden; align-self: start; border-radius: 12px; background: #d1cec5; }
.project-viewer__images img { display: block; width: 100%; height: auto; }
.project-viewer__zoom { display: block; width: 100%; border: 0; padding: 0; background: transparent; cursor: zoom-in; }
.project-viewer__zoom img { transition: transform .45s var(--ease); }
.project-viewer__zoom:hover img { transform: scale(1.035); }
.project-viewer__zoom:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
/* 長い Web ページは幅を確保し、縮小しすぎず最後まで見られるようにします。 */
.project-viewer__images.is-web-gallery { display: block; max-width: 820px; margin: 0 auto; }
.project-viewer__images.is-web-gallery figure { margin-bottom: 18px; }
@media (min-width: 640px) { .project-viewer__images { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (min-width: 1024px) { .project-viewer__images { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }.project-viewer__images[data-count='3'] { grid-template-columns: repeat(3,minmax(0,1fr)); }.project-viewer__images[data-count='2'] { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 639px) { .project-viewer__panel { height: calc(100dvh - 16px); border-radius: 15px; }.project-viewer__header { padding: 15px; }.project-viewer__images { gap: 10px; padding: 12px; }.project-viewer__images figure { border-radius: 9px; } }

/* 拡大表示は画像そのものの比率で枠を作り、縦横どちらも画面内に収めます。 */
.image-lightbox { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 12px; visibility: hidden; opacity: 0; transition: opacity .25s var(--ease), visibility .25s var(--ease); }
.image-lightbox.is-open { visibility: visible; opacity: 1; }
.image-lightbox__backdrop { position: absolute; inset: 0; background: rgba(3,5,8,.92); backdrop-filter: blur(13px); }
.image-lightbox__panel { position: relative; width: max-content; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow: hidden; border-radius: 18px; background: #101316; box-shadow: 0 30px 110px rgba(0,0,0,.55); transform: scale(.96); transition: transform .3s var(--ease); }
.image-lightbox.is-open .image-lightbox__panel { transform: scale(1); }
.image-lightbox__toolbar, .image-lightbox__navigation { position: absolute; z-index: 1; right: 0; left: 0; display: flex; align-items: center; gap: 14px; padding: 12px 16px; color: #fff; font: .68rem 'DM Mono',monospace; letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.image-lightbox__toolbar { top: 0; justify-content: space-between; background: linear-gradient(to bottom,rgba(0,0,0,.65),transparent); }
.image-lightbox__navigation { bottom: 0; justify-content: center; background: linear-gradient(to top,rgba(0,0,0,.55),transparent); }
.image-lightbox button { min-width: 42px; min-height: 36px; border: 1px solid rgba(255,255,255,.72); border-radius: 999px; padding: 6px 12px; background: rgba(5,7,9,.42); color: #fff; cursor: pointer; pointer-events: auto; }
.image-lightbox button:hover, .image-lightbox button:focus-visible { border-color: #fff; background: rgba(5,7,9,.8); }
.image-lightbox__stage { display: block; }
.image-lightbox__stage img { display: block; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); width: auto; height: auto; object-fit: contain; }
@media (max-width: 639px) { .image-lightbox { padding: 8px; }.image-lightbox__panel { max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 13px; }.image-lightbox__stage img { max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }.image-lightbox__toolbar, .image-lightbox__navigation { padding: 9px; } }

/* 文字の ✳ は iOS が絵文字化するため、同じ形を SVG マスクで描画します。 */
.ticker__track i, .hero-signal b, .hero-stamp b, .about-section__statement-mark { font-size: 0 !important; }
.ticker__track i::before, .hero-signal b::before, .hero-stamp b::before, .about-section__statement-mark::before, .spark-icon::before { display: block; aspect-ratio: 1; background: currentColor; -webkit-mask: url('assets/spark.svg') center / contain no-repeat; mask: url('assets/spark.svg') center / contain no-repeat; content: ''; }
.ticker__track i::before { width: clamp(1rem,2vw,1.6rem); }
.hero-signal b::before { width: 5.5rem; }
.hero-stamp b::before { width: 1.1rem; }
.about-section__statement-mark::before { width: 3.8rem; }
.spark-icon { display: inline-block; flex: 0 0 auto; color: currentColor; }
.spark-icon::before { width: .8rem; }
@media (max-width: 767px) { .hero-signal b::before { width: 3.2rem; }.about-section__statement-mark::before { width: 2.8rem; } }

/* カーソルとスクロールメーターはデスクトップだけで表示します。 */
.cursor-dot, .cursor-ring { position: fixed; z-index: 30; top: 0; left: 0; pointer-events: none; opacity: 0; border-radius: 50%; transform: translate(-50%,-50%); }
.cursor-dot { width: 7px; height: 7px; background: var(--lime); mix-blend-mode: difference; }
.cursor-ring { width: 33px; height: 33px; border: 1px solid var(--paper); transition: width .22s var(--ease), height .22s var(--ease), border-color .22s var(--ease); }
body.has-cursor .cursor-dot, body.has-cursor .cursor-ring { opacity: 1; }
body.cursor-active .cursor-ring { width: 56px; height: 56px; border-color: var(--lime); }
.scroll-meter { position: fixed; z-index: 12; right: 9px; top: 50%; width: 2px; height: 70px; background: rgba(242,240,232,.25); transform: translateY(-50%); }
.scroll-meter span { display: block; width: 100%; height: var(--scroll-progress, 0%); background: var(--lime); box-shadow: 0 0 8px var(--lime); }

/* Motion ボタンを切り替えた時は、連続する装飾アニメーションを止めます。 */
.motion-paused .ticker__track,
.motion-paused .orbit,
.motion-paused .about-section::before,
.motion-paused .about-section::after,
.motion-paused .contact-section::after,
.motion-paused .hero-stamp,
.motion-paused .hero-registration { animation-play-state: paused; }

/* モバイルでは動く要素を整理し、作品の比率と読みやすさを優先します。 */
@media (max-width: 767px) {
  .experience-section__head span { display: none; }
  .experience-section__title { min-height: 0; margin-bottom: 38px; }
  .experience-section__title h2 { font-size: clamp(2.5rem,10vw,3.5rem); }
  .career-item { min-height: 0; padding-bottom: 39px; }
  .capability-card > div { flex-wrap: wrap; }
  .capability-card span { flex-basis: auto; }
  .header-actions { gap: 6px; }
  .version-link { padding: 8px 9px; font-size: .54rem; }
  .hero { min-height: 690px; padding-top: 18px; }
  .hero__topline { font-size: .57rem; }
  .hero__title-wrap { margin-top: 9vh; }
  .hero__title { font-size: clamp(2.8rem, 11vw, 4rem); line-height: .9; }
  .hero__stage { min-height: 355px; margin-top: 20px; }
  .float-card--one { top: 4%; left: 38%; width: 144px; }
  .float-card--two { top: 44%; left: 1%; width: 112px; }
  .float-card--three { right: 1%; bottom: 5%; width: 127px; }
  .orbit--one { right: 4%; top: 8%; width: 225px; }
  .orbit--two { top: 42%; left: 22%; width: 145px; }
  .hero__aside { right: 0; top: 8%; font-size: .57rem; }
  .hero__bottomline { font-size: .6rem; }
  .hero__availability { display: none; }
  .work-section { padding: 90px 20px 112px; }
  .section-intro { margin-bottom: 34px; }
  .project-wall { display: block; }
  .project { margin: 0 0 25px !important; }
  .project--wide .project__surface, .project--long .project__surface { aspect-ratio: 1.1; }
  .project--tall .project__surface { aspect-ratio: .8; }
  .project--square .project__surface { aspect-ratio: 1.05; }
  .project__name { font-size: clamp(2.2rem,10vw,3.5rem); }
  .project__hint { opacity: 1; transform: none; width: 64px; font-size: .46rem; }
  .hero-registration { right: 25%; bottom: 2%; }.hero-stamp { left: 28%; bottom: 2%; width: 76px; font-size: .47rem; }
  .about-section { min-height: 700px; }.about-section::before { right: -55vw; top: 18%; width: 150vw; }.about-section::after { left: -15vw; bottom: 20%; width: 95vw; }
  .about-section__rail { font-size: .54rem; }.about-section__rail span { display: none; }.about-section__content { display: flex; flex-direction: column; align-items: start; gap: 38px; }.about-section h2 { font-size: clamp(3rem,12vw,4.5rem); }.about-section__statement { max-width: 280px; }.about-section__footer { font-size: .44rem; }
  .contact-section { min-height: 0; gap: 25px; }.contact-section::before { right: -47vw; bottom: -28vw; width: 125vw; }.contact-section::after { top: 12%; right: 12%; width: 37vw; }.contact-section__header { font-size: .54rem; }.contact-section__header span { max-width: 110px; text-align: right; }
  .contact-section__layout { padding: 35px 0; }.contact-section h2 { font-size: clamp(3.5rem,14vw,5rem); }.contact-panel h3 { font-size: clamp(1.45rem,7vw,2rem); }.contact-copy, .contact-direct { width: 100%; }.contact-section__bottom { flex-wrap: wrap; font-size: .55rem; }.contact-section__bottom div { gap: 10px; }
  .cursor-dot, .cursor-ring, .scroll-meter { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  #ambient-canvas, .grain { display: none; }
}

/* 作者の透過写真は文字の背後に置き、赤いハローと細い罫線でバイクの輪郭を際立たせます。 */
.hero { overflow: hidden; }
.hero__title-wrap { z-index: 6; }
.hero__stage { min-height: clamp(360px, 32vw, 500px); isolation: isolate; }
.hero-subject { position: absolute; z-index: 3; right: 4%; bottom: 4%; width: min(53vw, 720px); margin: 0; pointer-events: none; }
.hero-subject__disc { position: absolute; z-index: -1; left: 17%; top: 3%; width: 67%; aspect-ratio: 1; border: 1px solid rgba(255,95,65,.72); border-radius: 50%; background: radial-gradient(circle at 48% 48%,rgba(127,24,38,.64),rgba(255,95,65,.19) 46%,transparent 71%); box-shadow: 0 0 75px rgba(255,57,71,.16), inset 0 0 55px rgba(255,95,65,.13); animation: pulse-orbit 9s ease-in-out infinite; }
.hero-subject__disc::after { position: absolute; inset: -9%; border: 1px dashed rgba(217,255,69,.55); border-radius: 50%; content: ''; }
.hero-subject img { display: block; width: 100%; height: auto; filter: none; }
.hero-subject__glitch { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.hero-subject__glitch--cyan { filter: drop-shadow(7px 0 #4bf7ff) !important; animation: photo-glitch-cyan 7s steps(1,end) infinite; }
.hero-subject__glitch--coral { filter: drop-shadow(-7px 0 #ff5f41) !important; animation: photo-glitch-coral 7s steps(1,end) infinite; }
@keyframes photo-glitch-cyan { 0%, 85%, 89%, 92%, 100% { opacity: 0; transform: none; clip-path: inset(0); } 86% { opacity: .74; transform: translate(7px,-2px); clip-path: inset(17% 0 57% 0); } 88% { opacity: .6; transform: translate(-5px,3px); clip-path: inset(58% 0 19% 0); } 90% { opacity: .5; transform: translate(3px,0); clip-path: inset(30% 0 42% 0); } }
@keyframes photo-glitch-coral { 0%, 86%, 90%, 93%, 100% { opacity: 0; transform: none; clip-path: inset(0); } 87% { opacity: .65; transform: translate(-8px,2px); clip-path: inset(44% 0 37% 0); } 89% { opacity: .7; transform: translate(5px,-2px); clip-path: inset(73% 0 8% 0); } 91% { opacity: .54; transform: translate(-3px,1px); clip-path: inset(9% 0 69% 0); } }
.hero-subject figcaption { position: absolute; right: 2%; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid rgba(217,255,69,.7); background: rgba(8,10,11,.82); color: var(--paper); font: .56rem 'DM Mono',monospace; letter-spacing: .05em; white-space: nowrap; }
.hero-subject figcaption span { color: var(--lime); }
.hero-signal { position: absolute; z-index: 4; left: 3%; top: 26%; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; color: var(--lime); font: .61rem 'DM Mono',monospace; letter-spacing: .13em; }
.hero-signal::before { width: 75px; height: 1px; margin-bottom: 10px; background: currentColor; content: ''; }
.hero-signal b { font: 5.5rem/.8 'Space Grotesk',sans-serif; color: var(--coral); transform: rotate(-15deg); animation: signal-rock 6s ease-in-out infinite alternate; }
@keyframes signal-rock { to { transform: rotate(18deg) scale(1.08); } }
.hero-registration, .hero-stamp { z-index: 5; }
.motion-paused .hero-subject__disc, .motion-paused .hero-signal b { animation-play-state: paused; }
.motion-paused .hero-subject__glitch { animation: none; opacity: 0; }

/* デスクトップは横幅だけでなく画面の高さも基準にし、短いノートPCでもヒーローを一画面に収めます。 */
@media (min-width: 768px) {
  .hero { height: calc(100svh - 76px); min-height: 0; padding-top: clamp(12px,2svh,23px); padding-bottom: clamp(14px,2svh,35px); justify-content: initial; }
  .hero__topline, .hero__title-wrap, .hero__bottomline { flex: none; }
  .hero__title { font-size: clamp(4rem, min(10.2vw,15.5svh), 10.8rem); line-height: .84; }
  .hero__title-wrap { margin-top: clamp(16px,4svh,60px); }
  .hero__stage { flex: 1; min-height: 0; margin-top: clamp(-70px,-4vw,-30px); }
  .hero__bottomline { margin-top: 0; }
  .hero-subject { right: 0; bottom: 0; width: min(63vw,960px,calc(115.7svh - 197px)); }
}

/* About の内容幅を Hero の文字軸に合わせ、紹介文を一枚の編集的なカードにまとめます。 */
.about-section { min-height: 590px; }
.about-section > * { width: 100%; max-width: 1560px; margin-left: auto; margin-right: auto; }
.about-section__content { grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); align-items: center; gap: clamp(32px,5vw,90px); margin-top: 64px; margin-bottom: 64px; }
.about-section h2 { font-size: clamp(3.5rem,7.1vw,8rem); }
.about-section__statement { display: block; position: relative; max-width: 590px; margin: 0; padding: 36px clamp(24px,3vw,48px) 26px; border: 1px solid rgba(217,255,69,.43); background: linear-gradient(150deg,rgba(217,255,69,.11),rgba(8,10,11,.62) 65%); box-shadow: 18px 18px 0 rgba(93,114,255,.15); }
.about-section__statement::before { position: absolute; top: -1px; left: -1px; width: 55px; height: 5px; background: var(--lime); content: ''; }
.about-section__statement-mark { display: block; margin-bottom: 25px; color: var(--coral); font: 3.8rem/.8 'Space Grotesk',sans-serif; }
.about-section__statement p { max-width: 27ch; font-size: clamp(1.3rem,2.15vw,2rem); font-weight: 600; line-height: 1.27; letter-spacing: -.045em; }
.about-section__statement-foot { display: flex; flex-wrap: wrap; gap: 8px 15px; margin-top: 32px; padding-top: 14px; border-top: 1px solid rgba(217,255,69,.27); color: var(--lime); font: .7rem 'DM Mono',monospace; letter-spacing: .08em; }

@media (max-width: 767px) {
  .hero__stage { min-height: 355px; margin-top: 16px; }
  /* 小さな画面では顔の後ろに重なる大きなカードを外し、人物を読みやすくします。 */
  .float-card--one { display: none; }
  .hero-subject { right: 0; bottom: 8px; width: 100%; }
  .hero-subject__disc { left: 13%; top: 4%; width: 74%; }
  .hero-subject figcaption { right: 0; bottom: -3px; gap: 5px; padding: 5px 7px; font-size: .43rem; }
  .hero-signal { left: 0; top: 12%; font-size: .46rem; }
  .hero-signal::before { width: 42px; margin-bottom: 2px; }
  .hero-signal b { font-size: 3.2rem; }
  .hero__aside { top: 7%; }
  .hero-registration { right: 1%; bottom: 29%; }
  .hero-stamp { left: 9%; bottom: 1%; width: 64px; }
  .about-section { min-height: 0; }
  .about-section__content { display: flex; flex-direction: column; align-items: stretch; gap: 35px; margin-top: 49px; margin-bottom: 49px; }
  .about-section h2 { font-size: clamp(3rem,12vw,5rem); }
  .about-section__statement { max-width: none; padding: 26px 23px 21px; }
  .about-section__statement-mark { margin-bottom: 16px; font-size: 2.8rem; }
  .about-section__statement p { max-width: 32ch; font-size: clamp(1.25rem,5.6vw,1.65rem); }
  .about-section__statement-foot { margin-top: 23px; font-size: .6rem; }
}