/* CBS motion: loader, page transitions, scroll reveals. Matches the Metu Adventures feel. */
html{scroll-behavior:smooth}

/* Loader (logo + bouncing dots, curtain lifts) */
.page-loader{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:#05122b;
  transition:transform 1.45s cubic-bezier(.77,0,.175,1),opacity 1.2s cubic-bezier(.77,0,.175,1),visibility 1.45s;
  animation:ldFailsafe 0s linear 6s forwards}
.page-loader.is-hidden{transform:translateY(-100%);opacity:.98;visibility:hidden;pointer-events:none}
.loader-content{display:flex;flex-direction:column;align-items:center;gap:26px;transition:transform .6s ease,opacity .5s ease}
.page-loader.is-hidden .loader-content{transform:translateY(-40px);opacity:0}
.loader-logo{width:230px;max-width:70vw;height:auto;animation:ldIn 1.1s cubic-bezier(.2,.7,.2,1) both}
.loader-dots{display:flex;gap:14px}
.loader-dots span{width:13px;height:13px;border-radius:50%;background:#ffc107;animation:ldBounce 1.4s ease-in-out infinite both}
.loader-dots span:nth-child(2){background:#5b78ff;animation-delay:.23s}
.loader-dots span:nth-child(3){background:#e02b20;animation-delay:.46s}
@keyframes ldIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes ldBounce{0%,80%,100%{transform:scale(.55);opacity:.35}40%{transform:scale(1);opacity:1}}
@keyframes ldFailsafe{to{visibility:hidden;opacity:0;pointer-events:none}}
html.cbs-loading,html.cbs-loading body{overflow:hidden}

/* Curtain that closes when leaving a page */
.page-curtain{position:fixed;inset:0;z-index:99998;background:#05122b;transform:translateY(100%);pointer-events:none;
  transition:transform .8s cubic-bezier(.77,0,.175,1)}
.page-curtain.is-in{transform:translateY(0);pointer-events:all}

/* Scroll progress bar */
.cbs-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#ffc107,#e02b20);z-index:99990;pointer-events:none}

/* Header gains a shadow once scrolled */
header.sticky{transition:box-shadow .35s ease,background-color .35s ease}
header.sticky.is-scrolled{box-shadow:0 10px 30px rgba(0,0,0,.35)}
header .hdr-logo{transition:height .35s ease}

/* Directional reveals */
.cb-rv{opacity:0;will-change:transform,opacity;transition:opacity 1.5s cubic-bezier(.16,1,.3,1),transform 1.5s cubic-bezier(.16,1,.3,1)}
.cb-up{transform:translateY(46px)}
.cb-down{transform:translateY(-40px)}
.cb-left{transform:translateX(-56px)}
.cb-right{transform:translateX(56px)}
.cb-scale{transform:scale(.93)}
.cb-rv.cb-in{opacity:1;transform:none}

/* Button shine on hover */
.hm-btn,.btn-yellow{position:relative;overflow:hidden}
.hm-btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .9s ease;pointer-events:none}
.hm-btn:hover::after{left:140%}

/* Hero art parallax (driven by JS via --py) */
.hm-hero-art,.ow-hero-art,.sv-hero-art,.cp-art{transform:translate3d(0,var(--py,0px),0);will-change:transform}

/* Smooth image pop-in */
img[loading="lazy"]{transition:opacity .6s ease}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .cb-rv{opacity:1!important;transform:none!important;transition:none!important}
  .page-loader,.page-curtain{transition:none!important}
  .loader-dots span,.loader-logo{animation:none!important}
  .hm-hero-art,.ow-hero-art,.sv-hero-art,.cp-art{transform:none!important}
}