/* MYRON-WEB-009: final polish of V3 — active page in menus, restrained motion. Same tokens as v3.css; no inline styles. */

/* ---------- Mega menu and mobile menu: the page the visitor is on ---------- */
.mega__col a{position:relative;margin-inline:-10px;padding:7px 10px;border-radius:8px;transition:color .18s,background-color .18s}
.mega__col a::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:2px;background:var(--red);transform:scaleY(0);transition:transform .2s var(--ease)}
.mega__col a:hover{background:var(--g50)}
.mega__col a.is-cur{background:var(--red-50);color:var(--navy);font-weight:600}
.mega__col a.is-cur::before{transform:scaleY(1)}
.mega__col.is-cur h3{color:var(--navy)}
.mega__col.is-cur h3::after{content:"";flex:1;height:2px;margin-left:6px;align-self:center;border-radius:1px;background:linear-gradient(90deg,var(--red),transparent)}
.mega__col a:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.drawer__b a.is-cur{color:var(--red);font-weight:700;box-shadow:inset 3px 0 0 var(--red);padding-left:12px;background:var(--red-50);border-radius:0 8px 8px 0}
.drawer__b details.is-cur summary small{color:var(--red)}

/* ---------- Motion: one restrained language for the whole site ----------
   Only transform and opacity animate. Content is visible by default; the reveal class is added by script to
   blocks below the fold only, so a script error never hides anything. All motion is off with reduced motion. */
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(18px)}
  .rv.is-in{opacity:1;transform:none;transition:opacity .65s var(--ease),transform .65s var(--ease);transition-delay:var(--rv-d,0ms)}
  .flt-in{animation:fltIn .38s var(--ease) both}
  .faq__i[open] > div,.svc-faq details[open] > div{animation:panelIn .32s var(--ease)}
}
@keyframes fltIn{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.shot .rv{opacity:1!important;transform:none!important;transition:none!important}

/* Cards that had no feedback: lift, softer shadow, image zoom inside its frame (no layout change) */
.vcard,.tcard,.risk,.stage,.dir,.note,.explain__i,.gets li,.check,.pcard,.whp,.apack,.b2c__card{transition:transform .28s var(--ease),box-shadow .28s,border-color .28s}
@media (hover:hover){
  .vcard:hover,.risk:hover,.dir:hover,.apack:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--g300)}
  .stage:hover,.note:hover{transform:translateY(-2px);box-shadow:var(--sh-1)}
  .xcard__img img,.vcard__img img,.ccard__img img,.acard img,.dcard__img img{transition:transform .6s var(--ease)}
  .xcard:hover .xcard__img img{transform:scale(1.05)}
  .vcard:hover .vcard__img img{transform:scale(1.04)}
  .risk:hover .risk__r .ic,.dir:hover .ic,.check:hover .ic{transform:scale(1.12) rotate(-4deg)}
  .svcs a:hover em{color:var(--red)}
  .btn:hover > .ic:last-child,.btn:hover > svg:last-child{transform:translateX(3px)}
}
.risk__r .ic,.dir .ic,.check .ic,.btn > .ic,.btn > svg{transition:transform .28s var(--ease)}
.btn:active{transform:translateY(0) scale(.98)}
/* keyboard users get the same emphasis as the mouse */
.xcard:focus-within,.vcard:focus-within,.tcard:focus-within,.ccard:focus-within,.acard:focus-within{box-shadow:0 0 0 2px var(--red),var(--sh-2)}
.xcard:focus-within a:focus-visible,.ccard a:focus-visible,.acard a:focus-visible{outline:none}

/* ---------- Image credits: one tidy page instead of long captions ---------- */
.credits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.credits__i{padding:18px 20px;background:#fff;border:1px solid var(--g200);border-radius:var(--r-lg);scroll-margin-top:110px}
.credits__i:target{border-color:var(--red);box-shadow:0 0 0 3px var(--red-50)}
.credits__i h2{font-size:17px;margin-bottom:8px}.credits__i h2 a{color:var(--navy)}
.credits__i ol{margin:0;padding-left:18px;display:grid;gap:6px;font-size:14px;color:var(--g700)}
.credits__i a{color:var(--g700);text-decoration:underline;text-underline-offset:2px}
.gallery__credits{display:inline-block;margin-top:6px;font-size:12.5px;color:var(--g600);text-decoration:underline;text-underline-offset:2px}
@media (max-width:760px){.credits{grid-template-columns:minmax(0,1fr)}}