/* ==========================================================================
   auth_transition.css: the sign-in / sign-out "portal".
   A violet field grows out of the control the person pressed (Sign in, Exit)
   while the request is in flight, and on the next page shrinks into the
   element marked data-at-target (the account button, the login card's mark).
   Markup: accounts/partials/_auth_transition.html. Behaviour: core/js/auth_transition.js.
   Self-contained on purpose: the panels do not load site_toybox.css, so the
   tokens below are copies of its brand values (hue 268 / ground 255).
   The arrival ends by CSS alone, so a script failure can never trap anyone.
   ========================================================================== */
.at-portal{
  --at-field:      oklch(58% .19 268);
  --at-field-deep: oklch(46% .17 268);
  --at-field-lit:  oklch(64% .18 268);
  --at-on:         oklch(99% .004 255);
  --at-accent:     oklch(99% .004 255);
  --at-accent-ink: oklch(46% .17 268);
  --at-ease-out:   cubic-bezier(.22,1,.36,1);
  --at-ease-in:    cubic-bezier(.7,0,.84,0);
  --x: 50%;
  --y: 50%;

  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  padding: 1rem;
  color: var(--at-on);
  background:
    radial-gradient(circle at 50% 44%, var(--at-field-lit), var(--at-field) 46%, var(--at-field-deep) 120%);
  clip-path: circle(150vmax at var(--x) var(--y));
  -webkit-font-smoothing: antialiased;
}

.at-portal[data-at-accent="student"]{ --at-accent: oklch(80% .19 130); --at-accent-ink: oklch(32% .1 130); }
.at-portal[data-at-accent="parent"] { --at-accent: oklch(72% .17 55);  --at-accent-ink: oklch(36% .12 50); }
.at-portal[data-at-accent="tutor"]  { --at-accent: oklch(78% .11 210); --at-accent-ink: oklch(30% .08 220); }

.at-stage{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 34rem;
}

.at-mark{
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--at-accent);
  color: var(--at-accent-ink);
  box-shadow: 0 10px 24px -10px oklch(20% .1 268 / .55), inset 0 -3px 0 oklch(0% 0 0 / .08);
}
.at-mark svg{ width: 38px; height: 38px; }

.at-shadow{
  width: 46px;
  height: 8px;
  margin-top: 10px;
  border-radius: 50%;
  background: oklch(20% .1 268 / .35);
}

.at-title{
  margin: 1.4rem 0 0;
  font-family: "Bricolage Grotesque", Vazirmatn, system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.at-title--pending{
  font-size: clamp(1.15rem, 2.4vw, 1.45rem);
  margin-top: 1rem;
}
.at-line{
  margin: .6rem 0 0;
  font-family: Karla, Vazirmatn, system-ui, sans-serif;
  font-size: 1.08rem;
  line-height: 1.5;
  opacity: .88;
}

/* ---- Motion ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference){
  /* Waiting: grow out of the pressed control, then toss the cap until the next page arrives. */
  .at-portal--pending{ animation: at-open .52s var(--at-ease-out) both; }
  .at-portal--pending .at-mark{ animation: at-toss 1.15s var(--at-ease-out) .32s infinite; }
  .at-portal--pending .at-shadow{ animation: at-shadow 1.15s var(--at-ease-out) .32s infinite; }
  .at-portal--pending .at-title{ animation: at-rise .3s var(--at-ease-out) .22s both; }
  .at-portal--pending[data-at-kind="out"] .at-mark svg{ transform: scaleX(-1); }

  /* Arrival: land the mark, say hello, then close into data-at-target. */
  .at-portal--arrive{ animation: at-close .56s var(--at-ease-in) .78s forwards; }
  .at-portal--arrive .at-mark{ animation: at-land .44s var(--at-ease-out) both; }
  .at-portal--arrive .at-title{ animation: at-rise .36s var(--at-ease-out) .1s both; }
  .at-portal--arrive .at-line{ animation: at-rise .36s var(--at-ease-out) .18s both; }
  .at-portal--arrive .at-stage{ animation: at-fade .22s ease-in .86s forwards; }

  .at-portal--arrive.is-skipped{ animation: at-close .28s var(--at-ease-in) forwards; }
  .at-portal--arrive.is-skipped .at-stage{ animation: at-fade .12s ease-in forwards; }
}

@media (prefers-reduced-motion: reduce){
  .at-portal--pending{ animation: at-appear .15s ease-out both; }
  .at-portal--arrive{ animation: at-vanish .2s ease-in .9s forwards; }
  .at-portal--arrive.is-skipped{ animation: at-vanish .12s ease-in forwards; }
}

@keyframes at-open{
  from{ clip-path: circle(0 at var(--x) var(--y)); }
  to  { clip-path: circle(150vmax at var(--x) var(--y)); }
}
@keyframes at-close{
  from{ clip-path: circle(150vmax at var(--x) var(--y)); visibility: visible; }
  to  { clip-path: circle(0 at var(--x) var(--y)); visibility: hidden; }
}
@keyframes at-toss{
  0%, 100%{ transform: translateY(0) rotate(0) scale(1, 1); }
  10%     { transform: translateY(2px) scale(1.06, .92); }
  45%     { transform: translateY(-26px) rotate(-16deg) scale(1); }
  62%     { transform: translateY(-22px) rotate(10deg); }
  88%     { transform: translateY(0) rotate(0) scale(1.04, .95); }
}
@keyframes at-shadow{
  0%, 100%{ transform: scaleX(1); opacity: 1; }
  45%     { transform: scaleX(.6); opacity: .45; }
}
@keyframes at-land{
  from{ transform: translateY(-18px) scale(.86); opacity: 0; }
  70% { transform: translateY(2px) scale(1.03); opacity: 1; }
  to  { transform: none; opacity: 1; }
}
@keyframes at-rise{
  from{ transform: translateY(8px); opacity: 0; }
  to  { transform: none; opacity: 1; }
}
@keyframes at-fade{
  to{ opacity: 0; }
}
@keyframes at-appear{
  from{ opacity: 0; }
}
@keyframes at-vanish{
  to{ opacity: 0; visibility: hidden; }
}