/* Sonia's sandbox overrides — loaded last on Sonia-Sandbox.html,
   after tokens.css / homepage.css / sandbox.css / platform-diagram.css,
   so anything added here wins without editing the shared files. */

/* ---------- Hero: full dark background + grid ---------- */

.hero-section--sandbox {
  position: relative;
  isolation: isolate;
  background: #0D2828;
}

/* Vertical and horizontal grid lines live on separate layers so the intro
   can draw each direction on its own. The mask stands in for the Figma
   "Hero gradient" overlay that fades the grid out behind the headline. */
.hero-section--sandbox::before,
.hero-section--sandbox::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 22%, rgba(0,0,0,.35) 30%, rgba(0,0,0,.8) 58%, #000 75%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 22%, rgba(0,0,0,.35) 30%, rgba(0,0,0,.8) 58%, #000 75%);
}

.hero-section--sandbox::before {
  background-image: repeating-linear-gradient(to right, rgba(12,80,93,.6) 0 1px, transparent 1px 36px);
}

.hero-section--sandbox::after {
  background-image: repeating-linear-gradient(to bottom, rgba(12,80,93,.6) 0 1px, transparent 1px 36px);
}

.hero-section--sandbox .hero-inner,
.hero-section--sandbox .hero-image-wrap {
  position: relative;
  z-index: 1;
}

/* On desktop the diagram's empty top band tucks up beside the CTA (as in
   Figma), so the copy must stay above it to keep the button clickable. */
.hero-section--sandbox .hero-inner {
  z-index: 2;
}

.hero-section--sandbox .hero-title {
  color: #ffffff;
}

.hero-section--sandbox .hero-title .highlight {
  color: #201F1D;
}

.hero-section--sandbox .hero-desc {
  color: #ffffff;
  font-weight: 600;
}

/* Desktop: the canvas already carries Figma's side margins, so let it run
   to 1440px (1:1 with the artboard) and pull it up so canvas y=117 (Figma
   y=328, the CTA's bottom edge) sits level with the button. A vertical %
   margin resolves against the wrap's width, which equals the diagram's.
   The mobile block at the end of this file restores the stacked spacing. */
.hero-section--sandbox .hero-image-wrap {
  max-width: 1440px;
  margin-top: 0;
  padding-left: 0;
  padding-right: 0;
}

.hero-section--sandbox .ph-diagram {
  margin-top: calc(-117 / 1440 * 100%);
}


/* ---------- Hero diagram: homepage.ai Figma, artboard "V2_Claude" ---------- */
/* Hero frame 67:21395 is 1440x935, but nothing sits above its "Brief" card,
   so the canvas is cropped to 1440x724 (top 211 units removed). Every size
   and position below is the Figma value in design units, via --u (one
   Figma pixel at the diagram's current width), so the diagram scales as an
   exact proportional copy of the artboard. The two SVG layers share the
   same 0 0 1440 724 space. */

.ph-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ph-diagram {
  position: relative;
  max-width: 1440px;
  aspect-ratio: 1440 / 724;
  margin: 0 auto;
  container-type: inline-size;
  --u: calc(100cqw / 1440);
}

.ph-lines,
.ph-dots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.ph-lines { z-index: 1; }
.ph-dots  { z-index: 4; }

.ph-lines path {
  fill: none;
  stroke: #A8A39F;
  stroke-width: 1;
  stroke-dasharray: 1;
}

.ph-dots circle {
  fill: #F8F7F7;
  stroke: #A8A39F;
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
}

/* ---------- Tiles ---------- */

.ph-card {
  position: absolute;
  z-index: 2;
  width: calc(213.559 * var(--u));
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: calc(0.879 * var(--u)) solid;
  border-radius: calc(10.546 * var(--u));
  overflow: hidden;
  color: #000000;
}

.ph-card--teal    { border-color: #0C505D; box-shadow: var(--u) var(--u) calc(10 * var(--u)) var(--u) rgba(229,255,255,.5); }
.ph-card--magenta { border-color: #4C1B40; box-shadow: var(--u) var(--u) calc(10 * var(--u)) var(--u) rgba(255,219,252,.5); }
.ph-card--citron  { border-color: #475309; box-shadow: var(--u) var(--u) calc(10 * var(--u)) var(--u) rgba(255,253,199,.5); }

.ph-card--brief   { left: calc(87 * var(--u));   top: calc(106 * var(--u)); }
/* Brief carries a third row (Jasper) that the Figma file doesn't have, so
   Design sits one row (38.669) lower than its Figma y=473 to keep the gap. */
.ph-card--design  { left: calc(87 * var(--u));   top: calc(300.669 * var(--u)); }
.ph-card--write   { left: calc(383 * var(--u));  top: calc(153 * var(--u)); }
.ph-card--segment { left: calc(750 * var(--u));  top: calc(209 * var(--u)); }
.ph-card--esp     { left: calc(1103 * var(--u)); top: calc(306 * var(--u)); }

.ph-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(43.942 * var(--u));
  padding: 0 calc(15.819 * var(--u));
  flex: none;
}

.ph-card-title-group {
  display: flex;
  align-items: center;
  gap: calc(7.031 * var(--u));
  min-width: 0;
}

.ph-card--esp .ph-card-title-group {
  gap: calc(9.23 * var(--u));
}

.ph-card-icon {
  display: block;
  flex: none;
  width: calc(21.092 * var(--u));
  height: calc(21.092 * var(--u));
}

.ph-card-icon--pen {
  width: calc(17.577 * var(--u));
  height: calc(17.577 * var(--u));
}

.ph-card-icon--segment {
  width: calc(17.137 * var(--u));
  height: calc(18.895 * var(--u));
}

.ph-card-title {
  font-family: 'Synapse', 'Poppins', sans-serif;
  font-weight: 600;
  font-size: calc(17.577 * var(--u));
  line-height: 1.2;
  white-space: nowrap;
}

.ph-card-actions {
  display: flex;
  align-items: center;
  gap: calc(7.031 * var(--u));
  flex: none;
}

/* Person / AI icons. .is-hl is toggled by js/sonia-hero.js: a citron disc
   grows in behind the icon with a ring pulse, then fades back out. */
.ph-hl {
  position: relative;
  display: block;
  width: calc(21.092 * var(--u));
  height: calc(21.092 * var(--u));
}

.ph-hl svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

.ph-hl::before,
.ph-hl::after {
  content: "";
  position: absolute;
  inset: calc(-3.5 * var(--u));
  border-radius: 50%;
  pointer-events: none;
}

.ph-hl::before {
  background: #FFFA66;
  opacity: 0;
  transform: scale(.3);
  transition: opacity .3s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1);
}

.ph-anim .ph-hl.is-hl::before {
  opacity: 1;
  transform: scale(1);
}

.ph-anim .ph-hl.is-hl::after {
  animation: ph-ring .7s ease-out;
}

.ph-anim .ph-hl.is-hl svg {
  animation: ph-icon-pulse .5s ease-out;
}

.ph-card-divider {
  height: calc(0.879 * var(--u));
  background: #E4E1DF;
  flex: none;
}

.ph-card-list {
  display: flex;
  flex-direction: column;
  padding: calc(5.273 * var(--u)) 0;
  background: #F8F7F7;
}

.ph-card--brief .ph-card-list {
  padding: calc(7 * var(--u)) 0;
}

.ph-card-row {
  display: flex;
  align-items: center;
  gap: calc(8.788 * var(--u));
  height: calc(38.669 * var(--u));
  padding: 0 calc(12.304 * var(--u));
  border-bottom: calc(0.879 * var(--u)) solid #F0EEED;
  flex: none;
}

.ph-card-list .ph-card-row:last-child {
  border-bottom: 0;
}

.ph-card-row--lead  { background: #F8F7F7; }
.ph-card-row--cool  { border-bottom-color: #E2E4E8; }
.ph-card-row--thick { border-bottom-width: calc(1.758 * var(--u)); }

/* Row icons are the exact Figma frame exports (assets/hero-pipeline/),
   white rounded background included, so each fills its box. */
.ph-row-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: calc(26.365 * var(--u));
  height: calc(26.365 * var(--u));
}

.ph-card--write .ph-row-icon {
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
}

.ph-row-icon img {
  display: block;
  width: 100%;
  height: 100%;
}

/* Gemini's mark is an image fill Figma won't flatten into its frame, so its
   white box is drawn here (Figma frame 67:21745). */
.ph-row-icon--gemini {
  background: #ffffff;
  border-radius: calc(4.394 * var(--u));
}

.ph-row-icon--gemini img {
  width: 62.25%;
  height: 62.25%;
}

.ph-row-label {
  font-family: 'Inter', sans-serif;
  font-size: calc(12.304 * var(--u));
  line-height: 1.16;
  color: #000000;
}

.ph-row-label--lg {
  font-size: calc(14 * var(--u));
}

/* ---------- Stage pills, bar, badge, arrow ---------- */

.ph-pill {
  position: absolute;
  z-index: 2;
  top: calc(555 * var(--u));
  height: calc(55 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(9.123 * var(--u));
  color: #ffffff;
  font-family: 'Synapse', 'Poppins', sans-serif;
  font-weight: 400;
  font-size: calc(21.287 * var(--u));
  line-height: 1;
  white-space: nowrap;
}

.ph-pill svg {
  display: block;
  flex: none;
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
}

.ph-pill--create      { left: calc(401 * var(--u));  width: calc(168 * var(--u)); gap: calc(13 * var(--u));    background: #0C505D; box-shadow: var(--u) var(--u) calc(10 * var(--u)) var(--u) rgba(229,255,255,.5); }
.ph-pill--personalize { left: calc(751 * var(--u));  width: calc(211 * var(--u)); gap: calc(6.082 * var(--u)); background: #4C1B40; box-shadow: var(--u) var(--u) calc(10 * var(--u)) var(--u) rgba(255,219,252,.5); }
.ph-pill--deploy      { left: calc(1131 * var(--u)); width: calc(158 * var(--u)); gap: calc(11 * var(--u));    background: #475309; box-shadow: var(--u) var(--u) calc(10 * var(--u)) var(--u) rgba(255,253,199,.5); }

/* In Figma the Personalize and Deploy contents sit left of centre (nested
   auto-layout insets); the mobile block re-centres them. */
.ph-pill--personalize {
  justify-content: flex-start;
  padding-left: calc(24.25 * var(--u));
}

.ph-pill--deploy {
  justify-content: flex-start;
  padding-left: calc(13.685 * var(--u));
  gap: 0;
}

.ph-pill--deploy span {
  width: calc(88.95 * var(--u));
  text-align: center;
}

.ph-bar {
  position: absolute;
  z-index: 3;
  left: calc(164 * var(--u));
  top: calc(649 * var(--u));
  width: calc(1198 * var(--u));
  height: calc(11 * var(--u));
  background: #FFFA66;
  transform-origin: left center;
  transform: scaleX(var(--bar, 1));
}

.ph-badge {
  position: absolute;
  z-index: 5;
  left: calc(114 * var(--u));
  top: calc(607 * var(--u));
  width: calc(81 * var(--u));
  height: calc(81 * var(--u));
  display: block;
}

.ph-arrow {
  position: absolute;
  z-index: 5;
  left: calc(1346 * var(--u));
  top: calc(633 * var(--u));
  width: calc(35 * var(--u));
  height: calc(41 * var(--u));
  display: block;
  transform-origin: left center;
}

/* ---------- Intro animation ---------- */
/* Only active while <html> has .ph-anim (set in <head> unless the viewer
   prefers reduced motion). js/sonia-hero.js adds .is-in / .is-grid in
   sequence and removes .ph-anim when done, which leaves the static design. */

.ph-anim .hero-section--sandbox::before {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s cubic-bezier(.65, 0, .35, 1);
}

.ph-anim .hero-section--sandbox::after {
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 1.1s cubic-bezier(.65, 0, .35, 1) .15s;
}

.ph-anim .hero-section--sandbox.is-grid::before,
.ph-anim .hero-section--sandbox.is-grid::after {
  clip-path: inset(0 0 0 0);
}

.ph-anim .ph-card,
.ph-anim .ph-pill,
.ph-anim .ph-badge,
.ph-anim .ph-arrow {
  opacity: 0;
}

/* The revealed state is set statically (not held by animation fill), so each
   element leaves its compositing layer as soon as its own entrance ends
   instead of all of them re-rasterizing together when the intro finishes. */
.ph-anim .ph-card.is-in,
.ph-anim .ph-pill.is-in,
.ph-anim .ph-badge.is-in,
.ph-anim .ph-arrow.is-in {
  opacity: 1;
}

.ph-anim .ph-card.is-in {
  animation: ph-flip .75s linear backwards;
}

.ph-anim .ph-pill.is-in,
.ph-anim .ph-badge.is-in {
  animation: ph-pop .5s cubic-bezier(.34, 1.56, .64, 1) backwards;
}

.ph-anim .ph-arrow.is-in {
  animation: ph-arrow-in .35s cubic-bezier(.22, 1, .36, 1) backwards;
}

.ph-anim .ph-lines path {
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--d, .4s) cubic-bezier(.45, 0, .55, 1);
}

.ph-anim .ph-lines path.is-in {
  stroke-dashoffset: 0;
}

.ph-anim .ph-dots circle {
  opacity: 0;
  transform: scale(0);
  transition: opacity .15s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

.ph-anim .ph-dots circle.is-in {
  opacity: 1;
  transform: scale(1);
}

.ph-anim .ph-bar {
  --bar: 0;
  transition: transform var(--bar-ms, .7s) cubic-bezier(.65, 0, .35, 1);
}

/* Appears by flipping on its horizontal axis, overshooting, then settling. */
@keyframes ph-flip {
  0%   { opacity: 0; transform: perspective(800px) rotateX(-90deg); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  45%  { opacity: 1; transform: perspective(800px) rotateX(16deg); animation-timing-function: ease-in-out; }
  70%  { transform: perspective(800px) rotateX(-7deg); animation-timing-function: ease-in-out; }
  88%  { transform: perspective(800px) rotateX(2deg); }
  100% { opacity: 1; transform: perspective(800px) rotateX(0deg); }
}

@keyframes ph-pop {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes ph-arrow-in {
  from { opacity: 0; transform: translateX(-60%) scale(.5); }
  to   { opacity: 1; transform: none; }
}

@keyframes ph-icon-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}

@keyframes ph-ring {
  from { box-shadow: 0 0 0 0 rgba(255, 250, 102, .75); }
  to   { box-shadow: 0 0 0 calc(7 * var(--u)) rgba(255, 250, 102, 0); }
}

/* ---------- Mobile: stacked list in pipeline order ---------- */
/* --u becomes 1px so tiles and pills render at their native Figma sizes. */

@media (max-width: 900px) {
  .hero-section--sandbox .hero-image-wrap {
    max-width: 1280px;
    margin-top: 20px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .hero-section--sandbox .ph-diagram {
    margin-top: 0;
  }

  .ph-pill--personalize,
  .ph-pill--deploy {
    justify-content: center;
    padding-left: 0;
  }

  .ph-pill--deploy { gap: 11px; }
  .ph-pill--deploy span { width: auto; }

  .ph-diagram {
    --u: 1px;
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 8px 0 24px;
  }

  .ph-lines, .ph-dots, .ph-bar, .ph-arrow, .ph-badge {
    display: none;
  }

  .ph-card, .ph-pill {
    position: static;
    width: 100%;
    max-width: 340px;
  }
}