/* ==========================================================
   SVRMX Motion Design Framework v1.1 - FIXED
   Fix focus: keep original layout/positions stable while keeping
   Hanging Animation, Fade, Parallax, Smooth Scroll, Mouse Interaction,
   Magnetic Buttons, Cards Animation, Hero Animation, Image Reveal,
   Text Reveal, Split Text, Loading Screen, Cursor Animation.
   ========================================================== */
:root{
  --svrmx-motion-fast: 420ms;
  --svrmx-motion-med: 820ms;
  --svrmx-motion-slow: 1200ms;
  --svrmx-ease-heavy: cubic-bezier(.16,.84,.22,1);
  --svrmx-ease-out: cubic-bezier(.22,1,.36,1);
  --svrmx-cursor: rgba(255,195,106,.78);
}

html{scroll-behavior:smooth;}
body.svrmx-loading{overflow:hidden;}

/* ---------------- Loading Screen ---------------- */
.svrmx-loader{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,rgba(255,132,25,.12),transparent 34%),#020306;transition:opacity .75s var(--svrmx-ease-out),visibility .75s var(--svrmx-ease-out);}
.svrmx-loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none;}
.svrmx-loader__inner{text-align:center;transform-origin:0% 50%;animation:svrmxHangPivot 1.05s var(--svrmx-ease-heavy) both;}
.svrmx-loader__logo{font-weight:900;font-size:clamp(2rem,9vw,5.4rem);letter-spacing:-.08em;color:#fff;text-shadow:0 0 36px rgba(255,132,25,.36);}
.svrmx-loader__sub{margin-top:8px;color:#ffc36a;font-size:.78rem;font-weight:900;letter-spacing:.28em;text-transform:uppercase;}
.svrmx-loader__bar{width:min(260px,62vw);height:2px;margin:24px auto 0;background:rgba(255,255,255,.13);overflow:hidden;border-radius:999px;}
.svrmx-loader__bar span{display:block;width:48%;height:100%;background:linear-gradient(90deg,transparent,#ffc36a,#ff8419);animation:svrmxLoaderBar 1.2s var(--svrmx-ease-out) infinite;}
@keyframes svrmxLoaderBar{0%{transform:translateX(-120%)}100%{transform:translateX(240%)}}

/* ---------------- Custom Cursor ---------------- */
.svrmx-cursor,.svrmx-cursor-dot{position:fixed;left:0;top:0;z-index:9998;pointer-events:none;border-radius:50%;mix-blend-mode:screen;opacity:0;transition:opacity .25s ease,background .18s ease,border-color .18s ease;}
.svrmx-cursor{width:36px;height:36px;margin:-18px 0 0 -18px;border:1px solid rgba(255,195,106,.65);box-shadow:0 0 24px rgba(255,132,25,.22);}
.svrmx-cursor-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--svrmx-cursor);box-shadow:0 0 16px rgba(255,132,25,.9);}
body.svrmx-cursor-ready .svrmx-cursor,body.svrmx-cursor-ready .svrmx-cursor-dot{opacity:1;}
body.svrmx-cursor-hover .svrmx-cursor{background:rgba(255,132,25,.07);border-color:rgba(255,216,140,.95);}

/* ---------------- Hanging Pivot Typography ----------------
   Important fix: the final transform is 0 / 0 / scale(1).
   This preserves the original page position after the animation.
*/
.svrmx-hang-wrap{display:inline-block;transform-origin:0% 55%;transform-box:border-box;will-change:transform,opacity;opacity:0;}
.svrmx-hang-run{animation:svrmxHangPivot var(--svrmx-motion-med) var(--svrmx-ease-heavy) both;}
@keyframes svrmxHangPivot{
  0%{opacity:0;transform:translate3d(0,-22px,0) rotate(-92deg) scale(0);}
  8%{opacity:1;transform:translate3d(0,-12px,0) rotate(-86deg) scale(1.08);}
  18%{opacity:1;transform:translate3d(0,10px,0) rotate(-68deg) scale(1);}
  38%{opacity:1;transform:translate3d(0,24px,0) rotate(-30deg) scale(1);}
  55%{opacity:1;transform:translate3d(0,30px,0) rotate(7deg) scale(1.015,.985);}
  68%{opacity:1;transform:translate3d(0,-6px,0) rotate(-4deg) scale(.995,1.005);}
  82%{opacity:1;transform:translate3d(0,3px,0) rotate(2deg) scale(1);}
  100%{opacity:1;transform:translate3d(0,0,0) rotate(0deg) scale(1);}
}

/* ---------------- Split / Text Reveal ---------------- */
.svrmx-split{display:inline-block;}
.svrmx-word{display:inline-block;overflow:hidden;vertical-align:bottom;}
.svrmx-word span{display:inline-block;transform:translateY(112%) rotate(3deg);opacity:0;transition:transform .85s var(--svrmx-ease-out),opacity .85s var(--svrmx-ease-out);transition-delay:calc(var(--i,0) * 42ms);}
.svrmx-inview .svrmx-word span{transform:translateY(0) rotate(0);opacity:1;}

/* ---------------- Scroll Reveal / Fade ---------------- */
.svrmx-reveal{opacity:0;transform:translateY(28px) scale(.985);filter:blur(8px);transition:opacity .95s var(--svrmx-ease-out),transform .95s var(--svrmx-ease-out),filter .95s var(--svrmx-ease-out);transition-delay:var(--svrmx-delay,0ms);}
.svrmx-reveal.svrmx-inview{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}

/* Glass slide-down variant: used for panels without moving titles out of position */
.svrmx-glass-slide{opacity:0;transform:translateY(-18px);filter:blur(7px);transition:opacity .9s var(--svrmx-ease-out),transform .9s var(--svrmx-ease-out),filter .9s var(--svrmx-ease-out);transition-delay:var(--svrmx-delay,0ms);}
.svrmx-glass-slide.svrmx-inview{opacity:1;transform:translateY(0);filter:blur(0);}

/* ---------------- Image Reveal ---------------- */
.svrmx-image-reveal{position:relative;overflow:hidden;clip-path:inset(0 0 18% 0 round 20px);transform:translateY(20px) scale(.985);transition:clip-path 1.1s var(--svrmx-ease-out),transform 1.1s var(--svrmx-ease-out);}
.svrmx-image-reveal:after{content:'';position:absolute;inset:0;z-index:6;background:linear-gradient(110deg,rgba(255,195,106,0),rgba(255,195,106,.28),rgba(255,132,25,0));transform:translateX(-115%);transition:transform 1.2s var(--svrmx-ease-out);pointer-events:none;}
.svrmx-image-reveal.svrmx-inview{clip-path:inset(0 0 0 0 round 20px);transform:translateY(0) scale(1);}
.svrmx-image-reveal.svrmx-inview:after{transform:translateX(115%);}

/* ---------------- Hero Animation ---------------- */
.hero-copy,.hero-logo{will-change:transform;}
.hero-logo.svrmx-hero-ready{animation:svrmxHeroLogo 1.2s var(--svrmx-ease-out) both;}
.hero-copy.svrmx-hero-ready{animation:svrmxHeroCopy 1.05s var(--svrmx-ease-out) .18s both;}
@keyframes svrmxHeroLogo{from{opacity:0;transform:translateY(34px) scale(.92) rotate(-1.5deg);filter:blur(12px)}to{opacity:1;transform:translateY(0) scale(1) rotate(0);filter:blur(0)}}
@keyframes svrmxHeroCopy{from{opacity:0;transform:translateY(28px);filter:blur(10px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}

/* ---------------- Magnetic Buttons / Hover Physics ---------------- */
.svrmx-magnetic{position:relative;will-change:transform;transition:box-shadow .25s ease,border-color .25s ease,filter .25s ease;}
.svrmx-magnetic:after{content:'';position:absolute;left:14px;right:14px;bottom:8px;height:1px;background:linear-gradient(90deg,transparent,#ffc36a,#ff8419,transparent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--svrmx-ease-out);opacity:.9;}
.svrmx-magnetic:hover:after{transform:scaleX(1);}
.svrmx-magnetic:hover{filter:brightness(1.13);}

/* ---------------- Cards / Mouse Interaction ---------------- */
.svrmx-tilt{transform-style:preserve-3d;will-change:transform;transition:transform .18s ease,box-shadow .25s ease;}
.svrmx-tilt .card-body,.svrmx-tilt .open-icon{transform:translateZ(22px);}
.svrmx-tilt .media img{will-change:transform;}

/* ---------------- Parallax / Ambient polish ---------------- */
.svrmx-parallax{will-change:transform;}
.glass{transition:transform .35s var(--svrmx-ease-out),box-shadow .35s var(--svrmx-ease-out),border-color .35s ease;}
.glass:hover{border-color:rgba(255,195,106,.28);}

@media (pointer:coarse){.svrmx-cursor,.svrmx-cursor-dot{display:none}.svrmx-tilt{transform:none!important}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.svrmx-loader{display:none!important}.svrmx-cursor,.svrmx-cursor-dot{display:none!important}.svrmx-reveal,.svrmx-glass-slide,.svrmx-word span,.svrmx-hang-wrap{opacity:1!important;transform:none!important;filter:none!important}.svrmx-image-reveal{clip-path:none!important;transform:none!important}}