/* ═══════════════════════════════════════════════════════════════════════════════
   SUSHISPOT CSS - Clean & Maintainable
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────────
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* Layout positioning */
  --sidebar-right: 1.5rem;
  
  /* Day mode colors (orange-amber theme) */
  --sky-top: #fff2e6;
  --sky-haze: #ffcfa3;
  --ground-peach: #ffbd8d;
  --ground-rose: #ff9f5a;
  
  /* Night mode colors (Arc palette) */
  --night-top: #01021EFF;
  --night-violet: #17011EFF;
  --night-haze: #050625FF;
  --night-ground: #0A0D4BFF;

  /* Lamp color */
  --lamp-core: #ffbd8d;

  /* Typography colors */
  --txt-day: #1a0f08;
  --txt2-day: #8b3a1a;
  --txt-night: #FFD1E3;
  --txt2-night: #FFD1E3;
  --head-day: #ff4d1a;
  --head-night: #F5E6D3;
  --link-day: #d63912;
  --linkv-day: #b32f0f;
  --link-night: #D4A574;
  --linkv-night: #C49967;

  /* Code and selection colors */
  --code-ink: #8B4513;
  --code-paper: #FFF8F0;
  --code-ink-dk: #E6B3CC;
  --code-paper-dk: #4A2C4A;
  --sel-day: #FFE4CC;
  --sel-night: #8B4A8B;

  /* Animation timing */
  --timing-fn: cubic-bezier(.455,.19,0,.985);

  /* Background gradients */
  --bg-day: radial-gradient(100% 120% at 85% 85%,
              #ff9f5a 0%,
              #ffbd8d 25%,
              #ffbd8d 75%,
              #ffcfa3 100%);

  --bg-night: radial-gradient(100% 120% at 85% 85%,
                #2a1a1a 0%,
                #1a1a2e 30%,
                #0f1322 60%,
                #070a15 100%);
}

/* ─────────────────────────────────────────────────────────────────────────────
   BASE STYLES
   ───────────────────────────────────────────────────────────────────────────── */

body {
  /* Color system variables for day/night mode */
  --day: var(--sky-top);
  --evening: var(--sky-haze);
  --dusk: var(--ground-peach);
  --dawn: var(--ground-rose);
  --night: #1a1a2e;
  --light: var(--day);
  --dark: var(--night);
  --shadow: var(--txt-day);
  --bounce-light: var(--sky-haze);

  /* Active text colors */
  --txt: var(--txt-day);
  --txt2: var(--txt2-day);
  --head: var(--head-day);
  --link: var(--link-day);
  --linkv: var(--linkv-day);

  /* Reset and base styles */
  margin: 0;
  padding: 0;
  min-height: 100vh;
  width: 100%;
  background: var(--bg-day);
  overflow-x: hidden;

  /* Typography */
  font-family: "IBM Plex Serif", Georgia, "Times New Roman", Times, serif;
  color: var(--txt);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  /* Animation setup */
  animation-duration: 0s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  transition: color 0.4s var(--timing-fn);
}

/* Dark mode styles */
body.dark {
  --light: var(--night);
  --dark: var(--txt-night);
  --shadow: var(--txt-night);
  --bounce-light: var(--night-haze);
  --txt: var(--txt-night);
  --txt2: var(--txt2-night);
  --head: var(--head-night);
  --link: var(--link-night);
  --linkv: var(--linkv-night);
  color: var(--txt);
}

/* Animation states */
body.animation-ready {
  animation-play-state: running;
  animation-duration: 1s;
  animation-name: sunrise;
}

body.animation-ready.dark {
  animation-duration: 1.7s;
  animation-name: sunset;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ANIMATIONS
   ───────────────────────────────────────────────────────────────────────────── */

@keyframes sunrise {
  0% { background: var(--bg-night); }
  15% { background: radial-gradient(150% 150% at 85% 85%, #2d3355, #1a1a2e); }
  30% { background: radial-gradient(150% 150% at 85% 85%, #4d4d77, #2a2a3a); }
  45% { background: radial-gradient(150% 150% at 85% 85%, #cc6633, #2d3355); }
  60% { background: radial-gradient(150% 150% at 85% 85%, #ff9f5a, #4d4d77); }
  75% { background: radial-gradient(150% 150% at 85% 85%, #ffbd8d, #cc6633); }
  90% { background: radial-gradient(150% 150% at 85% 85%, #ffcfa3, #ff9f5a); }
  100% { background: var(--bg-day); }
}

@keyframes sunset {
  0% { background: var(--bg-day); }
  10% { background: radial-gradient(150% 150% at 85% 85%, #ffcfa3, #ff9f5a); }
  25% { background: radial-gradient(150% 150% at 85% 85%, #ffbd8d, #cc6633); }
  40% { background: radial-gradient(150% 150% at 85% 85%, #ff9f5a, #4d4d77); }
  55% { background: radial-gradient(150% 150% at 85% 85%, #cc6633, #2d3355); }
  70% { background: radial-gradient(150% 150% at 85% 85%, #4d4d77, #2a2a3a); }
  85% { background: radial-gradient(150% 150% at 85% 85%, #2d3355, #1a1a2e); }
  95% { background: radial-gradient(150% 150% at 85% 85%, #2a2a3a, #1a1a2e); }
  100% { background: var(--bg-night); }
}

@keyframes gentle-pulse {
  0%, 100% { opacity: .75; transform: scale(1.05); }
  50% { opacity: .85; transform: scale(1.04); }
}

@keyframes slideInNav {
  0% {
    opacity: 0;
    transform: translateX(25px);
  }
  100% {
    opacity: 0.8;
    transform: translateX(0);
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   TYPOGRAPHY
   ───────────────────────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 1.5rem 0;
  text-align: center;
  letter-spacing: -0.02em;
  transition: color 0.4s var(--timing-fn);
  color: var(--head);
  line-height: 1.1;
  font-weight: 700;
}

/* Site header - large and impactful */
main h3 {
  font-size: clamp(3rem, 8vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  margin: 0 0 1rem 0;
  text-transform: lowercase;
  color: var(--head);
  text-align: left;
  line-height: 0.95;
}

h1 { 
  font-size: clamp(2.5rem, 6vw, 4rem); 
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.0;
}

h2 { 
  font-size: clamp(1.875rem, 4.5vw, 2.5rem); 
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 2.5rem 0 1.5rem 0;
}

h3 { 
  font-size: clamp(1.5rem, 3.5vw, 2rem); 
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 2rem 0 1rem 0;
}

h4 {
  font-size: clamp(1.25rem, 3vw, 1.5rem);
  font-weight: 600;
  line-height: 1.3;
  margin: 1.5rem 0 0.75rem 0;
}

p {
  margin: 0 0 1.5rem 0;
  font-size: clamp(1rem, 2.2vw, 1.125rem);
  line-height: 1.7;
  transition: color 0.3s ease;
  color: var(--txt);
  font-weight: 400;
  letter-spacing: -0.005em;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-skip-ink: none;
  text-underline-offset: 3px;
  transition: color .25s var(--timing-fn), 
              text-decoration-color .2s ease,
              filter 0.2s ease;
  position: relative;
}

a:hover {
  filter: brightness(1.2);
  text-decoration-color: currentColor;
}

/* ─────────────────────────────────────────────────────────────────────────────
   LAYOUT COMPONENTS
   ───────────────────────────────────────────────────────────────────────────── */

/* Utility classes */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.justify-between { justify-content: space-between; }
.relative { position: relative; }

@media (min-width: 768px) {
  .md\:flex-row { flex-direction: row; }
}

/* Main containers */
.container {
  flex: 1;
  max-width: none;
  margin: 0;
  padding: 2rem 2rem 4rem 2rem;
  position: relative;
  z-index: 2;
}

.sidebar-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  min-width: 100px;
  padding: 2rem calc(var(--sidebar-right) + 100px) 4rem 1rem;
  position: relative;
  z-index: 2;
  min-height: 100vh;
}

/* Header components */
.header-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin-bottom: 3rem;
  margin-left: clamp(2rem, 8vw, 6rem);
}

.site-title {
  font-size: clamp(1.5rem, 3vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  text-align: left;
  color: var(--head);
  margin-top: 0;
  padding-top: 0.5rem;
  line-height: 1.1;
}

.site-tagline {
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  color: var(--txt2);
  margin: 0.15em 0 0 0;
  text-align: left;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
  opacity: 0.9;
}

.main-content {
  max-width: 65ch;
  margin: 0 auto 0 clamp(2rem, 8vw, 6rem);
}

/* Navigation */
nav {
  position: relative;
  top: 0;
  right: 0;
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.8rem;
  z-index: 1000;
  margin-top: 2.5rem;
  margin-right: -60px;
  padding-right: 0;
}

nav a {
  color: var(--txt);
  font-size: 1.1rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: -0.01em;
  padding: 0;
  margin: 0;
  border-radius: 0;
  background: none;
  text-decoration: none;
  transition: all 0.2s var(--timing-fn);
  text-align: right;
  line-height: 1.4;
  opacity: 0;
  display: inline-block;
  transform: translateX(25px);
  animation: slideInNav 0.6s ease-out forwards;
  align-self: flex-end;
  white-space: nowrap;
}

/* Staggered animation delays */
nav a:nth-child(1) { animation-delay: 0.3s; }
nav a:nth-child(2) { animation-delay: 0.5s; }
nav a:nth-child(3) { animation-delay: 0.7s; }
nav a:nth-child(4) { animation-delay: 0.9s; }
nav a:nth-child(5) { animation-delay: 1.1s; }
nav a:nth-child(6) { animation-delay: 1.3s; }

nav a:hover {
  color: var(--link);
  opacity: 1;
  background: none;
  transform: translateX(-2px);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* SVG icons in navigation links */
nav a svg {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.5rem;
  width: 16px;
  height: 16px;
  color: inherit;
  transition: transform 0.2s ease, color 0.25s var(--timing-fn);
  flex-shrink: 0;
}

nav a svg path {
  stroke: currentColor;
}

nav a:hover svg {
  transform: translateX(2px);
  color: inherit;
}

/* Utility classes for nav */
.mt-12 { margin-top: 2.5rem; }
.w-full { width: 100%; }

@media (min-width: 768px) {
  .md\:mt-0 { margin-top: 2.5rem; }
  .md\:w-1\/4 { width: 25%; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   VISUAL EFFECTS & LAMP
   ───────────────────────────────────────────────────────────────────────────── */

/* Background overlay for atmospheric effect */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    ellipse 120% 60% at 85% 85%,
    rgba(255, 189, 141, 0) 0%,
    rgba(255, 189, 141, 0) 45%,
    rgba(255, 189, 141, 0.008) 65%,
    rgba(255, 189, 141, 0.015) 80%,
    rgba(255, 189, 141, 0.025) 90%,
    rgba(255, 189, 141, 0.035) 100%
  );
  pointer-events: none;
  z-index: 1;
  transition: opacity 1.2s var(--timing-fn);
}

body.dark::before {
  background: radial-gradient(
    ellipse 150% 80% at 85% 85%,
    rgba(26, 26, 46, 0) 0%,
    rgba(26, 26, 46, 0) 25%,
    rgba(26, 26, 46, 0.1) 45%,
    rgba(26, 26, 46, 0.25) 65%,
    rgba(26, 26, 46, 0.4) 85%,
    rgba(26, 26, 46, 0.5) 100%
  );
}

/* Dappled light container */
#dappled-light { 
  pointer-events: none; 
  position: fixed; 
  height: 100vh; 
  width: 100vw; 
}

#dappled-light > * { 
  pointer-events: none; 
}

#dappled-light > #noguchi_lamp { 
  pointer-events: auto; 
}

#glow {
  position: absolute; 
  inset: 0;
  background: radial-gradient(circle at 85% 85%, var(--lamp-core) 0%, var(--dusk) 25%, var(--day) 55%, transparent 70%);
  transition: opacity 1.2s var(--timing-fn), filter 1.2s var(--timing-fn);
  opacity: 0; 
  filter: blur(30px);
}

#glow-bounce {
  content: ""; 
  position: absolute; 
  bottom: 0; 
  height: 100%; 
  width: 100%;
  background: linear-gradient(355deg, var(--bounce-light) 0%, transparent 30% 100%);
  transition: background 1s var(--timing-fn); 
  opacity: .5;
}

.perspective { 
  position: absolute; 
  top: -30vh; 
  right: 0; 
  width: 80vw; 
  height: 130vh;
  transition: transform 1.7s var(--timing-fn), opacity 4s ease; 
  opacity: .07;
  background-blend-mode: darken; 
  transform-origin: top right; 
  transform-style: preserve-3d;
  transform: matrix3d(.75,-.0625,0,.0008,0,1,0,0,0,0,1,0,0,0,0,1);
}

.dark .perspective { 
  opacity: .3; 
  transform: matrix3d(.8333,.0833,0,.0003,0,1,0,0,0,0,1,0,0,0,0,1); 
}

/* Noguchi lamp */
#noguchi_lamp { 
  position: fixed; 
  bottom: 20px; 
  right: var(--sidebar-right);
  z-index: 1000; 
  cursor: pointer;
  width: 200px;
  animation: none !important;
  transform: none !important;
}

#noguchi_lamp img {
  cursor: pointer;
  width: 100%; 
  height: auto; 
  transition: transform .3s ease, filter .8s var(--timing-fn);
  filter: brightness(.9) saturate(1.1);
  display: block;
}

#noguchi_lamp:hover img { 
  filter: brightness(1.1) saturate(1.2); 
}

#noguchi_lamp .halo {
  position: absolute; 
  top: 50%; 
  left: 50%; 
  translate: -50% -50%; 
  width: 300px; 
  height: 300px;
  border-radius: 50%; 
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,120,80,.3) 0%, rgba(200,80,120,.15) 40%, rgba(0,0,0,0) 70%);
  filter: blur(40px); 
  opacity: 0;
  transition: opacity .8s var(--timing-fn), transform 1s var(--timing-fn);
  mix-blend-mode: overlay;
}

body.dark #noguchi_lamp {
  filter: drop-shadow(0 0 40px rgba(255,140,66,.25));
}

body.dark #noguchi_lamp .halo {
  opacity: .75; 
  transform: scale(1.05);
}

body.dark #noguchi_lamp img {
  filter: drop-shadow(0 0 10px var(--lamp-core)) brightness(1.15) saturate(1.2);
}

@media (prefers-reduced-motion: no-preference) {
  body.dark #noguchi_lamp .halo {
    animation: gentle-pulse 4s ease-in-out infinite;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   CANVAS ELEMENTS (JS-created)
   ───────────────────────────────────────────────────────────────────────────── */

#starfield-canvas,
#shooting-star-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  display: block;
}

body.dark #starfield-canvas { 
  opacity: 1; 
}

#particle-system { 
  position: fixed; 
  inset: 0; 
  pointer-events: none; 
  opacity: 0; 
  transition: opacity 1s ease; 
  z-index: 2; 
}

body.dark #particle-system { 
  opacity: 1; 
}

#shooting-star-canvas { 
  position: fixed; 
  inset: 0; 
  pointer-events: none; 
  opacity: 0; 
  transition: opacity 1s ease; 
  z-index: 3; 
  filter: hue-rotate(190deg) saturate(0.9) brightness(1.1);
}

body.dark #shooting-star-canvas { 
  opacity: 1; 
}

/* ─────────────────────────────────────────────────────────────────────────────
   SELECTION & CODE STYLES
   ───────────────────────────────────────────────────────────────────────────── */

::selection {
  background: var(--sel-day);
  color: var(--txt);
}

body.dark ::selection {
  background: var(--sel-night);
  color: var(--head-night);
}

code, pre {
  color: var(--code-ink);
  background: var(--code-paper);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-family: 'Monaco', 'Courier New', monospace;
  font-size: clamp(0.8rem, 2vw, 0.9rem);
  transition: all 0.2s ease;
  word-break: break-word;
}

body.dark code,
body.dark pre {
  color: var(--code-ink-dk);
  background: var(--code-paper-dk);
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE DESIGN
   ───────────────────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .container {
    padding: 2rem 1rem;
  }
}

@media (max-width: 768px) {
  :root {
    --sidebar-right: 1.5rem;
  }
  
  body {
    padding: 0;
  }
  
  .container {
    padding: 1.5rem 1rem 3rem 1rem;
  }
  
  .sidebar-container {
    min-width: auto;
    width: 100%;
    padding: 1rem;
    align-items: center;
    margin-top: 2rem;
  }
  
  main h3 {
    font-size: clamp(2.5rem, 10vw, 3.5rem);
    line-height: 0.9;
    margin-bottom: 0.5rem;
  }
  
  h1 { 
    font-size: clamp(2rem, 8vw, 3rem); 
    line-height: 1.0;
  }
  
  h2 { 
    font-size: clamp(1.5rem, 6vw, 2rem); 
    margin: 2rem 0 1rem 0;
  }
  
  p {
    font-size: clamp(1rem, 3.5vw, 1.125rem);
    line-height: 1.6;
    margin-bottom: 1.25rem;
  }
  
  nav {
    position: static !important;
    top: auto !important;
    right: auto !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1.25rem !important;
    margin-top: 1rem !important;
    width: 100% !important;
  }
  
  nav a {
    font-size: 1rem !important;
    text-align: center !important;
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    width: auto !important;
    display: inline-block !important;
  }
  
  #noguchi_lamp {
    right: var(--sidebar-right);
    bottom: 20px;  
  }
}

@media (max-width: 480px) {
  .container {
    padding: 1rem 0.75rem 2.5rem 0.75rem;
  }
  
  main h3 {
    font-size: clamp(2rem, 12vw, 2.8rem);
    line-height: 0.85;
  }
  
  h1 { 
    font-size: clamp(1.75rem, 9vw, 2.5rem); 
  }
  
  h2 { 
    font-size: clamp(1.375rem, 7vw, 1.75rem); 
  }
  
  p {
    font-size: clamp(1rem, 4vw, 1.1rem);
    line-height: 1.55;
  }
  
  nav a {
    font-size: 0.95rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ACCESSIBILITY
   ───────────────────────────────────────────────────────────────────────────── */

@media (prefers-contrast: more) { 
  h1, p { 
    color: var(--txt-night); 
  } 
}

@media (prefers-reduced-motion: reduce) { 
  * { 
    animation-duration: .01ms !important; 
    animation-iteration-count: 1 !important; 
    transition-duration: .01ms !important; 
  }
}

a:focus,
button:focus {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

html {
  scroll-behavior: smooth;
}