/* Web3 reference motion layer: additive only, keeps the original layout intact. */
html.web3-motion{
  --pointer-x:50vw;
  --pointer-y:50vh;
}

.web3-cursor{
  position:fixed;
  left:0;
  top:0;
  z-index:80;
  width:360px;
  height:360px;
  border-radius:50%;
  pointer-events:none;
  opacity:.28;
  transform:translate3d(calc(var(--pointer-x) - 50%),calc(var(--pointer-y) - 50%),0);
  background:radial-gradient(circle,rgba(125,72,255,.34),rgba(8,215,255,.18) 34%,transparent 68%);
  filter:blur(18px);
  mix-blend-mode:screen;
  transition:opacity .25s ease;
}

.page-bg:before{
  content:"";
  position:absolute;
  inset:-18%;
  background:
    conic-gradient(from 120deg at 52% 46%,transparent 0 18%,rgba(8,215,255,.12) 24%,transparent 34%,rgba(122,53,255,.14) 46%,transparent 58%,rgba(255,79,197,.08) 72%,transparent 86%),
    radial-gradient(circle at var(--pointer-x,50vw) var(--pointer-y,50vh),rgba(8,215,255,.20),transparent 24%);
  opacity:.62;
  filter:blur(36px);
  animation:web3-aurora 14s ease-in-out infinite alternate;
}

.topbar{
  overflow:hidden;
}

.topbar:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(100deg,transparent 0 34%,rgba(255,255,255,.20) 45%,rgba(8,215,255,.22) 50%,transparent 62% 100%);
  transform:translateX(-120%);
  animation:web3-nav-sweep 5.8s ease-in-out infinite;
  pointer-events:none;
}

.nav-links a,
.register-btn,
.primary-btn,
.ghost-btn,
.search-chip,
.video-link,
.filter,
.content-card,
.seller-card,
.category-card,
.gallery-item,
.cta-card,
.modal-card{
  position:relative;
  overflow:hidden;
}

.nav-links a:before,
.register-btn:before,
.primary-btn:before,
.ghost-btn:before,
.search-chip:before,
.video-link:before,
.filter:before,
.content-card:after,
.seller-card:before,
.category-card:after,
.gallery-item:after,
.cta-card:before,
.modal-card:before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:1;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at var(--spot-x,50%) var(--spot-y,50%),rgba(255,255,255,.22),rgba(8,215,255,.11) 28%,transparent 54%);
  transition:opacity .28s ease;
}

.nav-links a:hover:before,
.register-btn:hover:before,
.primary-btn:hover:before,
.ghost-btn:hover:before,
.search-chip:hover:before,
.video-link:hover:before,
.filter:hover:before,
.content-card:hover:after,
.seller-card:hover:before,
.category-card:hover:after,
.gallery-item:hover:after,
.cta-card:hover:before,
.modal-card:hover:before{
  opacity:1;
}

.tap-ripple{
  position:absolute;
  z-index:2;
  width:12px;
  height:12px;
  border-radius:50%;
  pointer-events:none;
  transform:translate(-50%,-50%) scale(1);
  background:radial-gradient(circle,rgba(255,255,255,.76),rgba(8,215,255,.32) 42%,transparent 70%);
  animation:web3-ripple .58s ease-out forwards;
}

body.ppt-mode .ppt-slide.motion-pulse:after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  z-index:0;
  width:min(920px,72vw);
  height:min(520px,56vh);
  pointer-events:none;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.78);
  background:radial-gradient(circle,rgba(8,215,255,.20),rgba(122,53,255,.10) 36%,transparent 68%);
  filter:blur(28px);
  opacity:0;
  animation:web3-slide-pulse .95s ease-out forwards;
}

body.ppt-mode .ppt-slide.ppt-active .section-title .eyebrow{
  animation:web3-title-in .7s cubic-bezier(.18,.92,.22,1) both;
}

body.ppt-mode .ppt-slide.ppt-active .section-title h2{
  animation:web3-title-in .76s cubic-bezier(.18,.92,.22,1) .08s both;
}

body.ppt-mode .ppt-slide.ppt-active .motion-item{
  animation:web3-card-in .68s cubic-bezier(.18,.92,.22,1) backwards;
  animation-delay:calc(110ms + var(--motion-i,0) * 58ms);
}

body.ppt-mode .full-gallery.ppt-active .gallery-motion-item{
  animation-delay:calc(150ms + var(--motion-i,0) * 72ms);
}

body.ppt-mode .full-gallery.gallery-filtering .gallery-motion-item{
  animation:none!important;
  animation-delay:0ms!important;
}

body.ppt-mode #contents.ppt-active .portfolio-motion-card{
  animation:portfolio-card-spread 1.18s cubic-bezier(.16,1,.22,1) backwards;
  animation-delay:calc(620ms + var(--content-i,0) * 100ms);
}

#contents .content-grid{
  perspective:900px;
  transform-style:preserve-3d;
}

#contents .portfolio-motion-card{
  --stack-x:0px;
  --stack-y:0px;
  --stack-rotate:0deg;
  z-index:var(--stack-layer,1);
  transform-style:preserve-3d;
  transform-origin:center center;
  will-change:transform,opacity,filter;
  transition:
    transform .42s cubic-bezier(.18,.92,.22,1),
    opacity .34s ease,
    filter .34s ease,
    border-color .3s ease,
    box-shadow .34s ease;
}

#contents .content-grid:has(.portfolio-motion-card:hover) .portfolio-motion-card:not(:hover),
#contents .content-grid:has(.portfolio-motion-card:focus-visible) .portfolio-motion-card:not(:focus-visible){
  opacity:.64;
  filter:brightness(.82) saturate(.82);
  transform:translateY(3px);
}

#contents .portfolio-motion-card:hover,
#contents .portfolio-motion-card:focus-visible{
  z-index:20;
  opacity:1;
  filter:brightness(1.06) saturate(1.12);
  transform:translateY(-6px);
  border-color:rgba(139,241,255,.78);
  box-shadow:0 18px 62px rgba(8,215,255,.18),0 0 0 1px rgba(255,255,255,.08) inset;
}

#contents .portfolio-motion-card > img,
#contents .portfolio-motion-card .card-image{
  width:100%;
  height:clamp(88px,16vh,138px);
  object-fit:cover;
  border-radius:16px;
  margin:0 0 16px;
  background:rgba(255,255,255,.08);
}

.featured-row{
  filter:drop-shadow(0 0 32px rgba(8,215,255,.08));
}

.nft-card[aria-current="true"] img{
  animation:web3-current-breathe 4.8s ease-in-out infinite;
}

@keyframes web3-aurora{
  from{transform:translate3d(-2%,-1%,0) rotate(-2deg) scale(1);}
  to{transform:translate3d(2%,1%,0) rotate(2deg) scale(1.05);}
}

@keyframes web3-nav-sweep{
  0%,56%{transform:translateX(-120%);opacity:0;}
  64%{opacity:1;}
  82%,100%{transform:translateX(120%);opacity:0;}
}

@keyframes web3-ripple{
  to{opacity:0;transform:translate(-50%,-50%) scale(18);}
}

@keyframes web3-slide-pulse{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.78);}
  34%{opacity:.72;}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.08);}
}

@keyframes web3-title-in{
  from{opacity:0;filter:blur(8px);transform:translateY(18px) scale(.985);}
  to{opacity:1;filter:blur(0);transform:translateY(0) scale(1);}
}

@keyframes web3-card-in{
  from{opacity:0;filter:blur(8px);transform:translateY(22px) scale(.96);}
  to{opacity:1;filter:blur(0);transform:translateY(0) scale(1);}
}

@keyframes portfolio-card-spread{
  0%,24%{
    opacity:.96;
    filter:blur(1px) brightness(.92) saturate(.96);
    transform:translate3d(var(--stack-x),var(--stack-y),0) scale(.9) rotate(var(--stack-rotate));
  }
  46%{
    opacity:1;
    filter:blur(.5px) brightness(.98) saturate(1);
    transform:translate3d(var(--stack-x),calc(var(--stack-y) - 10px),0) scale(.93) rotate(var(--stack-rotate));
  }
  78%{
    filter:blur(0) brightness(1.08) saturate(1.06);
    transform:translate3d(0,-8px,0) scale(1.015) rotate(0deg);
  }
  100%{
    opacity:1;
    filter:blur(0) brightness(1);
    transform:translate3d(0,0,0) scale(1) rotate(0deg);
  }
}

@keyframes web3-current-breathe{
  0%,100%{filter:saturate(1) contrast(1);}
  50%{filter:saturate(1.16) contrast(1.05);}
}

@media (pointer:coarse), (prefers-reduced-motion:reduce){
  .web3-cursor{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .page-bg:before,
  .topbar:before,
  body.ppt-mode .ppt-slide.motion-pulse:after,
  body.ppt-mode .ppt-slide.ppt-active .section-title .eyebrow,
  body.ppt-mode .ppt-slide.ppt-active .section-title h2,
  body.ppt-mode .ppt-slide.ppt-active .motion-item,
  body.ppt-mode #contents.ppt-active .portfolio-motion-card,
  .nft-card[aria-current="true"] img{
    animation:none;
  }
}

@media(max-width:960px){
  #contents .content-grid:has(.portfolio-motion-card:hover) .portfolio-motion-card:not(:hover),
  #contents .content-grid:has(.portfolio-motion-card:focus-visible) .portfolio-motion-card:not(:focus-visible){
    transform:translateY(3px);
  }

  #contents .portfolio-motion-card:hover,
  #contents .portfolio-motion-card:focus-visible{
    transform:translateY(-5px);
  }
}

/* Remove hard rectangular spotlight cuts from large content modules. */
.content-card:after,
.seller-card:before,
.category-card:after,
.gallery-item:after,
.cta-card:before,
.modal-card:before{
  display:none;
}

.content-card:before{
  right:-120px;
  bottom:-120px;
  width:260px;
  height:260px;
  opacity:.58;
  filter:blur(24px);
  background:radial-gradient(circle,rgba(8,215,255,.24),rgba(122,53,255,.10) 44%,transparent 72%);
}

.cta-section .cta-card:before{
  content:"";
  display:block;
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background-image:radial-gradient(rgba(139,241,255,.20) 1.5px,transparent 1.5px);
  background-size:20px 20px;
  opacity:.18;
  mask-image:linear-gradient(90deg,#000 0,rgba(0,0,0,.45) 22%,transparent 46%,transparent 70%,rgba(0,0,0,.55) 100%);
}

.cta-section .cta-card:hover:before{
  opacity:.22;
}

#contents .content-grid:has(.portfolio-motion-card:hover) .portfolio-motion-card:not(:hover),
#contents .content-grid:has(.portfolio-motion-card:focus-visible) .portfolio-motion-card:not(:focus-visible){
  opacity:1;
  filter:none;
  transform:none;
}

#contents .portfolio-motion-card:hover,
#contents .portfolio-motion-card:focus-visible{
  filter:brightness(1.03) saturate(1.04);
  border-color:rgba(139,241,255,.58);
  box-shadow:0 14px 42px rgba(8,215,255,.12),0 0 0 1px rgba(255,255,255,.06) inset;
}

/* Reference-video background: black portfolio stage with subtle grid, sparse particles and vertical light washes. */
.page-bg{
  overflow:hidden;
  background-color:#010102;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    radial-gradient(circle at 20% 36%,rgba(255,255,255,.90) 0 1px,transparent 2px),
    radial-gradient(circle at 60% 30%,rgba(255,255,255,.72) 0 1px,transparent 2px),
    radial-gradient(circle at 78% 62%,rgba(255,255,255,.70) 0 1px,transparent 2px),
    radial-gradient(circle at 70% 86%,rgba(255,255,255,.86) 0 1px,transparent 2px),
    radial-gradient(circle at 92% 48%,rgba(72,143,255,.46) 0 3px,transparent 4px);
  background-size:88px 88px,88px 88px,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%;
  background-repeat:repeat,repeat,no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
}

.page-bg:before{
  inset:-18% -34%;
  background:
    linear-gradient(180deg,#000 0%,rgba(0,0,0,.92) 20%,rgba(0,0,0,.42) 52%,#000 88%),
    linear-gradient(100deg,transparent 8%,rgba(216,24,17,.58) 17%,rgba(179,28,210,.42) 24%,transparent 34%),
    linear-gradient(82deg,transparent 35%,rgba(0,184,255,.54) 44%,rgba(57,64,255,.30) 51%,transparent 60%),
    linear-gradient(112deg,transparent 61%,rgba(255,126,24,.46) 72%,rgba(185,54,24,.24) 78%,transparent 87%),
    radial-gradient(ellipse at 31% 36%,rgba(255,42,22,.30),transparent 25%),
    radial-gradient(ellipse at 46% 78%,rgba(13,178,228,.34),transparent 30%),
    radial-gradient(ellipse at 72% 34%,rgba(255,145,28,.28),transparent 25%);
  opacity:1;
  filter:blur(18px) saturate(1.28);
  transform:translate3d(-9%,0,0) scale(1.04);
  animation:portfolio-light-wash 6.8s ease-in-out infinite alternate;
}

.page-bg:after{
  content:"";
  position:absolute;
  inset:-24% -32%;
  background:
    linear-gradient(105deg,transparent 0 34%,rgba(255,255,255,.05) 41%,rgba(255,255,255,.21) 47%,rgba(14,218,255,.25) 50%,rgba(255,72,202,.16) 54%,rgba(255,156,44,.10) 58%,transparent 68% 100%);
  background-size:78vw 100%;
  background-position:-78vw 0;
  background-repeat:repeat-x;
  opacity:.64;
  filter:blur(10px);
  mix-blend-mode:screen;
  transform:skewX(-8deg);
  animation:portfolio-scan-light 5.8s linear infinite;
}

.web3-cursor{
  width:280px;
  height:620px;
  border-radius:50%;
  opacity:.20;
  background:linear-gradient(180deg,transparent,rgba(204,32,29,.30),rgba(22,166,221,.32),transparent);
  filter:blur(32px);
}

@keyframes portfolio-light-wash{
  from{
    transform:translate3d(-11%,-1.4%,0) scale(1.04);
    background-position:0 0,0 0,6% 0,0 0,0 0,0 0,0 0;
  }
  to{
    transform:translate3d(11%,1.8%,0) scale(1.08);
    background-position:0 0,8% 0,-8% 0,7% 0,0 0,0 0,0 0;
  }
}

@keyframes portfolio-scan-light{
  0%{
    background-position:-78vw 0;
  }
  100%{
    background-position:0 0;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-bg:after{
    animation:none;
  }
}