/* signin_wall.css — the two sign-in walls: the card a signed-out reader gets
   at an event overview (templates/authored/hub_gated.html) and the /login
   page (templates/login.html). One visual language for both, so the wall a
   reader meets on an event and the page it sends them to read as one door.

   Motion in the landing page's manner: a card that rises in, a warm light
   that follows the pointer, a slow orbit behind it, a padlock that lifts its
   shackle, lines that slide in with their ticks drawing, and a glint across
   the button. Everything rests on its finished frame, so with JavaScript off
   or reduced motion on the page is complete and still.
   Zero raw hex: every colour is var(--bento-*). */

/* ---- Stage: the panel the card sits on, with the sky behind it ---------- */
.sw-stage {
  --px: 0;
  --py: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(28px, 6vw, 64px) var(--sp-4);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--bento-white) 0%, transparent 60%),
    linear-gradient(180deg, var(--bento-cream), var(--bento-sand));
  border: 1px solid var(--bento-line);
}
/* /login: the stage is the whole page under the nav. */
.sw-stage--page {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 72px);
  border: 0;
  border-radius: 0;
}
/* A marigold glow that drifts slowly behind the card. */
.sw-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 42%;
  width: min(560px, 110%);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--bento-highlight) 38%, transparent) 0%, transparent 62%);
  animation: sw-drift 14s ease-in-out infinite alternate;
}

/* ---- Sky: orbits and sparks, decorative only ----------------------------- */
.sw-sky {
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translate(calc(var(--px) * -10px), calc(var(--py) * -8px));
  transition: transform 600ms var(--ease-ui, ease);
}
.sw-orbits {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.sw-orbits ellipse {
  fill: none;
  stroke: var(--bento-tan-300);
  stroke-width: 1.4;
  stroke-dasharray: 3 9;
  opacity: .55;
}
.sw-orbit { transform-origin: 300px 200px; }
.sw-orbit--a { rotate: -14deg; animation: sw-spin 60s linear infinite; }
.sw-orbit--b { rotate: 22deg; animation: sw-spin 90s linear infinite reverse; }
.sw-orbit--c ellipse { stroke: var(--bento-tan-200); stroke-dasharray: 1 7; opacity: .7; }
.sw-orbit--c { animation: sw-spin 120s linear infinite; }
.sw-planet {
  fill: var(--bento-highlight);
  stroke: var(--bento-ink);
  stroke-width: 1.6;
}
.sw-planet--pale { fill: var(--bento-white); }

.sw-sky i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 9px;
  height: 9px;
  background: var(--bento-tan-300);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: .35;
  animation: sw-twinkle 3.2s ease-in-out var(--d, 0s) infinite;
}
.sw-sky i:nth-child(3n) { background: var(--bento-highlight-edge); width: 12px; height: 12px; }

/* ---- Card ----------------------------------------------------------------- */
.sw-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  text-align: center;
  background: var(--bento-white);
  border: 1px solid var(--bento-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card-hover);
  animation: sw-rise 700ms var(--ease-spring) 80ms backwards;
  transition: transform 300ms var(--ease-spring), box-shadow 300ms ease;
}
.sw-card--narrow { max-width: 440px; }
/* On an event page the card sits inside .au-body, whose long-prose rules
   (1.19rem serif paragraphs and list items, italic em) would otherwise reach
   in. The card's own text rules below are all scoped under .sw-card so they
   outrank this reset and those rules alike. */
.sw-card :is(p, li, em) {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-style: normal;
  line-height: 1.55;
}
.sw-card:hover { transform: translateY(-3px); }

/* The warm light that follows the pointer (static/js/signin-wall.js). */
.sw-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, -40%),
              color-mix(in srgb, var(--bento-highlight) 26%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity 300ms ease;
}
.sw-glow:hover::before { opacity: 1; }

/* The card's contents arrive one after another. */
.sw-in {
  animation: sw-up 560ms var(--ease-spring) backwards;
  animation-delay: calc(260ms + var(--i, 0) * 90ms);
}

/* ---- Emblem: a padlock inside an orbit ------------------------------------ */
.sw-emblem {
  display: grid;
  place-items: center;
  width: 104px;
  height: 104px;
  margin: 0 auto var(--sp-4);
  animation: sw-pop 700ms var(--ease-spring) 200ms backwards;
}
.sw-emblem svg { display: block; width: 104px; height: 104px; overflow: visible; }
.sw-emblem svg * { stroke-linecap: round; stroke-linejoin: round; }
.sw-emblem__halo {
  fill: color-mix(in srgb, var(--bento-highlight) 55%, transparent);
  transform-origin: 52px 52px;
  animation: sw-breathe 3.4s ease-in-out infinite;
}
.sw-emblem__ring {
  fill: none;
  stroke: var(--bento-tan-300);
  stroke-width: 1.6;
  stroke-dasharray: 4 7;
  transform-origin: 52px 52px;
  animation: sw-spin 18s linear infinite;
}
.sw-emblem__sat {
  transform-origin: 52px 52px;
  animation: sw-spin 6s linear infinite;
}
.sw-emblem__sat circle { fill: var(--bento-highlight); stroke: var(--bento-ink); stroke-width: 1.8; }
.sw-emblem__sat circle + circle { fill: var(--bento-white); }
.sw-emblem__body { fill: var(--bento-white); stroke: var(--bento-ink); stroke-width: 2.6; }
.sw-emblem__key { fill: var(--bento-ink); }
.sw-emblem__slot { fill: none; stroke: var(--bento-ink); stroke-width: 2.6; }
.sw-emblem__shackle {
  fill: none;
  stroke: var(--bento-ink);
  stroke-width: 2.6;
  transform-box: fill-box;
  transform-origin: 100% 100%;
}
/* The padlock stays shut for as long as the reader is signed out: no hover,
   focus or jiggle opens it. Only a completed sign-in (.is-in) opens it. */
.sw-card.is-in .sw-emblem__shackle {
  animation: none;
  transform: translateY(-5px) rotate(24deg);
  transition: transform 420ms var(--ease-spring);
}
.sw-card.is-in .sw-emblem__halo { fill: color-mix(in srgb, var(--bento-success) 22%, transparent); }
.sw-card.is-in .sw-emblem__body { stroke: var(--bento-success); }

/* ---- Chip ------------------------------------------------------------------ */
.sw-card .sw-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--bento-sand);
  border: 1px solid var(--bento-line);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--bento-ink-soft);
}
.sw-chip__dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bento-success);
}
.sw-chip__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--bento-success);
  animation: sw-ping 2s ease-out infinite;
}

/* ---- Headings --------------------------------------------------------------- */
.sw-title {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 4.4vw, 2rem);
  line-height: 1.15;
  color: var(--bento-ink);
}
/* The event name, struck through with the highlighter as the card arrives. */
.sw-card .sw-event {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--bento-ink);
}
.sw-mark {
  padding: 0.06em 0.28em;
  color: var(--bento-highlight-ink);
  background: linear-gradient(to bottom, transparent 10%, var(--bento-highlight) 10%,
              var(--bento-highlight) 90%, var(--bento-highlight-edge) 90%) no-repeat 0 0 / 100% 100%;
  border-radius: 0.28em 0.5em 0.35em 0.45em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  animation: sw-swipe 900ms cubic-bezier(.65, 0, .35, 1) 700ms backwards;
}
.sw-card .sw-lede {
  margin: 0 auto var(--sp-5);
  max-width: 30rem;
  color: var(--bento-ink-soft);
  line-height: 1.6;
}

/* ---- What the account opens --------------------------------------------------- */
.sw-perks {
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: var(--sp-2);
  text-align: left;
  background: var(--bento-cream);
  border: 1px solid var(--bento-line);
  border-radius: var(--r-md);
}
.sw-card .sw-perks li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px var(--sp-3);
  border-radius: calc(var(--r-md) - 8px);
  line-height: 1.4;
  color: var(--bento-ink);
  animation: sw-slide 520ms var(--ease-spring) backwards;
  animation-delay: calc(620ms + var(--i, 0) * 110ms);
  transition: background var(--dur-fast) ease;
}
.sw-perks li:hover { background: var(--bento-white); }
.sw-perks li + li { border-top: 1px dashed var(--bento-line); }
.sw-perks li > span:nth-child(2) { flex: 1; }
.sw-card .sw-perks em {
  flex: none;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .02em;
  background: var(--bento-highlight);
  color: var(--bento-highlight-ink);
}
.sw-card .sw-perks li.is-paid em { background: var(--bento-tan-100); }
.sw-tick {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bento-white);
  border: 1.5px solid var(--bento-ink);
  animation: sw-pop 520ms var(--ease-spring) backwards;
  animation-delay: calc(760ms + var(--i, 0) * 110ms);
}
.sw-tick svg { width: 14px; height: 14px; }
.sw-tick svg path {
  fill: none;
  stroke: var(--bento-ink);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 26;
  animation: sw-draw 520ms ease-out backwards;
  animation-delay: calc(900ms + var(--i, 0) * 110ms);
}
.sw-perks li.is-paid .sw-tick { background: var(--bento-sand); border-color: var(--bento-tan-300); }

/* ---- The button ---------------------------------------------------------------- */
.sw-btn-wrap { position: relative; display: block; }
.sw-btn {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: 52px;
  font-weight: 700;
  transition: transform 220ms var(--ease-spring), box-shadow 220ms ease, background var(--dur-fast) ease;
}
.sw-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.sw-btn:active { transform: translateY(0) scale(.99); }
/* A glint that sweeps across every few seconds. ::before, because the
   colour-blind theme draws its own mark on .btn-fill::after. */
.sw-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(105deg, transparent 38%,
              color-mix(in srgb, var(--bento-white) 70%, transparent) 50%, transparent 62%);
  translate: -120% 0;
  animation: sw-glint 4.2s ease-in-out 1.6s infinite;
  pointer-events: none;
}
.sw-btn > * { position: relative; z-index: 1; }
.sw-g {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bento-white);
  box-shadow: 0 1px 2px var(--bento-shadow-hover);
}
.sw-g svg { width: 18px; height: 18px; }

/* The Google button: a light sand face with a tan hairline rather than the
   full tan fill, so it reads as the way in without being the darkest thing
   on the card. No arrow: the G says where it goes. */
.btn.btn-fill.sw-btn--google {
  background: var(--bento-sand);
  box-shadow: inset 0 0 0 1px var(--bento-tan-200), 0 2px 8px var(--bento-shadow);
}
.btn.btn-fill.sw-btn--google:hover,
.btn.btn-fill.sw-btn--google:focus-visible {
  background: var(--bento-tan-100);
  box-shadow: inset 0 0 0 1px var(--bento-tan-300), var(--shadow-card-hover);
}

.sw-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-4) 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  color: var(--bento-ink-soft);
}
.sw-card .sw-foot li { display: inline-flex; align-items: center; gap: 6px; font-size: inherit; }
.sw-foot svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---- /login extras ---------------------------------------------------------------- */
.sw-brand {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--bento-ink);
}
.sw-brand span { position: relative; color: var(--bento-ink); }
.sw-brand span::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -4%;
  right: -4%;
  bottom: 4%;
  height: 42%;
  border-radius: 0.3em 0.5em 0.35em 0.45em;
  background: var(--bento-highlight);
  transform-origin: 0 50%;
  animation: sw-underline 800ms cubic-bezier(.65, 0, .35, 1) 650ms backwards;
}
.sw-brand { isolation: isolate; }

/* login.css sizes these, but the card's text reset outranks it. */
.sw-card .login-success-name { margin: 0 0 4px; font-size: 1.1rem; font-weight: 700; color: var(--bento-ink); }
.sw-card .login-success-email { margin: 0 0 var(--sp-5); font-size: 0.82rem; color: var(--bento-ink-soft); }
.sw-card .login-error-msg { margin: var(--sp-2) 0 0; font-size: 0.9rem; color: var(--bento-error); }
.sw-card .login-signout-btn { min-height: 44px; }

/* Signed in: the avatar pops in with a ring that settles around it. */
.sw-card .login-success-panel { animation: sw-up 520ms var(--ease-spring) backwards; }
.sw-card .login-success-pic {
  animation: sw-pop 620ms var(--ease-spring) 120ms backwards;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--bento-highlight) 70%, transparent);
}
.sw-card.is-in .login-success-pic { animation: sw-pop 620ms var(--ease-spring) 120ms backwards, sw-halo 2.4s ease-out 700ms infinite; }
.sw-card .login-error-msg:not(:empty) { animation: sw-shake 420ms ease; }

/* ---- Keyframes ------------------------------------------------------------------ */
@keyframes sw-rise   { from { opacity: 0; transform: translateY(26px) scale(.97); } }
@keyframes sw-up     { from { opacity: 0; transform: translateY(12px); } }
@keyframes sw-slide  { from { opacity: 0; transform: translateX(-14px); } }
@keyframes sw-pop    { from { opacity: 0; transform: scale(.4); } }
@keyframes sw-draw   { from { stroke-dashoffset: 26; } }
@keyframes sw-swipe  { from { background-size: 0% 100%; } }
@keyframes sw-underline { from { transform: scaleX(0); } }
@keyframes sw-spin   { to { transform: rotate(360deg); } }
@keyframes sw-breathe { 50% { transform: scale(1.08); } }
@keyframes sw-ping   { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3); opacity: 0; } }
@keyframes sw-twinkle { 0%, 100% { opacity: .15; transform: scale(.6) rotate(0deg); } 50% { opacity: .75; transform: scale(1) rotate(45deg); } }
@keyframes sw-drift  { from { translate: -58% -54%; } to { translate: -42% -44%; } }
@keyframes sw-glint  { 0%, 55% { translate: -120% 0; } 85%, 100% { translate: 120% 0; } }
@keyframes sw-jiggle {
  0%, 70%, 100% { transform: none; }
  76% { transform: translateY(-3px) rotate(10deg); }
  82% { transform: translateY(0) rotate(-4deg); }
  88% { transform: translateY(-1px) rotate(3deg); }
}
@keyframes sw-halo   { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bento-highlight) 70%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
@keyframes sw-shake  { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* ---- Phones ------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .sw-stage { padding: var(--sp-5) var(--sp-3); border-radius: var(--r-md); }
  .sw-stage--page { border-radius: 0; }
  .sw-card { padding: var(--sp-6) var(--sp-4) var(--sp-5); border-radius: var(--r-md); }
  .sw-emblem, .sw-emblem svg { width: 88px; height: 88px; }
  .sw-perks li { flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
  .sw-perks em { margin-left: 40px; }
}

/* ---- Stillness ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sw-stage::before, .sw-sky i, .sw-orbit, .sw-card, .sw-in, .sw-emblem,
  .sw-emblem *, .sw-chip__dot::after, .sw-mark, .sw-perks li, .sw-tick,
  .sw-tick svg path, .sw-btn::before, .sw-brand span::after,
  .sw-card .login-success-panel, .sw-card .login-success-pic, .sw-card .login-error-msg {
    animation: none !important;
  }
  .sw-sky, .sw-card, .sw-btn, .sw-emblem__shackle { transition: none !important; }
  .sw-card:hover, .sw-btn:hover { transform: none; }
}