/* ==========================================================================
   designs/clay/auth_transition.css: the sign-in / sign-out portal in Claymorphism (the default design).
   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).
   This is the only design sheet that may read Clay values; the tokens below are copies of the Toy Box brand
   values (hue 288 / ground 255) because the signed-out pages do not load site_toybox.css.
   Mechanics: core/css/auth_transition.css. Reduced motion keeps its plain fade (nothing here runs under it).
   ========================================================================== */
.at-portal[data-at-design="clay"]{
  --at-field:      oklch(51.4% 0.221 288);
  --at-field-deep: oklch(46% .17 288);
  --at-field-lit:  oklch(64% .18 288);
  --at-on:         oklch(99% .004 255);
  --at-accent:     oklch(99% .004 255);
  --at-accent-ink: oklch(46% .17 288);
  --at-ease-out:   cubic-bezier(.22,1,.36,1);
  --at-ease-in:    cubic-bezier(.7,0,.84,0);
  --at-font:       "Bricolage Grotesque", Vazirmatn, system-ui, sans-serif;
  --at-font-text:  Karla, Vazirmatn, system-ui, sans-serif;
  --at-title-weight: 700;
  background:
    radial-gradient(circle at 50% 44%, var(--at-field-lit), var(--at-field) 46%, var(--at-field-deep) 120%);
}
.at-portal[data-at-design="clay"][data-at-accent="student"]{ --at-accent: oklch(80% .19 130); --at-accent-ink: oklch(32% .1 130); }
.at-portal[data-at-design="clay"][data-at-accent="parent"] { --at-accent: oklch(72% .17 55);  --at-accent-ink: oklch(36% .12 50); }
.at-portal[data-at-design="clay"][data-at-accent="tutor"]  { --at-accent: oklch(78% .11 210); --at-accent-ink: oklch(30% .08 220); }

.at-portal[data-at-design="clay"] .at-mark{
  border-radius: 50%;
  box-shadow: 0 10px 24px -10px oklch(20% .1 288 / .55), inset 0 -3px 0 oklch(0% 0 0 / .08);
}
.at-portal[data-at-design="clay"] .at-shadow{ border-radius: 50%; background: oklch(20% .1 288 / .35); }
.at-portal[data-at-design="clay"] .at-title{ letter-spacing: -.01em; }

@media (prefers-reduced-motion: no-preference){
  .at-portal[data-at-design="clay"]{ clip-path: circle(150vmax at var(--x) var(--y)); }

  /* Waiting: grow out of the pressed control, then toss the cap until the next page arrives. */
  .at-portal[data-at-design="clay"].at-portal--pending{ animation: at-clay-open .52s var(--at-ease-out) both; }
  .at-portal[data-at-design="clay"].at-portal--pending .at-mark{ animation: at-clay-toss 1.15s var(--at-ease-out) .32s infinite; }
  .at-portal[data-at-design="clay"].at-portal--pending .at-shadow{ animation: at-clay-shadow 1.15s var(--at-ease-out) .32s infinite; }
  .at-portal[data-at-design="clay"].at-portal--pending .at-title{ animation: at-clay-rise .3s var(--at-ease-out) .22s both; }
  .at-portal[data-at-design="clay"].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[data-at-design="clay"].at-portal--arrive{ animation: at-clay-close .56s var(--at-ease-in) .78s forwards; }
  .at-portal[data-at-design="clay"].at-portal--arrive .at-mark{ animation: at-clay-land .44s var(--at-ease-out) both; }
  .at-portal[data-at-design="clay"].at-portal--arrive .at-title{ animation: at-clay-rise .36s var(--at-ease-out) .1s both; }
  .at-portal[data-at-design="clay"].at-portal--arrive .at-line{ animation: at-clay-rise .36s var(--at-ease-out) .18s both; }
  .at-portal[data-at-design="clay"].at-portal--arrive .at-stage{ animation: at-clay-fade .22s ease-in .86s forwards; }

  .at-portal[data-at-design="clay"].at-portal--arrive.is-skipped{ animation: at-clay-close .28s var(--at-ease-in) forwards; }
  .at-portal[data-at-design="clay"].at-portal--arrive.is-skipped .at-stage{ animation: at-clay-fade .12s ease-in forwards; }
}

@keyframes at-clay-open{
  from{ clip-path: circle(0 at var(--x) var(--y)); }
  to  { clip-path: circle(150vmax at var(--x) var(--y)); }
}
@keyframes at-clay-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-clay-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-clay-shadow{
  0%, 100%{ transform: scaleX(1); opacity: 1; }
  45%     { transform: scaleX(.6); opacity: .45; }
}
@keyframes at-clay-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-clay-rise{
  from{ transform: translateY(8px); opacity: 0; }
  to  { transform: none; opacity: 1; }
}
@keyframes at-clay-fade{
  to{ opacity: 0; }
}