/* Production home dark theme.
   The existing motion scripts paint several animated layers in light-theme
   RGB values. Those layers are inverted at their section boundary so every
   authored timing, alpha and scramble state is preserved without duplicating
   animation logic. */

body.home-dark {
  --bg: #000;
  --fg: #fff;
  --muted: rgba(255, 255, 255, .60);
  --line: rgba(255, 255, 255, .18);
  background: #000;
  color: #fff;
  color-scheme: dark;
}

html,
body.home-dark,
body.home-dark .shell,
body.home-dark .hero-sequence,
body.home-dark .hero-sticky,
body.home-dark .intro-block,
body.home-dark .philosophy-tail-space,
body.home-dark .principles-section,
body.home-dark .selected-work,
body.home-dark .footer,
body.home-dark .filip-footer {
  background: #000;
}

body.home-dark .top,
body.home-dark .principles-section,
body.home-dark .principles-intro-ko,
body.home-dark .principle-ko,
body.home-dark .footer a,
body.home-dark .footer p {
  color: #fff;
}

body.home-dark .mini-label,
body.home-dark .showcase-meta,
body.home-dark .footer h3 {
  color: rgba(255, 255, 255, .60);
}

body.home-dark .footer a,
body.home-dark .footer p {
  color: rgba(255, 255, 255, .84);
}

body.home-dark .showcase-project,
body.home-dark .principle-card,
body.home-dark .footer-grid {
  border-color: rgba(255, 255, 255, .18);
}

body.home-dark .showcase-project:first-child {
  border-top-color: transparent;
}

body.home-dark .placeholder {
  border-color: rgba(255, 255, 255, .30);
  background: #000;
}

body.home-dark .placeholder::before,
body.home-dark .placeholder::after {
  background: rgba(255, 255, 255, .20);
}

body.home-dark .showcase-project:hover .placeholder {
  background: #080808;
}

/* Representative visuals for archived projects. These are concept/portfolio imagery, not source screenshots. */
body.home-dark #project-nbt .placeholder,
body.home-dark #project-trenbe .placeholder,
body.home-dark #project-yanolja .placeholder,
body.home-dark #project-coupang .placeholder,
body.home-dark #project-vinyl .placeholder{
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}
body.home-dark #project-nbt .placeholder{background-image:url('./assets/image/stepup.webp')}
body.home-dark #project-trenbe .placeholder{background-image:url('./assets/image/trenbe.webp')}
body.home-dark #project-yanolja .placeholder{background-image:url('./assets/image/yanolja.webp')}
body.home-dark #project-coupang .placeholder{background-image:url('./assets/image/coupang.webp')}
body.home-dark #project-vinyl .placeholder{background-image:url('./assets/image/vinyl.webp')}
body.home-dark #project-nbt .placeholder::before,
body.home-dark #project-nbt .placeholder::after,
body.home-dark #project-trenbe .placeholder::before,
body.home-dark #project-trenbe .placeholder::after,
body.home-dark #project-yanolja .placeholder::before,
body.home-dark #project-yanolja .placeholder::after,
body.home-dark #project-coupang .placeholder::before,
body.home-dark #project-coupang .placeholder::after,
body.home-dark #project-vinyl .placeholder::before,
body.home-dark #project-vinyl .placeholder::after{display:none}
body.home-dark #project-nbt:hover .placeholder,
body.home-dark #project-trenbe:hover .placeholder,
body.home-dark #project-yanolja:hover .placeholder,
body.home-dark #project-coupang:hover .placeholder,
body.home-dark #project-vinyl:hover .placeholder{background-color:#000}

/* Light-canvas animation layers: black RGB becomes white while alpha and
   visibility remain exactly as the existing JS renders them. */
body.home-dark .hero-state,
body.home-dark .philosophy-statements,
body.home-dark .showcase-project h3 {
  filter: invert(1);
}

body.home-dark .hero-state,
body.home-dark .showcase-project h3 {
  color: #111;
}

/* Principles already use white animation RGB; only their hierarchy changes. */
body.home-dark .principle-en {
  color: rgba(255, 255, 255, .70);
}

body.home-dark ::selection {
  background: #fff;
  color: #000;
}