/* shibuya.css — Tokyo Neon design tokens + neon/glass treatments.
   Tailwind CDN handles layout/spacing utilities; this file owns only what
   Tailwind can't express inline: tokens, glass, neon glow, scanlines, cursor,
   keyframes. Palette + fonts per spec. */

:root {
  /* Palette */
  --bg: #0A0A0A;
  --pink: #FF2D95;   /* Shibuya pink */
  --blue: #00D4FF;   /* electric cyan */
  --green: #39FF14;  /* Akihabara green */
  --yellow: #FFE600; /* warning yellow */
  --text: #E0E0E0;
  --text-soft: #c9c9d6; /* lighter body text over imagery */
  --muted: #808080;
  --scrim-rgb: 10 10 14; /* near-black veil over photos; alpha varies at use */

  /* Glass surface (blur 14px, 1px light border) */
  --glass-bg: rgba(26, 26, 46, 0.55);
  --glass-border: rgba(255, 255, 255, 0.10);
  --glass-blur: 14px;

  /* Radii */
  --radius: 20px;

  /* Fonts */
  --font-display: 'Orbitron', system-ui, sans-serif;
  --font-jp: 'Zen Kaku Gothic New', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-pixel: 'DotGothic16', monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  margin: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Oversized display type (2026 direction) */
.font-display { font-family: var(--font-display); letter-spacing: 0.02em; }
.font-jp { font-family: var(--font-jp); }
.font-pixel { font-family: var(--font-pixel); }

/* Neon accents ----------------------------------------------------------- */
.neon-pink  { color: var(--pink);  text-shadow: 0 0 8px rgba(255,45,149,.55); }
.neon-blue  { color: var(--blue);  text-shadow: 0 0 8px rgba(0,212,255,.55); }
.neon-green { color: var(--green); text-shadow: 0 0 8px rgba(57,255,20,.5); }

.neon-border {
  border: 1px solid var(--glass-border);
  box-shadow: 0 0 0 1px rgba(255,255,255,.03), 0 0 18px -6px var(--glow, var(--blue));
}

/* Glass surface used by cards, nav, feed items */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius);
}

/* Edge-to-edge glass bar (nav): flat, bottom border only */
.glass-bar { border-radius: 0; border-left: 0; border-right: 0; border-top: 0; }

/* Pill shape — the rounded-capsule token reused across CTAs/pills/inputs.
   Owns only the radius; padding/colour stay per-element. */
.pill { border-radius: 999px; }

/* Bento grid (39): varied spans, responsive 4→2→1, hover lift */
.bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  grid-auto-flow: dense;
}
.bento > * { transition: transform .2s ease, box-shadow .2s ease; }
.bento > *:hover { transform: translateY(-4px) scale(1.01); }
.span-2 { grid-column: span 2; }
.row-2  { grid-row: span 2; }
@media (max-width: 900px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .span-2, .row-2 { grid-column: auto; grid-row: auto; }
}

/* Post modal (native <dialog>) */
#post-modal { border: 1px solid var(--glass-border); }
#post-modal::backdrop { background: rgba(0,0,0,.72); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }

/* Photo color grade per spec: contrast(1.2) saturate(1.3) */
.graded { filter: contrast(1.2) saturate(1.3); }

/* CRT scanline overlay (~6% opacity), pointer-events off ------------------ */
.scanlines::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.06) 3px
  );
}

/* Custom neon cursor (desktop pointers only; enabled via body.neon-cursor) */
@media (hover: hover) and (pointer: fine) {
  body.neon-cursor { cursor: none; }
  #cursor {
    position: fixed; top: 0; left: 0; z-index: 70;
    width: 26px; height: 26px; margin: -13px 0 0 -13px;
    border: 1.5px solid var(--blue);
    border-radius: 50%;
    box-shadow: 0 0 12px var(--blue), inset 0 0 6px rgba(0,212,255,.4);
    pointer-events: none;
    transition: transform .12s ease, border-color .2s ease;
    will-change: transform;
  }
}

/* Animations ------------------------------------------------------------- */
/* Neon flicker: subtle, only on elements tagged .flicker */
@keyframes flicker {
  0%, 100%   { opacity: 1; }
  92%, 94%   { opacity: 1; }
  93%        { opacity: .72; }
}
.flicker { animation: flicker 6s infinite steps(1); }

/* Soft neon pulse for borders */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 14px -6px var(--glow, var(--pink)); }
  50%      { box-shadow: 0 0 22px -4px var(--glow, var(--pink)); }
}
.pulse { animation: glow-pulse 3.5s ease-in-out infinite; }

/* Drifting neon gradient blobs behind sections (lighter than particles) */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .35;
  pointer-events: none;
  z-index: 0;
}

/* Focus visibility (a11y — never removed) */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* Scroll reveal (native IntersectionObserver toggles .in) */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Drifting blob animation */
@keyframes blob-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(4%, -6%) scale(1.08); }
}
.blob.animate { animation: blob-drift 16s ease-in-out infinite; }

/* Filter + lang + sound active states */
.pill-btn {
  font-family: var(--font-pixel);
  border: 1px solid var(--glass-border);
  color: var(--muted);
  background: transparent;
  padding: .35rem .9rem;
  border-radius: 999px;
  cursor: pointer;
  transition: color .2s, border-color .2s, box-shadow .2s;
}
.pill-btn:hover { color: var(--text); }
.pill-btn.active {
  color: var(--bg);
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 0 14px -2px var(--blue);
}
[data-lang].active { color: var(--blue); text-shadow: 0 0 6px rgba(0,212,255,.5); }
#sound-toggle.active { color: var(--green); }

/* Mobile nav drawer */
@media (max-width: 860px) {
  #nav-menu {
    position: fixed; inset: 0 0 0 auto;
    width: min(80vw, 320px);
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 5rem 1.75rem 2rem;
    background: rgb(var(--scrim-rgb) / .96);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-left: 1px solid var(--glass-border);
    transform: translateX(100%);
    transition: transform .28s ease;
    z-index: 55;
  }
  #nav-menu.open { transform: none; }
}
@media (min-width: 861px) { #nav-toggle { display: none; } }

/* Night/Day compare slider */
#nd-slider { position: relative; overflow: hidden; border-radius: var(--radius); }
#nd-slider img { display: block; width: 100%; height: 100%; object-fit: cover; }
#nd-slider .nd-top { position: absolute; inset: 0; }
#nd-slider .nd-top img { position: absolute; inset: 0; }
#nd-slider input[type=range] {
  position: absolute; bottom: 12px; left: 5%; width: 90%; z-index: 4; cursor: ew-resize;
}
#nd-slider .nd-handle {
  position: absolute; top: 0; bottom: 0; width: 2px; background: var(--blue);
  box-shadow: 0 0 12px var(--blue); transform: translateX(-1px); pointer-events: none; z-index: 3;
}

/* Respect reduced motion: kill non-essential motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
  .bento > *:hover { transform: none; }
  #cursor { display: none; }
  body.neon-cursor { cursor: auto; }
}