/*
 * Shared design-system tokens for all mockups in this folder.
 * Copied verbatim from app/globals.css (the source of truth).
 * Do not edit values here without updating app/globals.css.
 */

:root {
  --cream: #f5f0e8;
  --paper: #faf7f2;
  --paper-line: #e2d9cc;
  --ink: #4a3f35;
  --ink-light: #7a6e62;
  --ink-faint: #b0a494;
  --warm-border: #ddd5c8;
  --warm-hover: #f0ebe3;
  --amber: #c08030;
  --amber-soft: #f0dcc0;
  --amber-glow: rgba(192, 128, 48, 0.15);
  --success: #5a8a5e;
  --success-soft: #ddeede;
  --error: #b85a4a;
  --error-soft: #f2dad5;
  --shadow-paper: 2px 3px 12px rgba(74, 63, 53, 0.08), 0 1px 3px rgba(74, 63, 53, 0.04);
  --shadow-lift: 4px 6px 20px rgba(74, 63, 53, 0.12);

  --font-typewriter: "Special Elite", "Courier New", monospace;
  --font-courier: "Courier Prime", "Courier New", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-courier);
  -webkit-font-smoothing: antialiased;
}

/* paper-card from app/globals.css */
.paper-card {
  position: relative;
  background: var(--paper);
  box-shadow: var(--shadow-paper);
}
.paper-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  border: 1.5px solid var(--warm-border);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cdefs%3E%3Cfilter id='w'%3E%3CfeTurbulence baseFrequency='0.015' numOctaves='3' seed='2'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='4'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='4' y='4' width='392' height='392' rx='20' fill='none' stroke='white' stroke-width='12' filter='url(%23w)'/%3E%3C/svg%3E");
  mask-size: 100% 100%;
}

/* warm-scrollbar */
.warm-scrollbar::-webkit-scrollbar { width: 5px; }
.warm-scrollbar::-webkit-scrollbar-track { background: transparent; }
.warm-scrollbar::-webkit-scrollbar-thumb { background: var(--warm-border); border-radius: 3px; }

/* Animations */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulseSoft { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

.animate-fade { animation: fadeIn 0.5s ease-out forwards; }
.animate-rise { animation: riseIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.animate-spin-slow { animation: spin 1.5s linear infinite; }
.animate-pulse-soft { animation: pulseSoft 2s ease-in-out infinite; }

.stagger > * {
  opacity: 0;
  animation: riseIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 100ms; }
.stagger > *:nth-child(3) { animation-delay: 200ms; }
.stagger > *:nth-child(4) { animation-delay: 300ms; }
.stagger > *:nth-child(5) { animation-delay: 400ms; }
.stagger > *:nth-child(6) { animation-delay: 500ms; }
.stagger > *:nth-child(7) { animation-delay: 600ms; }
.stagger > *:nth-child(8) { animation-delay: 700ms; }

/* Mockup chrome (not part of design system) */
.mockup-frame {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--warm-border);
  border-radius: 8px;
  padding: 6px 10px;
  font-family: var(--font-courier);
  font-size: 11px;
  color: var(--ink-light);
  box-shadow: var(--shadow-paper);
  display: flex;
  gap: 8px;
  align-items: center;
}
.mockup-frame strong {
  font-family: var(--font-typewriter);
  color: var(--ink);
  font-weight: 400;
}
.mockup-frame a {
  color: var(--amber);
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid transparent;
}
.mockup-frame a:hover { border-color: var(--amber); }
.mockup-frame a.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.mockup-caption {
  position: fixed;
  bottom: 8px; left: 8px; right: 8px;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--warm-border);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: var(--font-courier);
  font-size: 11px;
  color: var(--ink-light);
  box-shadow: var(--shadow-paper);
  max-height: 30vh;
  overflow-y: auto;
}
.mockup-caption strong {
  font-family: var(--font-typewriter);
  color: var(--ink);
  font-weight: 400;
}

/* sr-only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------------
   landing-v2 deltas — additive only, no token overrides above this line
   ------------------------------------------------------------------ */

/* eyebrow used by every feature pillar + the PDF mention */
.eyebrow {
  font-family: var(--font-typewriter);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--amber);
}

/* masonry tile rotations for the output gallery — five fixed bins */
.tile-rot-a { transform: rotate(-2deg); }
.tile-rot-b { transform: rotate(-1deg); }
.tile-rot-c { transform: rotate(0deg); }
.tile-rot-d { transform: rotate(1deg); }
.tile-rot-e { transform: rotate(2deg); }
@media (prefers-reduced-motion: reduce) {
  .tile-rot-a, .tile-rot-b, .tile-rot-c, .tile-rot-d, .tile-rot-e {
    transform: none;
  }
}

/* ---- hero demo loop ----
   The 12s cycle from spec §4.4. Each element below uses .demo-step
   plus a beat-specific class. All animations carry an infinite
   12s parent cycle via animation-duration: 12s on each child.
   Under prefers-reduced-motion the cycle is paused on the end-state
   frame via .demo-loop[data-reduced]. */

@keyframes demo-prompt {
  /* visible 0.0-10.0s, fades 10.0-12.0s, hidden until 12s loop restart */
  0%, 100% { opacity: 0; }
  3% { opacity: 0; }
  12.5% { opacity: 1; }
  83.3% { opacity: 1; }   /* 10/12 */
  100% { opacity: 0; }
}
@keyframes demo-thinking {
  /* visible 1.5-2.2s */
  0%, 12.5% { opacity: 0; }
  13.5% { opacity: 1; }
  18.3% { opacity: 1; }   /* 2.2/12 */
  19.5% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes demo-subprompts {
  /* visible 2.2-10s */
  0%, 18.3% { opacity: 0; }
  20% { opacity: 1; }
  83.3% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes demo-grid-spawn {
  /* appear 4.5s, fade out 10s */
  0%, 37.5% { opacity: 0; transform: translateY(8px); }
  41.7% { opacity: 1; transform: translateY(0); }   /* 5/12 */
  83.3% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes demo-grid-fill {
  /* tile placeholder cross-fades to filled, 5.0-8.0s */
  0%, 41.7% { background: var(--cream); }
  66.7% { background: var(--amber-soft); }   /* 8/12 */
  83.3% { background: var(--amber-soft); }
  100% { background: var(--cream); }
}
@keyframes demo-counter {
  /* types in 8-10s */
  0%, 66.7% { opacity: 0; }
  68% { opacity: 1; }
  83.3% { opacity: 1; }
  100% { opacity: 0; }
}

.demo-loop .demo-prompt    { animation: demo-prompt 12s ease-in-out infinite; }
.demo-loop .demo-thinking  { animation: demo-thinking 12s ease-in-out infinite; }
.demo-loop .demo-subprompts{ animation: demo-subprompts 12s ease-in-out infinite; }
.demo-loop .demo-grid      { animation: demo-grid-spawn 12s ease-in-out infinite; }
.demo-loop .demo-tile      { animation: demo-grid-fill 12s ease-in-out infinite; }
.demo-loop .demo-counter   { animation: demo-counter 12s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .demo-loop .demo-prompt,
  .demo-loop .demo-thinking,
  .demo-loop .demo-subprompts,
  .demo-loop .demo-grid,
  .demo-loop .demo-tile,
  .demo-loop .demo-counter { animation: none; opacity: 1; }
  .demo-loop .demo-tile { background: var(--amber-soft); }
}

/* feature visual pulse — used in the agent sub-prompts deep-dive */
@keyframes pulseTile { 0%, 100% { background: var(--cream); } 50% { background: var(--amber-soft); } }
.pulse-on-hover:hover .pulse-target { animation: pulseTile 1.2s ease-in-out infinite; }

/* ---- use-case tabs ----
   Tailwind's peer-checked/{name} requires the input to be a direct sibling
   of the styled element. Our radios sit at the section level while the
   tab labels and content cards are nested one level deeper inside wrapper
   divs, so the peer pattern doesn't reach them. These rules implement the
   same intent using the sibling combinator + descendant selectors. */
#uc-social:checked ~ * label[for="uc-social"],
#uc-icons:checked ~ * label[for="uc-icons"],
#uc-headers:checked ~ * label[for="uc-headers"],
#uc-presos:checked ~ * label[for="uc-presos"],
#uc-chars:checked ~ * label[for="uc-chars"],
#uc-ads:checked ~ * label[for="uc-ads"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
#uc-social:checked ~ * [data-uc="social"],
#uc-icons:checked ~ * [data-uc="icons"],
#uc-headers:checked ~ * [data-uc="headers"],
#uc-presos:checked ~ * [data-uc="presos"],
#uc-chars:checked ~ * [data-uc="chars"],
#uc-ads:checked ~ * [data-uc="ads"] {
  display: block !important;
}

@keyframes promptInspirationIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes generatedBlockIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

.use-case-flow {
  overflow: hidden;
}

.use-case-prompt-frame {
  display: grid;
  gap: 8px;
  animation: promptInspirationIn 520ms ease-out both;
}

.use-case-prompt-frame .eyebrow {
  margin-bottom: 4px;
}

.use-case-prompt-frame > div:nth-child(3) {
  margin-bottom: 0;
}

.use-case-reference {
  width: 80px;
  height: 80px;
}

.use-case-output-grid,
.use-case-output-strip {
  animation: promptInspirationIn 520ms ease-out 120ms both;
}

.use-case-output-grid > img,
.use-case-output-strip > img {
  opacity: 0;
  animation: generatedBlockIn 560ms ease-out both;
}

.use-case-output-grid > img:nth-child(1),
.use-case-output-strip > img:nth-child(1) { animation-delay: 160ms; }
.use-case-output-grid > img:nth-child(2),
.use-case-output-strip > img:nth-child(2) { animation-delay: 230ms; }
.use-case-output-grid > img:nth-child(3),
.use-case-output-strip > img:nth-child(3) { animation-delay: 300ms; }
.use-case-output-grid > img:nth-child(4) { animation-delay: 370ms; }
.use-case-output-grid > img:nth-child(5) { animation-delay: 440ms; }
.use-case-output-grid > img:nth-child(6) { animation-delay: 510ms; }
.use-case-output-grid > img:nth-child(7) { animation-delay: 580ms; }
.use-case-output-grid > img:nth-child(8) { animation-delay: 650ms; }
.use-case-output-grid > img:nth-child(9) { animation-delay: 720ms; }

.use-case-output-strip {
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
}

.use-case-output-strip > img {
  scroll-snap-align: start;
}

@media (min-width: 768px) {
  .use-case-prompt-frame {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 24px;
  }

  .use-case-prompt-frame .eyebrow {
    grid-column: 1 / -1;
  }

  .use-case-prompt-frame > div:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }

  .use-case-prompt-frame > div:nth-child(3) {
    grid-column: 1;
    grid-row: 3;
  }

  .use-case-prompt-frame > div:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
  }

  .use-case-prompt-frame > div:nth-child(5) {
    grid-column: 2;
    grid-row: 3;
  }
}

@media (max-width: 767px) {
  .use-case-reference {
    width: 72px;
    height: 72px;
  }

  .use-case-output-strip {
    grid-template-columns: repeat(3, minmax(260px, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .use-case-prompt-frame,
  .use-case-output-grid,
  .use-case-output-strip,
  .use-case-output-grid > img,
  .use-case-output-strip > img {
    animation: none;
    opacity: 1;
    transform: none;
  }
}