/* phi-transformer.css — the flagship page: living video background, explosive hero, veiled cards */

/* ── the living background ── */
.pt-bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
.pt-bg-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.5;
  filter: saturate(1.15) brightness(0.75) hue-rotate(-8deg);
}
.pt-bg-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(6, 6, 15, 0.12) 0%, rgba(6, 6, 15, 0.62) 55%, rgba(6, 6, 15, 0.94) 100%),
    linear-gradient(180deg, rgba(6, 6, 15, 0.55) 0%, rgba(6, 6, 15, 0.25) 30%, rgba(6, 6, 15, 0.88) 100%);
}

/* everything above the background */
body .hub-hero, body .hub-sections, body .site-footer { position: relative; z-index: 2; }

/* ── hero: explosive ── */
.pt-hero { min-height: 92vh; display: flex; align-items: center; text-align: center; }
.pt-hero .container { margin: 0 auto; }
.pt-title {
  font-family: 'Cinzel', 'Cormorant Garamond', serif;
  font-size: clamp(64px, 12vw, 168px);
  line-height: 0.95;
  letter-spacing: 0.04em;
  margin: 0.1em 0 0.15em;
  text-shadow: 0 0 42px rgba(212, 168, 67, 0.45), 0 0 120px rgba(212, 168, 67, 0.22);
}
.pt-countdown {
  font-family: 'Cinzel', serif;
  font-size: clamp(15px, 2vw, 21px);
  color: #e8e2d4;
  letter-spacing: 0.22em;
  margin: 0 0 1.2em;
}
.pt-countdown .pt-soon {
  color: #06060f;
  background: linear-gradient(90deg, #d4a843, #f4e2a6, #d4a843);
  border-radius: 999px;
  padding: 6px 18px;
  font-weight: 700;
  letter-spacing: 0.18em;
  animation: pt-pulse 2.4s ease-in-out infinite;
}
@keyframes pt-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(212, 168, 67, 0.55); }
  50% { box-shadow: 0 0 34px 6px rgba(212, 168, 67, 0.35); }
}

/* glass accordions over video */
.pt-hero ~ main .hub-accordion-item,
.hub-accordion-item {
  background: rgba(11, 11, 26, 0.72);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

/* ── spec table ── */
.pt-table {
  width: 100%; border-collapse: collapse; font-size: 14px;
  margin: calc(13px / var(--phi)) 0;
}
.pt-table th, .pt-table td {
  padding: calc(8px / var(--phi)) calc(8px / var(--phi));
  border-bottom: 1px solid rgba(212, 168, 67, 0.18);
  text-align: left; vertical-align: top;
}
.pt-table th {
  font-family: 'Space Mono', monospace; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold, #d4a843);
}
.pt-table td b { color: var(--gold, #d4a843); }

/* ── the veiled cards ── */
.pt-veil-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: calc(21px / var(--phi)); margin-top: calc(13px / var(--phi));
}
.pt-veil-card {
  background: linear-gradient(160deg, rgba(26, 0, 51, 0.85), rgba(11, 11, 26, 0.9));
  border: 1px solid rgba(212, 168, 67, 0.3);
  border-radius: 12px; padding: calc(21px / var(--phi));
  position: relative; overflow: hidden;
}
.pt-veil-card::after {
  content: ''; position: absolute; inset: -40%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(212,168,67,0.10) 60deg, transparent 120deg);
  animation: pt-spin 9s linear infinite; pointer-events: none;
}
@keyframes pt-spin { to { transform: rotate(360deg); } }
.pt-veil-no {
  font-family: 'Cinzel', serif; font-size: 30px; color: var(--gold, #d4a843);
  margin-bottom: calc(8px / var(--phi)); text-shadow: 0 0 18px rgba(212, 168, 67, 0.5);
}
.pt-veil-card p { font-size: 13.5px; line-height: 1.55; color: rgba(232, 226, 212, 0.85); margin: 0; }
.pt-mystery { color: rgba(212, 168, 67, 0.9); font-style: italic; }

/* ── mobile: the flagship page renders properly on phones ── */
@media (max-width: 768px) {
  /* background: cover the phone, keep the veil strong enough for text */
  .pt-bg-video { opacity: 0.55; filter: saturate(1.1) brightness(0.6); }
  .pt-bg-veil {
    background:
      radial-gradient(ellipse at 50% 30%, rgba(6, 6, 15, 0.18) 0%, rgba(6, 6, 15, 0.7) 55%, rgba(6, 6, 15, 0.96) 100%);
  }
  .pt-hero { min-height: 78vh; padding-top: 96px; text-align: center; }
  .pt-title { font-size: clamp(30px, 10.5vw, 72px); line-height: 1.05; }
  .pt-countdown {
    font-size: 13px; letter-spacing: 0.12em;
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  }
  .pt-countdown .pt-soon { padding: 5px 14px; font-size: 12px; white-space: nowrap; }
  .hub-intro { font-size: 15.5px; }
  .hub-hero-stats { gap: 6px; }
  .hub-chip { font-size: 12px; padding: 5px 10px; }

  /* spec table: scroll horizontally inside its own pane, never break the page */
  .pt-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pt-table { min-width: 460px; font-size: 13px; }
  .pt-table th, .pt-table td { padding: 6px 8px; }

  /* veil cards: single column, readable */
  .pt-veil-grid { grid-template-columns: 1fr; gap: 12px; }
  .pt-veil-card { padding: 16px; }
  .pt-veil-card::after { animation: none; }   /* spare the GPU on phones */
  .pt-veil-no { font-size: 24px; }

  /* accordion bodies breathe */
  .hub-accordion-item { margin-bottom: 10px; }
  .hub-body-inner { padding: 14px 12px; }
}

@media (max-width: 380px) {
  .pt-title { font-size: clamp(28px, 10.5vw, 64px); }
  .hub-chip { font-size: 11px; }
}