/* ============================================================
   PETRA VOICE — design tokens + base (v3)
   ============================================================ */
:root {
  /* Palette defaults (bone) — overridden by JS palette switcher */
  --paper:   #efe9dd;
  --paper-2: #e5dccb;
  --paper-3: #d8cdb8;
  --ink:     #1a1812;
  --ink-2:   #2e2a22;
  --ash:     #6e6557;
  --mist:    #aca395;
  --vermilion: #c9462b;

  /* Orb accent (used in Nav logo, cursor spot) */
  --orb-peach: #f3b89a;

  /* Type */
  --display: 'Fraunces', 'Georgia', serif;
  --mono:    'JetBrains Mono', 'Menlo', monospace;
  --jp:      'Shippori Mincho', serif;

  /* Easing */
  --e-out:  cubic-bezier(.16,1,.3,1);
  --e-soft: cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--paper);
}
body {
  background: transparent;
  color: var(--ink);
  font-family: var(--display);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  cursor: none;
}

/* Film grain — large coarse particles */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  opacity: .48;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.68' numOctaves='4' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .45 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

img { max-width: 100%; display: block; user-select: none; -webkit-user-drag: none; }
a   { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: none; }
section { position: relative; width: 100%; }

/* ---- Utilities ---- */
.mono-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ash);
}

/* ---- Reveal on scroll ---- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  filter: blur(8px);
  transition: opacity 1.2s var(--e-out), transform 1.2s var(--e-out), filter 1.2s var(--e-out);
}
.reveal.in { opacity: 1; transform: none; filter: none; }
.reveal.delay-1 { transition-delay: .1s; }
.reveal.delay-2 { transition-delay: .2s; }
.reveal.delay-3 { transition-delay: .32s; }
.reveal.delay-4 { transition-delay: .44s; }

/* ---- Section fade helpers ---- */
.section-fade-bottom {
  position: absolute; bottom: 0; left: 0; right: 0; height: 200px;
  background: linear-gradient(to bottom, transparent, var(--paper));
  pointer-events: none; z-index: 5;
}
.section-fade-top {
  position: absolute; top: 0; left: 0; right: 0; height: 160px;
  background: linear-gradient(to top, transparent, var(--paper));
  pointer-events: none; z-index: 5;
}

/* ---- Custom cursor ---- */
.cursor-dot {
  position: fixed;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink);
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  transition: width .25s var(--e-out), height .25s var(--e-out), opacity .25s;
  mix-blend-mode: difference;
}
.cursor-dot.hover { width: 32px; height: 32px; }
.cursor-spot {
  position: fixed;
  width: 320px; height: 320px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 7999;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(243,184,154,.22) 0%, rgba(201,70,43,.06) 50%, transparent 72%);
  filter: blur(50px);
  transition: opacity .4s;
}
@media (hover: none) {
  html, body, button, a { cursor: auto; }
  .cursor-dot, .cursor-spot { display: none; }
}

/* ---- Lightbox ---- */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(15,13,10,.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 8000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .5s var(--e-out);
}
.lightbox.open { opacity: 1; pointer-events: all; }
.lightbox img {
  max-width: 80vw; max-height: 82vh;
  object-fit: contain; border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  transform: scale(.94);
  transition: transform .8s var(--e-out);
}
.lightbox.open img { transform: scale(1); }
.lightbox-meta {
  position: absolute; bottom: 32px; left: 32px; right: 32px;
  display: flex; justify-content: space-between;
  color: var(--paper); font-family: var(--mono); font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; opacity: .7;
}
.lightbox-close {
  position: absolute; top: 28px; right: 28px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .25em; color: var(--paper);
  text-transform: uppercase; opacity: .8;
  background: none; border: none; cursor: none;
}

/* ---- Hero v3: crossfade image carousel ---- */
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0; z-index: 0;
  transform: scale(1.04);
  transition: opacity 1.6s ease, transform 9s linear;
}
.hero-slide.prev {
  opacity: 1; z-index: 1;
}
.hero-slide.active {
  opacity: 1; z-index: 2;
  transform: scale(1);
}

/* ---- Them v3: blue dreamworld ---- */
.them-card {
  position: absolute;
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 8px 32px rgba(11,26,66,.22),
    0 2px 8px rgba(11,26,66,.14);
  transition: transform 1.2s var(--e-out), box-shadow .4s;
}
.them-card img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.them-card:hover {
  box-shadow:
    0 20px 60px rgba(11,26,66,.35),
    0 4px 16px rgba(11,26,66,.2);
  z-index: 100 !important;
}

/* Cloud float animation */
@keyframes cloudDrift {
  0%   { transform: translate(0px, 0px) scale(1); }
  20%  { transform: translate(18px, -14px) scale(1.015); }
  45%  { transform: translate(35px, 8px) scale(0.985); }
  65%  { transform: translate(12px, 22px) scale(1.01); }
  80%  { transform: translate(-10px, 10px) scale(0.99); }
  100% { transform: translate(0px, 0px) scale(1); }
}

/* Card float animation */
@keyframes cardFloat {
  0%,100% { transform: translateY(0px); }
  30%      { transform: translateY(-10px) rotate(.4deg); }
  60%      { transform: translateY(-18px); }
  80%      { transform: translateY(-8px) rotate(-.3deg); }
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 0; }

/* ---- Selection ---- */
::selection { background: rgba(217,156,176,.55); color: var(--ink); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {
  /* Nav — hide status on tablet */
  .nav-status { display: none !important; }
  .nav-list { gap: 18px !important; }
  .site-nav { padding: 16px 24px !important; }
}

@media (max-width: 768px) {
  /* Nav */
  .site-nav { padding: 14px 20px !important; }
  .nav-logo-text { display: none !important; }
  .nav-list { gap: 12px !important; }

  /* Hero */
  .hero-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    bottom: 48px !important;
    left: 20px !important;
    right: 20px !important;
    gap: 16px !important;
  }

  /* Them */
  #them { padding: 160px 0 0 !important; }
  .them-cards-wrap { display: none !important; }

  /* Works */
  .works-inner { padding: 80px 20px 40px !important; }
  .works-img-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Prints */
  #prints { padding: 60px 20px !important; }
  .prints-grid { grid-template-columns: 1fr !important; }

  /* Commission */
  .commission-pad-1 { padding: 60px 20px 40px !important; }
  .commission-pad-2 { padding: 40px 20px 60px !important; }
  .commission-grid-1 { grid-template-columns: 1fr !important; gap: 32px !important; }
  .commission-grid-2 { grid-template-columns: 1fr !important; gap: 40px !important; }

  /* About */
  #about { padding: 80px 20px !important; }
  .about-grid-v3 {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }
  .about-grid-v3 > div:first-child {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 3/4 !important;
  }

  /* Footer */
  #footer { padding: 48px 20px 36px !important; }
  .footer-grid-v3 { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
}

@media (max-width: 480px) {
  /* Nav — hide all links */
  .nav-list { display: none !important; }

  /* Works */
  .works-img-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Footer */
  .footer-grid-v3 { grid-template-columns: 1fr !important; }

  /* Lightbox */
  .lightbox img { max-width: 94vw !important; max-height: 70vh !important; }
  .lightbox-meta { left: 16px !important; right: 16px !important; bottom: 16px !important; }
  .lightbox-close { top: 16px !important; right: 16px !important; }
}