/* Shared motion layer for jiinudding sub-pages (agency / ad-collab / education).
   Adds motion only; never changes layout. Everything stays visible without JS or with reduced motion. */
:root{--mx-ease:cubic-bezier(.16,1,.3,1);--mx-blue:#3B4BFF}

/* intro curtain */
.mx-curtain{position:fixed;inset:0;z-index:9999;background:#05070D;display:grid;place-items:center;clip-path:inset(0 0 0 0);transition:clip-path 1s cubic-bezier(.65,0,.35,1)}
.mx-curtain.up{clip-path:inset(0 0 100% 0)}
.mx-curtain .in{display:grid;justify-items:center;gap:16px}
.mx-curtain b{font:900 clamp(22px,3vw,34px)/1 "Pretendard Variable",Pretendard,sans-serif;letter-spacing:-.05em;color:#fff;overflow:hidden}
.mx-curtain b span{display:inline-block;transform:translateY(110%);animation:mx-up .8s var(--mx-ease) .1s forwards}
.mx-curtain i{width:160px;height:2px;background:rgba(255,255,255,.12);position:relative;overflow:hidden}
.mx-curtain i::after{content:"";position:absolute;inset:0;background:var(--mx-blue);transform:scaleX(0);transform-origin:left;animation:mx-bar .9s var(--mx-ease) .15s forwards}
@keyframes mx-up{to{transform:none}}
@keyframes mx-bar{to{transform:scaleX(1)}}

/* scroll progress */
.mx-progress{position:fixed;left:0;top:0;height:2px;width:100%;z-index:9998;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--mx-blue),#8AB0FF);pointer-events:none}

/* reveal */
.mx-on .mx-rv{opacity:0;transform:translateY(34px);filter:blur(8px);transition:opacity 1.1s var(--mx-ease),transform 1.1s var(--mx-ease),filter 1.1s var(--mx-ease);transition-delay:var(--mx-d,0s)}
.mx-on .mx-rv.mx-in{opacity:1;transform:none;filter:none}
.mx-on .mx-mask{clip-path:inset(-20% -10% 100% -10%);transform:translateY(28px);transition:clip-path 1.3s var(--mx-ease),transform 1.3s var(--mx-ease);transition-delay:var(--mx-d,0s)}
.mx-on .mx-mask.mx-in{clip-path:inset(-20% -10% -20% -10%);transform:none}
/* ad-collab's own .rv gets the same blur-up feel */
.rv{filter:blur(8px);transition-property:opacity,transform,filter!important}
.rv.on{filter:none}

/* hero lines */
.mx-line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.mx-line>span{display:inline-block;transform:translateY(105%);transition:transform 1.3s var(--mx-ease);transition-delay:var(--mx-d,0s)}
.mx-hero-in .mx-line>span{transform:none}
.mx-on .mx-hero-item{opacity:0;transform:translateY(22px);filter:blur(6px);transition:opacity 1s var(--mx-ease),transform 1s var(--mx-ease),filter 1s var(--mx-ease);transition-delay:var(--mx-d,0s)}
.mx-hero-in .mx-hero-item{opacity:1;transform:none;filter:none}

/* living hero backgrounds */
.hero::before{animation:mx-drift 16s ease-in-out infinite alternate}
.hero .glow{animation:mx-drift2 18s ease-in-out infinite alternate}
.hero .glow.b{animation-duration:22s;animation-direction:alternate-reverse}
@keyframes mx-drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(3%,-2%,0) scale(1.06)}100%{transform:translate3d(-3%,2%,0) scale(.98)}}
@keyframes mx-drift2{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-60px,-40px,0) scale(1.15)}}
.hero h1 span{background-size:200% 100%!important;animation:mx-shine 6s ease-in-out infinite alternate}
@keyframes mx-shine{from{background-position:0% 50%}to{background-position:100% 50%}}

/* status dot pulse */
.hero .dot{animation:mx-ping 2s infinite}
@keyframes mx-ping{0%{box-shadow:0 0 0 0 rgba(43,217,107,.55)}70%{box-shadow:0 0 0 8px rgba(43,217,107,0)}100%{box-shadow:0 0 0 0 rgba(43,217,107,0)}}

/* buttons: sheen + magnetic */
.mx-btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .5s var(--mx-ease)!important}
.mx-btn::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-130%);transition:transform .9s var(--mx-ease)}
.mx-btn:hover::before{transform:translateX(130%)}

/* reels: hover zoom */
.reel{transition:transform .6s var(--mx-ease)}
.reel:hover{transform:translateY(-6px)}
.reel img{transition:transform 1s var(--mx-ease)}
.reel:hover img{transform:scale(1.05)}

/* cursor */
.mx-cursor,.mx-dot{position:fixed;left:0;top:0;z-index:9997;pointer-events:none;border-radius:50%;transform:translate3d(-100px,-100px,0)}
.mx-cursor{width:36px;height:36px;margin:-18px 0 0 -18px;border:1px solid rgba(140,150,255,.7);display:grid;place-items:center;transition:width .35s var(--mx-ease),height .35s var(--mx-ease),margin .35s var(--mx-ease),background .35s,border-color .35s;mix-blend-mode:normal}
.mx-cursor span{font:600 10px/1 "Pretendard Variable",Pretendard,sans-serif;letter-spacing:.12em;color:#fff;opacity:0;transition:opacity .2s}
.mx-cursor.hover{width:60px;height:60px;margin:-30px 0 0 -30px;background:rgba(59,75,255,.12);border-color:rgba(59,75,255,.8)}
.mx-cursor.view{width:86px;height:86px;margin:-43px 0 0 -43px;background:var(--mx-blue);border-color:var(--mx-blue)}
.mx-cursor.view span{opacity:1}
.mx-dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--mx-blue)}
@media (pointer:coarse){.mx-cursor,.mx-dot{display:none}}

@media (prefers-reduced-motion:reduce){
  .mx-curtain{display:none}
  .mx-on .mx-rv,.mx-on .mx-mask,.mx-line>span,.mx-on .mx-hero-item,.rv{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
  .hero::before,.hero .glow,.hero h1 span,.hero .dot{animation:none!important}
}