:root{--q4m-ease:cubic-bezier(.22,.61,.36,1)}

html.q4m-ready .q4 .q4-sidebar{opacity:0;filter:brightness(.86)}
html.q4m-ready .q4 .q4-card{
  opacity:0;clip-path:inset(3% 3% 3% 3% round 24px);filter:brightness(.78) saturate(.86)
}
html.q4m-ready .q4.q4m-in .q4-sidebar{
  opacity:1;filter:brightness(1);
  transition:opacity 650ms var(--q4m-ease),filter 780ms var(--q4m-ease)
}
html.q4m-ready .q4.q4m-in .q4-card{
  opacity:1;clip-path:inset(0 0 0 0 round 24px);filter:brightness(1) saturate(1);
  transition:opacity 650ms var(--q4m-ease) 90ms,clip-path 820ms var(--q4m-ease) 90ms,filter 820ms var(--q4m-ease) 90ms
}

.q4-background{transition:opacity 520ms var(--q4m-ease),filter 620ms var(--q4m-ease)!important}
.q4.q4m-changing .q4-background{
  opacity:.48!important;filter:saturate(.68) brightness(.52) blur(1.5px)!important
}

.q4-card-media{overflow:hidden}
.q4-card-media img{
  transition:opacity 320ms var(--q4m-ease),filter 420ms var(--q4m-ease),transform 520ms var(--q4m-ease)!important
}
.q4.q4m-changing .q4-card-media img{
  opacity:.14!important;filter:blur(3px) brightness(.72) saturate(.70);transform:scale(1.028)
}
.q4-card-body{transition:opacity 260ms ease,filter 300ms ease,transform 360ms var(--q4m-ease)}
.q4.q4m-changing .q4-card-body{opacity:.18;filter:blur(1.8px);transform:translateY(5px)}

.q4-item{
  position:relative;overflow:hidden;
  transition:border-color 180ms ease,background 180ms ease,box-shadow 180ms ease,transform 180ms ease!important
}
.q4-item:hover{transform:translateX(3px)}
.q4-item::after{
  content:"";position:absolute;left:-42%;top:0;width:26%;height:100%;pointer-events:none;opacity:0;
  transform:skewX(-18deg);
  background:linear-gradient(90deg,transparent,rgba(113,242,255,.08),rgba(151,249,255,.48),rgba(113,242,255,.08),transparent)
}
.q4-item.q4m-charged{
  border-color:rgba(104,241,255,.94)!important;
  box-shadow:inset 0 0 0 1px rgba(97,236,255,.10),0 0 22px rgba(49,221,255,.17)!important
}
.q4-item.q4m-charged::after{animation:q4ItemSweep 580ms var(--q4m-ease) 1 both}
@keyframes q4ItemSweep{0%{left:-42%;opacity:0}18%{opacity:.85}100%{left:120%;opacity:0}}

.q4-signal-layer{
  position:absolute;z-index:5;left:0;right:0;top:0;height:100%;pointer-events:none;overflow:visible
}
.q4-signal-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.q4-signal-path{fill:none;stroke:rgba(88,235,255,.13);stroke-width:2;stroke-linecap:round;opacity:0}
.q4-signal-dot{
  fill:#e9feff;opacity:0;
  filter:drop-shadow(0 0 5px rgba(215,253,255,1))
         drop-shadow(0 0 13px rgba(79,235,255,.95))
         drop-shadow(0 0 22px rgba(40,193,255,.55))
}
.q4.q4m-signal .q4-signal-path{animation:q4PathFlash 620ms ease 1 both}
.q4.q4m-signal .q4-signal-dot{
  offset-path:path('M 85 308 C 250 308, 320 308, 478 308 C 620 308, 705 258, 860 258');
  offset-rotate:0deg;animation:q4SignalTravel 650ms var(--q4m-ease) 1 both
}
@keyframes q4PathFlash{0%{opacity:0}25%{opacity:.34}100%{opacity:0}}
@keyframes q4SignalTravel{
  0%{offset-distance:0%;opacity:0;transform:scale(.7)}
  10%{opacity:1}
  88%{opacity:1;transform:scale(1)}
  100%{offset-distance:100%;opacity:0;transform:scale(.85)}
}

.q4-card::before{
  content:"";position:absolute;z-index:4;left:66%;top:26%;width:180px;height:180px;margin:-90px 0 0 -90px;
  border-radius:50%;pointer-events:none;opacity:0;border:1px solid rgba(96,242,255,.54);
  box-shadow:0 0 20px rgba(55,228,255,.16),inset 0 0 22px rgba(55,228,255,.08)
}
.q4.q4m-arrive .q4-card::before{animation:q4ArrivalRing 620ms var(--q4m-ease) 1 both}
@keyframes q4ArrivalRing{0%{opacity:0;transform:scale(.55)}28%{opacity:.75}100%{opacity:0;transform:scale(2.2)}}

.q4-counter{transition:box-shadow 180ms ease,border-color 180ms ease}
.q4.q4m-arrive .q4-counter{animation:q4CounterFlash 520ms ease 1 both}
@keyframes q4CounterFlash{0%,100%{box-shadow:none}45%{box-shadow:0 0 18px rgba(74,233,255,.24);border-color:rgba(89,241,255,.68)}}

.q4-primary,.q4-secondary{
  transition:transform 180ms ease,filter 180ms ease,box-shadow 180ms ease!important
}
.q4-primary:hover,.q4-secondary:hover{transform:scale(1.018);filter:brightness(1.06)}

@media(max-width:980px){
  .q4-signal-layer{display:none!important}
  .q4-item:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
  html.q4m-ready .q4 .q4-sidebar,html.q4m-ready .q4 .q4-card{
    opacity:1!important;clip-path:none!important;filter:none!important;transition:none!important
  }
  .q4-signal-layer{display:none!important}
  .q4.q4m-changing .q4-card-media img,.q4.q4m-changing .q4-card-body,.q4.q4m-changing .q4-background{
    opacity:1!important;filter:none!important;transform:none!important
  }
}


/* =========================================================
   BLOCK 04 V1.1 — TITLE LINE SPACING ONLY
   Approved motion/design untouched.
   ========================================================= */

.q4-sidebar h2{
  line-height:.98 !important;
}

@media(max-width:1260px){
  .q4-sidebar h2{
    line-height:.99 !important;
  }
}

@media(max-width:820px){
  .q4-sidebar h2{
    line-height:1.00 !important;
  }
}