/* ======================================================================
   ML Media — launch polish kit (ideas from 21st.dev, rebuilt vanilla)
   Buttons · video cursor · client band · ambient glow · loader · 404 · grain
   Every effect: transform/opacity only, no live blur, off for reduced motion.
   ====================================================================== */

/* ---------- 1. buttons: dot-fill + label swap (after Magic UI "Interactive Hover Button") ---------- */
.btn.fx{position:relative;overflow:hidden;isolation:isolate;padding-left:34px}
.btn.fx::before{content:"";position:absolute;left:16px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--red);z-index:-1;
  transition:transform .6s var(--ease),background .3s;transform:scale(1)}
.btn.fx.red::before{background:var(--white)}
.btn.fx:hover::before,.btn.fx:focus-visible::before{transform:scale(60)}
.btn.fx:hover{background:transparent;color:var(--white)}
.btn.fx.red:hover{background:var(--red);color:var(--black)}
.btn.fx .l1,.btn.fx .l2{display:inline-flex;align-items:center;gap:10px;transition:transform .55s var(--ease),opacity .4s}
.btn.fx .l2{position:absolute;inset:0;justify-content:center;padding-left:18px;transform:translateY(110%);opacity:0}
.btn.fx:hover .l1,.btn.fx:focus-visible .l1{transform:translateY(-110%);opacity:0}
.btn.fx:hover .l2,.btn.fx:focus-visible .l2{transform:none;opacity:1}
.btn.fx .l2 svg{width:12px;height:12px}
.btn.fx:active{transform:translateY(1px) scale(.985)}
.btn.mag{transition:transform .5s var(--ease)}

/* ---------- 2. video cursor (after motion.dev "Motion Cursor" custom content) ---------- */
.vcur{position:fixed;left:0;top:0;z-index:95;pointer-events:none;display:flex;align-items:center;gap:8px;padding:9px 13px 9px 11px;background:var(--white);color:var(--black);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;border-radius:99px;
  opacity:0;scale:.6;transition:opacity .25s var(--ease),scale .35s var(--ease)}
.vcur.on{opacity:1;scale:1}
.vcur i{width:8px;height:8px;border-radius:50%;background:var(--red);animation:vblink 1.2s steps(2) infinite}
@keyframes vblink{50%{opacity:.2}}
/* the real cursor stays visible (it is drawn by the OS at hardware rate; hiding it and easing a fake one felt like low mouse DPI) */
@media (hover:hover) and (pointer:fine){ .tile .play{display:none} }

/* ---------- 3. client band (after Cnippet "Scroll Velocity Text") ---------- */
.clients{padding:clamp(70px,11vh,130px) 0 0;overflow:hidden}
/* eyebrow labels (2026-09-24, from the user's edit: Inter SemiBold, brand red, a size up from the mono labels) */
.eyebrow{font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--red);line-height:1.4}
/* the user's 217px nudge on a 2560px-wide window = 8.5vw, so it keeps its place on other widths */
.clients .lbl{display:block;padding:0 var(--gut);margin:0 0 22px calc(8.5vw);transform:translateY(3px)}
@media (max-width:760px){ .clients .lbl{margin-left:0} }
.band{display:flex;white-space:nowrap;will-change:transform;padding:.12em 0}
.band span{font-family:var(--caps);font-weight:800;text-transform:uppercase;font-size:clamp(34px,5.4vw,92px);line-height:1.02;letter-spacing:-.01em;color:var(--white);display:inline-flex;align-items:center}
.band.b2 span{color:transparent;-webkit-text-stroke:1.2px rgba(239,233,223,.5)}
.band span::after{content:"";display:inline-block;width:.16em;height:.16em;border-radius:50%;background:var(--red);margin:0 .5em;flex:none}
.band-wrap{will-change:transform}

/* ---------- 4. ambient glow behind the vertical player (after "Video Ambient") ---------- */
.amb{position:absolute;left:-45%;top:-18%;width:190%;height:136%;z-index:-1;opacity:.7;pointer-events:none;image-rendering:auto;transition:opacity .6s;
  -webkit-mask-image:radial-gradient(closest-side,#000 35%,transparent 100%);mask-image:radial-gradient(closest-side,#000 35%,transparent 100%)}
.swipe .stage{position:relative;overflow:visible;isolation:isolate}
.swipe .stage > video{border-radius:22px}
.swipe .stage .clip{position:absolute;inset:0;border-radius:22px;overflow:hidden}

/* ---------- 5. first-visit loader (after "Cinema Grain Preloader") ---------- */
.loader{position:fixed;inset:0;z-index:2147483100;pointer-events:none;display:grid;place-items:center}
.loader .bar{position:absolute;left:0;right:0;height:50.5%;background:#0a0909;transition:transform 1s var(--ease-io)}
.loader .bar.t{top:0}.loader .bar.b{bottom:0}
.loader .mid{position:relative;display:grid;justify-items:center;gap:16px;transition:opacity .35s}
.loader .mid img{height:92px;width:auto}
.loader .tcl{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--dim);display:flex;align-items:center;gap:10px}
.loader .tcl i{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red)}
.loader .prog{width:160px;height:1px;background:var(--ghost);overflow:hidden}
.loader .prog b{display:block;height:100%;width:100%;background:var(--red);transform-origin:left;transform:scaleX(0);transition:transform .25s linear}
.loader.go .mid{opacity:0}
.loader.go .bar.t{transform:translateY(-100%)}
.loader.go .bar.b{transform:translateY(100%)}

/* ---------- 7. section-title letter rise ---------- */
.rise-l{display:inline-block;overflow:hidden;vertical-align:top;padding:.24em 0 .06em;margin:-.24em 0 -.06em}   /* top room: accented capitals (Á É Ő Ú Ű) */
.rise-l > span{display:inline-block;transform:translateY(140%);transition:transform .9s var(--ease)}
.risen .rise-l > span{transform:none}

/* ---------- 8. film grain (static noise, stepped: no per-frame paint) ---------- */
/* no mix-blend-mode: a blended full-screen layer over playing video recomposites every frame (see the gate lag) */
.grain{position:fixed;inset:-8%;z-index:2147482000;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-5%,-2%)}80%{transform:translate(4%,4%)}100%{transform:translate(0,0)}}

/* ---------- links: underline draws in ---------- */
.contact ul a,.legaldoc article a,.head .more{background:linear-gradient(var(--red),var(--red)) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease),color .3s;border-bottom:0!important}
.contact ul a:hover,.legaldoc article a:hover,.head .more:hover{background-size:100% 1px}

@media (prefers-reduced-motion:reduce){
  .grain,.loader,.vcur{display:none!important}
  .rise-l > span{transform:none!important}
  .band{transform:none!important}
}