/* ======================================================
   BC — animations.css
   ====================================================== */

/* ── Keyframes ── */
@keyframes fadeUp     { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeLeft   { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeRight  { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scaleIn    { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes scrollPulse { 0%, 100% { opacity: .5; transform: scaleY(1); } 50% { opacity: 1; transform: scaleY(1.2); } }

/* ── Scroll-triggered animations ── */
.anim-fade-up    { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.anim-fade-left  { opacity: 0; transform: translateX(-28px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.anim-fade-right { opacity: 0; transform: translateX(28px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.anim-scale-in   { opacity: 0; transform: scale(.95); transition: opacity .65s var(--ease-out), transform .65s var(--ease-out); }

/* delay utilities */
[data-delay="1"] { transition-delay: .1s !important; }
[data-delay="2"] { transition-delay: .2s !important; }
[data-delay="3"] { transition-delay: .3s !important; }
[data-delay="4"] { transition-delay: .4s !important; }
[data-delay="5"] { transition-delay: .5s !important; }

.anim-fade-up.in-view,
.anim-fade-left.in-view,
.anim-fade-right.in-view,
.anim-scale-in.in-view {
  opacity: 1;
  transform: none;
}

/* ── Progress bar ── */
.progress-bar { position: fixed; top: 0; left: 0; height: 2px; background: var(--rose); z-index: 200; width: 0%; transition: width .1s linear; }

/* ── Skip link ── */
.skip-link { position: absolute; top: -100%; left: 1rem; background: var(--primary); color: var(--white); padding: .5rem 1rem; font-size: .875rem; z-index: 200; border-radius: 0 0 4px 4px; transition: top .2s; }
.skip-link:focus { top: 0; }

/* ── Text selection ── */
::selection { background: var(--rose-light); color: var(--dark); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: var(--primary-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* ── Back to top ── */
.back-top { position: fixed; bottom: 7rem; right: 1.5rem; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--primary); opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; z-index: 89; }
.back-top.visible { opacity: 1; pointer-events: all; }
.back-top:hover { transform: translateY(-3px); }

/* ── Tilt cards ── */
@media (min-width: 1024px) {
  .tilt-card { transition: transform .1s ease-out; }
}

/* ── Ripple ── */
.ripple-container { position: relative; overflow: hidden; }
.ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,.25); transform: scale(0); animation: rippleAnim .6s linear; pointer-events: none; }
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }

/* ── Img reveal ── */
.img-reveal-wrap { overflow: hidden; position: relative; }
.img-reveal-wrap::after { content: ''; position: absolute; inset: 0; background: var(--surface-alt); transform: scaleX(1); transform-origin: left; transition: transform .85s var(--ease-out); }
.img-reveal-wrap.revealed::after { transform: scaleX(0); transform-origin: right; }

/* ── Tooltip ── */
.tooltip-wrap { position: relative; }
.tooltip-wrap::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); background: var(--dark); color: var(--white); font-size: .75rem; padding: .4rem .75rem; border-radius: 2px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.tooltip-wrap:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }