/* Onboarding / signup pages — reusable styles, SCOPED to `.onboarding-page`.
 *
 * Everything here only applies inside an element with class `onboarding-page`
 * (the page's root wrapper), so these class names (font-title, font-body, …)
 * can't leak into or clash with the rest of the app. Mirrors the custom
 * utilities the MagicPatterns designs rely on. Loaded once in
 * views/layout.inertia.erb; add `class="onboarding-page"` to any onboarding
 * page root to opt in. */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,700;1,9..40,700&display=swap&family=Inter:wght@400;500;600;700&display=swap');

/* Canonical onboarding palette — the SINGLE SOURCE OF TRUTH for brand colours
 * across every onboarding/signup page. Reference these from markup with Tailwind
 * arbitrary values, e.g. `bg-[var(--giga-ink)]` / `text-[var(--giga-orange)]`,
 * instead of hard-coding the hex each time — so changing a colour here updates
 * the whole flow and we don't drift. (Migration of existing inline hexes is
 * in progress; new code should use these vars.) */
.onboarding-page {
  --giga-ink:           #2B211A;  /* primary dark: CTA bg, headings, dark panel */
  --giga-orange:        #EA580C;  /* primary accent: step labels, checks, focus */
  --giga-orange-bright: #F97316;  /* brighter accent: showcase counter, glow */
  --giga-cream:         #FFF7ED;  /* selected tile / soft accent bg */
  --giga-highlight:     #FFEDD5;  /* selected option row / accent circle bg */
  --giga-border:        #EAE4D9;  /* warm hairline borders */
  --giga-text:          #333333;  /* body text on light surfaces */
  --giga-panel-dark:    #1C1510;  /* showcase stage bg */
  --giga-card-dark:     #4A3B30;  /* showcase card bg */
}

/* Type — font-bold etc. stay as Tailwind weights; these set the FAMILY only. */
.onboarding-page {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;   /* match MagicPatterns: grayscale AA, crisper/thinner */
  -moz-osx-font-smoothing: grayscale;
}
.onboarding-page .font-title  { font-family: 'DM Sans', 'Inter', sans-serif; font-weight: 700; }
.onboarding-page .font-body   { font-family: 'Inter', sans-serif; }

/* Step "eyebrow" (STEP X OF 4 etc.) — reused on every onboarding step, so the
 * styling lives here. Pages add their own margin (e.g. `mb-2.5`). */
.onboarding-page .onboarding-eyebrow {
  font-size: 0.75rem;            /* text-xs */
  font-weight: 500;              /* medium */
  text-transform: uppercase;
  letter-spacing: 0.05em;        /* tracking-wider */
  color: var(--giga-orange);
}
@media (min-width: 640px) { .onboarding-page .onboarding-eyebrow { font-size: 0.875rem; } } /* sm:text-sm */

/* .bg-giga-highlight now lives (unscoped) in views/layout.inertia.erb, driven by
 * --giga-selected-bg so it's shared with the app and recolours in one place. */

/* Subtle dot-matrix texture for dark panels — exact MagicPatterns tile:
 * an 8×8 cell with a 2×2px white square at 5% opacity, repeated. */
.onboarding-page .dot-matrix-dark {
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='2' height='2' fill='%23FFFFFF' fill-opacity='0.05'/%3E%3C/svg%3E");
  background-size: 8px 8px;
  pointer-events: none;
}

/* Light counterpart of dot-matrix-dark — dark dots on a light surface, for the
 * mobile signup form pane. Same 8×8 tile, ink dots at low opacity. */
.onboarding-page .dot-matrix {
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='2' height='2' fill='%232B211A' fill-opacity='0.05'/%3E%3C/svg%3E");
  background-size: 8px 8px;
  pointer-events: none;
}
/* Top + bottom vertical fade so the texture frames content without crowding the
 * middle. Kept in CSS (not inline) so the fade stays consistent and reusable. */
.onboarding-page .dot-matrix-fade-y {
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 28%, transparent 72%, black 100%);
  mask-image: linear-gradient(to bottom, black 0%, transparent 28%, transparent 72%, black 100%);
}

/* Vertical marquee (legacy — superseded by the SignupShowcase notification
 * stack below; kept in case any page still references it). */
@keyframes onboarding-marquee {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}
.onboarding-page .marquee-vertical { animation: onboarding-marquee 32s linear infinite; }

/* SignupShowcase — the live "execution pipeline" notification stack. Cards drop
 * in from below, flip to a checkmark and rise (rise itself is a JS FLIP via the
 * Web Animations API), and the oldest fades out at the top. */
@keyframes signup-task-in {
  0%   { opacity: 0; transform: translateY(44px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.onboarding-page .signup-task-in { animation: signup-task-in 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

@keyframes signup-task-out {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-24px) scale(0.95); }
}
.onboarding-page .signup-task-out { animation: signup-task-out 0.4s ease both; }

@keyframes signup-check-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  55%  { transform: scale(1.35); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.onboarding-page .signup-check-pop { animation: signup-check-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

.onboarding-page.default {
  background-image: linear-gradient(to bottom,transparent 0,transparent 56px,#FFFFFF 168px,#FFFFFF calc(100% - 168px),transparent calc(100% - 56px),transparent 100%),url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='2' height='2' fill='%232B211A' fill-opacity='0.10'/%3E%3C/svg%3E");
}

.giga-btn[aria-disabled='true'], .giga-btn:disabled { background-color: #d4d4d4; opacity: 1 !important; }

.onboarding-page .giga-box.--active { background-color: var(--giga-cream) !important; }