/*!
 * signin-theme.css - the colour theme of the sign-in page.
 *
 * Everything coloured on this page now reads from the six custom properties
 * below. signin-theme.js rewrites them every 30 minutes, so the page wears a
 * different palette 48 times a day and does not repeat one for 31 days.
 *
 * The values here are only the first paint, and they are the palette the page
 * shipped with, so the page looks exactly as it did if the script never runs.
 *
 * Every selector below is deliberately ONE step more specific than the rule it
 * replaces in signin-motion.css, so this file wins wherever it is loaded and the
 * theme can never depend on stylesheet order.
 */

:root {
  --sx-1: #4d8ffc;
  --sx-1rgb: 77, 143, 252;
  --sx-2: #9b6ef3;
  --sx-2rgb: 155, 110, 243;
  --sx-3: #f0b860;
  --sx-3rgb: 240, 184, 96;
  --sx-1s: #8fdfff;
  --sx-2s: #c8b5ff;
  --sx-3s: #ffd587;
}

/* the three blurred orbs, lifted a little so a new palette is actually felt */
body.signin-enhanced .si-orb { transition: background 2.2s ease, opacity 2.2s ease; }
body.signin-enhanced .si-orb-a { background: var(--sx-1); opacity: .14; }
body.signin-enhanced .si-orb-b { background: var(--sx-2); opacity: .12; }
body.signin-enhanced .si-orb-c { background: var(--sx-3); opacity: .07; }

/* The loudest things on the page.
   The sign-in button is set three times over: once inline in signin.html and once
   in signin-motion.css, both with !important, the second at (0,3,0). This rule is
   (0,3,1) and !important so it wins outright. background-size is restated because
   the shorthand would otherwise drop it and stop the glow sweeping. */
body.signin-enhanced .si-card .btn-theme {
  background: linear-gradient(115deg, var(--sx-1), var(--sx-2), var(--sx-1)) !important;
  background-size: 220% auto !important;
  box-shadow: 0 10px 30px rgba(var(--sx-1rgb), .22) !important;
}
body.signin-enhanced .si-brand-tag {
  background: linear-gradient(135deg, var(--sx-1), var(--sx-2)) !important;
  box-shadow: 0 5px 18px rgba(var(--sx-1rgb), .22) !important;
}
body.signin-enhanced .si-live-pill {
  background-color: rgba(var(--sx-3rgb), .10);
  color: var(--sx-3s);
  box-shadow: 0 0 28px rgba(var(--sx-3rgb), .06), inset 0 1px rgba(255, 255, 255, .035);
  transition: background-color 2.2s ease, color 2.2s ease;
}

/* the page wash behind everything */
html body.signin-enhanced {
  background:
    radial-gradient(circle at 10% 10%, rgba(var(--sx-1rgb), .13), transparent 34%),
    radial-gradient(circle at 88% 90%, rgba(var(--sx-2rgb), .12), transparent 38%),
    #070a12 !important;
  transition: background 2.2s ease;
}

/* the drifting grid */
html body.signin-enhanced::before {
  background-image:
    linear-gradient(rgba(var(--sx-1rgb), .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--sx-1rgb), .035) 1px, transparent 1px);
}

/* the headline gradient */
body.signin-enhanced .si-headline-grad {
  background: linear-gradient(120deg, var(--sx-1s), var(--sx-2s) 52%, var(--sx-3s));
  background-size: 180% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* the feature chips and the small accents */
body.signin-enhanced .ico-v { background: rgba(var(--sx-2rgb), .18); color: var(--sx-2s); }
body.signin-enhanced .ico-b { background: rgba(var(--sx-1rgb), .15); color: var(--sx-1s); }
body.signin-enhanced .si-left-foot a:hover,
body.signin-enhanced .si-forgot a:hover,
body.signin-enhanced .si-legal a:hover { color: var(--sx-1s); }

/* a viewer who has asked for less motion gets the colour without the crossfade */
@media (prefers-reduced-motion: reduce) {
  body.signin-enhanced .si-orb,
  html body.signin-enhanced { transition: none; }
}