/* ============================================================
   VINORA EVENTS — motion.css
   The animation layer. Works in both light and dark.
   Everything is opt-in by class, and the whole file folds down to
   "already visible, no movement" under prefers-reduced-motion.
   ============================================================ */

/* ---------- scroll progress ---------- */
#scrollbar{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:9997;pointer-events:none;
  background:transparent
}
#scrollbar i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,#6b075c,#d4a017 60%,#fcf1d5);
  box-shadow:0 0 12px rgba(212,160,23,.6);
  transform-origin:left center
}

/* ---------- split-letter headings ---------- */
.m-split{display:inline-block}
/* Padding + matching negative margin: the overflow clip is what makes
   the letters rise out of nowhere, but without this breathing room it
   also shaves the tails off italic g, y and the rotation overhang. */
.m-split .m-w{
  display:inline-block;overflow:hidden;vertical-align:bottom;
  padding:.1em .08em .16em;margin:-.1em -.08em -.16em
}
.m-split .m-c{
  display:inline-block;
  transform:translateY(105%) rotate(4deg);
  opacity:0;
  transition:transform .8s cubic-bezier(.19,1,.22,1),opacity .6s ease;
  transition-delay:var(--d,0ms)
}
.m-split.in .m-c{transform:none;opacity:1}

/* ---------- staggered children ---------- */
.m-stagger > *{
  opacity:0;transform:translateY(26px);
  transition:opacity .7s ease,transform .8s cubic-bezier(.19,1,.22,1)
}
.m-stagger.in > *{opacity:1;transform:none}
.m-stagger.in > *:nth-child(1){transition-delay:.04s}
.m-stagger.in > *:nth-child(2){transition-delay:.12s}
.m-stagger.in > *:nth-child(3){transition-delay:.2s}
.m-stagger.in > *:nth-child(4){transition-delay:.28s}
.m-stagger.in > *:nth-child(5){transition-delay:.36s}
.m-stagger.in > *:nth-child(6){transition-delay:.44s}
.m-stagger.in > *:nth-child(n+7){transition-delay:.5s}

/* ---------- image mask reveal ---------- */
.m-mask{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.19,1,.22,1)}
.m-mask.in{clip-path:inset(0 0 0 0)}
.m-mask img{transform:scale(1.14);transition:transform 1.4s cubic-bezier(.19,1,.22,1)}
.m-mask.in img{transform:scale(1)}

/* ---------- cursor spotlight on cards ---------- */
.m-spot{position:relative;isolation:isolate}
.m-spot:after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.14),transparent 62%);
  opacity:0;transition:opacity .35s ease
}
html[data-dark] .m-spot:after{
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(243,193,63,.17),transparent 64%)
}
.m-spot:hover:after{opacity:1}

/* ---------- magnetic buttons ---------- */
.m-mag{
  transform:translate3d(var(--tx,0px),var(--ty,0px),0);
  transition:transform .45s cubic-bezier(.19,1,.22,1)
}
.m-mag.pull{transition:transform .14s ease-out}

/* ---------- parallax ---------- */
.m-par{transform:translate3d(0,var(--py,0px),0);will-change:transform}

/* ---------- a slow float for decorative marks ---------- */
.m-float{animation:m-float 7s ease-in-out infinite}
@keyframes m-float{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-12px) rotate(1.4deg)}
}

/* ---------- gold shimmer sweep on section titles ---------- */
.m-shine{position:relative;overflow:hidden}
.m-shine:after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);opacity:0
}
.m-shine.in:after{animation:m-shine 1.5s .5s ease-out}
@keyframes m-shine{
  0%{left:-60%;opacity:0}
  25%{opacity:.9}
  100%{left:120%;opacity:0}
}

/* ---------- count-up figures sit still until seen ---------- */
.m-count{font-variant-numeric:tabular-nums}

@media(prefers-reduced-motion:reduce){
  #scrollbar{display:none}
  .m-split .m-c,.m-stagger > *{opacity:1!important;transform:none!important;transition:none!important}
  .m-mask{clip-path:none!important}
  .m-mask img{transform:none!important}
  .m-float{animation:none}
  .m-shine:after{display:none}
  .m-mag{transform:none!important}
  .m-par{transform:none!important}
}

/* ============================================================
   CREATIVE LAYER
   ============================================================ */

/* ---------- custom cursor ----------
   Desktop, fine-pointer only. Text inputs keep the native caret so
   typing never feels broken. */
html.m-cursor,html.m-cursor a,html.m-cursor button,html.m-cursor .btn{cursor:none}
html.m-cursor input,html.m-cursor textarea,html.m-cursor select,
html.m-cursor input *,html.m-cursor textarea *{cursor:auto}
#mcur,#mdot{
  position:fixed;top:0;left:0;z-index:10000;pointer-events:none;
  border-radius:50%;mix-blend-mode:difference
}
#mcur{
  width:38px;height:38px;margin:-19px 0 0 -19px;
  border:1.5px solid rgba(255,255,255,.85);
  transition:width .3s cubic-bezier(.19,1,.22,1),height .3s cubic-bezier(.19,1,.22,1),
             margin .3s cubic-bezier(.19,1,.22,1),border-color .3s ease,background .3s ease
}
#mdot{width:5px;height:5px;margin:-2.5px 0 0 -2.5px;background:#fff}
html.m-cursor.cur-link #mcur{
  width:66px;height:66px;margin:-33px 0 0 -33px;background:rgba(255,255,255,.14);border-color:transparent
}
html.m-cursor.cur-link #mdot{opacity:0}
html.m-cursor.cur-img #mcur{
  width:86px;height:86px;margin:-43px 0 0 -43px;background:rgba(255,255,255,.18);border-color:transparent
}
#mcur .cur-txt{
  position:absolute;inset:0;display:grid;place-items:center;opacity:0;
  font-family:var(--font-caps,system-ui);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;transition:opacity .25s ease
}
html.m-cursor.cur-img #mcur .cur-txt{opacity:1}

/* ---------- scroll-velocity marquee ---------- */
.marq-t{transform:skewX(var(--skew,0deg));transition:transform .5s cubic-bezier(.19,1,.22,1)}

/* ---------- reading highlight ----------
   Words in the lead paragraph brighten as the block scrolls past. */
.m-read .m-rw{
  color:color-mix(in srgb,currentColor 28%,transparent);
  transition:color .25s linear
}
.m-read .m-rw.lit{color:currentColor}
@supports not (color:color-mix(in srgb,red 50%,transparent)){
  .m-read .m-rw{opacity:.3}
  .m-read .m-rw.lit{opacity:1}
}

/* ---------- sticky section rail ---------- */
#mrail{
  position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:90;
  display:flex;flex-direction:column;gap:14px;pointer-events:none
}
#mrail a{
  pointer-events:auto;display:flex;align-items:center;gap:10px;justify-content:flex-end;
  text-decoration:none;opacity:.42;transition:opacity .3s ease
}
#mrail a:hover,#mrail a.on{opacity:1}
#mrail .r-name{
  font-family:var(--font-caps,system-ui);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--plum,#6b075c);max-width:0;overflow:hidden;white-space:nowrap;
  transition:max-width .4s cubic-bezier(.19,1,.22,1)
}
#mrail a:hover .r-name,#mrail a.on .r-name{max-width:150px}
#mrail .r-dot{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:var(--plum,#6b075c);transition:transform .3s ease
}
#mrail a.on .r-dot{transform:scale(1.6)}
html[data-dark] #mrail .r-name{color:var(--d-gold,#f3c13f)}
html[data-dark] #mrail .r-dot{background:var(--d-gold,#f3c13f)}
@media(max-width:1100px){#mrail{display:none}}

@media(prefers-reduced-motion:reduce){
  #mcur,#mdot,#mrail{display:none}
  html.m-cursor,html.m-cursor a,html.m-cursor button{cursor:auto}
  .marq-t{transform:none!important}
  .m-read .m-rw{color:currentColor;opacity:1}
}

/* ---------- mobile: keep the switch clear of the sticky action bar ----------
   #mbar is fixed to the bottom below 880px and the switch sits at a
   higher z-index, so without this it covers the bar's first button. */
@media(max-width:880px){
  #darkSwitch{bottom:16px}
  body.bar-up #darkSwitch{bottom:92px}
}