/* 2026-10-12, with Nico's explicit OK (REVIEW.md items 18-19): a much larger, more spacious wall with
   bigger pictures. Layout lives in exp.js (buildLayout); this file only styles. Motion is transform/opacity only. */
/* ===== GAIA EXPERIENCE, /exp ===== */

:root {
  --accent: rgba(225, 141, 95, .9);
}

html, body {
  height: 100%;
  overflow: hidden;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--black);
  color: var(--white);
  padding: 10px 16px;
  font-family: var(--font-sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
}

/* ===== canvas wrapper ===== */
.exp {
  position: fixed;
  inset: 0;
  margin-top: -70px;
  overflow: hidden;
  background: var(--white);
  color: var(--black);
  transition: background-color 1s var(--ease), color 1s var(--ease);
  touch-action: none;
  user-select: none;
  cursor: grab;
}
.exp.is-grabbing {
  cursor: grabbing;
}

html.dark .exp {
  background: var(--black);
  color: var(--white);
}

.exp-fade {
  position: absolute;
  left: 0;
  right: 0;
  height: 90px;
  z-index: 5;
  pointer-events: none;
  transition: background 1s var(--ease);
}
.exp-fade-top {
  top: 0;
  background: linear-gradient(to bottom, var(--white), transparent);
}
.exp-fade-bottom {
  bottom: 0;
  background: linear-gradient(to top, var(--white), transparent);
}
html.dark .exp-fade-top {
  background: linear-gradient(to bottom, var(--black), transparent);
}
html.dark .exp-fade-bottom {
  background: linear-gradient(to top, var(--black), transparent);
}

.exp-canvas {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  backface-visibility: hidden;
}

.exp-tile-group {
  position: absolute;
  top: 0;
  left: 0;
}

.exp-tile {
  position: absolute;
  display: block;
  overflow: hidden;
  contain: layout paint style;
  cursor: pointer;
  background: rgba(128,128,128,.08);
  transition: opacity 1.1s var(--ease), transform 1.4s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--d, 0ms);
}
.exp-tile.is-out {
  opacity: 0;
  transform: translateY(64px);
  will-change: transform, opacity;
}
.exp-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  transition: transform 1.6s cubic-bezier(.22,1,.36,1);
}
@media (hover: hover) {
  .exp-tile:hover img { transform: scale(1.04); }
}
.exp-tile:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.exp-tile.is-dimmed {
  opacity: .18;
}

/* "Drag or scroll to explore" */
.exp-hint {
  position: absolute;
  left: 50%;
  bottom: 120px;
  transform: translateX(-50%);
  z-index: 6;
  margin: 0;
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(0,0,0,.72);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .18em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  animation: expHintIn 1.2s var(--ease) 1.2s forwards;
}
.exp-hint.is-gone {
  animation: none;
  opacity: 0;
  transition: opacity 1s var(--ease);
}
@keyframes expHintIn { to { opacity: 1; } }
html.dark .exp-hint { background: rgba(255,255,255,.85); color: #000; }

/* Reduced motion: a plain, scrollable grid instead of the drifting wall */
html.exp-static .exp {
  overflow-y: auto;
  touch-action: pan-y;
  user-select: auto;
  cursor: auto;
  overscroll-behavior: contain;
}
html.exp-static .exp-canvas {
  position: static;
  will-change: auto;
  transform: none !important;
  padding: 120px clamp(16px, 4vw, 48px) 160px;
}
html.exp-static .exp-tile-group {
  position: static;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 40px 32px;
}
html.exp-static .exp-tile {
  position: relative;
  width: auto;
  height: auto;
  aspect-ratio: 4 / 5;
  transition: none;
}
html.exp-static .exp-tile img { transition: none; transform: none; }
html.exp-static .zoom-pill { display: none; }
html.exp-static .exp-hint { display: none; }

html.dark .page-curtain {
  background: #000;
  color: #fff;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ===== modals ===== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(0,0,0,.8);
}
.modal-backdrop[hidden],
.modal[hidden] {
  display: none;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 71;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

.intro-modal {
  width: min(560px, 90vw);
  color: var(--white);
  text-align: center;
}
.modal-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 500;
  margin: 0 0 16px;
}
.intro-modal .modal-eyebrow {
  font-size: 14px;
  letter-spacing: .2em;
  margin: 0 0 28px;
}
.filters-panel .modal-eyebrow {
  margin: 0 0 20px;
}
.intro-modal p {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.5;
  margin: 0 0 18px;
}
.pill-outline {
  margin-top: 16px;
  background: transparent;
  color: var(--white);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 14px 32px;
  font-family: var(--font-sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .16em;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.pill-outline:hover {
  background: var(--white);
  color: var(--black);
}

.fact-modal {
  width: min(640px, 90vw);
  max-width: 640px;
  background: var(--white);
  color: var(--black);
  padding: 48px;
  box-sizing: border-box;
}
.fact-modal .modal-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .18em;
  margin: 0 0 20px;
}
.fact-modal p {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
  min-height: 4.8em;
}
.fact-next {
  margin-top: 24px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--white);
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  float: right;
}

.panel-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 24px;
  height: 24px;
  color: inherit;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fact-modal .panel-close {
  color: var(--black);
}

/* ===== filters panel ===== */
.filters-panel {
  position: fixed;
  bottom: 20px;
  left: 16px;
  z-index: 60;
  width: 240px;
  background: var(--black);
  color: var(--white);
  padding: 24px;
  box-sizing: border-box;
}
.filters-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.filter-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 26px;
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  opacity: .7;
}
.filter-opt.active {
  opacity: 1;
}
.filter-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1px solid var(--white);
  background: transparent;
  flex: none;
}
.filter-opt.active .filter-dot {
  background: var(--white);
}

/* ===== bottom bar ===== */
.exp-bar {
  position: fixed;
  bottom: 24px;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  gap: 12px;
  pointer-events: none;
}

.bar-group {
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}

.bar-center {
  flex: 1;
  justify-content: center;
  min-width: 0;
}

.pill-btn {
  height: 42px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
html.dark .pill-btn {
  background: var(--white);
  color: var(--black);
}

.round-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex: none;
}
html.dark .round-btn {
  background: var(--white);
  color: var(--black);
}

.zoom-pill {
  height: 42px;
  border-radius: 999px;
  background: var(--black);
  color: var(--white);
  display: inline-flex;
  align-items: center;
}
html.dark .zoom-pill {
  background: var(--white);
  color: var(--black);
}
.zoom-pill button {
  width: 42px;
  height: 42px;
  color: inherit;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* experience toggle — fixed placement inside bottom bar, thumb defaults to maison side */
.exp-toggle-static {
  display: flex !important;
  position: relative;
  top: auto;
  left: auto;
  bottom: auto;
  transform: none;
  opacity: 1;
  width: 420px;
  max-width: 100%;
  overflow: hidden;
}
.exp-toggle-static .toggle-opt {
  flex: 1;
  text-align: center;
}
.exp-toggle-static .toggle-thumb {
  width: 50%;
  transform: translateX(100%);
}

@media (prefers-reduced-motion: reduce) {
  .exp, .exp-fade, .exp-canvas, .toggle-thumb, .pill-outline, .exp-tile {
    transition: none !important;
  }
}

/* ===== mobile ===== */
@media (max-width: 640px) {
  .exp-bar {
    flex-wrap: wrap;
    row-gap: 10px;
  }
  .bar-center {
    order: 3;
    flex-basis: 100%;
    justify-content: center;
  }
  .exp-toggle-static {
    width: 100%;
    max-width: 420px;
  }
  .exp-hint { bottom: 150px; }
  .pill-btn-label {
    display: none;
  }
  .pill-btn#filtersBtn {
    padding: 0 14px;
  }
  .fact-modal {
    padding: 32px 24px;
  }
}