/* ============================================================
   Attraction Research Technology — main.css
   ============================================================ */

/* BLACKBOOK: Font paths are relative to this CSS file's location
   (assets/css/), so ../fonts/ resolves to assets/fonts/ at root. */

@font-face {
  font-family: 'Switzer';
  src: url('../fonts/Switzer-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Switzer';
  src: url('../fonts/Switzer-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ── Reset & Base ─────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Switzer', sans-serif;
  font-weight: 300;
  background: #FFFFFF;
  color: #111111;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

/* ── Navigation ───────────────────────────────────────────── */

nav {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 32px 48px 0 0;
}

nav a {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #111111;
  transition: color 0.15s ease;
}

nav a:hover,
nav a.active {
  color: #3B0082;
}

.art-name {
  color: #3B0082;
}

/* ── Viewport 1 — Home Hero ───────────────────────────────── */

.viewport-1 {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.wordmark-wrap {
  position: sticky;
  top: 40px;
  z-index: 10;
  text-align: center;
}

.wordmark-img {
  width: clamp(280px, 40vw, 560px);
  height: auto;
  display: block;
  margin: 0 auto;
  transition: width 0.9s ease;
}

.wordmark-img.shrunk {
  width: 200px;
}

.micro-instruction {
  margin-top: 18px;
  font-size: 17px;
  font-weight: 300;
  color: #111111;
  opacity: 0;
  letter-spacing: 0.08em;
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
  transition: opacity 0.5s ease;
}

.micro-instruction.visible {
  opacity: 0.75;
}

.start-btn {
  font-family: 'Switzer', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #3B0082;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-top: 24px;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, opacity 0.3s ease;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.start-btn:hover {
  border-bottom-color: #3B0082;
}

.start-btn:disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.start-btn.hidden {
  opacity: 0;
  pointer-events: none;
  display: none;
}

.illusion-disclaimer {
  font-size: 17px;
  font-weight: 300;
  color: #3B0082;
  opacity: 0;
  letter-spacing: 0.08em;
  margin-top: 8px;
  line-height: 1.5;
  transition: opacity 0.5s ease;
}

.illusion-disclaimer.visible {
  opacity: 0.75;
}

/* ── FFDE (desktop ≥900px) ────────────────────────────────── */

.ffde-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.ffde-column {
  position: absolute;
  /* BLACKBOOK: calc(50% - 70px) corrects for the wordmark-wrap being flex-centered
     as a whole unit (logo + chevron + instruction + disclaimer). The logo center sits
     ~70px above the wordmark-wrap's geometric center, so faces must shift up to match. */
  top: calc(50% - 70px);
  transform: translateY(-40%);
}

/* BLACKBOOK: Inner edge uses max(125px, 258px - 10vw).
   258px = 6° eccentricity at 65cm desktop (the research minimum for reliable FFDE).
   10vw = half of the 20vw face width, so face CENTER stays at exactly 6° across
   all desktop widths ≥900px. The 125px floor keeps a ~25px gap from the 200px
   shrunk wordmark (100px half + 25px buffer) on very large screens. */
.ffde-column.left  { right: calc(50% + max(100px, 258px - 13vw)); }
.ffde-column.right { left:  calc(50% + max(100px, 258px - 13vw)); }

.ffde-face {
  /* BLACKBOOK: 12vw ≈ 4° at 65cm desktop — within research-validated face size range.
     Inner edge is 18vw from center (6°), so face center sits at 24vw = 8° eccentricity.
     Faces are intentionally smaller than the eccentricity gap; research confirms image
     size matters less than eccentricity position for FFDE strength. */
  /* BLACKBOOK: 26vw per layout spec (30% increase over 20vw baseline).
     Eye line (top 40%) aligns with logo center via column top: calc(50% - 70px).
     At 65cm desktop 1352px, face center ≈ 7° eccentricity — within 6–8° sweet spot. */
  width: clamp(104px, 26vw, 390px);
  height: clamp(104px, 26vw, 390px);
  max-height: 90vh;
  object-fit: cover;
  display: block;
  opacity: 0;
  /* transition is only for the initial reveal — once cycling begins opacity
     stays at 1 and only src is swapped, so instant cut is preserved. */
  transition: opacity 0.6s ease;
}

/* ── MIB (mobile <900px) ──────────────────────────────────── */

.mib-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  display: none;
}

.mib-field {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(72vw, 72vh);
  height: min(72vw, 72vh);
  transform: translate(-50%, -50%);
  animation: mib-rotate 5s linear infinite;
}

@keyframes mib-rotate {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.mib-dot {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #3B0082;
  opacity: 0.3;
  /* BLACKBOOK: Dots are positioned by JS buildMIBField() to keep
     HTML clean and allow programmatic grid generation. */
}

.mib-target {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #FFD600;
  z-index: 6;
  /* BLACKBOOK: Targets are stationary — NOT inside .mib-field.
     The rotating mask induces perceptual disappearance automatically.
     No JS is needed; this is a genuine motion-induced blindness effect. */
}

.mib-target-1 { left: 30%; top: 35%; }
.mib-target-2 { left: 65%; top: 40%; }
.mib-target-3 { left: 48%; top: 68%; }

/* ── Scroll-revealed viewports ────────────────────────────── */

.viewport-3,
.viewport-4 {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.viewport-3.revealed,
.viewport-4.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Viewport 3 — Capabilities ────────────────────────────── */

.viewport-3 {
  padding: 0;
}

.capabilities-list {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 48px;
  list-style: none;
}

.capabilities-list li {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: #111111;
  padding: 28px 0;
  border-top: 1px solid #3B0082;
}

.capabilities-list li:last-child {
  border-bottom: 1px solid #3B0082;
}

/* ── Viewport 4 — CTA ─────────────────────────────────────── */

.viewport-4 {
  padding: 80px 0 160px;
  text-align: center;
}

.hero-bottom {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  padding: 0;
  z-index: 20;
}

.hero-tagline {
  font-size: 17px;
  font-weight: 500;
  color: #111111;
  letter-spacing: 0.02em;
  line-height: 1.6;
  margin: 0 0 20px;
  text-align: center;
}

.scroll-chevron {
  display: block;
  width: 20px;
  height: 20px;
  border-right: 1px solid #3B0082;
  border-bottom: 1px solid #3B0082;
  transform: rotate(45deg);
  margin: 0 auto;
  opacity: 0.35;
  animation: chevron-bounce 2s ease-in-out infinite;
}

@keyframes chevron-bounce {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50%       { transform: rotate(45deg) translate(3px, 3px); }
}

.gaze-chevron {
  display: block;
  width: 20px;
  height: 20px;
  border-right: 1px solid #3B0082;
  border-bottom: 1px solid #3B0082;
  transform: rotate(225deg) translate(0, 0);
  margin: 18px auto 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  animation: chevron-bounce-up 2s ease-in-out infinite;
}

.gaze-chevron.visible {
  opacity: 0.35;
}

@keyframes chevron-bounce-up {
  0%, 100% { transform: rotate(225deg) translate(0, 0); }
  50%       { transform: rotate(225deg) translate(3px, 3px); }
}

.cta-link {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #3B0082;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}

.cta-link:hover {
  border-bottom-color: #3B0082;
}

/* ── People page ──────────────────────────────────────────── */

.people-container {
  max-width: 680px;
  margin: 0 auto;
  padding: 160px 48px 120px;
}

.person-name {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #111111;
  margin-bottom: 8px;
}

.person-title {
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #3B0082;
  margin-bottom: 40px;
}

.person-photo {
  max-width: 280px;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  margin-bottom: 48px;
  background: #f0f0f0;
}

/* Graceful placeholder when image is missing */
.person-photo[src=""],
.person-photo:not([src]) {
  min-height: 280px;
}

.bio {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.85;
  color: #111111;
  margin-bottom: 24px;
}

.people-rule {
  border: none;
  border-top: 1px solid #3B0082;
  margin: 56px 0;
}

.selectivity-statement {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.85;
  color: #111111;
}

/* ── Engage page ──────────────────────────────────────────── */

.engage-container {
  max-width: 560px;
  margin: 0 auto;
  padding: 160px 48px 120px;
}

.engage-h1 {
  font-size: 32px;
  font-weight: 500;
  color: #111111;
  margin-bottom: 20px;
}

.engage-sub {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: #111111;
  margin-bottom: 64px;
}

/* ── Form ─────────────────────────────────────────────────── */

.art-form {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-field label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #111111;
}

.form-field input,
.form-field textarea,
.form-field select {
  font-family: 'Switzer', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: #111111;
  background: transparent;
  border: none;
  border-bottom: 1px solid #DDDDDD;
  outline: none;
  padding: 8px 0;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  transition: border-color 0.15s ease;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  border-bottom-color: #3B0082;
}

.form-field textarea {
  resize: vertical;
  min-height: 96px;
}

.form-field select {
  cursor: pointer;
}

/* ── Form submit area ─────────────────────────────────────── */

.form-submit-area {
  margin-top: 12px;
}

.submit-btn {
  font-family: 'Switzer', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #3B0082;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}

.submit-btn:hover {
  border-bottom-color: #3B0082;
}

.submit-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.form-confirmation {
  font-size: 14px;
  font-weight: 300;
  color: #3B0082;
  line-height: 1.7;
}

/* ── Responsive ───────────────────────────────────────────── */

@media (min-width: 900px) {
  .ffde-container { display: block; }
  .mib-container  { display: none; }
}

@media (max-width: 899px) {
  .ffde-container { display: block; }
  .mib-container  { display: none; }

  nav {
    padding: 24px 24px 0 0;
    gap: 20px;
  }

  .mission-text {
    padding: 0 24px;
  }

  .capabilities-list {
    padding: 0 24px;
  }

  .people-container {
    padding: 120px 24px 80px;
  }

  .engage-container {
    padding: 120px 24px 80px;
  }
}

/* ── Mobile portrait — fix tagline overflow ───────────────── */

@media (max-width: 899px) and (orientation: portrait) {
  .hero-tagline {
    padding: 0 24px;
  }
}

/* ── Mobile landscape — faces in, drop hero ───────────────── */

/* BLACKBOOK: Faces use vh-based sizing (not vw) because landscape phones
   are height-constrained. 53vh matches desktop proportionality (~20% larger
   than prior 44vh). 5% inset brings faces close to the wordmark center —
   same relative proximity as desktop layout. Hero-bottom is removed — no
   vertical room and the scroll pattern breaks on mobile. */
@media (orientation: landscape) and (max-height: 599px) {
  .hero-bottom {
    display: none;
  }

  .wordmark-img {
    width: clamp(160px, 26vw, 280px);
  }

  .wordmark-img.shrunk {
    width: 140px;
  }

  .ffde-column.left  { right: calc(50% + max(15px, 5%)); }
  .ffde-column.right { left:  calc(50% + max(15px, 5%)); }

  .ffde-face {
    width:  clamp(90px, 53vh, 260px);
    height: clamp(90px, 53vh, 260px);
  }
}