/* index.html landing.
   Phone: a separate swipe-card deck (.deck), driven by index.js (touch drag + snap).
   Tablet (md..xl): Universities on top, Athletes + Parents below.
   Desktop (xl+): unequal diagonal panels that expand on hover (text does NOT collapse). */

.stage { --seam: clamp(1.25rem, 2.5vw, 3.25rem); display: none; }
.panel { position: relative; overflow: hidden; }

/* Phone swipe deck (hidden from tablet up) */
.deck { position: fixed; inset: 0; overflow: hidden; touch-action: none; }
.deck-track { will-change: transform; }
@media (min-width: 768px) { .deck { display: none; } }

/* Tablet: one on top (Universities), two on the bottom */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .stage { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; height: 100svh; }
  .panel-a { grid-column: 1 / -1; }
}

/* Desktop: unequal diagonal panels; columns expand on hover/focus */
@media (min-width: 1280px) {
  .stage { display: flex; height: 100svh; }
  .panel {
    flex: 0 1 0;
    flex-grow: var(--rest, 1);
    clip-path: polygon(var(--seam) 0, 100% 0, calc(100% - var(--seam)) 100%, 0 100%);
    transition: flex-grow 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .panel:first-child { clip-path: polygon(0 0, 100% 0, calc(100% - var(--seam)) 100%, 0 100%); }
  .panel:last-child  { clip-path: polygon(var(--seam) 0, 100% 0, 100% 100%, 0 100%); }
  .panel:not(:first-child) { margin-left: calc(var(--seam) * -1); }
  .panel-a { --rest: 1.17; } .panel-b { --rest: 1.0; } .panel-c { --rest: 1.17; }
  .stage:has(.panel:hover) .panel:not(:hover),
  .stage:has(.panel:focus-visible) .panel:not(:focus-visible) { flex-grow: 0.9; }
  .stage:has(.panel:hover) .panel:hover,
  .stage .panel:focus-visible { flex-grow: 1.5; }
}

/* One-shot entrance (no-JS safe, reduced-motion safe) */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .rise-1 { animation-delay: 0.06s; }
  .rise-2 { animation-delay: 0.15s; }
  .rise-3 { animation-delay: 0.24s; }
  .rise-4 { animation-delay: 0.34s; }
  @keyframes rise { from { opacity: 0; transform: translateY(1.75rem); } to { opacity: 1; transform: none; } }

  /* phone swipe cue */
  .swipe-bob { animation: bob 1.6s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
  @keyframes bob { 0%, 100% { transform: translateY(3px); opacity: 0.55; } 50% { transform: translateY(-4px); opacity: 1; } }
}