/* ============================================================
   FIX-PANEL R61 — Award-Winning Speaker Entrance Animations
   Worker: FIX-PANEL on msn26-website-r2 worktree
   Date: 2026-06-12

   Two entrance variants:
   - V-A: Masked editorial reveal (KEYNOTE block #grid-keynote)
   - V-B: Cinematic stagger-rise + gold sweep (PANEL I #grid-panel1)

   Plus: Company names large + bold (per Alex request)

   Research sources:
   - shadcn/ui team-animated-grid-reveal (staggered entrance patterns)
   - CSS-Tricks clip-path animations (masked reveal techniques)
   - MDN scroll-driven animations best practices 2026
   ============================================================ */

/* ============================================================
   COMPANY NAMES — Large + Bold
   ============================================================ */
.speaker-card .speaker-company {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Mobile refinement */
@media (max-width: 768px) {
  .speaker-card .speaker-company {
    font-size: 1.05rem;
  }
}

/* ============================================================
   V-A: MASKED EDITORIAL REVEAL (Keynote/Fireside Block)
   Applies to: #grid-keynote .speaker-card + .subsection-title

   Portrait unmasks via clip-path inset wipe (0 100% 0 0 → 0)
   with gold edge line that sweeps; heading masked slide-up;
   gold underline draws in via scaleX.

   IMPLEMENTATION NOTE: Using transition-based approach triggered
   by .active class (site already has IntersectionObserver infra)
   because view() timelines can be captured by overflow:hidden
   ancestors. The .speaker-subsection.reveal parent structure
   suggests IO is already in place.
   ============================================================ */

/* Keynote subsection title - initial state.
   GUARD: initial-hidden states live behind (scripting: enabled) so that
   no-JS / JS-error / old browsers render plain visible content instead of
   an invisible title + masked portrait (invisible-content trap). */
@media (scripting: enabled) {
.speaker-subsection:has(#grid-keynote) .subsection-title {
  transform: translateY(24px);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.7s ease-out;
}
}

.speaker-subsection:has(#grid-keynote) .subsection-title {
  position: relative;
  padding-bottom: 12px; /* Space for underline */
}

/* Keynote subsection title - active state */
.speaker-subsection.active:has(#grid-keynote) .subsection-title,
.speaker-subsection:has(#grid-keynote).active .subsection-title {
  transform: translateY(0);
  opacity: 1;
}

/* Gold underline draw-in */
.speaker-subsection:has(#grid-keynote) .subsection-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #ddc074, #c5a55a);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}

.speaker-subsection.active:has(#grid-keynote) .subsection-title::after,
.speaker-subsection:has(#grid-keynote).active .subsection-title::after {
  transform: scaleX(1);
}

/* Keynote card portrait unmask - initial state (scripting guard, see above) */
@media (scripting: enabled) {
#grid-keynote .speaker-card .speaker-avatar-wrap {
  clip-path: inset(0 100% 0 0);
  opacity: 0.3;
  transition: clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.8s ease-out;
}
}

#grid-keynote .speaker-card .speaker-avatar-wrap {
  position: relative;
}

/* Keynote card portrait unmask - active state */
#grid-keynote .speaker-card.r61-entrance-active .speaker-avatar-wrap {
  clip-path: inset(0 0 0 0);
  opacity: 1;
}

/* Gold edge sweep */
#grid-keynote .speaker-card .speaker-avatar-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #ddc074, transparent);
  pointer-events: none;
  opacity: 0;
  transition: right 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.5s ease-in-out;
}

#grid-keynote .speaker-card.r61-entrance-active .speaker-avatar-wrap::after {
  right: 0;
  opacity: 1;
  animation: edge-fade-out 0.9s 0.5s forwards;
}

@keyframes edge-fade-out {
  to {
    opacity: 0;
  }
}

/* ============================================================
   V-B: CINEMATIC STAGGER-RISE + GOLD SWEEP (Panel I)
   Applies to: #grid-panel1 .speaker-card (4 cards)

   Cards rise 36px + fade with per-card stagger 100ms;
   scale 1.04→1.0 settle; portraits get diagonal gold-tinted
   luminance sweep (linear-gradient pseudo translating across).

   CRITICAL: V1/V2/V3 hover variants (data-anim attrs) must keep
   working. V1 uses ::after for shimmer, V3 uses ::before for
   rotating ring, V2 uses neither. The sweep uses ::before,
   so it coexists with V1/V2 but will be masked by V3's ring.
   That's acceptable — V3 cards get the rise/fade entrance,
   sweep is bonus on V1/V2.
   ============================================================ */

/* Panel I cards - initial state (scripting guard, see V-A note) */
@media (scripting: enabled) {
#grid-panel1 .speaker-card {
  transform: translateY(36px) scale(1.04);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.7s ease-out,
              scale 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
}

/* Panel I cards - active state with stagger */
#grid-panel1 .speaker-card.r61-entrance-active {
  transform: translateY(0) scale(1.0);
  opacity: 1;
}

#grid-panel1 .speaker-card.r61-entrance-active:nth-child(1) {
  transition-delay: 0ms;
}
#grid-panel1 .speaker-card.r61-entrance-active:nth-child(2) {
  transition-delay: 100ms;
}
#grid-panel1 .speaker-card.r61-entrance-active:nth-child(3) {
  transition-delay: 200ms;
}
#grid-panel1 .speaker-card.r61-entrance-active:nth-child(4) {
  transition-delay: 300ms;
}

/* Gold diagonal sweep on portraits (uses ::before, coexists with V1/V2) */
#grid-panel1 .speaker-card:not([data-anim="v3"]) .speaker-avatar-wrap::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    135deg,
    transparent 30%,
    rgba(221, 192, 116, 0.35) 50%,
    transparent 70%
  );
  pointer-events: none;
  transform: translate(-100%, -100%);
  opacity: 0;
  mix-blend-mode: screen;
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.8s ease-in-out;
  transition-delay: 0.4s;
}

#grid-panel1 .speaker-card.r61-entrance-active:not([data-anim="v3"]) .speaker-avatar-wrap::before {
  transform: translate(100%, 100%);
  opacity: 1;
  animation: sweep-fade 1.2s 0.6s forwards;
}

@keyframes sweep-fade {
  0%, 30% {
    opacity: 1;
  }
  70%, 100% {
    opacity: 0;
  }
}

/* ============================================================
   Fallback: Reduced Motion / Mobile
   Content must be visible immediately (skip entrance)
   ============================================================ */

/* Reduced motion: instant visible, no animations.
   NOTE: decorative sweep/edge pseudos get content:none (NOT opacity:1 —
   that would park a gold gradient overlay permanently on the portraits).
   The static gold underline (::after on the title) stays visible. */
@media (prefers-reduced-motion: reduce) {
  .speaker-subsection:has(#grid-keynote) .subsection-title,
  #grid-keynote .speaker-card .speaker-avatar-wrap,
  #grid-panel1 .speaker-card,
  .speaker-subsection:has(#grid-keynote) .subsection-title::after {
    animation: none !important;
    transform: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  #grid-panel1 .speaker-card .speaker-avatar-wrap::before,
  #grid-keynote .speaker-card .speaker-avatar-wrap::after {
    content: none !important;
  }
}

/* Mobile: entrance effects OFF (same pseudo handling as reduced-motion) */
@media (max-width: 768px) {
  .speaker-subsection:has(#grid-keynote) .subsection-title,
  #grid-keynote .speaker-card .speaker-avatar-wrap,
  #grid-panel1 .speaker-card,
  .speaker-subsection:has(#grid-keynote) .subsection-title::after {
    animation: none !important;
    transform: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  #grid-panel1 .speaker-card .speaker-avatar-wrap::before,
  #grid-keynote .speaker-card .speaker-avatar-wrap::after {
    content: none !important;
  }
}

/* ============================================================
   END FIX-PANEL R61
   ============================================================ */