/* ---------- Logo: the gnome hat is its own layer; it only moves in the top nav ---------- */
.ylogo{position:relative;display:inline-block;line-height:0}
.ylogo .hat{position:absolute;left:0;top:0;height:100%;width:auto;pointer-events:none;transform-origin:38.8% 76%}
.nav .ylogo .hat{animation:hat-drop .9s cubic-bezier(.3,1.5,.5,1) .25s both, hat-idle 6s ease-in-out 1.8s infinite}
.nav .ylogo:hover .hat{animation:hat-tip .8s ease-in-out}
@keyframes hat-drop{
  0%{transform:translateY(-120%) rotate(-30deg);opacity:0}
  50%{transform:translateY(5%) rotate(10deg);opacity:1}
  72%{transform:translateY(-6%) rotate(-6deg)}
  88%{transform:translateY(0) rotate(3deg)}
  100%{transform:none}}
@keyframes hat-idle{
  0%,80%,100%{transform:none}
  84%{transform:translateY(-8%) rotate(-14deg)}
  88%{transform:translateY(-4%) rotate(11deg)}
  92%{transform:rotate(-6deg)}
  96%{transform:rotate(3deg)}}
@keyframes hat-tip{
  0%,100%{transform:none}
  30%{transform:translateY(-18%) rotate(-22deg)}
  60%{transform:translateY(-6%) rotate(14deg)}
  80%{transform:rotate(-5deg)}}

/* ---------- Living background ---------- */
body::before{animation:bg-drift 26s ease-in-out infinite alternate}
@keyframes bg-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(-2%,-1.5%) scale(1.06)}}

/* ---------- Nav: tightens on scroll, underline grows ---------- */
.nav .in{transition:height .3s}
.nav .logo img{transition:height .3s}
.nav.scrolled .in{height:56px}
.nav.scrolled .logo img{height:31px}
.nav ul a::after{transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.nav ul a:hover::after,.nav ul a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--orange);border-radius:2px;transform:scaleX(1)}

/* ---------- Hero: slow zoom on the showing banner ---------- */
.hero .pic{overflow:hidden}
.hero .slide.on .pic img{animation:ken 7s ease-out forwards}
@keyframes ken{from{transform:scale(1)}to{transform:scale(1.07)}}

/* ---------- Scroll reveal (only once JS confirms it can reveal) ---------- */
html.motion .rv{opacity:0;translate:0 34px;transition:opacity .7s ease,translate .8s cubic-bezier(.2,1.2,.4,1);transition-delay:calc(var(--i,0) * 70ms)}
html.motion .rv.in{opacity:1;translate:0 0}

/* ---------- Game cards: 3D tilt, shine, bouncing NEW tag ---------- */
.card{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));transition:transform .25s ease,box-shadow .25s}
a.card:hover{--lift:-6px}
a.card:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px)}
.card .art::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-120%);transition:transform .7s ease;pointer-events:none}
a.card:hover .art::after{transform:translateX(120%)}
.card .art .tag{animation:tag-bob 3.2s ease-in-out infinite}
@keyframes tag-bob{0%,75%,100%{transform:none}82%{transform:translateY(-4px) rotate(-6deg)}90%{transform:translateY(0) rotate(4deg)}}
.card.pop{animation:pop-in .5s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i,0) * 45ms)}
@keyframes pop-in{from{opacity:0;scale:.85}to{opacity:1;scale:1}}

/* ---------- Floating game icons ---------- */
.icon-pile img,.gp-intro .side{animation:bob 4.2s ease-in-out infinite}
.icon-pile img:nth-child(2),.gp-intro .side.r{animation-delay:-1.4s;animation-duration:4.8s}
.icon-pile img:nth-child(3),.gp-intro .side.l2{animation-delay:-2.6s;animation-duration:3.8s}
.gp-intro .side.r2{animation-delay:-.7s;animation-duration:5.2s}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -12px}}
.icon-pile img{transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.icon-pile:hover img:nth-child(1){transform:rotate(-14deg) translate(-12px,-6px)}
.icon-pile:hover img:nth-child(2){transform:rotate(13deg) translate(12px,-8px)}
.icon-pile:hover img:nth-child(3){transform:rotate(-2deg) scale(1.06)}

/* ---------- Services band: rising bubbles, morphing blob ---------- */
.band .bub{position:absolute;bottom:-40px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.55),rgba(255,255,255,.08) 60%);pointer-events:none;animation:rise linear infinite}
@keyframes rise{from{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.9}to{transform:translateY(-560px) translateX(30px);opacity:0}}
.blob{animation:morph 8s ease-in-out infinite}
@keyframes morph{
  0%,100%{border-radius:38% 42% 40% 44%/44% 38% 46% 40%;transform:rotate(0) scale(1)}
  33%{border-radius:46% 36% 44% 38%/38% 46% 40% 44%;transform:rotate(4deg) scale(1.03)}
  66%{border-radius:40% 46% 36% 42%/46% 40% 44% 38%;transform:rotate(-3deg) scale(.98)}}
.blob b{display:block;animation:num-bounce 2.6s ease-in-out infinite}
@keyframes num-bounce{0%,70%,100%{transform:none}80%{transform:translateY(-10px) scale(1.08)}90%{transform:translateY(0) scale(.96)}}
.svc div{transition:transform .3s cubic-bezier(.3,1.5,.5,1),background .3s}
.svc div:hover{transform:translateY(-6px);background:rgba(255,255,255,.16)}

/* ---------- Social logos: pop and wiggle ---------- */
.follow-icons a{transition:transform .35s cubic-bezier(.3,1.6,.5,1),box-shadow .25s}
.follow-icons a:hover{transform:translateY(-6px) rotate(-8deg) scale(1.1)}
.follow-icons a:hover svg{animation:wiggle .5s ease-in-out}
@keyframes wiggle{0%,100%{transform:none}25%{transform:rotate(-12deg)}75%{transform:rotate(10deg)}}
footer .soc a span{transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
footer .soc a:hover span{transform:rotate(-10deg) scale(1.15)}

/* ---------- Video tiles: pulsing play button ---------- */
.video .pb i{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 4px 14px rgba(0,0,0,.3),0 0 0 0 rgba(242,102,31,.5)}60%{box-shadow:0 4px 14px rgba(0,0,0,.3),0 0 0 16px rgba(242,102,31,0)}}

/* ---------- Footer wave sways ---------- */
footer .wave .sw{animation:sway 9s ease-in-out infinite alternate}
footer .wave .sw2{animation-duration:12s;animation-direction:alternate-reverse}
@keyframes sway{from{transform:translateX(0)}to{transform:translateX(-60px)}}

/* ---------- Click sparkle ---------- */
.spark{position:fixed;width:8px;height:8px;border-radius:50%;pointer-events:none;z-index:999}

/* ---------- Scroll progress line under the nav ---------- */
.nav .progress{position:absolute;left:0;right:0;bottom:0;height:3px;pointer-events:none}
.nav .progress i{display:block;height:100%;background:linear-gradient(90deg,var(--orange),#e8452c);transform-origin:left;transform:scaleX(0)}

/* ---------- Carousel timer bar ---------- */
.hero .timer{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.18);z-index:3;pointer-events:none}
.hero .timer i{display:block;height:100%;background:var(--orange);transform-origin:left;animation:timer 5s linear forwards}
@keyframes timer{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero .dots{bottom:18px}

/* ---------- Hand-drawn heading underline ---------- */
.scribble{display:block;height:12px;margin-top:6px;overflow:visible}
.scribble path{fill:none;stroke:var(--orange);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.6,0,.3,1) .3s}
.scribble.in path{stroke-dashoffset:0}
.band .scribble path{stroke:#ffc63a}

/* ---------- Rotating word in the headline ---------- */
.rot{display:inline-block;white-space:nowrap;color:var(--orange);vertical-align:bottom;transition:width .4s cubic-bezier(.3,1.2,.5,1)}
.rot.measure{position:absolute;visibility:hidden;width:auto!important}
/* Phones: the changing word gets its own line so the heading never jumps between one and two lines */
@media (max-width:560px){.rot{display:block;width:auto!important}}

/* ---------- Sliding filter pill ---------- */
.filters.has-pill{position:relative}
.filters .pill{position:absolute;top:0;left:0;border-radius:100px;background:var(--purple);z-index:0;pointer-events:none}
.filters.ready .pill{transition:left .45s cubic-bezier(.3,1.3,.5,1),top .45s cubic-bezier(.3,1.3,.5,1),width .45s cubic-bezier(.3,1.3,.5,1),height .3s}
.filters.has-pill button{position:relative;z-index:1}
.filters.has-pill button.on{background:transparent;border-color:transparent;color:#fff}

/* ---------- Spotlight on service cards ---------- */
.svc div{background-image:radial-gradient(260px circle at var(--mx,-600px) var(--my,-600px),rgba(255,255,255,.2),transparent 65%)}

/* ---------- Attract mode: a card winks ---------- */
a.card.wink{animation:wink 1s ease}
@keyframes wink{0%,100%{scale:1}40%{scale:1.045}}
a.card.wink .art::after{animation:sweep 1s ease}
@keyframes sweep{from{transform:translateX(-120%)}to{transform:translateX(120%)}}

/* ---------- Icons arrive from a soft blur ---------- */
html.motion img.fadeimg{filter:blur(14px);opacity:0;transition:filter .7s ease,opacity .5s ease}
html.motion img.fadeimg.loaded{filter:none;opacity:1}

/* ---------- Back-to-top with the gnome hat ---------- */
.totop{position:fixed;right:18px;bottom:18px;z-index:60;width:54px;height:54px;border-radius:50%;border:0;background:var(--purple);color:#fff;
  box-shadow:0 6px 18px rgba(43,36,51,.3);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding-bottom:2px;
  opacity:0;transform:translateY(16px) scale(.8);pointer-events:none;transition:opacity .3s,transform .35s cubic-bezier(.3,1.5,.5,1),background .2s}
.totop.show{opacity:1;transform:none;pointer-events:auto}
/* Keep the footer's last row clear of the floating button */
footer .bottom{padding-right:96px}
.totop:hover{background:#4a2287}
.totop svg{width:12px;height:8px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.totop .hatup{display:block;height:27px;width:auto;transform-origin:50% 100%}
.totop:hover .hatup{animation:hop .6s cubic-bezier(.3,1.5,.5,1)}
@keyframes hop{0%,100%{transform:none}45%{transform:translateY(-5px) rotate(-10deg)}75%{transform:rotate(6deg)}}

/* ---------- Easter egg: the hat spins ---------- */
.nav .ylogo .hat.spin{animation:hat-spin 1.2s cubic-bezier(.3,1.1,.4,1)}
@keyframes hat-spin{0%{transform:none}25%{transform:translateY(-40%) rotate(-25deg)}75%{transform:translateY(-40%) rotate(700deg)}100%{transform:rotate(720deg)}}

/* ---------- Smooth page transitions (Chrome, Edge, Safari 18.2+; others just load normally) ---------- */
@view-transition{navigation:auto}
.nav{view-transition-name:site-nav}
::view-transition-old(root){animation:vt-out .22s ease both}
::view-transition-new(root){animation:vt-in .38s cubic-bezier(.2,1,.4,1) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-10px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .hero .timer{display:none}
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.motion .rv{opacity:1;translate:none}
}