/* ============================================================
   Shared, tasteful animations for all C1 preview pages.
   Loaded AFTER cred-c1.css so its keyframes/transitions override
   the simple .form-card entrance and add stagger/breathe/shimmer
   layered on top.

   Design intent: restraint. The C1 theme is elegant because it's
   understated - animations here exist to soften transitions, not
   to call attention to themselves.
   ============================================================ */

/* --------------------------------------------------------------
   Page enter - every page wakes up the same way.
   The bg-glow eases in over 1.2s while the form-card staggers
   its children, so the eye moves from atmosphere to content.
   -------------------------------------------------------------- */

.bg-glow {
  animation: glowWake 1.4s ease-out both, glowBreathe 10s ease-in-out 1.4s infinite;
}

@keyframes glowWake {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Very slow breathing so the page feels alive without being busy.
   The eye can't track the change at this speed - it just registers
   as "atmospheric." */
@keyframes glowBreathe {
  0%, 100% { opacity: 0.92; transform: translate3d(0, 0, 0) scale(1); }
  50%      { opacity: 1;    transform: translate3d(8px, -6px, 0) scale(1.02); }
}

/* Noise overlay holds its position but very subtly drifts so it
   doesn't read as a static texture pattern. */
.bg-noise {
  animation: noiseDrift 24s linear infinite;
}
@keyframes noiseDrift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-40px, -40px, 0); }
}


/* --------------------------------------------------------------
   Form card - entry with a softer, longer easing curve and a
   staggered reveal of immediate children. The card itself lifts
   from 24px below with a slight scale, children fade upward.
   -------------------------------------------------------------- */

.form-card {
  /* Override cred-c1.css's basic entrance with a smoother curve */
  animation: cardLift 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes cardLift {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.985);
    filter: blur(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Stagger direct children so the form composes itself line by line.
   Targets every block-level child of .form-card. The 60ms cadence
   matches a relaxed musical tempo (~100bpm). */
.form-card > * {
  animation: childRise 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(0.15s + var(--stagger, 0) * 60ms);
}

.form-card > *:nth-child(1)  { --stagger: 0; }
.form-card > *:nth-child(2)  { --stagger: 1; }
.form-card > *:nth-child(3)  { --stagger: 2; }
.form-card > *:nth-child(4)  { --stagger: 3; }
.form-card > *:nth-child(5)  { --stagger: 4; }
.form-card > *:nth-child(6)  { --stagger: 5; }
.form-card > *:nth-child(7)  { --stagger: 6; }
.form-card > *:nth-child(8)  { --stagger: 7; }
.form-card > *:nth-child(9)  { --stagger: 8; }
.form-card > *:nth-child(10) { --stagger: 9; }
.form-card > *:nth-child(11) { --stagger: 10; }
.form-card > *:nth-child(12) { --stagger: 11; }
.form-card > *:nth-child(13) { --stagger: 12; }

@keyframes childRise {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* --------------------------------------------------------------
   Eyebrow dot - gentle pulse. Already has the static glow shadow
   from cred-c1.css; this just adds a barely-visible breathing
   so the page reads as "live" rather than rendered.
   -------------------------------------------------------------- */

.eyebrow-dot {
  animation: dotPulse 2.4s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 6px var(--c1-emerald); transform: scale(1); }
  50%      { box-shadow: 0 0 12px var(--c1-emerald), 0 0 18px rgba(80, 230, 195, 0.4); transform: scale(1.18); }
}


/* --------------------------------------------------------------
   Inputs - smoother focus reaction.
   The cred-c1.css transition is set to 0.15s; bump it slightly
   and add a ring-pulse on focus-visible only (keyboard nav).
   -------------------------------------------------------------- */

.input,
.select {
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.35s ease;
}

/* Focus ring is now driven purely by the transition above plus the static
   :focus styles in cred-c1.css.

   The previous version used `animation: focusRingPulse ...` on :focus, which
   replaced the inherited `animation: childRise ... both` shorthand from the
   `.form-card > *` stagger entrance. When the input lost focus, the animation
   property switched back to childRise — and because the animation NAME had
   changed, the browser re-started childRise from opacity:0, making the field
   appear to fade out and back in on every blur. */


/* --------------------------------------------------------------
   Primary button - sheen sweep on hover. The button is already
   emerald-filled; the sheen is a clipped diagonal gradient that
   moves across once per hover.
   -------------------------------------------------------------- */

.btn-primary {
  position: relative;
  overflow: hidden;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.25s ease;
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.35) 50%, transparent 100%);
  pointer-events: none;
  transition: left 0.7s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.btn-primary:hover::after { left: 130%; }

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(80, 230, 195, 0.6),
    0 14px 32px rgba(80, 230, 195, 0.22);
}


/* --------------------------------------------------------------
   Ghost button + OAuth button - softer hover (no jump).
   -------------------------------------------------------------- */

.btn-ghost,
.oauth-btn {
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}


/* --------------------------------------------------------------
   Role chip - soft selection. When a chip becomes .selected the
   ring fades in (avoids the snap on click).
   -------------------------------------------------------------- */

.role-chip {
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.3s ease, color 0.25s ease;
}
.role-chip .radio::after {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.role-chip.selected .radio::after {
  animation: dotIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes dotIn {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}


/* --------------------------------------------------------------
   Back link - slide its arrow on hover (small, restrained).
   -------------------------------------------------------------- */

.back-link svg {
  transition: transform 0.2s ease;
}
.back-link:hover svg {
  transform: translateX(-3px);
}


/* --------------------------------------------------------------
   Password strength bars - each bar paints in sequentially, so
   when the meter updates you see a small left-to-right reveal.
   -------------------------------------------------------------- */

.pwd-bar {
  transition: background 0.4s ease;
}


/* --------------------------------------------------------------
   School-info banner - pop in when state flips to valid.
   -------------------------------------------------------------- */

.school-info {
  animation: bannerIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes bannerIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* --------------------------------------------------------------
   Verified banner (OAuth handshake) - same gentle pop.
   -------------------------------------------------------------- */

.verified-banner {
  animation: bannerIn 0.5s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}


/* --------------------------------------------------------------
   Wordmark mark - its emerald glow pulses very slowly.
   This is the strongest accent on every page; the breathing
   ties the visual rhythm together.
   -------------------------------------------------------------- */

.wordmark-mark img {
  animation: markBreathe 3.5s ease-in-out infinite;
}
@keyframes markBreathe {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(80, 230, 195, 0.35)); }
  50%      { filter: drop-shadow(0 0 22px rgba(80, 230, 195, 0.6)); }
}


/* --------------------------------------------------------------
   Cross-page transitions via View Transitions API.
   Supported in Chrome/Edge 111+, Safari 18.2+, Firefox 131+.
   In unsupported browsers this whole block is silently ignored.

   Effect: navigating between credential pages crossfades the
   form-card and wordmark instead of hard-cutting. Background
   stays in place so the transition feels like one continuous
   surface.
   -------------------------------------------------------------- */

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.35s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

::view-transition-old(form-card),
::view-transition-new(form-card) {
  animation-duration: 0.4s;
}

/* Mark the form card as the transitioning element. Each page sets
   `view-transition-name: form-card` on its .form-card. */
.form-card {
  view-transition-name: form-card;
}

/* Wordmark is shared across pages - give it a persistent name so
   it visually anchors during cross-fade. */
.wordmark {
  view-transition-name: wordmark;
}
.bg-glow { view-transition-name: bg-glow; }


/* --------------------------------------------------------------
   Index page entry - fade the eyebrow + h1 in first, then cards
   stagger from below.
   -------------------------------------------------------------- */

.index-grid > .eyebrow,
.index-grid > h1,
.index-grid > .sub {
  animation: childRise 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.index-grid > .eyebrow { animation-delay: 0.05s; }
.index-grid > h1       { animation-delay: 0.15s; }
.index-grid > .sub     { animation-delay: 0.25s; }

.index-card {
  animation: childRise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  transition: border-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}
.index-cards .index-card:nth-child(1) { animation-delay: 0.35s; }
.index-cards .index-card:nth-child(2) { animation-delay: 0.42s; }
.index-cards .index-card:nth-child(3) { animation-delay: 0.49s; }
.index-cards .index-card:nth-child(4) { animation-delay: 0.56s; }
.index-cards .index-card:nth-child(5) { animation-delay: 0.63s; }
.index-cards .index-card:nth-child(6) { animation-delay: 0.70s; }
.index-cards .index-card:nth-child(7) { animation-delay: 0.77s; }

.index-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}

.index-card-go {
  position: relative;
  transition: color 0.2s ease, padding-right 0.2s ease;
}
.index-card:hover .index-card-go {
  padding-right: 6px;
  color: #6df0d2;
}


/* --------------------------------------------------------------
   Respect user preference - animations off when reduced motion.
   -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0 !important;
    transition-duration: 0.001ms !important;
  }
  .bg-glow, .bg-noise, .eyebrow-dot, .wordmark-mark { animation: none !important; }
}