/* ── Reset ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── Screen-reader-only: SEO fallback content crawlers can read */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ── Design Tokens ── */
:root {
  --grid-unit: 14px;
  --grid-color: rgba(0, 0, 0, 0.06);
  --bg: #f5f4f0;
  --ink: #1a1a1a;
  --ink-light: #6b6b6b;
  --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono: 'SF Mono', 'Courier New', monospace;
  /* Safe-area insets for iOS notch + home indicator. Fall back to 0 on devices
     without them, so non-iOS gets no extra spacing. */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* ── Base ── */
html {
  font-size: 16px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
}

body {
  height: 100vh;
  overflow: hidden;
  position: relative;
}

/* ── Architectural Grid Overlay ── */
.grid-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3000;
  background-image:
    linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
  background-size: var(--grid-unit) var(--grid-unit);
}

/* ── Header ── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1100;
  padding: calc(var(--grid-unit) * 3) calc(var(--grid-unit) * 4);
}

.logo {
  font-size: calc(var(--grid-unit) * 3);
  font-weight: 300;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
  mix-blend-mode: difference;
}

.tagline {
  margin-top: var(--grid-unit);
  font-family: var(--font-mono);
  font-size: calc(var(--grid-unit) * 1.2);
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.05em;
  mix-blend-mode: difference;
}

/* ── Intro ── */
.intro {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.intro__logo {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.8s ease, transform 0.6s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.intro.is-visible .intro__logo {
  opacity: 1;
  transform: scale(1);
}

.intro.is-hidden {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease 0.3s;
}

.intro__logo {
  width: 100vw;
  height: 100vh;
}

.intro__enter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.3em;
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.intro.is-hovered .intro__enter {
  opacity: 1;
}

@media (hover: none) {
  .intro__enter {
    opacity: 1;
  }
}

.intro__logo {
  position: relative;
}

.intro__logo svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: opacity 0.4s ease;
}

.intro__logo svg {
  color: var(--ink);
  width: 100%;
  height: 100%;
}

/* ── Loading States ── */
.nav-arrows,
.nav-envelope,
.wire-logo {
  opacity: 0;
}

.nav-arrows.is-loaded,
.nav-envelope.is-loaded,
.wire-logo.is-loaded {
  opacity: 1;
  transition: opacity 0.5s ease;
}

.slideshow:not(.has-entered) .slide {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.slideshow:not(.has-entered) .slide.is-loaded {
  opacity: 1;
  transform: scale(1);
}

/* ── Wire Logo ── */
.wire-logo {
  position: fixed;
  top: calc(var(--grid-unit) * 2 + var(--safe-top));
  left: calc(var(--grid-unit) * 2 + var(--safe-left));
  z-index: 3200;
  width: 220px;
  pointer-events: none;
  color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.wire-logo svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

/* ── Slideshow ── */
.slideshow {
  position: fixed;
  inset: 0;
  z-index: 3100;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}

.slideshow__track {
  pointer-events: auto;
}

.slideshow.is-ready {
  visibility: visible;
}

.slideshow__track {
  display: flex;
  height: 100%;
  align-items: center;
  will-change: transform;
}

.slide {
  flex: 0 0 auto;
  height: 100vh;
  width: calc(100vh * 9 / 16);
  display: flex;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
}

.slideshow.is-grabbing,
.slideshow.is-grabbing .slide,
.slideshow.is-grabbing .slideshow__track {
  cursor: grabbing;
}

.slide {
  position: relative;
}

.slide img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.slide::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, transparent 0%, rgba(0,0,0,0.2) 100%);
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.slide:hover::after {
  opacity: 0;
}

@keyframes cover-pan {
  0%   { object-position: 50% 50%; }
  25%  { object-position: 100% 50%; }
  75%  { object-position: 0% 50%; }
  100% { object-position: 50% 50%; }
}

.slide__label {
  position: absolute;
  bottom: calc(var(--grid-unit) * 2);
  left: calc(var(--grid-unit) * 2);
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.slide__title {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.slide__type {
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

/* ── Project Detail View ── */
.project-detail {
  position: fixed;
  inset: 0;
  z-index: 3500;
  pointer-events: none;
  opacity: 0;
}

.project-detail.is-open {
  pointer-events: auto;
  opacity: 0;
}

.project-detail.is-open.is-revealed {
  opacity: 1;
  transition: opacity 0.4s ease;
}

.project-detail__slideshow {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  cursor: grab;
  background: var(--bg);
}

.project-detail__slideshow.is-dragging {
  cursor: grabbing;
}

.project-detail__track {
  display: flex;
  height: 100%;
  align-items: center;
  will-change: transform;
}

.project-detail__slide {
  flex: 0 0 auto;
  height: 100vh;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.project-detail__slide.is-popped {
  opacity: 1;
  transform: scale(1);
}

.project-detail__slide img {
  height: 100vh;
  width: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Lazy image reveal — bouncy pop like homepage entrance */
.lazy-img {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.3, 0.64, 1);
}

.lazy-img.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ── Torch info layer: sits behind slideshow, revealed by mask ── */
.project-detail__info {
  position: absolute;
  bottom: calc(var(--grid-unit) * 2 + var(--safe-bottom));
  left: calc(var(--grid-unit) * 2 + var(--safe-left));
  width: 520px;
  z-index: 1;
}

.project-detail__info-body {
  column-count: 2;
  column-gap: calc(var(--grid-unit) * 3);
  font-size: 13px;
  font-weight: 400;
  line-height: var(--grid-unit);
  color: var(--ink);
  text-align: justify;
}

.project-detail__info-credits {
  margin-top: var(--grid-unit);
  font-size: 13px;
  font-weight: 400;
  line-height: var(--grid-unit);
  color: var(--ink);
  break-before: avoid;
}


.project-detail__hint {
  position: fixed;
  bottom: calc(var(--grid-unit) * 2 + var(--safe-bottom));
  left: calc(var(--grid-unit) * 2 + var(--safe-left));
  z-index: 3600;
  height: 70px;
  width: auto;
  color: #fff;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.project-detail__hint svg {
  width: auto;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}

.project-detail__close {
  position: fixed;
  top: calc(var(--grid-unit) * 2 + var(--safe-top));
  right: calc(var(--grid-unit) * 2 + var(--safe-right));
  z-index: 3600;
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  width: 40px;
  pointer-events: none;
  height: 40px;
}

.project-detail__close svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}

.project-detail.is-open .project-detail__close {
  pointer-events: auto;
}

.project-detail__close:hover {
  opacity: 0.8;
}

.project-detail__nav {
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  z-index: 3600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 calc(var(--grid-unit) * 2);
  pointer-events: none;
}

.project-detail__prev,
.project-detail__next {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #fff;
  width: 70px;
  height: 50px;
  pointer-events: none;
}

.project-detail__prev svg,
.project-detail__next svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}

.project-detail.is-open .project-detail__prev,
.project-detail.is-open .project-detail__next {
  pointer-events: auto;
}

.project-detail__prev:hover,
.project-detail__next:hover {
  opacity: 0.8;
}


/* ── Contact View ── */
.contact {
  position: fixed;
  inset: 0;
  z-index: 3500;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
}

.contact.is-open {
  pointer-events: auto;
  opacity: 0;
}

.contact.is-open.is-revealed {
  opacity: 1;
  transition: opacity 0.5s ease;
}

.contact__content {
  max-width: 240px;
  width: 240px;
  display: flex;
  flex-direction: column;
}

.contact__logo {
  width: 100%;
  margin-bottom: calc(var(--grid-unit) * 2);
}

.contact__logo svg {
  width: 100%;
  height: auto;
}

.contact__logo svg {
  color: var(--ink);
  overflow: visible;
}

.contact__bio {
  font-size: 13px;
  font-weight: 400;
  line-height: var(--grid-unit);
  color: var(--ink);
  margin-bottom: calc(var(--grid-unit) * 2);
  text-align: justify;
}

.contact__links {
  display: flex;
  justify-content: space-between;
}

.contact__links a {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: var(--grid-unit);
  color: var(--ink);
  text-decoration: none;
}

.contact__links a:hover {
  text-decoration: underline;
}

.contact__close {
  position: fixed;
  top: calc(var(--grid-unit) * 2 + var(--safe-top));
  right: calc(var(--grid-unit) * 2 + var(--safe-right));
  z-index: 3600;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  width: 40px;
  height: 40px;
}

.contact__close svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.contact__close:hover {
  opacity: 0.8;
}

/* ── Contact Envelope Button ── */
.nav-envelope {
  position: fixed;
  top: calc(var(--grid-unit) * 2 + var(--safe-top));
  right: calc(var(--grid-unit) * 2 + var(--safe-right));
  z-index: 3200;
  width: 80px;
  height: 60px;
  color: #fff;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.nav-envelope svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.nav-envelope.is-loaded:hover {
  opacity: 0.8;
}

/* ── Navigation Arrows ── */
.nav-arrows {
  position: fixed;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  z-index: 3200;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 calc(var(--grid-unit) * 2 + var(--safe-right)) 0 calc(var(--grid-unit) * 2 + var(--safe-left));
  pointer-events: none;
}

.nav-arrow {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #fff;
  width: 70px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.nav-arrow svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.nav-arrow:hover {
  opacity: 0.8;
}

/* ── Mobile: full-viewport slides, landscape covers pan ken-burns style ──
   Placed at the end so these rules override the desktop declarations
   above (equal specificity → later declaration wins). */
@media (max-width: 768px) {
  .slide {
    width: 100vw;
    height: 100vh;
  }
  .slide.is-landscape img {
    animation: cover-pan 40s ease-in-out infinite;
  }

  /* Detail view: override the per-image aspect-sized slot set via inline width
     so each image fills the viewport and landscape images pan the same way. */
  .project-detail__slide {
    width: 100vw !important;
  }
  .project-detail__slide img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: center;
  }
  .project-detail__slide.is-landscape img {
    animation: cover-pan 40s ease-in-out infinite;
  }
}