/* /vera: the product page. Built on styles.css (fonts, tokens, nav, footer,
   labels, workspace colours); this file adds the page itself. Deep water
   throughout, the depth the home page's VERA chapter sits at, with VERA's
   orange as the only warm light. */

.page-vera {
  background: #061923;
  color: var(--off);
  --focus: var(--aqua);
  --label: var(--aqua);
  --rule: rgba(242, 247, 248, 0.12);
}
html:has(.page-vera) { background: #061923; }

/* ---------- Nav ---------- */

.page-vera .site-nav { color: var(--off); }
.page-vera .site-nav::before { opacity: 0; background: linear-gradient(#061923 62%, transparent); }
.page-vera .site-nav.over-content::before { opacity: 1; }
.page-vera .logo-for-dark { opacity: 1; }
.nav-section { display: none; }
@media (min-width: 900px) { .nav-section { display: list-item; } }
.nav-cta {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin-left: 8px;
  padding: 0 16px;
  border: 1px solid color-mix(in oklab, var(--orange) 70%, transparent);
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.nav-cta:hover { background: color-mix(in oklab, var(--orange) 18%, transparent); border-color: var(--orange); }
@media (max-width: 560px) {
  .page-vera .nav-links .social-icon { display: none; }
}

/* ---------- Hero ---------- */

.vp-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(92vh, 860px);
  padding: 120px var(--gutter) 64px;
  text-align: center;
  overflow: hidden;
}
@media (max-width: 640px) {
  .vp-hero { min-height: 0; padding-top: 112px; padding-bottom: 48px; }
}
.vp-glow {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(1100px, 240vw);
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
  background: radial-gradient(closest-side,
    color-mix(in oklab, var(--orange) 30%, transparent) 0%,
    color-mix(in oklab, var(--orange) 10%, transparent) 40%,
    color-mix(in oklab, var(--orange) 3%, transparent) 68%,
    transparent 100%);
  pointer-events: none;
  animation: breathe 6.5s ease-in-out infinite alternate;
}
.vp-hero-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; max-width: 46rem; }
.vp-title { max-width: none; margin-top: 22px; letter-spacing: 0.02em; }
.vp-lede {
  margin-top: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem);
  line-height: 1.2;
  text-wrap: balance;
}
.vp-intro { margin-top: 18px; color: rgba(242, 247, 248, 0.78); text-wrap: pretty; }

.vp-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid rgba(242, 247, 248, 0.2);
  border-radius: 999px;
  background: rgba(242, 247, 248, 0.04);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.vp-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px color-mix(in oklab, var(--orange) 22%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .vp-status-dot { animation: vp-beacon 2.4s ease-in-out infinite; }
}
@keyframes vp-beacon { 50% { box-shadow: 0 0 0 7px color-mix(in oklab, var(--orange) 6%, transparent); } }

.vp-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.vp-btn {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid rgba(242, 247, 248, 0.4);
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.vp-btn:hover { background: rgba(242, 247, 248, 0.1); border-color: var(--off); }
.vp-btn.is-primary { background: var(--orange); border-color: var(--orange); color: #1A0D02; }
.vp-btn.is-primary:hover { background: #FF8A3D; border-color: #FF8A3D; }
.vp-btn.is-primary:focus-visible { outline-color: var(--off); }

/* ---------- The preview ---------- */

.vp-preview { padding: 8px var(--gutter) 40px; }
.vp-trailer { position: relative; max-width: 1180px; margin: 0 auto; }
.vp-frames, .vp-ticks { margin: 0; padding: 0; list-style: none; }
.vp-frames {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(242, 247, 248, 0.12);
  background: #16171a;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4);
  transform: translate(var(--px, 0px), var(--py, 0px));
  transition: transform 0.6s var(--ease);
  touch-action: pan-y;
}
.vp-frame { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s var(--ease); }
.vp-frame.is-on { opacity: 1; }
.vp-frame img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50%) 50%; transform-origin: var(--origin, 50% 40%); }
@media (prefers-reduced-motion: no-preference) {
  .vp-frame.is-on img { animation: vp-push var(--dur, 5600ms) linear both; }
  .vp-trailer.is-paused .vp-frame.is-on img { animation-play-state: paused; }
}
/* A slow push in, like a camera, and a different direction each frame. */
@keyframes vp-push {
  from { transform: scale(1.0) translate(0, 0); }
  to   { transform: scale(1.07) translate(var(--dx, -1%), var(--dy, -1%)); }
}
.vp-frame:nth-child(1) { --focus: 8%; }
.vp-frame:nth-child(2) { --origin: 30% 50%; --dx: 1.2%; --dy: -0.6%; --focus: 22%; }
.vp-frame:nth-child(3) { --origin: 70% 30%; --dx: -1.2%; --dy: 0.8%; --focus: 78%; }
.vp-frame:nth-child(4) { --origin: 65% 45%; --dx: -0.8%; --dy: -1%; --focus: 72%; }
.vp-frame:nth-child(5) { --origin: 66% 50%; --dx: -1%; --dy: 0.5%; --focus: 66%; }
.vp-frame:nth-child(6) { --origin: 66% 40%; --dx: -0.6%; --dy: 0.8%; --focus: 66%; }
.vp-frame:nth-child(7) { --origin: 70% 60%; --dx: -1%; --dy: -0.8%; --focus: 74%; }
.vp-frame:nth-child(8) { --focus: 66%; }
/* A phone shows the part of each screen that matters, large enough to read. */
@media (max-width: 640px) {
  .js .vp-frames { aspect-ratio: 4 / 5; }
  .vp-cap { padding-top: 90px; }
  .vp-cap-line { font-size: 1.375rem; }
  .vp-ticks { gap: 4px; margin-left: 4px; }
}

.vp-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 6px;
  padding: 120px clamp(18px, 3vw, 36px) clamp(16px, 2.6vw, 30px);
  /* Solid enough by the words that the screen behind never reads through them. */
  background: linear-gradient(transparent, rgba(6, 25, 35, 0.86) 48%, rgba(6, 25, 35, 0.97));
  text-align: left;
}
.vp-cap-line {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem);
  line-height: 1.12;
  text-wrap: balance;
  max-width: 24ch;
}
@media (prefers-reduced-motion: no-preference) {
  .js .vp-frame .vp-cap > * { opacity: 0; transform: translateY(10px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
  .js .vp-frame.is-on .vp-cap > * { opacity: 1; transform: none; }
  .js .vp-frame.is-on .vp-cap-line { transition-delay: 0.18s; }
}
.vp-reserved {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.vp-reserved .label {
  padding: 10px 18px;
  border: 1px solid rgba(242, 247, 248, 0.35);
  border-radius: 999px;
  background: rgba(6, 25, 35, 0.6);
  color: var(--off);
  backdrop-filter: blur(4px);
}

.vp-controls { display: flex; align-items: center; gap: 4px; margin-top: 16px; }
.vp-ctl {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  color: rgba(242, 247, 248, 0.82);
}
.vp-ctl:hover { background: rgba(242, 247, 248, 0.08); color: var(--off); }
.vp-ctl .i-play { display: none; }
.vp-trailer.is-paused .vp-ctl .i-play { display: block; }
.vp-trailer.is-paused .vp-ctl .i-pause { display: none; }
.vp-ticks { flex: 1; display: flex; gap: 6px; margin-left: 10px; }
.vp-ticks li { flex: 1; }
.vp-tick {
  display: block;
  width: 100%;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.vp-tick span { display: block; position: relative; height: 3px; border-radius: 2px; background: rgba(242, 247, 248, 0.18); overflow: hidden; }
.vp-tick span::after { content: ""; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: var(--off); }
.vp-tick.is-seen span::after { transform: scaleX(1); opacity: 0.55; }
.vp-tick[aria-current="true"] span::after { transform: scaleX(1); opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .vp-trailer:not(.is-paused) .vp-tick[aria-current="true"] span::after { animation: vp-fill var(--dur, 5600ms) linear both; }
}
@keyframes vp-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.vp-note { max-width: 1180px; margin: 6px auto 0; font-size: 0.8125rem; color: rgba(242, 247, 248, 0.6); }

/* Without JavaScript, every frame is shown, one after another. */
html:not(.js) .vp-frames { aspect-ratio: auto; display: grid; gap: 16px; overflow: visible; border: 0; background: none; box-shadow: none; transform: none; }
html:not(.js) .vp-frame { position: relative; inset: auto; opacity: 1; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; border: 1px solid rgba(242, 247, 248, 0.12); }

/* ---------- Sections ---------- */

.vp-section, .vp-access { max-width: 1180px; margin: 0 auto; padding: clamp(72px, 12vh, 140px) var(--gutter) 0; }
.vp-section .chapter-title { max-width: 18ch; }
.vp-facts { display: grid; gap: 28px 40px; margin-top: 24px; }
@media (min-width: 860px) { .vp-facts { grid-template-columns: repeat(3, 1fr); } }
.vp-facts h3, .vp-space h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.375rem, 1.2rem + 0.5vw, 1.75rem);
  line-height: 1.2;
}
.vp-facts p, .vp-space p { margin-top: 10px; color: rgba(242, 247, 248, 0.76); max-width: 38ch; }

.vp-spaces { display: grid; gap: 14px; margin-top: 24px; }
@media (min-width: 700px) { .vp-spaces { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .vp-spaces { grid-template-columns: repeat(6, 1fr); } .vp-space { grid-column: span 2; } .vp-space:nth-child(4) { grid-column: 2 / span 2; } }
.vp-space {
  padding: 24px 24px 26px;
  border: 1px solid rgba(242, 247, 248, 0.12);
  border-top: 2px solid var(--chip);
  border-radius: 14px;
  background: linear-gradient(color-mix(in oklab, var(--chip) 9%, transparent), transparent 60%);
}
.vp-space h3 { display: flex; align-items: center; gap: 12px; }

.vp-arch { display: grid; gap: 0 48px; margin: 24px 0 0; }
@media (min-width: 860px) { .vp-arch { grid-template-columns: repeat(2, 1fr); } }
.vp-arch > div { padding: 22px 0; border-top: 1px solid var(--rule); }
.vp-arch dt { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--aqua); }
.vp-arch dd { margin: 10px 0 0; max-width: 46ch; color: rgba(242, 247, 248, 0.82); }

.vp-access { position: relative; display: flex; flex-direction: column; align-items: center; padding-bottom: clamp(80px, 14vh, 160px); text-align: center; }
.vp-access .chapter-title { margin-top: 0.5em; }
.vp-access .body { color: rgba(242, 247, 248, 0.78); }

.vp-footer { padding-left: var(--gutter) !important; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important; }
.vp-footer a { text-decoration: none; }
.vp-footer p a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .vp-glow { animation: none; }
  .vp-frame { transition: none; }
  .vp-frames { transition: none; transform: none; }
}