/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: #0d0d0d; color: #fafafa; }

/* Hide the system cursor only on real pointer devices (never touch/mobile) */
@media (hover: hover) and (pointer: fine) {
  body, a, button, .photo-item, .video-card { cursor: none; }
}
/* Safety: never show the custom cursor dots on touch/coarse-pointer devices */
@media (hover: none), (pointer: coarse) {
  .cursor, .cursor-ring { display: none !important; }
}

/* ── Logo always white ── */
.nav-logo { filter: brightness(0) invert(1); opacity: 0.75; }
.nav-logo:hover { opacity: 1; }

/* ── Custom Cursor ── */
.cursor {
  position: fixed;
  width: 8px;
  height: 8px;
  background: #DC2626;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease, width 0.3s ease, height 0.3s ease, background 0.3s ease;
}
.cursor-ring {
  position: fixed;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9997;
  transform: translate(-50%, -50%);
  transition: transform 0.18s ease, width 0.3s ease, height 0.3s ease, border-color 0.3s ease;
}
body.cursor-hover .cursor { width: 48px; height: 48px; background: rgba(220,38,38,0.2); }
body.cursor-hover .cursor-ring { width: 48px; height: 48px; border-color: #DC2626; opacity: 0; }

/* ── Preloader ── */
#preloader {
  transition: opacity 0.8s ease, visibility 0.8s ease;
}
#preloader.done { opacity: 0; visibility: hidden; }

.preloader-grid {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,0.1);
  position: relative;
  margin: 0 auto;
}
.preloader-grid::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(220,38,38,0.4);
  animation: rotateGrid 2s linear infinite;
}
@keyframes rotateGrid {
  to { transform: rotate(360deg); }
}

.preloader-bar {
  width: 120px;
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 0 auto;
  overflow: hidden;
}
.preloader-progress {
  height: 100%;
  width: 0%;
  background: #DC2626;
  animation: loadBar 1.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes loadBar {
  0%   { width: 0%; }
  60%  { width: 70%; }
  100% { width: 100%; }
}

/* ── Hero ── */
#hero { background: #0d0d0d; }

.hero-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(5rem, 18vw, 18rem);
  line-height: 0.88;
  letter-spacing: -0.02em;
}

.hero-name-line {
  display: block;
  transform: translateY(110%);
  opacity: 0;
}
.hero-name-line.revealed {
  animation: slideUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-name-line:nth-child(2).revealed {
  animation-delay: 0.12s;
}

@keyframes slideUp {
  to { transform: translateY(0); opacity: 1; }
}

/* ── Scroll CTA ── */
.scroll-line { animation: scrollPulse 2s ease-in-out infinite; }
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(1); opacity: 0.4; }
  50%       { transform: scaleY(1.4); opacity: 1; }
}

/* ── Reveal on scroll ── */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--delay, 0s);
}
.reveal-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ── Photo Masonry ── */
.photo-masonry {
  column-count: 3;
  column-gap: 10px;
}
.photo-item {
  position: relative;
  overflow: hidden;
  background: #141414;
  margin-bottom: 10px;
  break-inside: avoid;
}
.photo-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.photo-item:hover img { transform: scale(1.04); }

/* ── Video Grid ── */
.video-card { position: relative; }
.video-card .aspect-video { position: relative; }
.play-btn { transition: opacity 0.3s ease; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
#lightbox.flex,
#videoModal.flex { animation: fadeIn 0.3s ease; }

/* Darken (and blur) the page behind the modals.
   ID specificity here is reliable — the Tailwind bg-black/96 utility was
   rendering transparent on the CDN build, leaving the background undimmed. */
#lightbox,
#videoModal {
  background: rgba(8, 8, 8, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ── Hero profile cutout ── */
.hero-profile {
  opacity: 0;
  transition: opacity 1.2s ease 1s;
}
.hero-profile.visible { opacity: 1; }

/* ── Navbar ── */
#navbar { transition: padding 0.4s ease, background 0.4s ease; }
#navbar.scrolled {
  padding-top: 12px;
  padding-bottom: 12px;
  background: rgba(13,13,13,0.9);
  backdrop-filter: blur(12px);
  mix-blend-mode: normal;
}
#navbar.scrolled .nav-link,
#navbar.scrolled span { color: rgba(255,255,255,0.6); }

/* ── Noise Overlay (cinematic grain) ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9990;
  opacity: 0.35;
}

/* ── Section divider lines ── */
section { position: relative; }

/* ══════════════════════════════════
   RESPONSIVE
══════════════════════════════════ */

/* ── Mobile hamburger (art side, injected by main.js) ── */
.art-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 30px;
  height: 30px;
  padding: 0;
  background: none;
  border: 0;
}
.art-hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: #fff;
  transition: transform .3s ease, opacity .2s ease;
}
.art-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.art-hamburger.open span:nth-child(2) { opacity: 0; }
.art-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.art-mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(13,13,13,0.97);
  backdrop-filter: blur(10px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
}
.art-mobile-menu.open { display: flex; }
.art-mobile-menu a {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  transition: color .25s ease;
}
.art-mobile-menu a:hover, .art-mobile-menu a.active { color: #fff; }

/* Tablet — ≤ 900px */
@media (max-width: 900px) {
  /* Nav: hide "ARCHIVED BY DRW" label */
  #navbar > span:last-child { display: none; }

  /* Swap inline nav links for the hamburger (only when JS injected it) */
  html.art-js #navbar > div { display: none; }
  html.art-js .art-hamburger { display: inline-flex; }

  /* Hero name */
  .hero-name { font-size: clamp(4rem, 20vw, 10rem); }

  /* Hide profile cutout on tablet so it doesn't overlap text.
     !important is required: Tailwind's .flex utility (injected after this file)
     has equal specificity and would otherwise keep it visible. */
  .hero-profile { display: none !important; }

  /* Masonry: 2 columns */
  .photo-masonry { column-count: 2; column-gap: 8px; }
  .photo-item { margin-bottom: 8px; }

  /* Mini index on home — stack into single column */
  .page-index-grid { grid-template-columns: 1fr; }
  .page-index-grid > a { border-left: none !important; }
  .page-index-grid > a + a { border-top: 1px solid rgba(255,255,255,0.05); }
}

/* Mobile — ≤ 640px */
@media (max-width: 640px) {
  /* Nav: compress padding, hide label, allow wrap */
  #navbar { padding-left: 16px; padding-right: 16px; padding-top: 14px; padding-bottom: 14px; }
  #navbar > span:last-child { display: none; }
  /* Tighten nav links so they fit one row */
  #navbar > div.flex { gap: 14px; }

  /* Mini page-index links: tighter padding + smaller heading so the arrow never overflows */
  .page-index-link { padding-left: 20px !important; padding-right: 20px !important; }
  .page-index-link h3 { font-size: 1.75rem; }

  /* Hero */
  .hero-name { font-size: clamp(3.5rem, 22vw, 7rem); }
  /* Sub flex stacks vertically */
  #heroSub { flex-direction: column; align-items: flex-start; gap: 24px; }

  /* Generic horizontal padding tighten */
  section.px-10, footer.px-10 { padding-left: 20px; padding-right: 20px; }
  .px-10 { padding-left: 20px; padding-right: 20px; }

  /* Masonry: single column on phones */
  .photo-masonry { column-count: 1; }

  /* Page headers */
  section.pt-40 { padding-top: 100px; }

  /* Footer: center on mobile */
  footer.flex { flex-direction: column; gap: 4px; align-items: center; text-align: center; padding: 16px; }
  footer.border-t { padding: 14px 20px; }
}