/* ==========================================================================
   PULLED PIXELS — MOTION LAYER
   Everything here is gated behind html.motion, which is only added when the
   visitor has not asked for reduced motion. No JS / reduced motion = the page
   renders completely, just still.
   ========================================================================== */

/* ---------------------------------------------------------- 1. PRELOADER */
#preload{display:none}
html.js #preload{
  position:fixed;inset:0;z-index:9999;background:#0B2E3C;
  display:grid;place-items:center;overflow:hidden;
}
#preload .pl-in{text-align:center;position:relative;z-index:2}
#preload .pl-mark{
  font-family:'Archivo',sans-serif;font-size:clamp(30px,5.6vw,64px);font-weight:800;
  letter-spacing:-.045em;color:#fff;display:flex;overflow:hidden;
}
#preload .pl-mark span{
  display:inline-block;transform:translateY(110%);
  animation:plUp .85s cubic-bezier(.19,1,.22,1) forwards;
}
#preload .pl-mark span.thin{font-weight:300;opacity:.72}
@keyframes plUp{to{transform:translateY(0)}}
#preload .pl-bar{
  margin:22px auto 0;width:min(260px,54vw);height:2px;background:rgba(255,255,255,.18);
  border-radius:9px;overflow:hidden;
}
#preload .pl-bar i{display:block;height:100%;width:0;background:#7FD8F0;border-radius:9px}
#preload .pl-num{
  margin-top:14px;font-size:11px;letter-spacing:.3em;color:rgba(255,255,255,.55);
  font-variant-numeric:tabular-nums;
}
#preload .pl-panel{
  position:absolute;left:0;width:100%;height:50.2%;background:#0B2E3C;z-index:1;
  transition:transform 1s cubic-bezier(.76,0,.24,1);
}
#preload .pl-panel.t{top:0}
#preload .pl-panel.b{bottom:0}
#preload.done .pl-in{opacity:0;transform:translateY(-16px);transition:opacity .4s,transform .5s}
#preload.done .pl-panel.t{transform:translateY(-100%)}
#preload.done .pl-panel.b{transform:translateY(100%)}
/* must out-specify `html.js #preload{display:grid}` above, or the finished
   preloader keeps painting over the whole page */
html.js #preload.gone{display:none}
html.motion body.loading{overflow:hidden}

/* ----------------------------------------------------- 2. SCROLL PROGRESS */
#sprog{
  position:fixed;top:0;left:0;height:2px;width:100%;z-index:9998;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,#176B87,#5CC6E4);
  will-change:transform;
}

/* -------------------------------------------------------- 3. CUSTOM CURSOR */
@media (hover:hover) and (pointer:fine){
  html.motion,html.motion *{cursor:none !important}
  #cdot,#cring{
    position:fixed;top:0;left:0;z-index:9997;pointer-events:none;border-radius:50%;
    will-change:transform;mix-blend-mode:difference;
  }
  #cdot{width:7px;height:7px;background:#fff;margin:-3.5px 0 0 -3.5px}
  #cring{
    width:38px;height:38px;margin:-19px 0 0 -19px;border:1px solid rgba(255,255,255,.65);
    transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),
               background .3s,border-color .3s,opacity .3s;
    display:grid;place-items:center;
  }
  #cring b{
    font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#000;
    opacity:0;transition:opacity .25s;font-weight:800;white-space:nowrap;
  }
  html.cur-lg #cring{width:74px;height:74px;margin:-37px 0 0 -37px;background:#fff;border-color:#fff}
  html.cur-lg #cdot{opacity:0}
  html.cur-lg #cring b{opacity:1}
  html.cur-sm #cring{width:56px;height:56px;margin:-28px 0 0 -28px;background:rgba(255,255,255,.14)}
}
@media (hover:none),(pointer:coarse){#cdot,#cring{display:none}}

/* ------------------------------------------------------- 4. TEXT REVEALS */
html.motion .sp-line{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
html.motion .sp-word{
  display:inline-block;transform:translateY(112%) rotate(3deg);opacity:0;
  transition:transform .95s cubic-bezier(.19,1,.22,1),opacity .7s ease;
}
html.motion .sp.in .sp-word{transform:none;opacity:1}

/* ------------------------------------------------------ 5. ELEMENT REVEALS */
html.motion .rv{opacity:0;transform:translateY(34px);
  transition:opacity .9s cubic-bezier(.19,1,.22,1),transform .9s cubic-bezier(.19,1,.22,1)}
html.motion .rv.in{opacity:1;transform:none}

html.motion .clip{clip-path:inset(0 0 100% 0);transform:scale(1.12);
  transition:clip-path 1.25s cubic-bezier(.76,0,.24,1),transform 1.6s cubic-bezier(.19,1,.22,1)}
html.motion .clip.in{clip-path:inset(0 0 0 0);transform:scale(1)}

html.motion .stag>*{opacity:0;transform:translateY(40px);
  transition:opacity .8s cubic-bezier(.19,1,.22,1),transform .8s cubic-bezier(.19,1,.22,1)}
html.motion .stag.in>*{opacity:1;transform:none}

/* --------------------------------------------------------- 6. HERO MOTION */
.hero-full .wrap{will-change:transform,opacity}
.hero-full .bgimg,.hero-video{will-change:transform}

/* ------------------------------------------------- 7. PINNED HORIZONTAL */
.pin{position:relative;height:360vh}
.pin-inner{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;gap:34px;
}
.pin-head{max-width:var(--max);margin:0 auto;padding:0 24px;width:100%}
.pin-head .rail{margin-bottom:0}
.pin-track{display:flex;gap:22px;padding-left:max(24px,calc((100vw - var(--max))/2));will-change:transform}
.pin-card{
  position:relative;flex:0 0 clamp(260px,26vw,360px);height:min(60vh,470px);
  border-radius:var(--r-xl);overflow:hidden;background:var(--placeholder);
}
.pin-card img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.pin-card:hover img{transform:scale(1.08)}
.pin-card .ov{
  position:absolute;inset:0;padding:28px 24px;color:#fff;display:flex;
  flex-direction:column;justify-content:flex-end;
  background:linear-gradient(transparent 26%,rgba(5,24,32,.55) 56%,rgba(5,24,32,.96));
}
.pin-card .k{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#7FD8F0;font-weight:800;margin-bottom:9px}
.pin-card h3{color:#fff;font-size:clamp(20px,2.1vw,26px);margin-bottom:8px}
.pin-card p{font-size:13.5px;color:rgba(255,255,255,.76);line-height:1.5}
.pin-card .pr{margin-top:14px;font-size:13px;font-weight:700;color:#fff}
.pin-prog{
  max-width:var(--max);margin:0 auto;padding:0 24px;width:100%;
}
.pin-prog i{display:block;height:2px;background:var(--brand);width:0;border-radius:9px;transition:width .1s linear}
.pin-prog em{display:block;height:2px;background:var(--line);border-radius:9px;position:relative;top:-2px;z-index:-1}
@media (max-width:900px){
  .pin{height:auto}
  .pin-inner{position:static;height:auto;padding:70px 0}
  .pin-track{overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 24px 18px;transform:none !important;-webkit-overflow-scrolling:touch}
  .pin-track::-webkit-scrollbar{display:none}
  .pin-card{scroll-snap-align:center;flex:0 0 78vw;height:64vh}
  .pin-prog{display:none}
}

/* ---------------------------------------------------- 8. MAGNETIC BUTTONS */
[data-magnet]{will-change:transform}

/* ------------------------------------------------------------- 9. TILT */
.tilt{transform-style:preserve-3d;will-change:transform;transition:transform .5s var(--ease)}
.tilt-in{transform:translateZ(38px);transition:transform .5s var(--ease)}

/* -------------------------------------------------- 10. PAGE TRANSITION */
#ptrans{
  position:fixed;inset:0;z-index:9990;pointer-events:none;display:flex;
}
#ptrans i{
  flex:1;background:#0B2E3C;transform:scaleY(0);transform-origin:bottom;
  transition:transform .58s cubic-bezier(.76,0,.24,1);
}
#ptrans.out i{transform:scaleY(1);transform-origin:bottom}
#ptrans.in i{transform:scaleY(0);transform-origin:top}

/* -------------------------------------------- 11. SECTION EDGE ROUNDING */
html.motion .inv,html.motion .alt{border-radius:34px;overflow:hidden}
@media (max-width:700px){html.motion .inv,html.motion .alt{border-radius:22px}}

/* ------------------------------------------------ 12. MARQUEE + misc glow */
.mrow{will-change:transform}
.glowline{
  height:1px;width:100%;background:linear-gradient(90deg,transparent,var(--brand-line),transparent);
  margin:0;
}

/* ---------------------------------------------------- reduced motion off */
@media (prefers-reduced-motion:reduce){
  html.motion .rv,html.motion .clip,html.motion .stag>*,html.motion .sp-word{
    opacity:1 !important;transform:none !important;clip-path:none !important;
  }
  #preload{display:none}
  .pin{height:auto}
  .pin-inner{position:static;height:auto;padding:70px 0}
  .pin-track{transform:none !important;overflow-x:auto}
}