/* REV JAMi-PROFILE-1.24 - clearer interaction cues, inline brand flip, stable CTA cycle
   Additive only. Does not touch images or the main profile.css hero controls. */

/* Keep cards readable while cueing them. Older entry CSS must not hide/populate text slowly. */
.why-interactive.sequence-js-ready:not(.why-sequence-run):not(.why-sequence-complete) .rail-card,
#ecosystem.sequence-js-ready:not(.eco-sequence-run):not(.eco-sequence-complete) .eco-tile,
.why-interactive .rail-card,
#ecosystem .eco-tile {
  opacity: 1 !important;
  filter: none !important;
}

/* General touch cue: a quiet living border so the cards feel tappable. */
.rail-card,
.eco-tile,
.solve-layer {
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer;
}

.rail-card.pulse-live,
.eco-tile.pulse-live,
.solve-layer.pulse-live {
  animation: jamiSoftTouchPulse 3.8s ease-in-out infinite !important;
}

@keyframes jamiSoftTouchPulse {
  0%, 100% {
    border-color: rgba(75,207,201,.13);
    box-shadow: 0 18px 55px rgba(0,0,0,.35), 0 0 0 rgba(111,255,241,0);
  }
  50% {
    border-color: rgba(111,255,241,.28);
    box-shadow: 0 22px 66px rgba(0,0,0,.44), 0 0 24px rgba(75,207,201,.16);
  }
}

/* One-time cue when the section scrolls into view: Lean -> Vetted -> Flexible, then OS tiles. */
.rail-card.section-card-cue,
.eco-tile.section-card-cue {
  animation: jamiCardCueSurface 1.18s cubic-bezier(.18,.82,.2,1) both !important;
}

.rail-card.section-card-cue::after,
.eco-tile.section-card-cue::after {
  content: "" !important;
  position: absolute !important;
  inset: -2px !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 6 !important;
  border: 1px solid rgba(111,255,241,.9) !important;
  box-shadow: 0 0 28px rgba(111,255,241,.32), inset 0 0 24px rgba(111,255,241,.10) !important;
  animation: jamiOneTimeRing 1.18s cubic-bezier(.18,.82,.2,1) both !important;
}

@keyframes jamiCardCueSurface {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  28% { transform: translate3d(0, -3px, 0) scale(1.012); border-color: rgba(111,255,241,.45); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes jamiOneTimeRing {
  0% { opacity: 0; transform: scale(.985); }
  18% { opacity: .95; transform: scale(1); }
  58% { opacity: .58; transform: scale(1.012); }
  100% { opacity: 0; transform: scale(1.025); }
}

.rail-card:hover,
.rail-card:focus-visible,
.eco-tile:hover,
.eco-tile:focus-visible,
.solve-layer:hover,
.solve-layer:focus-visible {
  border-color: rgba(111,255,241,.38) !important;
  box-shadow: 0 26px 78px rgba(0,0,0,.48), 0 0 0 1px rgba(111,255,241,.12), 0 0 28px rgba(75,207,201,.15) !important;
  transform: translate3d(0,-2px,0) !important;
}

/* Modal: immediate full content, then delayed emphasis words glow. */
.modal {
  background: rgba(0,0,0,.70) !important;
  backdrop-filter: blur(2px) saturate(.92) !important;
  -webkit-backdrop-filter: blur(2px) saturate(.92) !important;
}

.ecosystem-modal-panel {
  background: rgba(3, 9, 10, .992) !important;
  border-color: rgba(111,255,241,.20) !important;
  box-shadow: 0 34px 100px rgba(0,0,0,.68), 0 0 0 1px rgba(255,255,255,.045), 0 0 24px rgba(75,207,201,.08) !important;
}

.ecosystem-modal-panel h2 {
  padding-right: 82px !important;
}

.modal-close {
  top: 22px !important;
  right: 22px !important;
  z-index: 8 !important;
}

/* Before the delayed moment, highlighted phrases read as normal text. */
.modal-highlight {
  color: inherit !important;
  font-weight: inherit !important;
  background: transparent !important;
  text-shadow: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

#infoModal.modal-emphasis-live .modal-highlight {
  color: #78f7ed !important;
  font-weight: 850 !important;
  background: rgba(111,255,241,.055) !important;
  border-radius: 5px !important;
  padding: 0 .06em !important;
  animation: jamiDelayedPhraseGlow 1.05s ease both;
  animation-delay: var(--hl-delay, 0ms);
}

@keyframes jamiDelayedPhraseGlow {
  0% {
    color: inherit;
    font-weight: inherit;
    background: transparent;
    text-shadow: none;
  }
  45% {
    color: #a9fff8;
    background: rgba(111,255,241,.12);
    text-shadow: 0 0 16px rgba(111,255,241,.28);
  }
  100% {
    color: #78f7ed;
    background: rgba(111,255,241,.055);
    text-shadow: 0 0 6px rgba(111,255,241,.10);
  }
}

/* Bullet points must be there immediately. Do not animate them in like loading content. */
#infoModal[aria-hidden="false"] .modal-points li,
#infoModal[aria-hidden="false"].modal-copy-animate .modal-points li {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.modal-points li::marker {
  color: #67e6de;
}

/* Brand cards: tap/hover reveals the trusted partner year inline, no modal. */
.brand-card {
  border: 1px solid rgba(72,199,194,.17) !important;
}

button.brand-card {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: inherit;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: center;
}

.brand-flip {
  display: grid !important;
  place-items: center !important;
  min-height: 118px;
  position: relative !important;
  overflow: hidden !important;
}

.brand-logo-face,
.brand-since-face {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  width: 100%;
  transition: opacity 360ms ease, transform 360ms ease, filter 360ms ease;
}

.brand-logo-face img {
  max-width: min(72%, 300px) !important;
  max-height: 72px !important;
  object-fit: contain !important;
}

.brand-since-face {
  opacity: 0;
  transform: translate3d(0, 12px, 0) scale(.98);
  color: rgba(232,244,242,.84);
  font-size: clamp(1rem, 4.2vw, 1.25rem);
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.brand-since-face strong {
  display: block;
  color: #73f0e8;
  font-size: clamp(1.35rem, 6vw, 1.9rem);
  letter-spacing: .02em;
  margin-top: .18rem;
  text-transform: none;
}

.brand-flip:hover,
.brand-flip:focus-visible,
.brand-flip.is-showing-since {
  border-color: rgba(111,255,241,.36) !important;
  box-shadow: 0 24px 74px rgba(0,0,0,.45), 0 0 26px rgba(75,207,201,.13) !important;
  transform: translate3d(0,-2px,0);
}

.brand-flip:hover .brand-logo-face,
.brand-flip:focus-visible .brand-logo-face,
.brand-flip.is-showing-since .brand-logo-face {
  opacity: 0;
  transform: translate3d(0, -12px, 0) scale(.98);
  filter: blur(2px);
}

.brand-flip:hover .brand-since-face,
.brand-flip:focus-visible .brand-since-face,
.brand-flip.is-showing-since .brand-since-face {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* CTA button text cycle: same font/weight, clean fade, no colour flash. */
.cta-cycler {
  min-width: 230px;
  transition: opacity 260ms ease, transform 260ms ease, box-shadow 260ms ease !important;
}

.cta-cycler.cta-text-swap {
  opacity: .76 !important;
  transform: scale(.992) !important;
}

.cta-cycler.cta-text-alt {
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #061112 !important;
  background: linear-gradient(135deg, #5ce1dc, #2d9aa3) !important;
  box-shadow: 0 0 22px rgba(111,255,241,.16) !important;
}

/* Partner logo links at the bottom. */
.partner-logos a {
  display: grid;
  place-items: center;
  min-height: 74px;
  border-radius: 18px;
  outline: none;
  transition: transform 220ms ease, filter 220ms ease, box-shadow 220ms ease;
}

.partner-logos a:hover,
.partner-logos a:focus-visible {
  transform: translate3d(0,-2px,0);
  filter: brightness(1.18);
  box-shadow: 0 0 22px rgba(111,255,241,.12);
}

@media (max-width: 420px) {
  .ecosystem-modal-panel h2 {
    padding-right: 64px !important;
  }
  .modal-close {
    top: 16px !important;
    right: 16px !important;
  }
  .brand-flip {
    min-height: 104px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rail-card,
  .eco-tile,
  .solve-layer,
  .section-card-cue,
  .modal-highlight,
  .cta-cycler,
  .brand-logo-face,
  .brand-since-face {
    animation: none !important;
    transition: none !important;
  }
  .brand-flip.is-showing-since .brand-logo-face {
    opacity: 0;
  }
  .brand-flip.is-showing-since .brand-since-face {
    opacity: 1;
  }
}


/* REV JAMi-PROFILE-1.25 - subtle CTA phrase glow, persistent card prompt, calmer brand/CTA states */

/* Persistent click cue: a quiet perimeter pulse on interactive cards so users know they can tap. */
.rail-card::before,
.eco-tile::before,
.solve-layer::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  border: 1px solid rgba(111,255,241,.52);
  box-shadow: 0 0 20px rgba(111,255,241,.16), inset 0 0 16px rgba(111,255,241,.045);
  transform: scale(.995);
  z-index: 3;
}

.rail-card.pulse-live::before,
.eco-tile.pulse-live::before,
.solve-layer.pulse-live::before {
  animation: jamiQuietTapRing 4.8s ease-in-out infinite;
}

@keyframes jamiQuietTapRing {
  0%, 100% { opacity: .08; transform: scale(.995); }
  46% { opacity: .42; transform: scale(1.006); }
  68% { opacity: .16; transform: scale(1.002); }
}

/* Softer phrase emphasis: no bold jump, no padding/background, only a delayed read-order glow. */
#infoModal.modal-emphasis-live .modal-highlight {
  color: inherit !important;
  font-weight: inherit !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  animation: jamiPhraseSoftGlow 1.7s ease-out both !important;
  animation-delay: var(--hl-delay, 0ms) !important;
}

@keyframes jamiPhraseSoftGlow {
  0% {
    color: inherit;
    text-shadow: none;
  }
  58% {
    color: #b7fff8;
    text-shadow: 0 0 12px rgba(111,255,241,.28), 0 0 2px rgba(111,255,241,.35);
  }
  100% {
    color: #8ef6ef;
    text-shadow: 0 0 7px rgba(111,255,241,.16);
  }
}

/* One-time section cue can stay visible, but never turn into a hard white outline. */
.rail-card.section-card-cue::after,
.eco-tile.section-card-cue::after {
  border-color: rgba(111,255,241,.58) !important;
  box-shadow: 0 0 24px rgba(111,255,241,.18), inset 0 0 16px rgba(111,255,241,.06) !important;
}

/* Brand year reveal must return to logo after click. Do not keep it open on hover/focus. */
.brand-flip:hover .brand-logo-face,
.brand-flip:focus-visible .brand-logo-face {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

.brand-flip:hover .brand-since-face,
.brand-flip:focus-visible .brand-since-face {
  opacity: 0 !important;
  transform: translate3d(0, 12px, 0) scale(.98) !important;
}

.brand-flip.is-showing-since .brand-logo-face,
.brand-flip.is-showing-since:hover .brand-logo-face,
.brand-flip.is-showing-since:focus-visible .brand-logo-face {
  opacity: 0 !important;
  transform: translate3d(0, -10px, 0) scale(.99) !important;
  filter: blur(1.2px) !important;
}

.brand-flip.is-showing-since .brand-since-face,
.brand-flip.is-showing-since:hover .brand-since-face,
.brand-flip.is-showing-since:focus-visible .brand-since-face {
  opacity: 1 !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
}

/* CTA swap: same button, same palette, soft fade only. */
.cta-cycler.cta-text-swap {
  opacity: .86 !important;
  transform: scale(.997) !important;
}

.cta-cycler.cta-text-alt {
  letter-spacing: normal !important;
  text-transform: none !important;
  color: #061112 !important;
  background: linear-gradient(135deg, #55d7d3, #2d98a0) !important;
  box-shadow: 0 0 18px rgba(111,255,241,.11) !important;
}

@media (prefers-reduced-motion: reduce) {
  .rail-card.pulse-live::before,
  .eco-tile.pulse-live::before,
  .solve-layer.pulse-live::before,
  #infoModal.modal-emphasis-live .modal-highlight {
    animation: none !important;
  }
}


/* REV JAMi-PROFILE-1.26 - refined click cues, delayed phrase glow and calmer CTA */

/* Keep the cards quietly inviting without the hard white outline. */
.rail-card::before,
.eco-tile::before,
.solve-layer::before {
  opacity: .18 !important;
  border-color: rgba(111,255,241,.22) !important;
  box-shadow: 0 0 16px rgba(111,255,241,.07), inset 0 0 12px rgba(111,255,241,.025) !important;
  transform: scale(.997) !important;
}

.rail-card.pulse-live::before,
.eco-tile.pulse-live::before,
.solve-layer.pulse-live::before {
  animation: jamiTapPerimeterBreath 4.6s ease-in-out infinite !important;
}

@keyframes jamiTapPerimeterBreath {
  0%, 100% {
    opacity: .16;
    border-color: rgba(111,255,241,.18);
    box-shadow: 0 0 10px rgba(111,255,241,.045), inset 0 0 8px rgba(111,255,241,.018);
    transform: scale(.997);
  }
  48% {
    opacity: .62;
    border-color: rgba(111,255,241,.45);
    box-shadow: 0 0 24px rgba(111,255,241,.18), inset 0 0 14px rgba(111,255,241,.045);
    transform: scale(1.004);
  }
}

/* Section entry cue: visible but premium, never a thick white border. */
.rail-card.section-card-cue::after,
.eco-tile.section-card-cue::after {
  border-color: rgba(111,255,241,.72) !important;
  box-shadow: 0 0 26px rgba(111,255,241,.22), inset 0 0 18px rgba(111,255,241,.06) !important;
  animation: jamiSectionCueSoft 1.25s cubic-bezier(.18,.82,.2,1) both !important;
}

@keyframes jamiSectionCueSoft {
  0% { opacity: 0; transform: scale(.99); }
  18% { opacity: .74; transform: scale(1); }
  60% { opacity: .42; transform: scale(1.009); }
  100% { opacity: 0; transform: scale(1.018); }
}

/* Modal call-out words: no bold jump, no background jump. They glow in reading order after the modal is already open. */
.modal-highlight {
  color: inherit !important;
  font-weight: inherit !important;
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: none !important;
}

#infoModal.modal-emphasis-live .modal-highlight {
  color: inherit !important;
  font-weight: inherit !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  animation: jamiPhraseReadOrderGlow 2.4s ease-in-out forwards !important;
  animation-delay: var(--hl-delay, 0ms) !important;
}

@keyframes jamiPhraseReadOrderGlow {
  0%, 22% {
    color: inherit;
    text-shadow: none;
  }
  62% {
    color: #a7fff9;
    text-shadow: 0 0 10px rgba(111,255,241,.22), 0 0 2px rgba(111,255,241,.36);
  }
  100% {
    color: #8af7ef;
    text-shadow: 0 0 8px rgba(111,255,241,.18);
  }
}

/* CTA cycle: same button, same font, softer message. */
.cta-cycler {
  min-height: 48px !important;
  transition: opacity .42s ease, transform .42s ease, filter .42s ease !important;
}

.cta-cycler.cta-text-swap {
  opacity: .72 !important;
  transform: scale(.995) !important;
  filter: saturate(.96) !important;
}

.cta-cycler.cta-text-alt {
  letter-spacing: normal !important;
  text-transform: none !important;
  font-weight: 850 !important;
  color: #061112 !important;
  background: linear-gradient(135deg, #55d7d3, #2d98a0) !important;
  box-shadow: 0 0 18px rgba(111,255,241,.10) !important;
}

@media (prefers-reduced-motion: reduce) {
  .rail-card.pulse-live::before,
  .eco-tile.pulse-live::before,
  .solve-layer.pulse-live::before,
  .rail-card.section-card-cue::after,
  .eco-tile.section-card-cue::after,
  #infoModal.modal-emphasis-live .modal-highlight {
    animation: none !important;
  }
}


/* REV JAMi-PROFILE-1.27 - reliable subtle modal highlights, calmer CTA, closing card glow */

/* Previous versions used a parent modal class; keep it neutral so text never jumps or over-glows. */
#infoModal.modal-emphasis-live .modal-highlight {
  color: inherit !important;
  font-weight: inherit !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  animation: none !important;
}

.modal-highlight {
  color: inherit !important;
  font-weight: inherit !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none !important;
  transition: color 900ms ease, text-shadow 900ms ease !important;
}

/* JS adds this class in reading order after the full modal content is already visible. */
.modal-highlight.is-glowing {
  color: #a7fff8 !important;
  text-shadow:
    0 0 7px rgba(111,255,241,.22),
    0 0 14px rgba(111,255,241,.10) !important;
  animation: jamiModalPhraseHold 3.2s ease-out both !important;
}

@keyframes jamiModalPhraseHold {
  0% {
    color: inherit;
    text-shadow: none;
  }
  45% {
    color: #b9fff9;
    text-shadow:
      0 0 8px rgba(111,255,241,.24),
      0 0 16px rgba(111,255,241,.12);
  }
  100% {
    color: #95f7ef;
    text-shadow:
      0 0 6px rgba(111,255,241,.15),
      0 0 12px rgba(111,255,241,.08);
  }
}

/* Button text cycle: same button, same colour system, no hard flash. */
.cta-cycler {
  min-height: 48px !important;
  transition: opacity 760ms ease, filter 760ms ease, transform 760ms ease !important;
  will-change: opacity;
}

.cta-cycler.cta-is-fading,
.cta-cycler.cta-text-swap {
  opacity: .48 !important;
  transform: none !important;
  filter: blur(.12px) saturate(.98) !important;
}

.cta-cycler.cta-text-alt {
  letter-spacing: normal !important;
  text-transform: none !important;
  font-weight: 850 !important;
  color: #061112 !important;
  background: linear-gradient(135deg, #55d7d3, #2d98a0) !important;
  box-shadow: 0 0 16px rgba(111,255,241,.09) !important;
}

/* Make the final JAMi contact card feel alive without heavy conic/blur effects. */
.contact-card {
  position: relative !important;
  overflow: hidden !important;
  box-shadow:
    0 28px 84px rgba(0,0,0,.46),
    0 0 0 1px rgba(111,255,241,.10),
    0 0 30px rgba(72,199,194,.045) !important;
  animation: jamiContactCardBreath 7.2s ease-in-out infinite !important;
}

.contact-card::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  opacity: 1 !important;
  background: none !important;
  border: 1px solid rgba(111,255,241,.16) !important;
  box-shadow:
    inset 0 0 18px rgba(111,255,241,.035),
    0 0 22px rgba(111,255,241,.045) !important;
  animation: jamiContactEdgeInvite 5.8s ease-in-out infinite !important;
}

@keyframes jamiContactCardBreath {
  0%, 100% {
    box-shadow:
      0 28px 84px rgba(0,0,0,.46),
      0 0 0 1px rgba(111,255,241,.10),
      0 0 26px rgba(72,199,194,.045);
  }
  50% {
    box-shadow:
      0 30px 90px rgba(0,0,0,.50),
      0 0 0 1px rgba(111,255,241,.20),
      0 0 38px rgba(72,199,194,.095);
  }
}

@keyframes jamiContactEdgeInvite {
  0%, 100% {
    border-color: rgba(111,255,241,.13);
    box-shadow:
      inset 0 0 14px rgba(111,255,241,.025),
      0 0 18px rgba(111,255,241,.035);
  }
  50% {
    border-color: rgba(111,255,241,.34);
    box-shadow:
      inset 0 0 20px rgba(111,255,241,.055),
      0 0 30px rgba(111,255,241,.095);
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal-highlight.is-glowing,
  .contact-card,
  .contact-card::after {
    animation: none !important;
  }
}

/* REV JAMi-PROFILE-1.28 - final modal call-out highlight override
   Cause fixed: older #infoModal.modal-emphasis-live .modal-highlight rules used
   higher specificity and !important, which neutralised .modal-highlight.is-glowing.
   This selector deliberately outranks those neutral rules without changing layout. */
#infoModal.modal-emphasis-live .modal-highlight.is-glowing {
  color: #9ffaf4 !important;
  text-shadow:
    0 0 5px rgba(111, 255, 241, 0.28),
    0 0 12px rgba(111, 255, 241, 0.13) !important;
  animation: jamiModalCalloutFinalGlow 3.2s ease-out both !important;
  font-weight: inherit !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

@keyframes jamiModalCalloutFinalGlow {
  0% {
    color: inherit;
    text-shadow: none;
  }
  35% {
    color: #c9fffb;
    text-shadow:
      0 0 7px rgba(111, 255, 241, 0.34),
      0 0 16px rgba(111, 255, 241, 0.16);
  }
  100% {
    color: #9ffaf4;
    text-shadow:
      0 0 5px rgba(111, 255, 241, 0.24),
      0 0 12px rgba(111, 255, 241, 0.12);
  }
}