/* ============================================================
   Naylalabs — fx layer (cursor, transitions, split text, grain)
   Loaded on: Naylalabs B.html, Kariyer.html, case/*.html
   ============================================================ */

/* ---------- film grain ---------- */
body::after{
  content:"";position:fixed;inset:-40px;z-index:80;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05;mix-blend-mode:overlay;
}
html.motion-off body::after{opacity:.03}

/* ---------- WebGL hero canvas ---------- */
.glcanvas{
  position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block;
  -webkit-mask-image:linear-gradient(#000 60%,transparent 96%);
          mask-image:linear-gradient(#000 60%,transparent 96%);
}
html.gl-on:not(.gl-off) .hero .glow.g1{display:none}
html.gl-off .glcanvas{display:none}

/* ---------- custom cursor ---------- */
html.cur-on, html.cur-on body{cursor:none}
html.cur-on a, html.cur-on button, html.cur-on [role="button"], html.cur-on label{cursor:none}
html.cur-on input, html.cur-on textarea, html.cur-on select{cursor:text}
.cur-dot,.cur-ring{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;border-radius:50%;will-change:transform}
.cur-dot{width:7px;height:7px;background:var(--orange);transform:translate(-50%,-50%)}
.cur-ring{width:36px;height:36px;border:1.5px solid rgba(247,69,22,.55);transform:translate(-50%,-50%);transition:width .22s,height .22s,border-color .22s,background .22s}
.cur-ring.is-hover{width:58px;height:58px;border-color:var(--orange);background:rgba(247,69,22,.08)}
.cur-ring.is-down{width:28px;height:28px}
.cur-hide .cur-dot,.cur-hide .cur-ring{opacity:0}
@media (pointer:coarse){html.cur-on,html.cur-on body{cursor:auto}.cur-dot,.cur-ring{display:none}}

/* ---------- page transition overlay ---------- */
.pt{position:fixed;inset:0;z-index:9998;pointer-events:none}
.pt i{position:absolute;inset:0;transform:translateY(102%)}
.pt .a{background:var(--orange)}
.pt .b{background:#0A0A0B;display:grid;place-items:center}
.pt .b img{width:52px;height:52px;border-radius:12px;opacity:0;transform:scale(.85);transition:opacity .2s .18s,transform .3s .18s}
.pt.cover{pointer-events:all}
.pt.cover .a{transform:translateY(0);transition:transform .42s cubic-bezier(.83,0,.17,1)}
.pt.cover .b{transform:translateY(0);transition:transform .42s cubic-bezier(.83,0,.17,1) .06s}
.pt.cover .b img{opacity:1;transform:scale(1)}
.pt.reveal .a{transform:translateY(-102%);transition:transform .5s cubic-bezier(.83,0,.17,1) .1s}
.pt.reveal .b{transform:translateY(-102%);transition:transform .5s cubic-bezier(.83,0,.17,1)}
.pt.reveal .b img{opacity:0;transition:opacity .12s}
.pt.covered .a,.pt.covered .b{transform:translateY(0);transition:none}
.pt.covered .b img{opacity:1;transform:scale(1);transition:none}

/* ---------- split-text word reveal ---------- */
[data-split] .stw{display:inline-block;overflow:hidden;vertical-align:top;padding:.09em 0 .13em;margin:-.09em 0 -.13em}
[data-split] .stwi{display:inline-block;transform:translateY(118%);transition:transform .85s cubic-bezier(.19,.8,.22,1);transition-delay:calc(var(--i)*.036s)}
[data-split].st-in .stwi{transform:translateY(0)}
html.show-all [data-split] .stwi,
html.motion-off [data-split] .stwi{transform:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  [data-split] .stwi{transform:none!important;transition:none!important}
  .cur-dot,.cur-ring{display:none!important}
  html.cur-on,html.cur-on body{cursor:auto}
  body::after{display:none}
}

/* ---------- magnetic buttons ---------- */
.btn{will-change:transform}

/* ---------- hidden terminal (⌘K) ---------- */
.cliov{position:fixed;inset:0;z-index:9990;display:none;place-items:center;background:rgba(5,5,6,.55);backdrop-filter:blur(10px)}
.cliov.open{display:grid}
.cli{width:min(780px,94vw);height:min(500px,72vh);background:rgba(11,11,12,.97);border:1px solid var(--line-2);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(247,69,22,.08),0 0 42px rgba(247,69,22,.10);display:flex;flex-direction:column;overflow:hidden;position:relative}
.cli::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
.cli__bar{display:flex;align-items:center;gap:7px;padding:12px 16px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px;color:var(--muted-2);flex:none}
.cli__bar i{width:10px;height:10px;border-radius:50%;background:#2a2a2d}
.cli__bar i:first-child{background:var(--orange)}
.cli__out{flex:1;overflow-y:auto;padding:16px 18px;font-family:var(--mono);font-size:13px;line-height:1.75;color:#cfccc4}
.cli__out .ln{white-space:pre-wrap;word-break:break-word}
.c-dim{color:var(--muted-2)}.c-o{color:var(--orange)}.c-ok{color:#34d27b}.c-err{color:#e0705a}.c-w{color:var(--text)}
.cli__inrow{display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--line);flex:none}
.cli__inrow .pr{font-family:var(--mono);color:var(--orange);font-size:13px}
.cli__inrow input{flex:1;background:none;border:0;outline:0;color:var(--text);font-family:var(--mono);font-size:13px;caret-color:var(--orange)}
.clihint{font-family:var(--mono);font-size:11px;border:1px solid var(--line-2);border-radius:999px;padding:7px 11px;color:var(--muted);background:none;cursor:pointer;transition:.18s;letter-spacing:.02em;white-space:nowrap}
.clihint:hover{color:var(--orange);border-color:var(--orange)}

@media print{
  body::after,.cur-dot,.cur-ring,.pt,.glcanvas,.cliov,.clihint{display:none!important}
}