/* Left profile rail: two big buttons (Profile, Download résumé) + animated social buttons. */
.site-shell .profile-rail .rail-section-button--portfolio{display:none!important}
.site-shell .profile-rail .rail-section-switcher{display:block!important}
.site-shell .profile-rail .rail-section-button--profile,
.site-shell .profile-rail .profile-download{display:flex!important;width:100%;min-height:58px;align-items:center;justify-content:space-between;gap:.6rem;padding:0 1rem;font-size:1rem;font-weight:700}
.site-shell .profile-rail .profile-actions{margin-top:.8rem}

.rail-socials{display:grid;grid-template-columns:repeat(auto-fit,minmax(48px,1fr));gap:10px;margin-top:1rem}
.rail-social{position:relative;display:grid;place-items:center;aspect-ratio:1;min-height:48px;border:3px solid var(--nb-border,#202124);background:var(--nb-surface,#fff);color:var(--nb-text,#202124);border-radius:12px;box-shadow:3px 3px 0 var(--nb-border,#202124);text-decoration:none;cursor:pointer;overflow:visible;transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .2s,color .2s}
.rail-social svg{width:22px;height:22px;fill:currentColor;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.rail-social:hover,.rail-social:focus-visible{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--nb-border,#202124);color:#fff}
.rail-social:active{transform:translate(2px,2px);box-shadow:none}
.rail-social--instagram:hover,.rail-social--instagram:focus-visible{background:linear-gradient(45deg,#f9a825,#ee2a7b 55%,#6228d7)}
.rail-social--whatsapp:hover,.rail-social--whatsapp:focus-visible{background:#25d366;color:#07351c}
.rail-social--github:hover,.rail-social--github:focus-visible{background:#111}
.rail-social--x:hover,.rail-social--x:focus-visible{background:#111}
.rail-social--linkedin:hover,.rail-social--linkedin:focus-visible{background:#0a66c2}
html[data-theme="dark"] .rail-social--github:hover,html[data-theme="dark"] .rail-social--x:hover{background:#fffbe8;color:#111}
/* a different hover motion for each network */
.rail-social--instagram:hover svg{animation:rs-wobble .6s ease}
.rail-social--whatsapp:hover svg{animation:rs-pulse .7s ease infinite}
.rail-social--github:hover svg{animation:rs-spin .8s cubic-bezier(.3,1.4,.5,1)}
.rail-social--x:hover svg{animation:rs-flip .6s ease}
.rail-social--linkedin:hover svg{animation:rs-rise .5s ease}
@keyframes rs-wobble{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg) scale(1.15)}75%{transform:rotate(14deg) scale(1.15)}}
@keyframes rs-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.28)}}
@keyframes rs-spin{to{transform:rotate(360deg) scale(1.12)}}
@keyframes rs-flip{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}
@keyframes rs-rise{0%{transform:translateY(0)}40%{transform:translateY(-7px) scale(1.15)}100%{transform:translateY(0)}}
/* gentle idle float, staggered (uses the independent `translate` property so hover transforms still work) */
.rail-social{animation:rs-idle 3.6s ease-in-out infinite}
.rail-social:nth-child(2){animation-delay:-.7s}.rail-social:nth-child(3){animation-delay:-1.4s}.rail-social:nth-child(4){animation-delay:-2.1s}.rail-social:nth-child(5){animation-delay:-2.8s}
@keyframes rs-idle{0%,100%{translate:0 0}50%{translate:0 -3px}}
.rail-social:hover,.rail-social:focus-visible{animation-play-state:paused}

/* phones: the rail shows only the photo, so give socials a compact row next to it */
@media(max-width:900px){
  .site-shell .profile-rail > .rail-socials{display:flex!important;flex-wrap:wrap;gap:8px;margin:0;align-items:center}
  .site-shell .profile-rail .rail-social{width:46px;min-height:46px;aspect-ratio:auto;height:46px}
}
@media (prefers-reduced-motion:reduce){.rail-social,.rail-social svg{animation:none!important;transition:none!important}}

/* click-effect helpers (effects.js) */
.fx-particle{position:fixed;left:0;top:0;pointer-events:none;z-index:2147483000;will-change:transform,opacity;user-select:none}