/* PROONE TOUCH READING STANDARD
   Mobile/coarse-pointer only. Reference motion: About card interaction.
   Default state remains unchanged; touch adds a subtle lift + theme-matched glow.
*/
@media (pointer: coarse) {
  .proone-touch-reading-target {
    -webkit-tap-highlight-color: transparent;
    transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .35s ease, box-shadow .35s ease, text-shadow .35s ease !important;
  }

  /* Remove mobile browser/sticky-hover glow so the visual state is touch-driven. */
  .about-card.glow-blue:hover,
  .about-card.glow-orange:hover {
    transform: none !important;
    border-color: rgba(0,174,239,.16) !important;
    box-shadow: 0 20px 55px rgba(0,0,0,.34) !important;
  }
  .about-card.glow-orange:hover {
    border-color: rgba(245,91,32,.16) !important;
  }

  .about-card.proone-touch-active.glow-blue {
    transform: translateY(-5px) !important;
    border-color: rgba(0,174,239,.38) !important;
    box-shadow: 0 24px 65px rgba(0,174,239,.12), 0 0 30px rgba(0,174,239,.08) !important;
  }
  .about-card.proone-touch-active.glow-orange {
    transform: translateY(-5px) !important;
    border-color: rgba(245,91,32,.38) !important;
    box-shadow: 0 24px 65px rgba(245,91,32,.12), 0 0 30px rgba(245,91,32,.08) !important;
  }

  .dc-story.proone-touch-active.theme-blue {
    transform: translateY(-5px) !important;
    border-color: rgba(0,174,239,.38) !important;
    box-shadow: 0 24px 65px rgba(0,174,239,.12), 0 0 30px rgba(0,174,239,.08) !important;
  }
  .dc-story.proone-touch-active.theme-orange {
    transform: translateY(-5px) !important;
    border-color: rgba(245,91,32,.38) !important;
    box-shadow: 0 24px 65px rgba(245,91,32,.12), 0 0 30px rgba(245,91,32,.08) !important;
  }

  /* Projects / phase-page main description capsule: neutral at rest, glow only while reading. */
  #middle-glass-panel.theme-blue,
  #middle-glass-panel.theme-blue:hover,
  .text-col.theme-blue:hover {
    border-color: rgba(0,174,239,.20) !important;
    box-shadow: 0 15px 40px rgba(0,174,239,.10) !important;
    transform: none !important;
  }
  #middle-glass-panel.theme-orange,
  #middle-glass-panel.theme-orange:hover,
  .text-col.theme-orange:hover {
    border-color: rgba(245,91,32,.20) !important;
    box-shadow: 0 15px 40px rgba(245,91,32,.10) !important;
    transform: none !important;
  }
  #middle-glass-panel.proone-touch-active.theme-blue {
    transform: translateY(-5px) !important;
    border-color: rgba(0,174,239,.38) !important;
    box-shadow: 0 24px 65px rgba(0,174,239,.12), 0 0 30px rgba(0,174,239,.08) !important;
  }
  #middle-glass-panel.proone-touch-active.theme-orange {
    transform: translateY(-5px) !important;
    border-color: rgba(245,91,32,.38) !important;
    box-shadow: 0 24px 65px rgba(245,91,32,.12), 0 0 30px rgba(245,91,32,.08) !important;
  }

  /* Detail explanation card: preserve geometry, remove persistent neon on coarse pointers. */
  .detail-card.phase-blue,
  .detail-card.phase-blue:hover {
    border-color: rgba(255,255,255,.12) !important;
    box-shadow: 0 20px 48px rgba(0,0,0,.38) !important;
  }
  .detail-card.phase-orange,
  .detail-card.phase-orange:hover {
    border-color: rgba(255,255,255,.12) !important;
    box-shadow: 0 20px 48px rgba(0,0,0,.38) !important;
  }
  .detail-card.phase-white,
  .detail-card.phase-white:hover {
    border-color: rgba(255,255,255,.12) !important;
    box-shadow: 0 20px 48px rgba(0,0,0,.38) !important;
  }
  .detail-card.proone-touch-active.phase-blue {
    transform: translateY(-5px) !important;
    border-color: rgba(0,174,239,.38) !important;
    box-shadow: 0 24px 65px rgba(0,174,239,.12), 0 0 30px rgba(0,174,239,.08) !important;
  }
  .detail-card.proone-touch-active.phase-orange {
    transform: translateY(-5px) !important;
    border-color: rgba(245,91,32,.38) !important;
    box-shadow: 0 24px 65px rgba(245,91,32,.12), 0 0 30px rgba(245,91,32,.08) !important;
  }
  .detail-card.proone-touch-active.phase-white {
    transform: translateY(-5px) !important;
    border-color: rgba(255,255,255,.55) !important;
    box-shadow: 0 24px 65px rgba(255,255,255,.10), 0 0 30px rgba(255,255,255,.08) !important;
  }

  /* Mobile detail explanation is intentionally touchable; desktop remains unchanged. */
  .detail-card.proone-touch-reading-target {
    pointer-events: auto !important;
  }

  /* Installation page phase copy has no glass border in the existing design; keep the same
     motion but express glow through the existing text language instead of introducing a capsule. */
  .phase-copy.proone-touch-active.phase-blue h2,
  .phase-copy.proone-touch-active.phase-blue p {
    text-shadow: 0 0 14px rgba(0,174,239,.28);
  }
  .phase-copy.proone-touch-active.phase-orange h2,
  .phase-copy.proone-touch-active.phase-orange p {
    text-shadow: 0 0 14px rgba(245,91,32,.28);
  }
  .phase-copy.proone-touch-active {
    transform: translateY(-5px) !important;
  }
}

/* REV-005: approved mobile initial-state correction.
   Main explanation capsules start fully neutral; touch activates the main-category colour.
   Five-detail explanation capsules use their own phase colour on touch (blue/orange/white). */
@media (pointer: coarse) {
  #middle-glass-panel.theme-blue,
  #middle-glass-panel.theme-orange,
  #middle-glass-panel.theme-blue:hover,
  #middle-glass-panel.theme-orange:hover {
    border-color: rgba(255,255,255,.10) !important;
    box-shadow: 0 20px 55px rgba(0,0,0,.34) !important;
    transform: none !important;
  }
  #middle-glass-panel.proone-touch-active.theme-blue {
    transform: translateY(-5px) !important;
    border-color: rgba(0,174,239,.38) !important;
    box-shadow: 0 24px 65px rgba(0,174,239,.12), 0 0 30px rgba(0,174,239,.08) !important;
  }
  #middle-glass-panel.proone-touch-active.theme-orange {
    transform: translateY(-5px) !important;
    border-color: rgba(245,91,32,.38) !important;
    box-shadow: 0 24px 65px rgba(245,91,32,.12), 0 0 30px rgba(245,91,32,.08) !important;
  }

  /* REV-005: detail explanation glow follows the five-pill's own colour. */
  .detail-card.proone-touch-active.phase-blue {
    transform: translateY(-5px) !important;
    border-color: rgba(0,174,239,.38) !important;
    box-shadow: 0 24px 65px rgba(0,174,239,.12), 0 0 30px rgba(0,174,239,.08) !important;
  }
  .detail-card.proone-touch-active.phase-orange {
    transform: translateY(-5px) !important;
    border-color: rgba(245,91,32,.38) !important;
    box-shadow: 0 24px 65px rgba(245,91,32,.12), 0 0 30px rgba(245,91,32,.08) !important;
  }
  .detail-card.proone-touch-active.phase-white {
    transform: translateY(-5px) !important;
    border-color: rgba(255,255,255,.55) !important;
    box-shadow: 0 24px 65px rgba(255,255,255,.10), 0 0 30px rgba(255,255,255,.08) !important;
  }
}