/* =====================================================================
   AI FOR ENTERPRISE — Animations & Layout Fixes
   aie-animations.css
===================================================================== */

/* -------- Progress bar -------- */
.aie-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: #fff;
  z-index: 9999;
  transition: width 0.1s linear;
}
.page-aiE .s-aiE-pov ~ * .aie-progress-bar,
.page-aiE .s-aiE-read .aie-progress-bar {
  background: #111;
}

/* -------- Active nav pill -------- */
.pill--active {
  background: #fff !important;
  color: #000 !important;
  border-color: #fff !important;
  font-weight: 700 !important;
}

/* ================================================================
   BASE REVEAL STATES
   Elements start hidden; JS adds .is-visible to play them
================================================================ */

/* fade-up / fade-down / fade-right / fade-left / card-up — opacity starts hidden */
[data-aie="fade-up"],
[data-aie="fade-down"],
[data-aie="fade-right"],
[data-aie="fade-left"],
[data-aie="card-up"] {
  opacity: 0;
  transition:
    opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

[data-aie="fade-up"]   { transform: translateY(36px); }
[data-aie="fade-down"] { transform: translateY(-24px); }
[data-aie="fade-right"]{ transform: translateX(-32px); }
[data-aie="fade-left"] { transform: translateX(32px); }
[data-aie="card-up"]   { transform: translateY(48px) scale(0.97); }

/* visible state — restores all animated elements */
[data-aie].is-visible {
  opacity: 1;
  transform: none;
}

/* -------- POV vertical rules — draw-down on scroll enter -------- */
/* data-aie="rule-grow" — starts at scaleY(0), grows to full height */
[data-aie="rule-grow"] {
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
  /* NOT affected by the opacity/transform rule above — handled separately */
  opacity: 1;
}
[data-aie="rule-grow"].is-visible {
  transform: scaleY(1);
  opacity: 1;
}

/* Override shared .pov-rule for better visibility on this page */
.page-aiE .pov-rule {
  background: rgba(255,255,255,0.60);   /* more visible than base 0.35 */
}

/* ================================================================
   READ CARDS — Fixed 5-column grid layout
================================================================ */
.s-aiE-read {
  background: #fff;
  color: #111;
  padding: 7vw var(--gutter) 7vw;
  overflow: hidden;
}

.read-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.4vw;
  margin: 0 auto 5vw;
  max-width: 56vw;
}

/* The 5-column grid — each column is exactly 1fr, images fill full width */
.read-cards {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5vw;
  align-items: start;  /* top-align all cards */
  width: 100%;
}

/* Each card: flex column, image block on top, caption block below */
.rc {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-width: 0;        /* allow grid to shrink items */
}

/* Image block — square-ish, fills column width */
.rc-glyph {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 14px;
  background: #111;  /* fallback if image slow-loads */
}
.rc-glyph img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* fills the square completely */
  display: block;
  border-radius: 14px;
}

/* Caption block */
.rc-cap {
  margin-top: 1.1rem;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(0.8rem, 0.95vw, 1rem);
  line-height: 1.55;
  color: #5a5a5a;
  padding: 0;
  min-width: 0;
  overflow: visible;
}

/* Number label (e.g. [01]) */
.rc-num {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: #aaa;
  margin-bottom: 0.25em;
}

/* Bold title — allow wrapping (no nowrap!) */
.rc-strong {
  display: block;
  color: #111;
  font-weight: 700;
  font-size: clamp(0.875rem, 1.0vw, 1.05rem);
  line-height: 1.25;
  margin-bottom: 0.45em;
  white-space: normal;   /* ← FIXED: was nowrap which caused overflow */
  overflow-wrap: break-word;
}

/* Description text */
.rc-desc {
  display: block;
  color: #666;
  font-size: clamp(0.75rem, 0.875vw, 0.9375rem);
  line-height: 1.55;
}

/* Card hover glow effect */
.rc:hover .rc-glyph {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15), 0 8px 30px rgba(0,0,0,0.15);
  transition: box-shadow 0.3s ease;
}
.rc:hover .rc-strong {
  color: #000;
  transition: color 0.2s ease;
}

/* ================================================================
   BUTTON HOVER ANIMATIONS
================================================================ */
.s-aiE-cta .cta-btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.25s ease;
}
.s-aiE-cta .cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.28);
}
.s-aiE-cta .cta-btn svg {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.s-aiE-cta .cta-btn:hover svg {
  transform: translateX(5px);
}

/* ================================================================
   REFLECTS CARD — entrance & subtle hover
================================================================ */
.reflects-card {
  transition: box-shadow 0.3s ease;
}
.reflects-card:hover {
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.45);
}

/* Cross mark draw-in animation */
.reflects-mark .line--v,
.reflects-mark .line--h {
  transform-origin: center;
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
}
.reflects-mark .line--v { transform: scaleY(0); }
.reflects-mark .line--h { transform: scaleX(0); }

.reflects-card.is-visible .reflects-mark .line--v { transform: scaleY(1); }
.reflects-card.is-visible .reflects-mark .line--h { transform: scaleX(1); }

.reflects-mark .sq {
  opacity: 0;
  transition: opacity 0.4s ease 1.1s;
}
.reflects-card.is-visible .reflects-mark .sq {
  opacity: 1;
}

/* ================================================================
   POV SECTION — subtle parallax wrapper
================================================================ */
.s-aiE-pov {
  overflow: hidden;
}

/* ================================================================
   TWO-COL SECTION — bracket draw
================================================================ */
.brk {
  height: 0;
  overflow: hidden;
  transition: height 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.two-col.is-visible .brk {
  height: 100%;
}

/* ================================================================
   FOOTER — fade from below
================================================================ */
.s-aiE-footer[data-aie] {
  transition-duration: 0.9s;
}

/* ================================================================
   NAV scroll-shrink on aiE page
================================================================ */
.page-aiE .nav {
  transition: background 0.3s ease, padding 0.3s ease;
}
.page-aiE .nav.nav--scrolled {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding-top: 1.2vw;
  padding-bottom: 1.2vw;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* ================================================================
   MOBILE responsive fixes
================================================================ */
@media (max-width: 900px) {
  .read-head {
    max-width: 100%;
    gap: 3vw;
    margin-bottom: 6vw;
  }
  .read-cards {
    grid-template-columns: 1fr 1fr;
    gap: 4vw;
  }
  /* Last card centered when 5th in 2-col grid */
  .read-cards .rc:last-child {
    grid-column: 1 / -1;
    max-width: 48%;
    margin: 0 auto;
  }
  .rc-strong { font-size: 3.8vw; }
  .rc-num    { font-size: 3vw; }
  .rc-desc   { font-size: 3.4vw; }
  .rc-cap    { font-size: 3.4vw; }
}

@media (max-width: 600px) {
  .read-cards {
    grid-template-columns: 1fr;
    gap: 6vw;
  }
  .read-cards .rc:last-child {
    grid-column: auto;
    max-width: 100%;
  }
}