/* Project-specific CSS. Nearly everything is Tailwind utilities in the
   templates (srs.md §2.4 — Tailwind, not Bootstrap); this file is only for
   the handful of rules that cannot be expressed as a utility. */

/* Alpine.js: hide an x-cloak'd element until Alpine has initialized and
   removed the attribute. Alpine ships no CSS of its own for this — without
   this rule x-cloak is inert and the element flashes unstyled on load. */
[x-cloak] {
  display: none;
}

/* The rail's avatar tile (DESIGN_SYSTEM.md rev 3 §6.2 / §6.3: the one user
   avatar survives the icon purge as identity). The gradient is read off the
   validated mockups, the same in both themes; a gradient is not expressible as
   one colour token, so it lives here rather than as a utility. */
.rail-avatar {
  background: linear-gradient(135deg, #4f46e5, #818cf8);
}

/* ------------------------------------------------------------------------ */
/* Auth composition (tenant sign-in + signup) — the "split composition"      */
/* artboards 8a/8b of the Claude Design project's `Auth Pages.dc.html`.      */
/*                                                                          */
/* These rules live here rather than as Tailwind utilities because none of   */
/* them can be expressed as one: an angled `clip-path` seam that has to      */
/* follow a flexible column's width, and the keyframes behind the lane       */
/* graphic. Everything else on those two pages is utilities and design       */
/* tokens, per DESIGN_SYSTEM.md §2.3 ("no per-theme class in any template"). */
/*                                                                          */
/* Every colour below is a `var(--token)` from base.html's per-theme block   */
/* rather than a literal — the imported design is drawn in the Grey theme's  */
/* own hexes (verified: every colour inside both artboards is a rev-2 token) */
/* but the page still has to render in Light and Dark, so the graphic takes  */
/* its ink from `--text-secondary` at low opacity and its accent from        */
/* `--accent`, and follows the theme like the rest of the page.         */
/* ------------------------------------------------------------------------ */

/* The seam. The context panel is a flex column of unknown width, so the     */
/* diagonal is expressed as a fixed 130px horizontal run off its own right   */
/* edge — `calc()` keeps the angle anchored to the panel at any viewport     */
/* between the §7.3 floor and 1440, where a fixed polygon percentage (what   */
/* the artboard uses, at exactly 1440) would change angle with the width.    */
.auth-seam {
  clip-path: polygon(0 0, 100% 0, calc(100% - 130px) 100%, 0 100%);
}

/* Graphic layers. `opacity` on the element rather than an `rgba()` literal  */
/* so the ink follows the theme's own text colour (DESIGN_SYSTEM.md §2.3).   */
.auth-hatch {
  background: repeating-linear-gradient(
    135deg,
    var(--text-secondary) 0 1px,
    transparent 1px 64px
  );
  opacity: 0.06;
}

.auth-lane-dashes {
  background: repeating-linear-gradient(
    90deg,
    var(--text-secondary) 0 22px,
    transparent 22px 44px
  );
  opacity: 0.22;
}

.auth-dotgrid {
  background-image: radial-gradient(var(--text-secondary) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.13;
  mask-image: radial-gradient(120% 80% at 26% 46%, #000 28%, transparent 76%);
  -webkit-mask-image: radial-gradient(120% 80% at 26% 46%, #000 28%, transparent 76%);
}

/* Country flags (signup's country code, step 20B Part Z). A flag is two
   "regional indicator" characters that a font draws as one flag, and Windows
   ships no font that does: there they show as two letters. This font holds
   only the flags (78 KB; `unicode-range` keeps it off every other character),
   so it is fetched only by a page that shows one. Twemoji Country Flags, a
   subset of Twemoji Mozilla: static/fonts/LICENSE-TwemojiCountryFlags.txt. */
@font-face {
  font-family: "Twemoji Country Flags";
  font-display: swap;
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
  src: url("../fonts/twemoji-country-flags.a19faae092f7.woff2") format("woff2");
}
.flag-emoji {
  font-family: "Twemoji Country Flags", "Apple Color Emoji", "Noto Color Emoji", "Segoe UI Emoji", sans-serif;
}

/* A scrolling list inside a panel: a thin bar in the theme's own ink, so a
   dark panel does not get the browser's white track (the country code list). */
.thin-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--text-muted) transparent;
}

/* The queued traffic the composition is an argument about — stalled leads.  */
.auth-queue-bar {
  background: var(--text-secondary);
  opacity: 0.2;
}

/* The one marker that pulls out of the queue and merges ahead.              */
.auth-marker {
  background: linear-gradient(90deg, transparent, var(--accent));
}

/* ------------------------------------------------------------------------ */
/* Motion. DESIGN_SYSTEM.md §7.4 is silent on motion entirely — it specifies */
/* no animation anywhere, so every keyframe here is new and is reported as a */
/* proposed addition rather than treated as covered. All of it is decorative */
/* (the graphic only; no form control, error or state change animates), so   */
/* it is gated behind `prefers-reduced-motion: no-preference` in full: with  */
/* the preference set, the graphic renders as a still composition and the    */
/* page loses nothing but movement.                                          */
/* ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  @keyframes auth-drift {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-120px, 120px, 0); }
  }
  @keyframes auth-breathe {
    0%, 100% { opacity: 0.32; transform: scale(1); }
    50%      { opacity: 0.6;  transform: scale(1.12); }
  }
  @keyframes auth-queue {
    from { transform: translateX(0); }
    to   { transform: translateX(-104px); }
  }
  @keyframes auth-lanechange {
    0%   { left: -8%;  top: 214px; opacity: 0; }
    8%   { opacity: 1; }
    34%  { left: 30%;  top: 214px; }
    50%  { left: 48%;  top: 146px; }
    92%  { opacity: 1; }
    100% { left: 104%; top: 146px; opacity: 0; }
  }
  @keyframes auth-chev {
    0%, 100% { opacity: 0.18; }
    50%      { opacity: 1; }
  }
  @keyframes auth-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }

  .auth-anim-drift      { animation: auth-drift 16s linear infinite; }
  .auth-anim-breathe    { animation: auth-breathe 10s ease-in-out infinite; }
  .auth-anim-queue      { animation: auth-queue 5.2s linear infinite; }
  .auth-anim-lanechange { animation: auth-lanechange 7s cubic-bezier(0.4, 0, 0.5, 1) infinite; }
  .auth-anim-chev       { animation: auth-chev 1.8s ease-in-out infinite; }
  .auth-anim-rise       { animation: auth-rise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
  .auth-anim-rise-1     { animation: auth-rise 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) both 0.18s; }
  .auth-anim-rise-2     { animation: auth-rise 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) both 0.28s; }
  .auth-anim-rise-3     { animation: auth-rise 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) both 0.38s; }
}