/* Base reset and variables */
:root {
  --bg: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --surface: #f1f5f9;
  --card: #ffffff;
  --border: #e2e8f0;
  --primary: #2563eb;
  --primary-contrast: #ffffff;
}

[data-theme="dark"] {
  --bg: #0b1220;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --surface: #0f172a;
  --card: #0b1220;
  --border: #1f2a44;
  --primary: #60a5fa;
  --primary-contrast: #0b1220;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Noto Sans JP, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* Layout */
.container {
  width: min(1100px, 92vw);
  margin-inline: auto;
}
.grid-2 { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); }
.grid-3 { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; }
.logo { font-weight: 700; letter-spacing: 0.2px; }
.site-header nav { display: flex; gap: 16px; }
.site-header nav a { padding: 8px 10px; border-radius: 8px; color: var(--muted); }
.site-header nav a.active { color: var(--text); background: var(--surface); }
.icon-btn { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; cursor: pointer; }

.site-footer { border-top: 1px solid var(--border); margin-top: 40px; }
.site-footer .container { padding: 24px 0; color: var(--muted); }

/* Sections */
.hero {
  background: radial-gradient(1200px 700px at 10% -10%, rgba(37,99,235,.18), transparent 60%),
              radial-gradient(1200px 700px at 90% -10%, rgba(99,102,241,.18), transparent 60%);
}
.hero .container { padding: 92px 0 64px; }
.hero h1 { font-size: clamp(28px, 4vw, 44px); line-height: 1.2; margin: 0 0 12px; }
.lead { color: var(--muted); margin: 0 0 18px; }
.actions { display: flex; gap: 12px; }


.page-hero .container { padding: 42px 0 8px; }

.features { padding: 32px 0; }
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.card .thumb { width: 100%; height: 140px; border-radius: 12px; margin-bottom: 12px; }
.muted { color: var(--muted); }

.portfolio-grid article h3 { margin: 6px 0 6px; }

.tags { display: flex; gap: 8px; padding: 0; list-style: none; }
.tags li { background: var(--surface); border: 1px solid var(--border); padding: 4px 8px; border-radius: 999px; font-size: 12px; }

/* About photo card */
.photo-card { margin: 0; display: grid; grid-template-columns: 1fr; gap: 12px; align-items: start; }
.photo-card img { width: var(--photo-w, clamp(403px, 100%, 756px)); height: auto; border-radius: 12px; display: block; }
.photo-card figcaption { margin-top: 8px; color: var(--muted); font-size: 13px; text-align: center; }

@media (max-width: 640px) {
  .photo-card { grid-template-columns: 1fr; }
  .photo-card img { width: min(100%, 504px); margin: 0 auto; }
  .photo-card figcaption { text-align: center; margin-top: 8px; }
}

/* Hide removed sections on About using relational selector */
.card:has(.skills),
.card:has(.timeline) {
  display: none;
}

.skills { list-style: none; padding: 0; }
.skills li { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px dashed var(--border); padding: 8px 0; }

.timeline { padding-left: 18px; }
.timeline li { margin: 6px 0; }

.links { list-style: none; padding: 0; }
.links li { margin: 8px 0; }



/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.btn.primary { background: var(--primary); color: var(--primary-contrast); border-color: color-mix(in srgb, var(--primary) 60%, black); }
.btn.ghost { background: transparent; }
.btn:hover { filter: brightness(1.02); }

/* Animations */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal-visible { opacity: 1; transform: none; }
/* Show content when JS is unavailable */
html.no-js .reveal { opacity: 1; transform: none; }

/* Lab styles */
.tilt { position: relative; overflow: hidden; transform-style: preserve-3d; transition: transform .25s ease, box-shadow .25s ease; }
.tilt:hover { transform: perspective(700px) rotateX(6deg) rotateY(-6deg) translateY(-2px); box-shadow: 0 22px 45px rgba(0,0,0,.28), 0 12px 24px rgba(0,0,0,.12); }
.tilt::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; background: radial-gradient(240px 160px at var(--gloss-x,100%) var(--gloss-y,100%), rgba(255,255,255,.36), rgba(255,255,255,0) 60%); mix-blend-mode: screen; opacity: .5; transition: opacity .2s ease, transform .2s ease; }
.tilt:hover::after { opacity: .7; transform: translate3d(-1px,-1px,0) scale(1.01); }
.tilt.gloss-br { --gloss-x: 100%; --gloss-y: 100%; }
/* Remove sheen overlay for specific cards */
.tilt.no-sheen::after,
.tilt.no-sheen:hover::after { content: none; opacity: 0; }

/* Reveal action on hover */
.tilt .reveal-on-hover { opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.tilt:hover .reveal-on-hover { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* Modifier: remove shadow-like effects on tilt */
.tilt.no-shadow, .tilt.no-shadow:hover { box-shadow: none !important; }
.tilt.no-shadow::after, .tilt.no-shadow:hover::after { content: none !important; opacity: 0 !important; }
.pulse {
  position: relative;
  overflow: hidden;
}
.pulse::before {
  content: '';
  position: absolute;
  inset: -25%;
  z-index: 0;
  background:
    radial-gradient(40% 60% at 20% 20%, rgba(99,102,241,.34), transparent 60%),
    radial-gradient(50% 50% at 80% 30%, rgba(37,99,235,.26), transparent 60%),
    linear-gradient(135deg, rgba(99,102,241,.42) 0%, rgba(37,99,235,.24) 100%);
  background-blend-mode: overlay, overlay, normal;
  background-size: 320% 320%;
  background-position: 0% 50%;
  transform: translate3d(0,0,0) scale(1);
  filter: saturate(1) brightness(1) contrast(1);
  will-change: background-position, transform, filter;
  animation: pulseBg 12s ease-in-out infinite, pulseBlob 16s ease-in-out infinite;
}
.pulse > * {
  position: relative;
  z-index: 1;
}


@keyframes pulseBg {
  0%, 100% { background-position: 0% 50%; filter: saturate(1) brightness(1) contrast(1); }
  50% { background-position: 100% 50%; filter: saturate(1.75) brightness(1.18) contrast(1.28); }
}

@keyframes pulseBlob {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(2.5%, -2.5%, 0) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .pulse::before { animation-duration: 28s, 36s; }
}

#scroll-progress { position: fixed; inset: 0 auto auto 0; height: 30px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--primary); z-index: 60; pointer-events: none; }

/* Forms */
form label { display: grid; gap: 6px; margin: 10px 0; }
input, textarea { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); color: var(--text); font: inherit; }
input:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--primary) 40%, transparent); outline-offset: 1px; }
.error-text { color: hsl(0 65% 45%); font-size: 12px; line-height: 1.3; }
.is-invalid { background: hsl(0 100% 97%); border-color: hsl(0 75% 80%); }
.form-status { margin-top: 8px; color: var(--muted); font-size: 13px; }
.form-status.error { color: hsl(0 65% 45%); }
.hint-text { color: var(--muted); font-size: 12px; line-height: 1.3; }
[data-theme="dark"] .is-invalid { background: hsl(0 60% 22% / 0.6); border-color: hsl(0 70% 40% / 0.9); }

/* Accessibility */
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }

/* Spacing helpers */

main section { margin: 6px 0; }



/* Site-wide color inversion (toggled via Lab's Neumorphism card) */

html[data-inverted="true"] { filter: invert(1) hue-rotate(180deg); }

html[data-inverted="true"] img,

html[data-inverted="true"] video,

html[data-inverted="true"] picture,

html[data-inverted="true"] svg { filter: invert(1) hue-rotate(180deg); }



/* Scroll reveal demo - staggered children */

.scroll-reveal-demo .reveal-group {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.scroll-reveal-demo { cursor: pointer; }
.reveal-box {
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  display: grid;
  place-items: center;
  font-weight: 600;
}
.reveal-child { opacity: 0; transform: translateY(10px); transition: opacity 1.5s ease, transform 1.5s ease; }
.reveal-child.no-anim { transition: none !important; }
.scroll-reveal-demo.reveal-visible .reveal-child { opacity: 1; transform: none; }
.scroll-reveal-demo.reveal-visible .reveal-child:nth-child(1) { transition-delay: .0s; }
.scroll-reveal-demo.reveal-visible .reveal-child:nth-child(2) { transition-delay: .15s; }
.scroll-reveal-demo.reveal-visible .reveal-child:nth-child(3) { transition-delay: .30s; }
.scroll-reveal-demo.reveal-visible .reveal-child:nth-child(4) { transition-delay: .45s; }
.scroll-reveal-demo.reveal-visible .reveal-child:nth-child(5) { transition-delay: .60s; }
.scroll-reveal-demo.reveal-visible .reveal-child:nth-child(6) { transition-delay: .75s; }

@media (max-width: 640px) {
  .scroll-reveal-demo .reveal-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile: two-row tab bar and no horizontal scroll */
@media (max-width: 640px) {
  .site-header .container {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "logo toggle"
      "nav nav";
    align-items: center;
    row-gap: 8px;
  }
  .logo { grid-area: logo; }
  #theme-toggle { grid-area: toggle; }
  .site-header nav {
    grid-area: nav;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .site-header nav a {
    display: block;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px 8px;
  }
}

/* New Lab Card Styles */
/* Unified Lab grid: 3 columns x 4 rows, equal-size cards */
.lab-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.lab-grid .card { min-height: 220px; height: 100%; text-align: center; }
.lab-grid .flip-card { height: 100%; }
.lab-grid .parallax-hover { min-height: 220px; }

/* Tooltip (吹き出し) */
.has-tooltip { position: relative; }
.has-tooltip .tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.12);
  max-width: 240px;
  text-align: left;
  z-index: 10;
}
.has-tooltip .tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--card);
}
.has-tooltip:hover .tooltip,
.has-tooltip:focus-within .tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}



/* Flip Card */
.flip-card {
  background: transparent;
  perspective: 1000px;
  height: 200px; /* Adjust as needed */
  padding: 0;
  border: none;
  box-shadow: none;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  border-radius: inherit;
}
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  border-radius: inherit;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.flip-card-back {
  transform: rotateY(180deg);
}

/* Animated Border */
.animated-border {
  position: relative;
  overflow: hidden;
  --border-size: 6px;
  --border-speed: 4s;
  --border-color-1: var(--primary);
  --border-color-2: #60a5fa;
  --border-color-3: #a78bfa;
  padding: calc(18px - var(--border-size)); /* Adjust padding to account for border */
}
.animated-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--border-size);
  background: linear-gradient(45deg, var(--border-color-1), var(--border-color-2), var(--border-color-3), var(--border-color-1));
  -webkit-mask:
     linear-gradient(#fff 0 0) content-box,
     linear-gradient(#fff 0 0);
  mask:
     linear-gradient(#fff 0 0) content-box,
     linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  background-size: 300% 300%;
  animation: animateBorder var(--border-speed) linear infinite;
}
@keyframes animateBorder {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Extra Lab Cards */
/* Glow Outline */
.glow-outline { position: relative; }
.glow-outline::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--primary) 80%, white) 0%, transparent 70%);
  filter: blur(12px);
  opacity: .55;
  pointer-events: none;
  animation: glowPulse 3s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { opacity: .45; filter: blur(10px); }
  50% { opacity: .75; filter: blur(14px); }
}

/* Dashed gradient border */
/* Aurora Gradient Border (refined alternative to dashed) */
.dashed-border { position: relative; overflow: hidden; border: 2px solid transparent; }
.dashed-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    conic-gradient(from var(--angle, 0deg),
      #60a5fa, #a78bfa, #f472b6, #f59e0b, #34d399, #60a5fa) border-box;
  -webkit-mask: none;
          mask: none;
  border: 2px solid transparent;
  animation: auroraTurn 12s linear infinite;
}
@keyframes auroraTurn { to { --angle: 360deg; } }
.dashed-border::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(0,0,0,.06);
  pointer-events: none;
}

/* Shimmer sweep */
.shimmer { position: relative; overflow: hidden; background: linear-gradient(180deg, #f3f4f6, #e5e7eb); border-color: #d1d5db; color: #111827; }
.shimmer::after {
  content: '';
  position: absolute; inset: -25%;
  background: linear-gradient(120deg,
              transparent 30%, rgba(255,255,255,.35) 47%, transparent 64%);
  transform: translateX(-100%);
  animation: shimmerMove 2.5s ease-in-out infinite;
  mix-blend-mode: screen; pointer-events: none;
}
@keyframes shimmerMove { to { transform: translateX(100%); } }

[data-theme="dark"] .shimmer { background: linear-gradient(180deg, #111827, #1f2937); border-color: #374151; color: #e5e7eb; }

/* Parallax Hover */
.parallax-hover {
  overflow: hidden;
  position: relative;
  background-image: url('https://via.placeholder.com/300x200/60a5fa/ffffff?text=Parallax'); /* Placeholder image */
  background-size: 110% 110%;
  background-position: center;
  transition: background-position 0.3s ease-out;
}
.parallax-hover:hover {
  background-position: var(--x) var(--y);
}
.parallax-content {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Text Glitch */
.text-glitch {
  position: relative;
  text-align: center;
}
.glitch-text {
  font-size: 1.5em;
  font-weight: bold;
  position: relative;
  display: inline-block;
  color: var(--text);
  transition: color 0.3s;
}
.text-glitch:hover .glitch-text {
  color: var(--primary);
  animation: glitch 0.5s infinite alternate;
}
.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--card);
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}
.text-glitch:hover .glitch-text::before {
  left: -2px;
  text-shadow: 1px 0 var(--primary);
  animation: glitch-anim-1 0.5s infinite alternate-reverse;
}
.text-glitch:hover .glitch-text::after {
  left: 2px;
  text-shadow: -1px 0 var(--primary);
  animation: glitch-anim-2 0.5s infinite alternate-reverse;
}

@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}
@keyframes glitch-anim-1 {
  0% { clip: rect(30px, 9999px, 10px, 0); }
  25% { clip: rect(10px, 9999px, 50px, 0); }
  50% { clip: rect(40px, 9999px, 20px, 0); }
  75% { clip: rect(5px, 9999px, 60px, 0); }
  100% { clip: rect(20px, 9999px, 30px, 0); }
}
@keyframes glitch-anim-2 {
  0% { clip: rect(20px, 9999px, 40px, 0); }
  25% { clip: rect(50px, 9999px, 10px, 0); }
  50% { clip: rect(10px, 9999px, 50px, 0); }
  75% { clip: rect(60px, 9999px, 5px, 0); }
  100% { clip: rect(30px, 9999px, 20px, 0); }
}

/* Neumorphism */
.neumorphism {
  background: var(--surface); /* Use surface color for neumorphism base */
  border: none;
  box-shadow: 8px 8px 16px rgba(0,0,0,.08), -8px -8px 16px rgba(255,255,255,.8);
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  user-select: none;
}
[data-theme="dark"] .neumorphism {
  box-shadow: 8px 8px 16px rgba(0,0,0,.4), -8px -8px 16px rgba(255,255,255,.05);
}
.neumorphism:hover {
  box-shadow: 4px 4px 8px rgba(0,0,0,.06), -4px -4px 8px rgba(255,255,255,.6);
}
[data-theme="dark"] .neumorphism:hover {
  box-shadow: 4px 4px 8px rgba(0,0,0,.3), -4px -4px 8px rgba(255,255,255,.03);
}
.neumorphism h3, .neumorphism p {
  color: var(--text);
}

/* Invert colors while pressed (押したら色反転) */
.neumorphism:active {
  background: var(--text);
  color: var(--bg);
  box-shadow: inset 6px 6px 12px rgba(0,0,0,.18), inset -6px -6px 12px rgba(255,255,255,.35);
  transform: translateY(1px);
}
.neumorphism:active h3,
.neumorphism:active p { color: var(--bg); }
[data-theme="dark"] .neumorphism:active {
  box-shadow: inset 6px 6px 12px rgba(0,0,0,.5), inset -6px -6px 12px rgba(255,255,255,.06);
}