/* ===== motion.css — animation kit, tuned to Scalik's gold/black palette =====
   Colours come from the original site; durations are slightly longer than the stock kit
   so everything settles softly instead of snapping. */
@property --sweep{syntax:'<percentage>';inherits:false;initial-value:-30%}

:root{
  --m-c1:#FFD700;      /* brand gold */
  --m-c2:#FFF3B0;      /* light gold highlight */
  --m-dim:#C9A800;     /* resting colour for glow text (gold-dim) */
  --m-ink:#0A0A0A;     /* text colour on gold */
  --m-card:#111111;
  --m-line:rgba(255,215,0,.14);
  --m-ease:cubic-bezier(.16,1,.3,1);      /* fast start, long settle */
  --m-ease-io:cubic-bezier(.65,0,.35,1);  /* symmetric, for loops */
}

/* ---------- smooth scroll (Lenis) ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- text: light sweep ---------- */
.m-glow-sweep{
  background:linear-gradient(100deg,var(--m-dim) 0%,var(--m-dim) calc(var(--sweep) - 14%),var(--m-c1) calc(var(--sweep) - 5%),#fff var(--sweep),var(--m-c2) calc(var(--sweep) + 5%),var(--m-dim) calc(var(--sweep) + 16%),var(--m-dim) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:m-sweep 5.5s var(--m-ease-io) infinite}
@keyframes m-sweep{0%{--sweep:-30%}100%{--sweep:130%}}

/* ---------- text: cursor spotlight inside the letters ---------- */
.m-glow-spot{
  background:radial-gradient(circle 1.1em at var(--x,50%) var(--y,50%),#fff 0%,var(--m-c2) 24%,var(--m-c1) 50%,var(--m-dim) 85%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- text: flowing gradient ---------- */
.m-grad{background:linear-gradient(90deg,var(--m-dim),var(--m-c1),var(--m-c2),var(--m-c1),var(--m-dim));background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:m-flow 8s linear infinite}
@keyframes m-flow{to{background-position:200% center}}

/* ---------- split text masks (JS adds these) ---------- */
.m-mask{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.m-unit{display:inline-block;will-change:transform;transform-origin:0 100%}
.m-w{display:inline-block}

/* ---------- buttons ---------- */
.m-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  padding:.95em 1.9em;border-radius:999px;border:1px solid transparent;background:var(--m-c1);color:var(--m-ink);
  font:inherit;font-size:.88rem;font-weight:600;letter-spacing:.02em;text-decoration:none;cursor:pointer;overflow:hidden;isolation:isolate;
  transition:transform .8s var(--m-ease),color .5s,border-color .5s;will-change:transform}
.m-btn:hover{transform:translateY(-3px)}
.m-btn:active{transform:translateY(0) scale(.97);transition-duration:.2s}

/* inside shine: light streak crosses the button on hover (+ .m-idle repeats it on its own) */
.m-shine::after{content:"";position:absolute;top:-60%;bottom:-60%;left:0;width:55%;pointer-events:none;z-index:2;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.6) 50%,transparent 100%);
  transform:translateX(-160%) skewX(-18deg);transition:transform 1.3s var(--m-ease)}
.m-shine:hover::after{transform:translateX(320%) skewX(-18deg)}
.m-shine.m-idle::after{animation:m-idle 6s var(--m-ease) infinite 1.6s}
@keyframes m-idle{0%{transform:translateX(-160%) skewX(-18deg)}30%,100%{transform:translateX(320%) skewX(-18deg)}}

/* inner spotlight that follows the cursor */
.m-spotbtn::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .7s;
  background:radial-gradient(130px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.45),transparent 70%)}
.m-spotbtn:hover::before{opacity:1}

/* colour fill that wipes in from wherever the cursor enters (and out where it leaves) */
.m-fill{background:transparent;color:inherit;border-color:rgba(250,250,250,.18)}
.m-fill::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--m-c1);
  clip-path:circle(0% at var(--fx,50%) var(--fy,50%));transition:clip-path .9s var(--m-ease)}
.m-fill:hover::before{clip-path:circle(150% at var(--fx,50%) var(--fy,50%))}
.m-fill:hover{color:var(--m-ink);border-color:var(--m-c1)}

/* glowing border that tracks the cursor */
.m-glowborder{background:var(--m-card)}
.m-glowborder::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .7s;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),var(--m-c1),transparent 65%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.m-glowborder:hover::after{opacity:1}

/* text roll on hover (JS builds the two layers from data-roll, one <i> per letter) */
.m-roll{display:inline-block;position:relative;overflow:hidden;height:1.25em;line-height:1.25em;vertical-align:top}
[data-roll]{line-height:1.25} /* line box = roll height, so the label sits truly centred */
.m-roll>span{display:block;white-space:pre}
.m-roll>span+span{position:absolute;left:0;top:calc(100% + .3em)} /* gap keeps accents (Á, Ó) of the hidden copy out of view */
/* letters leave with a slight lean and the incoming copy straightens as it lands, in a left-to-right wave */
.m-roll i{display:inline-block;font-style:normal;transform-origin:50% 100%;
  transition:transform .85s cubic-bezier(.76,0,.24,1);transition-delay:calc(var(--c,0) * 26ms)}
.m-roll>span+span i{transform:skewY(12deg)}
:is([data-roll],a):hover .m-roll i,:is([data-roll],a):focus-visible .m-roll i{transform:translateY(calc(-100% - .3em)) skewY(-8deg)}
:is([data-roll],a):hover .m-roll>span+span i,:is([data-roll],a):focus-visible .m-roll>span+span i{transform:translateY(calc(-100% - .3em))}
.m-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* arrow that exits top-right and a copy re-enters from bottom-left */
.m-arrow-swap{position:relative;display:inline-grid;overflow:hidden;width:1em;height:1.1em;line-height:1.1em;vertical-align:middle}
.m-arrow-swap i{grid-area:1/1;font-style:normal;text-align:center;transition:transform .8s cubic-bezier(.76,0,.24,1)}
.m-arrow-swap i+i{transform:translate(-110%,110%)}
a:hover>.m-arrow-swap i:first-child,.m-btn:hover>.m-arrow-swap i:first-child{transform:translate(110%,-110%)}
a:hover>.m-arrow-swap i+i,.m-btn:hover>.m-arrow-swap i+i{transform:none;transition-delay:.08s}

/* arrow that slides out and back in */
.m-arrow{display:inline-block;transition:transform .8s var(--m-ease)}
.m-btn:hover .m-arrow,a:hover>.m-arrow{transform:translateX(.35em)}

/* ---------- links ---------- */
.m-link{position:relative;text-decoration:none;color:inherit}
.m-link::after{content:"";position:absolute;left:0;bottom:-.15em;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .8s var(--m-ease)}
.m-link:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- cards ---------- */
.m-card{position:relative;border-radius:20px;padding:2rem;background:var(--m-card);border:1px solid var(--m-line);overflow:hidden;isolation:isolate;
  transition:border-color .7s,box-shadow .9s var(--m-ease),transform .9s var(--m-ease)}
.m-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .7s;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--m-c1) 12%,transparent),transparent 70%)}
.m-card:hover::before{opacity:1}
.m-card:hover{border-color:color-mix(in srgb,var(--m-c1) 38%,transparent)}

/* ---------- list rows: dim siblings, nudge title (paragraph trails behind for depth) ----------
   easeOutCubic + long durations: no initial jolt, just a soft glide */
@media (hover:hover){
  .m-rows:hover .m-row{opacity:.35}
  .m-rows .m-row:hover{opacity:1}
  .m-row:hover>h3{transform:translateX(1.2vw)}
  .m-row:hover>p{transform:translateX(.5vw);color:rgba(250,250,250,.9)}
}
.m-row.is-active>h3{transform:translateX(.6rem)}
.m-row.is-active>p{color:rgba(250,250,250,.9)}
.m-row{transition:opacity 1.2s cubic-bezier(.33,1,.68,1)}
.m-row>h3,.m-row>p{transition:transform 1.5s cubic-bezier(.33,1,.68,1),color 1.2s cubic-bezier(.33,1,.68,1)}
.m-row>p{transition-delay:.06s}

/* ---------- marquee ---------- */
.m-marquee{overflow:hidden;white-space:nowrap}
.m-marquee__track{display:inline-flex;will-change:transform}
.m-marquee__item{display:inline-flex;align-items:center;padding-right:3vw;flex-shrink:0}

/* ---------- cursor + progress ---------- */
.m-cursor-dot,.m-cursor-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;border-radius:50%;mix-blend-mode:difference}
.m-cursor-dot{width:7px;height:7px;background:#fff}
.m-cursor-ring{width:38px;height:38px;border:1px solid #fff}
.m-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:9998;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--m-dim),var(--m-c1),var(--m-c2))}
@media (hover:none){.m-cursor-dot,.m-cursor-ring{display:none}}

/* ---------- image reveal wrapper ---------- */
[data-reveal-img]{overflow:hidden}
[data-reveal-img] img{display:block;width:100%;will-change:transform}

@media (prefers-reduced-motion:reduce){
  .m-glow-sweep,.m-grad,.m-shine.m-idle::after{animation:none}
  .m-glow-sweep{--sweep:60%}
  *{transition-duration:.01ms!important}
}