/* cq-rtgfx-18jul */
/* RTO Training Group - practical motion layer (18 Jul). Restrained, conversion-first.
   Everything motion-related is gated behind html.fxa, which rtg-fx.js adds ONLY when
   prefers-reduced-motion is not set. Without JS or with PRM: fully static, nothing hidden. */

/* ---------- brand scene (hero) ---------- */
.hero-grid{display:grid;gap:2rem;align-items:center}
@media (min-width:980px){.hero-grid{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:3rem}}
.hero-scene{margin:0;max-width:640px}
@media (max-width:979px){.hero-scene{max-width:560px;margin-top:1.4rem}}
.hero-scene-frame{position:relative;border-radius:var(--rtg-rad-lg) var(--rtg-rad-lg) 0 0;overflow:hidden;background:var(--rtg-blue-deep);box-shadow:0 16px 40px rgba(18,42,102,.16)}
.hero-scene-frame::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 0 1.5px rgba(18,42,102,.18)}
.hero-scene-frame video,.hero-scene-frame img{display:block;width:100%;height:auto;aspect-ratio:1376/768;object-fit:cover}
.hero-scene figcaption{background:var(--rtg-blue-deep);color:#fff;border-radius:0 0 var(--rtg-rad-lg) var(--rtg-rad-lg);padding:.8em 1.15em;font:600 13.5px/1.55 var(--rtg-text)}

/* ---------- entrances (hero) ---------- */
@keyframes fxrise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
html.fxa .hero h1:not(.rv){animation:fxrise .5s cubic-bezier(.2,.7,.3,1) both}
html.fxa .hero .lede:not(.rv),html.fxa .hero .lead:not(.rv),html.fxa .hero .hero-sub:not(.rv){animation:fxrise .5s cubic-bezier(.2,.7,.3,1) .08s both}
html.fxa .hero-scene,html.fxa .urgent-hero h1{animation:fxrise .55s cubic-bezier(.2,.7,.3,1) .12s both}

/* ---------- IO reveal cascade (armed per-element by rtg-fx.js) ---------- */
html.fxa .fxr{opacity:0;transform:translateY(10px);transition:opacity .25s ease,transform .25s ease}
html.fxa .fxr.fx-in{opacity:1;transform:none}

/* ---------- precise card lift (tilt deliberately OFF) ---------- */
html.fxa .pkg-card,html.fxa .rtg-cred,html.fxa .rtg-case,html.fxa .card,html.fxa .door,html.fxa .guide-q,html.fxa .rtg-testi{transition:transform .18s ease,border-color .18s ease}
html.fxa .pkg-card:hover,html.fxa .rtg-cred:hover,html.fxa .rtg-case:hover,html.fxa .card:hover,html.fxa .guide-q:hover{transform:translateY(-2px);border-color:var(--rtg-blue)}
html.fxa .door:hover{transform:translateY(-2px)}

/* ---------- router / linking cards: arrow nudge ---------- */
html.fxa .router-card i,html.fxa .door .door-go,html.fxa .card-links a{transition:transform .16s ease}
html.fxa .router-card:hover i{transform:translateX(4px)}
html.fxa .door:hover .door-go{transform:translateX(3px)}
html.fxa .card-links a:hover{transform:translateX(2px)}

/* ---------- pricing table: row emphasis + orange left-rule slide-in ---------- */
html.fxa .rtg-pricetable tbody tr{transition:background-color .15s ease}
html.fxa .rtg-pricetable tbody tr:hover{background:var(--rtg-tint)}
html.fxa .rtg-pricetable tbody td{position:relative}
html.fxa .rtg-pricetable tbody td:first-child::before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:3px;border-radius:2px;background:var(--rtg-orange);transform:scaleX(0);transform-origin:left center;transition:transform .18s ease}
html.fxa .rtg-pricetable tbody tr:hover td:first-child::before{transform:scaleX(1)}

/* ---------- calculator / schedule-builder result pop-in + row cascade ---------- */
@keyframes fxpop{from{opacity:0;transform:translateY(8px) scale(.992)}to{opacity:1;transform:none}}
html.fxa .fx-pop{animation:fxpop .28s cubic-bezier(.2,.7,.3,1) both}
html.fxa .fx-pop .rtg-scope-cols li{animation:fxrise .3s ease both;animation-delay:.34s}
html.fxa .fx-pop .rtg-scope-cols li:nth-child(1){animation-delay:.10s}
html.fxa .fx-pop .rtg-scope-cols li:nth-child(2){animation-delay:.16s}
html.fxa .fx-pop .rtg-scope-cols li:nth-child(3){animation-delay:.22s}
html.fxa .fx-pop .rtg-scope-cols li:nth-child(4){animation-delay:.28s}

/* ---------- process map (registration): connector draw-in on reveal ---------- */
html.fxa .pmap .pm-card{position:relative}
html.fxa .pmap .pm-card::before{content:"";position:absolute;top:0;left:14px;right:14px;height:3px;border-radius:0 0 2px 2px;background:linear-gradient(90deg,var(--rtg-blue),var(--rtg-orange));transform:scaleX(0);transform-origin:left center;transition:transform .5s ease .12s}
html.fxa .pmap .pm-card.fx-done::before{transform:scaleX(1)}

/* ---------- urgent desk (audits): soft 2s pulse on the phone number ---------- */
@keyframes fxphone{0%,100%{transform:scale(1)}50%{transform:scale(1.018)}}
html.fxa a.rtg-phone{display:inline-block;transform-origin:left center;animation:fxphone 2s ease-in-out infinite}

/* ---------- safety net: kill everything under PRM even if fxa somehow set ---------- */
@media (prefers-reduced-motion:reduce){
  html.fxa *,html.fxa *::before,html.fxa *::after{animation:none !important;transition:none !important}
  html.fxa .fxr{opacity:1;transform:none}
}