/*! CareSlip Story — scoped styles for the free-style (no-iframe) scene bundle.
 *  Everything is namespaced under .careslip-story-scene so nothing leaks into the host page.
 *  Design tokens are verbatim from payslip-server/css/styles.css :root.
 *  NO @font-face / Google Fonts import — DM Sans, Inter, Noto Sans Hebrew and
 *  JetBrains Mono are expected to be already loaded on the host page. */

.careslip-story-scene {
  /* V5 design tokens (scoped — inherited by every element the scene renders) */
  --cs-bg:           oklch(0.985 0.004 90);
  --cs-paper:        #ffffff;
  --cs-ink:          oklch(0.24 0.018 250);
  --cs-ink-2:        oklch(0.42 0.014 250);
  --cs-muted:        oklch(0.58 0.012 250);
  --cs-line:         oklch(0.92 0.008 250);
  --cs-line-2:       oklch(0.96 0.005 250);
  --cs-azure:        oklch(0.62 0.14 240);
  --cs-azure-deep:   oklch(0.38 0.13 240);
  --cs-azure-soft:   oklch(0.96 0.03 240);
  --cs-azure-border: oklch(0.86 0.07 240);
  --cs-success:      oklch(0.55 0.10 152);
  --cs-danger:       oklch(0.55 0.13 22);

  font-family: 'DM Sans', 'Noto Sans Hebrew', 'Inter', sans-serif;
  /* The host controls this element's box; the scene auto-scales 1920×1080 to fit it. */
}

.careslip-story-scene *,
.careslip-story-scene *::before,
.careslip-story-scene *::after { box-sizing: border-box; }

/* === Authentic CareSlip wordmark — from css/styles.css .brand-name / .brand-slip / ::after shine === */
.careslip-story-scene .brand-name {
  font-family: 'DM Sans', 'Noto Sans Hebrew', 'Inter', sans-serif;
  font-size: 50px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1;
  color: var(--cs-azure);
  -webkit-text-stroke: 1.5px var(--cs-ink);
  paint-order: stroke fill;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
  position: relative;
  display: inline-block;
}
.careslip-story-scene .brand-name::after {
  content: 'CareSlip';
  position: absolute;
  inset: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  -webkit-text-stroke: 0;
  text-shadow: none;
  filter: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,0.4) 50%, transparent 58%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  background-position: 220% center;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  pointer-events: none;
  animation: careslip-brandShine 13s ease-in-out infinite;
}
.careslip-story-scene .brand-slip {
  color: rgb(165, 165, 165);
  -webkit-text-stroke: 1.5px var(--cs-ink);
  paint-order: stroke fill;
}

@keyframes careslip-brandShine {
  0%, 68%, 100% { background-position: 220% center; opacity: 0; }
  74%           { background-position: 160% center; opacity: 1; }
  90%           { background-position: -120% center; opacity: 1; }
  94%           { opacity: 0; }
}
@keyframes capIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}