/* ============================================================
   YSF Motion — loader, cursor, reveals, page transitions
   ============================================================ */

/* ---------- loader: big % bottom-left ---------- */
.ysf-loader{
  position:fixed;inset:0;z-index:var(--ysf-z-loader);
  background:var(--ysf-paper);
  padding:var(--ysf-pad);
  display:grid;grid-template-rows:1fr auto auto;
  transition:transform 1s cubic-bezier(.76,0,.24,1);
}
.ysf-loader.is-done{transform:translateY(-101%)}
/* Last-resort failsafe: lifts even with JavaScript entirely disabled. */
.ysf-loader{animation:ysf-loader-failsafe 0s linear 8s forwards}
@keyframes ysf-loader-failsafe{to{transform:translateY(-101%);visibility:hidden}}
.ysf-loader__mark{display:grid;place-items:center}
.ysf-loader__mark img{max-width:min(190px,42vw);opacity:0;transform:translateY(10px);
  animation:ysf-fade-up .7s var(--ysf-ease) .15s forwards}
.ysf-loader__name{font-family:var(--ysf-font-display);font-size:var(--ysf-step-3);
  font-weight:600;opacity:0;animation:ysf-fade-up .7s var(--ysf-ease) .15s forwards}
.ysf-loader__rule{position:relative;height:1px;background:var(--ysf-line);
  overflow:hidden;margin-bottom:clamp(20px,3.4vw,34px)}
.ysf-loader__rule i{display:block;height:100%;width:0;background:var(--ysf-accent)}
.ysf-loader__bot{display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.ysf-loader__num{
  font-family:var(--ysf-font-display);font-weight:600;
  font-size:clamp(76px,20vw,208px);line-height:.78;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;display:flex;align-items:flex-end;
}
.ysf-loader__num em{font-style:normal;font-size:.28em;color:var(--ysf-accent);
  margin-left:.06em;transform:translateY(-.55em)}
.ysf-loader__meta{font-family:var(--ysf-font-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ysf-faint);text-align:right;line-height:1.8;
  padding-bottom:10px;opacity:0;animation:ysf-fade-up .7s var(--ysf-ease) .5s forwards}
@media (max-width:520px){.ysf-loader__meta{font-size:8.5px;letter-spacing:.1em}}
@keyframes ysf-fade-up{to{opacity:1;transform:none}}

/* ---------- custom cursor ---------- */
.ysf-cursor,.ysf-cursor-ring{
  position:fixed;top:0;left:0;z-index:var(--ysf-z-cursor);
  pointer-events:none;border-radius:50%;opacity:0;
  transition:opacity var(--ysf-base);
}
.ysf-cursor{width:6px;height:6px;background:var(--ysf-accent);margin:-3px 0 0 -3px}
.ysf-cursor-ring{width:32px;height:32px;border:1px solid var(--ysf-accent);
  margin:-16px 0 0 -16px;
  transition:opacity var(--ysf-base),width var(--ysf-base) var(--ysf-ease),
             height var(--ysf-base) var(--ysf-ease),margin var(--ysf-base) var(--ysf-ease),
             background var(--ysf-base) var(--ysf-ease)}
body.ysf-cursor-active .ysf-cursor,
body.ysf-cursor-active .ysf-cursor-ring{opacity:1}
body.ysf-cursor-hot .ysf-cursor-ring{width:58px;height:58px;margin:-29px 0 0 -29px;
  background:var(--ysf-spot)}
body.ysf-cursor-hot .ysf-cursor{opacity:0}
body.ysf-cursor-active,
body.ysf-cursor-active a,
body.ysf-cursor-active button{cursor:none}

/* ---------- scroll reveals ---------- */
[data-ysf-reveal]{will-change:transform,opacity}
[data-ysf-reveal="up"]{opacity:0;transform:translateY(28px)}
[data-ysf-reveal="fade"]{opacity:0}
[data-ysf-reveal="scale"]{opacity:0;transform:scale(.94)}
[data-ysf-reveal="blur"]{opacity:0;filter:blur(12px)}
[data-ysf-reveal="mask"]{clip-path:inset(100% 0 0 0);transform:translateY(18px)}
[data-ysf-reveal].ysf-in{
  opacity:1;transform:none;filter:none;clip-path:inset(0 0 0 0);
  transition:opacity var(--ysf-slow) var(--ysf-ease),
             transform var(--ysf-slow) var(--ysf-ease),
             filter var(--ysf-slow) var(--ysf-ease),
             clip-path var(--ysf-slow) var(--ysf-ease);
  transition-delay:var(--ysf-d,0ms);
}

/* split text */
.ysf-split-line{display:block;overflow:hidden}
.ysf-split-word,.ysf-split-char{display:inline-block;will-change:transform}

/* ---------- page transitions ---------- */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration:var(--ysf-vt-dur);
  animation-timing-function:var(--ysf-ease);
}

/* fade */
.ysf-vt-fade::view-transition-old(root){animation-name:ysf-vt-out-fade}
.ysf-vt-fade::view-transition-new(root){animation-name:ysf-vt-in-fade}
@keyframes ysf-vt-out-fade{to{opacity:0}}
@keyframes ysf-vt-in-fade{from{opacity:0}}

/* mask wipe */
.ysf-vt-wipe::view-transition-new(root){animation-name:ysf-vt-wipe-in}
.ysf-vt-wipe::view-transition-old(root){animation-name:ysf-vt-hold}
@keyframes ysf-vt-wipe-in{
  from{clip-path:inset(0 0 100% 0)}
  to{clip-path:inset(0 0 0 0)}
}
@keyframes ysf-vt-hold{to{opacity:1}}

/* curtain */
.ysf-vt-curtain::view-transition-new(root){animation-name:ysf-vt-curtain-in}
.ysf-vt-curtain::view-transition-old(root){animation-name:ysf-vt-curtain-out}
@keyframes ysf-vt-curtain-in{
  from{clip-path:inset(0 50% 0 50%)}
  to{clip-path:inset(0 0 0 0)}
}
@keyframes ysf-vt-curtain-out{to{opacity:.4;transform:scale(.98)}}

/* slide up */
.ysf-vt-slide::view-transition-new(root){animation-name:ysf-vt-slide-in}
.ysf-vt-slide::view-transition-old(root){animation-name:ysf-vt-slide-out}
@keyframes ysf-vt-slide-in{from{transform:translateY(24px);opacity:0}}
@keyframes ysf-vt-slide-out{to{transform:translateY(-16px);opacity:0}}

/* zoom through */
.ysf-vt-zoom::view-transition-new(root){animation-name:ysf-vt-zoom-in}
.ysf-vt-zoom::view-transition-old(root){animation-name:ysf-vt-zoom-out}
@keyframes ysf-vt-zoom-in{from{transform:scale(1.06);opacity:0}}
@keyframes ysf-vt-zoom-out{to{transform:scale(.96);opacity:0}}

/* shared-element pairs keep their own timing */
::view-transition-group(*){animation-duration:var(--ysf-vt-dur)}

/* ---------- ambient sound toggle ---------- */
.ysf-sound{
  position:fixed;right:var(--ysf-pad);bottom:24px;z-index:calc(var(--ysf-z-header) + 10);
  display:flex;align-items:center;gap:10px;
  padding:9px 16px 9px 13px;border-radius:100px;cursor:pointer;
  border:1px solid var(--ysf-line);background:var(--ysf-surface);color:var(--ysf-muted);
  font-family:var(--ysf-font-mono);font-size:10px;letter-spacing:.11em;text-transform:uppercase;
  box-shadow:var(--ysf-shadow-sm);
  transition:transform var(--ysf-base) var(--ysf-ease),border-color var(--ysf-fast),color var(--ysf-fast);
}
.ysf-sound:hover{transform:translateY(-3px);border-color:var(--ysf-accent);color:var(--ysf-accent)}
.ysf-sound.is-on{border-color:var(--ysf-accent);color:var(--ysf-accent)}
.ysf-eq{display:flex;align-items:flex-end;gap:2.5px;height:13px}
.ysf-eq i{width:2px;height:3px;background:currentColor;border-radius:2px;
  transition:height var(--ysf-base) var(--ysf-ease)}
.ysf-sound.is-on .ysf-eq i{animation:ysf-eq .9s ease-in-out infinite}
.ysf-sound.is-on .ysf-eq i:nth-child(2){animation-duration:.65s;animation-delay:.1s}
.ysf-sound.is-on .ysf-eq i:nth-child(3){animation-duration:1.1s;animation-delay:.2s}
.ysf-sound.is-on .ysf-eq i:nth-child(4){animation-duration:.78s;animation-delay:.05s}
@keyframes ysf-eq{0%,100%{height:3px}50%{height:13px}}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  [data-ysf-reveal]{opacity:1!important;transform:none!important;
    filter:none!important;clip-path:none!important}
  .ysf-cursor,.ysf-cursor-ring{display:none}
  .ysf-loader{display:none}
}

@media print{
  .ysf-header,.ysf-loader,.ysf-cursor,.ysf-cursor-ring,
  .ysf-sound,.ysf-progress{display:none!important}
  [data-ysf-reveal]{opacity:1!important;transform:none!important;clip-path:none!important}
  .ysf-hdr-transparent .ysf-main{margin-top:0}
}