/* ============================================================
   Startup Savannah Founder Network: enhancement layer
   Loaded AFTER brand.css. Purely cosmetic. Adds:
     1. Coral marker underline under page titles
     2. Cut-out art on empty states (set per page by enhance.js)
     3. Springier hover lift on cards
     4. Sign-in bracket entrance
   Everything here respects prefers-reduced-motion and can be
   removed by deleting the two include lines. Nothing in the
   platform depends on it.
   ============================================================ */

/* ---------- 1. Coral title underline ---------- */
/* enhance.js wraps the .bracket H1 text so we can hang an underline
   under it without disturbing the teal [ ] brackets. */
.ss-titlewrap { position: relative; display: inline-block; }
.ss-underline {
  position: absolute; left: -2%; bottom: -0.32em; width: 104%;
  height: auto; pointer-events: none;
  clip-path: inset(0 100% 0 0);
  animation: ssUnderline .7s ease-out .15s forwards;
}
.ss-underline img { display: block; width: 100%; height: auto; }
@keyframes ssUnderline { to { clip-path: inset(0 0 0 0); } }

/* ---------- 2. Empty-state cut-outs ---------- */
/* brand.css already styles .empty; we swap the brackets.svg art for a
   page-specific cut-out and let it drift gently. enhance.js adds the
   .ss-empty-art element and the data-page hook. */
.empty .empty-brackets.ss-hide { display: none; }
.ss-empty-art {
  width: auto; height: 96px; margin: 0 auto 14px; display: block;
  filter: drop-shadow(0 4px 8px rgba(15,26,33,.16));
  animation: ssFloat 5.4s ease-in-out infinite alternate;
}
@keyframes ssFloat {
  from { transform: translateY(0) rotate(-1deg); }
  to   { transform: translateY(-7px) rotate(1.4deg); }
}

/* ---------- 3. Springier card lift ---------- */
/* brand.css gives a.card a -2px lift; nudge it a touch livelier.
   Scoped to anchor cards (directory, classifieds) so static cards
   people read (alerts, events, profile) stay still. */
a.card {
  transition: transform .2s cubic-bezier(.2,1.3,.4,1), box-shadow .2s ease;
}
a.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 34px rgba(15,26,33,.16);
}

/* ---------- 4. Sign-in bracket entrance ---------- */
.auth-hero .hero-brackets.ss-enter {
  animation: ssBracketIn .8s cubic-bezier(.22,1.35,.36,1) .1s backwards;
}
@keyframes ssBracketIn {
  from { opacity: 0; transform: translateY(-14px) scale(.9); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Reduced motion: snap everything to final ---------- */
@media (prefers-reduced-motion: reduce) {
  .ss-underline { clip-path: none !important; animation: none !important; }
  .ss-empty-art { animation: none !important; }
  a.card { transition: none !important; }
  .auth-hero .hero-brackets.ss-enter { animation: none !important; }
}