/* Beta sign in: one arched window on ebony, drawn the way the monogram is drawn (a brass arch
   and jambs with a finer lining, open over a brass sill), with the house seen through it at dusk.
   The window draws itself once; everything else stays still. */

/* Roboto Medium for the Google button only, as Google's branding asks; subset to its letters */
@font-face {
  font-family: "Roboto";
  src: url("/fonts/roboto-button-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

.beta-page {
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* the light the window lets into the room */
  background:
    radial-gradient(ellipse 46% 58% at 50% 40%, rgba(191, 154, 94, 0.11), transparent 72%),
    var(--ebony);
}

.beta {
  --brass-gradient: linear-gradient(135deg, #8a6a39 0%, #c4a064 20%, #ebd3a0 42%, #be975a 58%, #dcbe86 80%, #94733f 100%);
  display: grid;
  justify-items: center;
  align-content: center;
  padding: clamp(0.5rem, 3vh, 2.5rem) var(--gutter) clamp(2.5rem, 6vh, 4rem);
}

.window {
  position: relative;
  width: min(31rem, calc(100% - 2.5rem));
  container-type: inline-size;
  border-radius: 999px 999px 0 0; /* a true semicircle at any width */
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(to bottom, #2a221a 0%, var(--surface) 42%, var(--ebony) 82%);
}

/* The frame, at the brand's drawing opacity */
.window::before,
.window::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
  border-radius: 999px 999px 0 0;
  background: var(--brass-gradient);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.window::before { inset: 0; padding: 3px 3px 0; opacity: 0.75; }
.window::after { inset: 0.9rem 0.9rem 0; padding: 1px 1px 0; opacity: 0.5; }

/* The view through the glass */
.view {
  position: relative;
  height: 80cqw;
  overflow: hidden;
}
.view picture, .view img { display: block; width: 100%; height: 100%; }
.view img {
  object-fit: cover;
  object-position: 50% 40%;
  scale: 1.16;
  transform-origin: 50% 36%;
  -webkit-mask-image: linear-gradient(to bottom, #000 36%, transparent 76%);
  mask-image: linear-gradient(to bottom, #000 36%, transparent 76%);
}
.view::after { /* the faintest sheen on the glass, fading out with the view */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(118deg, transparent 36%, rgba(239, 231, 214, 0.07) 47%, transparent 58%);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 70%);
  mask-image: linear-gradient(to bottom, #000 30%, transparent 70%);
}

.pane {
  position: relative;
  z-index: 1;
  margin-top: -26cqw;
  padding: 0 clamp(1.4rem, 10cqw, 3.25rem) clamp(2.25rem, 10cqw, 3.25rem);
  text-align: center;
  visibility: hidden; /* until beta.js knows who is here; noscript.css shows it without JavaScript */
}
.window.is-known .pane { visibility: visible; }

.state { display: grid; justify-items: center; gap: 1.1rem; }
.state[hidden] { display: none; }
.state h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.75rem, 1rem + 5.4cqw, 2.6rem);
  line-height: 1.08;
  text-wrap: balance;
}
.state h1:focus { outline: none; }
.lead {
  margin: 0;
  max-width: 24rem;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--stone);
  text-wrap: balance;
}
.nowrap { white-space: nowrap; }
.lead strong { font-weight: 500; color: var(--ivory); overflow-wrap: anywhere; }
.notice { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--brass-light); }
.notice:empty { display: none; }
.fine { margin: 0.35rem 0 0; max-width: 22rem; font-size: 0.82rem; line-height: 1.55; color: var(--stone); }
.fine a { color: var(--ivory); }
.state .status { text-align: center; }

/* Google's dark button, to its branding guidelines */
.google {
  position: relative;
  display: flex;
  align-items: center;
  width: min(100%, 20rem);
  height: 40px;
  margin-top: 0.6rem;
  padding: 0 12px;
  overflow: hidden;
  font-family: "Roboto", arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.25px;
  white-space: nowrap;
  color: #e3e3e3;
  background: #131314;
  border: 1px solid #8e918f;
  border-radius: 4px;
  text-decoration: none;
  transition: box-shadow 0.218s;
}
.google .g { flex: none; width: 20px; height: 20px; margin-right: 12px; }
.google span { flex: 1; text-align: center; }
.google::after { /* Google's state layer */
  content: "";
  position: absolute; inset: 0;
  background: #fff;
  opacity: 0;
  transition: opacity 0.218s;
}
.google:hover { color: #e3e3e3; box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15); }
.google:hover::after { opacity: 0.08; }
.google:active::after, .google:focus-visible::after { opacity: 0.12; }
.google:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* The one filled action in each state */
.beta .primary, .beta .button {
  grid-column: auto;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: min(100%, 20rem);
  min-height: 3.2rem;
  margin-top: 0.6rem;
  padding: 0.9rem 2rem 0.9rem calc(2rem + var(--caps));
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: var(--caps);
  text-transform: uppercase;
  color: var(--ebony);
  background: var(--ivory);
  border: 1px solid var(--ivory);
  text-decoration: none;
  transition: background-color 220ms var(--ease), border-color 220ms var(--ease);
}
.beta .primary::after { background: var(--brass-deep); }
.beta .primary:hover, .beta .button:hover { color: var(--ebony); background: var(--brass-light); border-color: var(--brass-light); }

/* Quiet actions: another account, sign out */
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1.75rem; margin-top: 0.5rem; }
.text-button, .text-link {
  grid-column: auto;
  justify-self: auto;
  min-height: 0;
  margin: 0;
  padding: 0.55rem 0;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--stone);
  background: none;
  border: 0;
  border-radius: 0;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.55em;
  cursor: pointer;
  transition: color 200ms var(--ease), text-decoration-color 200ms var(--ease);
}
.text-button::after { content: none; }
.text-button:hover, .text-link:hover { color: var(--ivory); background: none; text-decoration-color: var(--brass); }
.text-button:active { transform: none; }

/* The follow-up questions, centred in the window */
.state .followup { width: 100%; justify-items: center; margin-top: 0.5rem; }
.state .sizes legend { width: 100%; text-align: center; }
.state .chips { justify-content: center; }
.state .followup .field { width: 100%; text-align: left; }
.state .followup button { justify-self: center; }
.state .thanks { width: 100%; margin-top: 0.5rem; }

.sill {
  width: min(35rem, 100%);
  height: 7px;
  background: var(--brass-gradient);
  border-radius: 1px;
}
.aside { margin: 1.4rem 0 0; font-size: 0.95rem; color: var(--stone); text-align: center; }
.aside a { color: var(--ivory); }

/* Drawn once: the sill, then the jambs rising into the arch, then daylight through the glass */
@keyframes sill-draw { from { scale: 0 1; } }
@keyframes frame-rise { from { clip-path: inset(100% 0 0 0); } }
@keyframes view-dawn { from { opacity: 0; scale: 1.05; } }
@keyframes settle { from { opacity: 0; translate: 0 0.6rem; } }

@media (prefers-reduced-motion: no-preference) {
  .sill { animation: sill-draw 0.9s var(--ease) 0.15s both; }
  .window::before { animation: frame-rise 1.5s var(--ease) 0.4s both; }
  .window::after { animation: frame-rise 1.5s var(--ease) 0.65s both; }
  .view picture { animation: view-dawn 2.2s var(--ease-light) 1s both; }
  .state:not([hidden]) { animation: settle 0.8s var(--ease) both; }
  .window:not(.is-settled) .state:not([hidden]) { animation-delay: 1.35s; }
  .aside { animation: settle 0.8s var(--ease) 1.8s both; }
}

@media (max-width: 720px) {
  .beta { padding-top: 0.25rem; }
  .window { width: min(31rem, calc(100% - 2rem)); }
}