@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700;850;900&display=swap');

:root {
  --font-sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;

  /* Raw Brutalist Colors matching Kinetic Noir Theme with User Custom Specs */
  --color-brand-surface: #191919;
  --color-brand-surface-card: #242424;
  --color-brand-orange: #D93300;
  --color-brand-orange-hover: #BF2D00;
  --color-brand-orange-light: #FCFCE8;
  --color-brand-secondary: #FCFCE8;
  --color-brand-text: #FCFCE8;
  --color-brand-text-muted: #A3A395;
  --color-brand-outline: #D93300;
}

body {
  background-color: var(--color-brand-surface);
  color: var(--color-brand-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  height: var(--stable-vh, 100dvh);
}

/* Scroll Snap custom utilities */
.scroll-container {
  height: 100vh;
  height: 100dvh;
  height: var(--stable-vh, 100dvh);
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y mandatory;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

.scroll-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

.scroll-section {
  height: 100vh; /* fallback */
  height: 100dvh; /* fallback */
  height: var(--stable-vh, 100dvh); /* Mobile Chrome fix */
  width: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
}

/* Unified CRT Scanline styling overlay */
.scanline-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0; /* Over background images (-z-10, -z-20) but under all active layout items, footer, and nav bars */
  overflow: hidden;
}

.scanline-overlay::before {
  content: " ";
  display: block;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  background-size: 100% 4px, 6px 100%;
  pointer-events: none;
}

/* Section background standard */
.section-bg {
  display: block;
}

/* Custom animation durations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.reveal-text {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-text.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Scrollbar styling for modal timeline scroll area */
.scrollbar-thin::-webkit-scrollbar {
  width: 4px;
}
.scrollbar-thin::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.03);
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: var(--color-brand-orange);
  border-radius: 2px;
}

/* User-requested focus elements to place specifically over the CRT effect */
nav:nth-of-type(1) > button#branding-logo:nth-of-type(1) > img:nth-of-type(1) {
  position: relative;
  z-index: 60 !important;
}

nav:nth-of-type(1) > div:nth-of-type(1) > button#nav-branding:nth-of-type(1) {
  position: relative;
  z-index: 60 !important;
}

nav:nth-of-type(1) > div:nth-of-type(1) > button#nav-interface:nth-of-type(2) {
  position: relative;
  z-index: 60 !important;
}

nav:nth-of-type(1) > div:nth-of-type(1) > button#nav-print:nth-of-type(3) {
  position: relative;
  z-index: 60 !important;
}

nav:nth-of-type(1) > div:nth-of-type(1) > button#nav-worked-for:nth-of-type(4) {
  position: relative;
  z-index: 60 !important;
}

main#scroll-container:nth-of-type(1) > section:nth-of-type(1) > div:nth-of-type(3) > div#hero-title-container:nth-of-type(1) > div#hero-title-slider:nth-of-type(1) > div:nth-of-type(4) {
  position: relative;
  z-index: 60 !important;
}

main#scroll-container:nth-of-type(1) > section:nth-of-type(1) > div:nth-of-type(3) > p:nth-of-type(1) {
  position: relative;
  z-index: 60 !important;
  max-width: 100%;
  font-size: 18px !important;
}

h3 {
  font-size: 18px !important;
}



/* 
 * Interactive Spotlight Overlay for backgrounds 
 * Keeps base image dark (85% black) elsewhere, reveals base image (20% black) under the cursor.
 */
.spotlight-mask::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: #000;
  -webkit-mask-image: radial-gradient(
    circle var(--radius, 250px) at var(--mouse-x, -1000px) var(--mouse-y, -1000px),
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.7) 100%
  );
  mask-image: radial-gradient(
    circle var(--radius, 250px) at var(--mouse-x, -1000px) var(--mouse-y, -1000px),
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.7) 100%
  );
  will-change: mask-image, -webkit-mask-image;
}

main#scroll-container:nth-of-type(1) > section:nth-of-type(1) > div:nth-of-type(2) > p:nth-of-type(1) {
  font-size: 18px !important;
}

/* Safe areas, mobile header/footer heights and vertical centering */
nav.fixed,
#mobile-menu-header {
  padding-top: calc(1rem + env(safe-area-inset-top, 0px)) !important;
  padding-bottom: 1rem !important;
}

footer.fixed {
  padding-top: 0.625rem !important;
  padding-bottom: calc(0.625rem + env(safe-area-inset-bottom, 0px)) !important;
}

@media (min-width: 768px) {
  nav.fixed,
  #mobile-menu-header {
    padding-top: calc(1.5rem + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 1.5rem !important;
  }
}

/* Screen Pagination indicator height fallback */
.fixed.right-0.top-0 {
  height: 100vh !important;
  height: 100dvh !important;
}

/* Mobile-specific layout rebalancing and safe constraints */
@media (max-width: 767px) {
  .scroll-section {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
    justify-content: flex-end !important;
  }
  
  /* Anchor to bottom just above footer with consistent, desktop-mirroring gap spacing */
  .scroll-section > div.w-full {
    padding-bottom: calc(44px + 1.5rem + env(safe-area-inset-bottom, 0px)) !important;
    margin-top: 0px !important;
    gap: 1.5rem !important;
  }

  /* Compact hero elements to guarantee they fit in initial viewport */
  #hero-title-container {
    height: 60px !important;
  }
  
  #hero-title-container [data-i18n^="hero.ticker"] {
    height: 60px !important;
    font-size: 3.75rem !important; /* text-6xl (60px) */
    line-height: 60px !important;
  }
  
  #hero-heading-wrapper h1[data-i18n="hero.designer"] {
    font-size: 3.75rem !important; /* text-6xl (60px) */
    line-height: 1 !important;
  }

  /* Compact section headers */
  .scroll-section h1 {
    font-size: 3.75rem !important; /* text-6xl */
    line-height: 1 !important;
  }

  /* Adjust description paragraph font and alignment */
  .scroll-section p[data-i18n="hero.desc"],
  main#scroll-container:nth-of-type(1) > section:nth-of-type(1) > div:nth-of-type(2) > div:nth-of-type(2) > p:nth-of-type(1) {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
}


/* Custom Cursor styling */
@media (hover: hover) and (pointer: fine) {
  body, a, button, [role="button"], input, select, textarea, .cursor-pointer, .nav-anchor {
    cursor: none !important;
  }
}

#custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--color-brand-orange);
  pointer-events: none;
  z-index: 999999;
  opacity: 0;
  transform: translate3d(var(--cx, -100px), var(--cy, -100px), 0) translate(-50%, -50%);
  transition: width 0.15s ease-out, height 0.15s ease-out, background-color 0.15s ease-out, border 0.15s ease-out, opacity 0.15s ease-out;
  will-change: transform, width, height, opacity;
}

#custom-cursor.cursor-hover {
  width: 24px;
  height: 24px;
  background-color: transparent;
  border: 2px solid var(--color-brand-orange);
}

#custom-cursor.cursor-over-orange {
  background-color: white;
}

#custom-cursor.cursor-hover.cursor-over-orange {
  background-color: transparent;
  border: 2px solid white;
}