@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@500;600;700&display=swap');
@import url('/motion/assets/app-tiles.css');

:root {
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #133437;
  background: #fff;
  font-synthesis: none;
  --pa-primary: #08c2bb;
  --pa-primary-dark: #0a5f63;
  --pa-accent: #ffcd05;
  --pa-accent-ink: var(--pa-accent);
  --pa-fun: #f06496;
  --pa-success: #7ac143;
  --pa-danger: #e3433d;
  --pa-surface: #fff;
  --pa-text: #17201f;
  --pa-text-muted: #5f6563;
  --pa-font-body: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pa-font-display: Manrope, Inter, sans-serif;
  --pa-font-display-weight: 700;
  --pa-font-display-weight-md: 600;
  --pa-radius-tile: 20px;
  --pa-clay-rest: 0 10px 22px color-mix(in srgb, var(--pa-primary) 15%, transparent),
    inset 0 2px 4px rgba(255, 255, 255, .95),
    inset 0 -3px 6px color-mix(in srgb, var(--pa-primary) 6%, transparent);
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; }
html { overflow-x: clip; }
body[data-scene='login'] { height: 100%; overflow: hidden; }
svg { display: block; }
.motion-page { width: 100%; height: 100vh; height: 100svh; overflow: hidden; }
/* Native scrolling controls the choreography; no wheel or touch hijacking.
   The long, pinned scene gives the cards room to settle without rushing. */
.hero-page { height: 340vh; height: 340svh; overflow: visible; }
.motion-stage {
  width: 100%; height: 100%; position: relative; isolation: isolate;
  overflow: hidden; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent; touch-action: none; outline: none;
}
.motion-stage:focus-visible { outline: 2px solid #129aaf; outline-offset: -7px; }
.hero-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  background: #fff; touch-action: pan-y pinch-zoom;
}
.stage-glow {
  position: absolute; width: min(90vw, 1400px); height: min(50vh, 400px);
  top: 50%; left: 50%; transform: translate(-50%, -33%);
  background: radial-gradient(ellipse, #b3efe136, #c8f6f222 45%, transparent 72%);
  border-radius: 50%; pointer-events: none;
}
.motion-world {
  position: absolute; top: 50%; left: 50%; width: 1400px; height: 560px;
  transform-style: preserve-3d; transform-origin: 50% 50%; will-change: transform;
}
.motion-tiles { position: absolute; inset: 0; perspective: 1150px; transform-style: preserve-3d; }
/* Flatten the card bank as one layer, so every card stays behind PAi. */
.hero-world { transform-style: flat; }
.hero-world .motion-tiles { z-index: 1; }

/* App tile face and typography; this Site supplies only its 3D placement. */
.module-tile.pa-tile {
  --tile-glow: var(--tile-color, var(--pa-primary));
  position: absolute; left: 50%; top: 50%; width: 184px; height: 223px;
  margin: -111.5px 0 0 -92px; padding: 10px 10px 12px; gap: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: none; border-radius: var(--pa-radius-tile); background: var(--pa-surface);
  color: var(--pa-text); box-shadow: var(--pa-clay-rest); text-decoration: none;
  -webkit-touch-callout: none; transform-style: flat;
  /* Composite the face as one plane: nested 3D borders alias at shallow angles. */
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  outline: 1px solid transparent; will-change: transform;
}
.pa-tile-medallion { line-height: 1; color: var(--pa-primary); }
.pa-tile-medallion.has-scene { display: block; align-self: stretch; }
.module-tile h3 {
  margin: 0; font-family: var(--pa-font-display); font-weight: 600;
  font-size: 16px; line-height: 1.15; letter-spacing: .2px;
  text-align: center; color: var(--pa-primary-dark); text-wrap: balance;
  display: grid; place-items: center; min-height: 37px;
}
.pai-core {
  position: absolute; width: 260px; height: 377.8125px;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 2; pointer-events: none; will-change: transform;
}
.pai-core img {
  width: 100%; height: 100%; display: block; object-fit: contain;
  filter: drop-shadow(0 16px 16px #217c751a); -webkit-user-drag: none;
}
.login-stage {
  background: radial-gradient(ellipse at 50% 50%, #c5f1e5a8 0%, #e5f5ef70 38%, transparent 75%), #f6faf7;
  cursor: grab;
}
.login-stage.dragging { cursor: grabbing; }
.carousel-world { width: 860px; height: 520px; }
.carousel-world .motion-tiles { perspective: 1000px; }
[data-orientation='portrait'] .stage-glow { width: 90vw; height: 30vw; }
/* A compact, borderless window for the real homepage placement drafts. */
body[data-embedded='true'], body[data-embedded='true'] .hero-page,
body[data-embedded='true'] .hero-stage { height: 100vh; height: 100svh; overflow: hidden; }
body[data-embedded='true'] .hero-stage { position: relative; }
body[data-embedded='true'] .stage-glow { width: 92%; height: 68%; }
.motion-paused .motion-world, .motion-paused .module-tile, .motion-paused .pai-core { will-change: auto; }
.motion-paused .pa-scene, .motion-paused .pa-scene * { animation-play-state: paused !important; }
/* Original Reports chart motion, paced down for this presentation. */
.pa-scene-posreports .sc-cb { animation-duration: 4.8s; }
.pa-scene-posreports .sc-cb2 { animation-delay: .22s; }
.pa-scene-posreports .sc-cb3 { animation-delay: .44s; }
.pa-scene-posreports .sc-cb4 { animation-delay: .66s; }
.pa-scene-posreports .sc-cb5 { animation-delay: .88s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .hero-page { height: 100vh; height: 100svh; }
  .pa-scene, .pa-scene * { animation: none !important; transition: none !important; }
}