/* ============================================================
   YSF Motion — Elementor widget styles
   ============================================================ */

/* ---------- Floating images ---------- */
.ysf-float{position:relative;display:grid;gap:var(--ysf-gap)}
.ysf-float--row{grid-auto-flow:column;grid-auto-columns:1fr;align-items:center}
.ysf-float--scatter{display:block;min-height:60vh}
.ysf-float__item{position:relative;will-change:transform;overflow:hidden;
  border-radius:var(--ysf-radius)}
.ysf-float__item img{width:100%;height:100%;object-fit:cover;display:block}
.ysf-float--scatter .ysf-float__item{position:absolute}
.ysf-float__item--masked{clip-path:inset(0 0 100% 0)}
.ysf-float__cap{margin-top:.6rem;font-family:var(--ysf-font-mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ysf-faint)}
@media (max-width:767px){
  .ysf-float--row{grid-auto-flow:row}
  .ysf-float--scatter{min-height:auto}
  .ysf-float--scatter .ysf-float__item{position:relative;inset:auto!important;
    width:100%!important;margin-bottom:var(--ysf-gap)}
}

/* ---------- Video scroll ---------- */
.ysf-vid{position:relative;width:100%;overflow:clip}
.ysf-vid__stage{position:relative;width:100%;height:100vh;overflow:hidden;
  display:grid;place-items:center;background:#000}
.ysf-vid__media{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;will-change:transform,clip-path}
.ysf-vid canvas.ysf-vid__media{background:#000}
.ysf-vid__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,var(--ysf-overlay) 0%,transparent 35%,transparent 65%,var(--ysf-overlay) 100%);
  opacity:var(--ysf-vid-scrim,.55)}
.ysf-vid__texts{position:absolute;inset:0;display:grid;place-items:center;
  padding:var(--ysf-pad);pointer-events:none;z-index:2}
.ysf-vid__text{position:absolute;max-width:min(720px,86vw);text-align:center;
  opacity:0;will-change:transform,opacity,filter;color:#fff}
.ysf-vid__text h3{color:#fff;font-size:var(--ysf-step-4);margin:0 0 .4em;text-wrap:balance}
.ysf-vid__text p{color:rgba(255,255,255,.82);margin:0 auto;font-size:var(--ysf-step-1)}
.ysf-vid__text--left{text-align:left;justify-self:start}
.ysf-vid__text--right{text-align:right;justify-self:end}
.ysf-vid__poster{display:none}
.ysf-vid__progress{position:absolute;left:var(--ysf-pad);right:var(--ysf-pad);bottom:24px;
  height:1px;background:rgba(255,255,255,.22);z-index:3}
.ysf-vid__progress i{display:block;height:100%;width:0;background:#fff}

/* mobile: drop the pin, show a static frame */
@media (max-width:767px){
  .ysf-vid--mobile-static .ysf-vid__stage{height:70vh}
  .ysf-vid--mobile-static .ysf-vid__media{clip-path:none!important;transform:none!important}
  .ysf-vid--mobile-static video.ysf-vid__media{display:none}
  .ysf-vid--mobile-static .ysf-vid__poster{display:block;position:absolute;inset:0;
    width:100%;height:100%;object-fit:cover}
  .ysf-vid--mobile-static .ysf-vid__text{position:relative;opacity:1!important;
    transform:none!important;margin-bottom:2rem}
  .ysf-vid--mobile-static .ysf-vid__texts{position:relative;display:block;
    background:var(--ysf-ink);padding-block:3rem}
}

/* ---------- Text reveal ---------- */
.ysf-reveal{margin:0}
.ysf-reveal__inner{display:block}

/* ---------- Motion card ---------- */
.ysf-mcard{position:relative;background:var(--ysf-surface);
  border:1px solid var(--ysf-line);border-radius:var(--ysf-radius);
  padding:clamp(1.2rem,3vw,2rem);overflow:hidden;
  transform-style:preserve-3d;will-change:transform;
  transition:box-shadow var(--ysf-base) var(--ysf-ease),border-color var(--ysf-fast)}
.ysf-mcard::before{content:"";position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:opacity var(--ysf-base);
  background:radial-gradient(420px circle at var(--ysf-mx,50%) var(--ysf-my,50%),
    var(--ysf-spot),transparent 68%)}
.ysf-mcard:hover::before{opacity:1}
.ysf-mcard:hover{box-shadow:var(--ysf-shadow-lg);border-color:var(--ysf-accent)}
.ysf-mcard__body{position:relative;transform:translateZ(28px)}
.ysf-mcard__media{margin:0 0 1rem;overflow:hidden;border-radius:calc(var(--ysf-radius) - 5px)}
.ysf-mcard__media img{width:100%;transition:transform .9s var(--ysf-ease)}
.ysf-mcard:hover .ysf-mcard__media img{transform:scale(1.06)}
.ysf-mcard__title{font-size:var(--ysf-step-2);margin:0 0 .35em}
.ysf-mcard__text{color:var(--ysf-muted);font-size:var(--ysf-step--1);margin:0}

/* ---------- Parallax section ---------- */
.ysf-par{position:relative;overflow:clip;display:grid;place-items:center;
  min-height:var(--ysf-par-h,70vh)}
.ysf-par__bg{position:absolute;inset:-12% 0;width:100%;height:124%;
  object-fit:cover;will-change:transform;z-index:0}
.ysf-par__scrim{position:absolute;inset:0;background:var(--ysf-overlay);z-index:1}
.ysf-par__content{position:relative;z-index:2;padding:var(--ysf-pad);
  max-width:var(--ysf-max);width:100%}

/* ---------- Marquee ---------- */
.ysf-marquee{overflow:hidden;width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ysf-marquee__track{display:flex;width:max-content;will-change:transform}
.ysf-marquee__item{display:flex;align-items:center;gap:1.2rem;
  padding-inline:clamp(1rem,3vw,2.5rem);white-space:nowrap;
  font-family:var(--ysf-font-display);font-weight:600;
  font-size:var(--ysf-marquee-size,var(--ysf-step-4));letter-spacing:-.02em}
.ysf-marquee__item span{color:var(--ysf-accent);font-size:.5em}
.ysf-marquee--outline .ysf-marquee__item{
  color:transparent;-webkit-text-stroke:1px var(--ysf-ink)}

/* ---------- Depth hero (WebGL) ---------- */
.ysf-depth{position:relative;width:100%;overflow:hidden;
  min-height:var(--ysf-depth-h,80vh);display:grid;place-items:center;background:var(--ysf-ink)}
.ysf-depth__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ysf-depth__fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ysf-depth__content{position:relative;z-index:2;text-align:center;
  padding:var(--ysf-pad);color:#fff;max-width:min(900px,90vw)}
.ysf-depth__content h1,.ysf-depth__content h2{color:#fff;text-wrap:balance}
.ysf-depth__content p{color:rgba(255,255,255,.85);margin-inline:auto}

/* ---------- Counter ---------- */
.ysf-count{display:flex;flex-direction:column;gap:.3rem}
.ysf-count__num{font-family:var(--ysf-font-display);font-weight:700;
  font-size:var(--ysf-step-5);line-height:1;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:.05em}
.ysf-count__num small{font-size:.45em;color:var(--ysf-accent);font-weight:600}
.ysf-count__label{font-family:var(--ysf-font-mono);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ysf-faint)}

/* Elementor editor: keep pinned widgets measurable in the preview iframe */
.elementor-editor-active .ysf-vid__stage{height:70vh}
.elementor-editor-active .ysf-float--scatter{min-height:50vh}