/* CP1 Reality OS V3.4B — TREGT Hero / The First Observation
   Preview-only hero experience. It stays inside the existing page flow and keeps CP1 navigation/content intact. */
:root {
  --cp1-v34b-ink: rgba(255,255,255,0.94);
  --cp1-v34b-soft: rgba(255,255,255,0.76);
  --cp1-v34b-muted: rgba(255,255,255,0.56);
  --cp1-v34b-line: rgba(255,255,255,0.16);
  --cp1-v34b-surface: rgba(255,255,255,0.055);
  --cp1-v34b-warm: rgba(255,244,224,0.58);
  --cp1-v34b-blue: rgba(117,202,255,0.42);
}

body.cp1-v34b-first-observation-ready { text-rendering: optimizeLegibility; }

.cp1-v34b-hero { position: relative; isolation: isolate; overflow: hidden; }

.cp1-v34b-observation-sequence {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(180px, 0.72fr) minmax(260px, 1fr);
  gap: clamp(1.2rem, 4vw, 4rem);
  align-items: center;
  width: min(1120px, calc(100% - 32px));
  margin: clamp(2.2rem, 7vw, 6.2rem) auto clamp(1.4rem, 4vw, 3.6rem);
  padding: clamp(1rem, 2vw, 1.4rem);
  border: 1px solid var(--cp1-v34b-line);
  border-radius: clamp(26px, 4vw, 44px);
  background:
    radial-gradient(circle at 20% 34%, rgba(255,244,224,0.12), transparent 34%),
    radial-gradient(circle at 78% 22%, rgba(117,202,255,0.10), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,0.075), rgba(255,255,255,0.024));
  box-shadow: 0 30px 90px rgba(0,0,0,0.22);
  backdrop-filter: blur(16px);
}

.cp1-v34b-observation-sequence::before {
  content: "";
  position: absolute;
  inset: 12% -8% auto auto;
  width: min(46vw, 520px);
  height: min(46vw, 520px);
  border-radius: 999px;
  background: radial-gradient(circle, rgba(117,202,255,0.11), transparent 66%);
  opacity: 0;
  pointer-events: none;
  animation: cp1-v34b-arrive 1400ms ease-out 900ms forwards;
}

.cp1-v34b-origin {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(240px, 34vw, 420px);
  opacity: 0;
  transform: translate3d(0, 10px, 0) scale(0.985);
  animation: cp1-v34b-arrive 1200ms ease-out 80ms forwards;
}

.cp1-v34b-stone-shell { position: relative; display: grid; place-items: center; width: min(100%, 360px); aspect-ratio: 1; }

.cp1-v34b-stone-shell::before,
.cp1-v34b-stone-shell::after,
.cp1-v34b-rim {
  content: "";
  position: absolute;
  inset: 13%;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  opacity: 0;
  transform: rotate(-10deg) scaleX(1.05);
  animation: cp1-v34b-ring 7600ms ease-in-out 850ms infinite, cp1-v34b-reveal 1100ms ease-out 700ms forwards;
}

.cp1-v34b-stone-shell::after {
  inset: 22%;
  border-color: rgba(255,244,224,0.26);
  transform: rotate(16deg) scaleX(1.22);
  animation-duration: 9600ms, 1100ms;
  animation-delay: 1100ms, 900ms;
  animation-direction: reverse, normal;
}

.cp1-v34b-rim-a { inset: 5%; border-color: rgba(117,202,255,0.20); transform: rotate(31deg) scaleX(0.88); animation-duration: 11200ms, 1100ms; animation-delay: 1300ms, 1100ms; }

.cp1-v34b-pulse {
  position: absolute;
  inset: 25%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,244,224,0.20), transparent 68%);
  filter: blur(1px);
  opacity: 0;
  animation: cp1-v34b-pulse 4300ms ease-in-out 1200ms infinite, cp1-v34b-reveal 900ms ease-out 800ms forwards;
}

.cp1-v34b-stone {
  position: relative;
  z-index: 3;
  width: min(72%, 250px);
  max-height: 72%;
  object-fit: contain;
  filter: drop-shadow(0 26px 54px rgba(0,0,0,0.40));
  transform-origin: 50% 54%;
  animation: cp1-v34b-breathe 5600ms ease-in-out 900ms infinite;
}

.cp1-v34b-copy { position: relative; z-index: 3; max-width: 660px; }

.cp1-v34b-eyebrow,
.cp1-v34b-title,
.cp1-v34b-system,
.cp1-v34b-line { opacity: 0; transform: translate3d(0, 12px, 0); animation: cp1-v34b-copy-in 780ms ease-out forwards; }

.cp1-v34b-eyebrow { margin: 0 0 0.9rem; color: var(--cp1-v34b-warm); font-size: clamp(0.74rem, 1vw, 0.9rem); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; animation-delay: 1450ms; }
.cp1-v34b-title { margin: 0; color: var(--cp1-v34b-ink); font-size: clamp(2.7rem, 7.2vw, 6.8rem); line-height: 0.9; letter-spacing: -0.07em; animation-delay: 1800ms; }
.cp1-v34b-system { margin: 0.72rem 0 0; color: var(--cp1-v34b-soft); font-size: clamp(1.15rem, 2.5vw, 2rem); font-weight: 650; letter-spacing: -0.03em; animation-delay: 2220ms; }
.cp1-v34b-line { max-width: 570px; margin: 1rem 0 0; color: var(--cp1-v34b-muted); font-size: clamp(0.95rem, 1.3vw, 1.12rem); line-height: 1.65; animation-delay: 2600ms; }

.cp1-v34b-proof {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.25rem;
  padding: 0.56rem 0.78rem;
  border: 1px solid var(--cp1-v34b-line);
  border-radius: 999px;
  background: var(--cp1-v34b-surface);
  color: var(--cp1-v34b-soft);
  font-size: 0.82rem;
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  animation: cp1-v34b-copy-in 780ms ease-out 2920ms forwards;
}

.cp1-v34b-proof::before { content: ""; width: 0.48rem; height: 0.48rem; border-radius: 999px; background: currentColor; opacity: 0.72; box-shadow: 0 0 18px currentColor; }

@keyframes cp1-v34b-arrive { to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }
@keyframes cp1-v34b-reveal { to { opacity: 1; } }
@keyframes cp1-v34b-copy-in { to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes cp1-v34b-breathe { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(0, -2px, 0) scale(1.024); } }
@keyframes cp1-v34b-ring { 0%, 100% { transform: rotate(-10deg) scaleX(1.05); opacity: 0.40; } 50% { transform: rotate(11deg) scaleX(1.20); opacity: 0.76; } }
@keyframes cp1-v34b-pulse { 0%, 100% { opacity: 0.22; transform: scale(0.92); } 50% { opacity: 0.62; transform: scale(1.16); } }

@media (max-width: 860px) {
  .cp1-v34b-observation-sequence { grid-template-columns: 1fr; gap: 0.6rem; width: min(100% - 22px, 620px); margin-top: 1.35rem; padding: 1rem; border-radius: 28px; }
  .cp1-v34b-origin { min-height: min(74vw, 330px); }
  .cp1-v34b-stone-shell { width: min(82vw, 330px); }
  .cp1-v34b-copy { text-align: left; padding: 0 0.1rem 0.35rem; }
  .cp1-v34b-title { font-size: clamp(2.55rem, 16vw, 5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .cp1-v34b-observation-sequence::before,
  .cp1-v34b-origin,
  .cp1-v34b-stone-shell::before,
  .cp1-v34b-stone-shell::after,
  .cp1-v34b-rim,
  .cp1-v34b-pulse,
  .cp1-v34b-stone,
  .cp1-v34b-eyebrow,
  .cp1-v34b-title,
  .cp1-v34b-system,
  .cp1-v34b-line,
  .cp1-v34b-proof { animation: none !important; opacity: 1; transform: none; }
}