/* Nebado Labs motion layer. Remove the <link> in inc/header.php to turn all of it off. */

/* ---- Page transitions (cross-document View Transitions; ignored by browsers without support) ---- */
@view-transition{navigation:auto}
.site-header{view-transition-name:site-header}
::view-transition-old(root){animation:vt-out .22s ease both}
::view-transition-new(root){animation:vt-in .38s cubic-bezier(.2,.7,.2,1) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}

/* ---- Ambient background: slow drifting light ---- */
body::before{content:"";position:fixed;inset:-20%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(40% 35% at 18% 12%,rgba(150,160,195,.14),transparent 70%),
    radial-gradient(34% 30% at 86% 28%,rgba(200,200,210,.09),transparent 70%),
    radial-gradient(46% 40% at 50% 100%,rgba(120,130,165,.11),transparent 70%);
  animation:drift 30s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate3d(3%,2%,0) scale(1.07)}}

/* ---- Scroll progress ---- */
.progress{position:fixed;top:0;left:0;width:100%;height:2px;z-index:50;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,#6c7080,#fff,#6c7080)}

/* ---- Header ---- */
.site-header{transition:background .3s,border-color .3s}
.site-header.scrolled{background:rgba(0,0,0,.72);border-color:#33333a}
.bar{transition:height .3s ease}
.site-header.scrolled .bar{height:52px}
.brand img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.brand:hover img{transform:rotate(-8deg) scale(1.1)}
.site-header nav a{position:relative}
.site-header nav a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.site-header nav a:hover::after{transform:scaleX(1)}

/* ---- Chrome headline sheen ---- */
/* padding-bottom keeps descenders (g, y, p) inside the painted box, otherwise background-clip:text cuts them off */
h1{padding-bottom:.24em;margin-bottom:calc(16px - .24em);color:var(--text);
  background:linear-gradient(100deg,#fff 0%,#9aa1b2 35%,#fff 55%,#9aa1b2 80%,#fff 100%);
  background-size:220% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:sheen 9s linear infinite}
@keyframes sheen{to{background-position:-220% center}}

/* ---- Hero entrance ---- */
.hero-text>*{animation:rise .95s cubic-bezier(.2,.7,.2,1) both}
.hero-text>*:nth-child(2){animation-delay:.12s}
.hero-text>*:nth-child(3){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(20px)}}

/* ---- Hero logo: entrance, float, glow, chrome shimmer, mouse tilt ---- */
.hero-logo-wrap{position:relative;flex:0 0 auto;overflow:hidden;
  /* soft edges so the logo's dark backdrop melts into the page instead of showing a box */
  -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);
  mask-composite:intersect;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .25s ease-out;animation:logo-in 1.2s cubic-bezier(.2,.7,.2,1) both}
.hero-logo-wrap .hero-logo{display:block;animation:float 8s ease-in-out 1.2s infinite}
.hero-logo-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);
  transform:translateX(-120%);animation:shimmer 6.5s ease-in-out 1.8s infinite}
@keyframes logo-in{from{opacity:0;transform:perspective(900px) scale(.9) rotate(-4deg)}}
@keyframes float{50%{transform:translateY(-10px)}}
@keyframes shimmer{0%{transform:translateX(-120%)}35%,100%{transform:translateX(120%)}}

/* ---- Scroll reveal (only when JS is running) ---- */
html.js .reveal{opacity:0;transform:translateY(26px);
  transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d,0s)}
html.js .reveal.in{opacity:1;transform:none}

/* ---- Cards: lift, cursor spotlight, icon motion ---- */
.card{position:relative;overflow:hidden;
  transition:transform .4s cubic-bezier(.2,.7,.2,1),border-color .25s,box-shadow .4s}
.card:hover{transform:translateY(-5px);box-shadow:0 22px 44px -20px rgba(170,180,215,.28)}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.10),transparent 62%)}
.card:hover::after{opacity:1}
.card img{transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.card:hover img{transform:scale(1.07) rotate(-2.5deg)}
article.card:hover{transform:none}

/* ---- Buttons: lift and light sweep ---- */
.btn{position:relative;overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .2s,box-shadow .3s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(255,255,255,.35)}
.btn::after{content:"";position:absolute;top:0;left:-130%;width:70%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-20deg);transition:left .7s ease}
.btn:hover::after{left:150%}
.btn.primary::after{background:linear-gradient(100deg,transparent,rgba(0,0,0,.2),transparent)}

/* ---- Product page icon ---- */
.product-head img{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}

/* ---- Respect reduced-motion settings ---- */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js .reveal{opacity:1;transform:none}
  h1{-webkit-text-fill-color:var(--text);background:none}
  .progress{display:none}
}