/* Rayzo.z Kinetic Gallery — production visual layer v3.
   Additive CSS only: no dependencies, network calls, or changes to app behavior. */
:root{
  --rz3-bg:#08090b;
  --rz3-panel:#101216;
  --rz3-panel-2:#171a20;
  --rz3-text:#f7f5ef;
  --rz3-muted:#9299a5;
  --rz3-orange:#ffb344;
  --rz3-hot:#ff6b3d;
  --rz3-cyan:#7fe4df;
  --rz3-line:rgba(255,255,255,.11);
  --rz3-line-strong:rgba(255,255,255,.21);
  --rz3-ease:cubic-bezier(.16,.84,.44,1);
}
html{background:var(--rz3-bg)}
body.rayzo-ui-v2{
  background:var(--rz3-bg)!important;
  color:var(--rz3-text)!important;
  font-family:var(--body,'Work Sans',Inter,system-ui,sans-serif);
}
body.rayzo-ui-v2::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.95;
  background:
    radial-gradient(58rem 38rem at 83% -9%,rgba(255,179,68,.16),transparent 65%),
    radial-gradient(42rem 36rem at -8% 48%,rgba(127,228,223,.075),transparent 66%),
    linear-gradient(90deg,transparent 0 49.92%,rgba(255,255,255,.028) 50%,transparent 50.08%),
    repeating-linear-gradient(0deg,transparent 0 79px,rgba(255,255,255,.018) 80px,transparent 81px);
}
body.rayzo-ui-v2 header{
  border-bottom:1px solid var(--rz3-line)!important;
  background:rgba(8,9,11,.82)!important;
  backdrop-filter:blur(22px)!important;
  -webkit-backdrop-filter:blur(22px);
}
body.rayzo-ui-v2-home header{
  min-height:76px;
  padding:0 clamp(18px,5vw,78px)!important;
  box-shadow:0 12px 38px rgba(0,0,0,.16);
}
body.rayzo-ui-v2-home header::after{
  content:"VISUAL SYSTEM / 2026";
  position:absolute;
  right:clamp(18px,5vw,78px);
  bottom:-26px;
  color:var(--rz3-cyan);
  font:500 .58rem var(--mono,ui-monospace,monospace);
  letter-spacing:.16em;
  opacity:.72;
  pointer-events:none;
}
body.rayzo-ui-v2 .logo,body.rayzo-ui-v2 .brand{
  letter-spacing:-.055em!important;
  text-transform:none;
}
body.rayzo-ui-v2-home .logo{font-size:1.85rem!important}
body.rayzo-ui-v2-home .logo::before{
  content:"//";
  margin-right:7px;
  color:var(--rz3-cyan);
  font:600 .68rem var(--mono,ui-monospace,monospace);
  letter-spacing:0;
  vertical-align:middle;
}
body.rayzo-ui-v2 .logo span,body.rayzo-ui-v2 .brand span{
  color:var(--rz3-orange)!important;
}
body.rayzo-ui-v2 nav.links{gap:clamp(12px,1.8vw,25px)!important}
body.rayzo-ui-v2 nav.links a{
  color:#a7adb6!important;
  font-size:.69rem!important;
  letter-spacing:.14em!important;
  transition:color .2s ease,opacity .2s ease;
}
body.rayzo-ui-v2 nav.links a:hover,
body.rayzo-ui-v2 nav.links a:focus-visible{color:var(--rz3-orange)!important}
body.rayzo-ui-v2 .upload-btn,
body.rayzo-ui-v2 .btn-primary{
  background:var(--rz3-orange)!important;
  color:#171109!important;
  border:1px solid var(--rz3-orange)!important;
  border-radius:5px!important;
  box-shadow:0 12px 34px rgba(255,179,68,.17);
  font-weight:800;
  transition:transform .22s var(--rz3-ease),box-shadow .22s ease,filter .22s ease;
}
body.rayzo-ui-v2 .upload-btn:hover,
body.rayzo-ui-v2 .btn-primary:hover{
  filter:brightness(1.06);
  transform:translateY(-2px);
  box-shadow:0 17px 42px rgba(255,179,68,.25);
}
body.rayzo-ui-v2 .btn-ghost{
  border:1px solid var(--rz3-line-strong)!important;
  border-radius:5px!important;
  background:rgba(255,255,255,.025);
}
body.rayzo-ui-v2-home .hero{
  position:relative;
  isolation:isolate;
  min-height:min(850px,calc(100svh - 76px));
  padding:clamp(76px,9vw,132px) clamp(18px,6vw,96px) 78px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.03fr) minmax(330px,.97fr)!important;
  gap:clamp(26px,5vw,82px)!important;
  align-items:center!important;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 40%)!important;
}
body.rayzo-ui-v2-home .hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:.8;
  background:
    linear-gradient(120deg,transparent 0 62%,rgba(127,228,223,.035) 62.1%,transparent 62.3%),
    repeating-linear-gradient(90deg,transparent 0 79px,rgba(255,255,255,.018) 80px,transparent 81px);
  mask-image:linear-gradient(180deg,#000,transparent 92%);
}
body.rayzo-ui-v2-home .hero::after{
  content:"RZ / 001";
  position:absolute;
  left:clamp(18px,6vw,96px);
  bottom:23px;
  color:var(--rz3-cyan);
  font:500 .6rem var(--mono,ui-monospace,monospace);
  letter-spacing:.24em;
}
body.rayzo-ui-v2-home .hero-copy{position:relative;z-index:5;max-width:690px}
body.rayzo-ui-v2 .rayzo-v2-label{
  display:block;
  margin:0 0 16px;
  color:var(--rz3-cyan)!important;
  font:600 .63rem var(--mono,ui-monospace,monospace)!important;
  letter-spacing:.19em!important;
  line-height:1.5;
  text-transform:uppercase;
}
body.rayzo-ui-v2-home .hero-copy .eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--rz3-cyan)!important;
  font:600 .68rem var(--mono,ui-monospace,monospace)!important;
  letter-spacing:.20em!important;
}
body.rayzo-ui-v2-home .hero-copy .eyebrow::before{
  content:"↳";
  color:var(--rz3-orange);
  font-size:1rem;
}
body.rayzo-ui-v2-home .hero-copy h1{
  max-width:800px;
  font-size:clamp(3.6rem,7.2vw,7.3rem)!important;
  line-height:.91!important;
  letter-spacing:-.065em!important;
  text-wrap:balance;
  text-shadow:0 12px 50px rgba(0,0,0,.30);
  animation:rz3-title-in .85s var(--rz3-ease) both;
}
body.rayzo-ui-v2-home .hero-copy h1 em{
  color:var(--rz3-orange)!important;
  text-shadow:0 0 42px rgba(255,179,68,.18);
}
body.rayzo-ui-v2-home .hero-copy>p{
  max-width:530px;
  color:#adb4bd!important;
  font-size:clamp(.98rem,1.15vw,1.1rem);
  line-height:1.8!important;
}
body.rayzo-ui-v2-home .hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px!important;
  align-items:center;
}
body.rayzo-ui-v2-home .hero-actions>*{
  min-height:47px;
  transition:transform .22s var(--rz3-ease),box-shadow .22s ease,border-color .22s ease;
}
body.rayzo-ui-v2-home .surprise-btn{
  border:1px solid rgba(127,228,223,.38)!important;
  border-radius:5px!important;
  color:var(--rz3-cyan)!important;
  background:rgba(127,228,223,.035);
}
body.rayzo-ui-v2-home .booster-stats{
  gap:10px!important;
  margin-top:clamp(30px,4vw,48px);
}
body.rayzo-ui-v2-home .booster-stat{
  min-width:0;
  border:1px solid var(--rz3-line)!important;
  border-radius:5px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.035);
}
body.rayzo-ui-v2-home .booster-stat strong{
  color:var(--rz3-orange)!important;
  font-variant-numeric:tabular-nums;
}
body.rayzo-ui-v2-home .booster-stat span{
  color:var(--rz3-cyan)!important;
  font:500 .59rem var(--mono,ui-monospace,monospace)!important;
  letter-spacing:.08em;
  text-transform:uppercase;
}
body.rayzo-ui-v2-home .hero-wall{
  min-height:560px!important;
  position:relative!important;
  isolation:isolate;
  transform-style:preserve-3d;
}
body.rayzo-ui-v2-home .hero-wall::before{
  content:"";
  position:absolute;
  inset:4% 1% 1% 7%;
  border:1px solid rgba(127,228,223,.15);
  border-radius:50%;
  transform:rotate(-17deg) skewX(-12deg);
  pointer-events:none;
  animation:rz3-orbit 38s linear infinite;
}
body.rayzo-ui-v2-home .hero-wall::after{
  content:"";
  position:absolute;
  inset:12% -3% 9% 12%;
  border:1px solid rgba(255,179,68,.20);
  border-radius:50%;
  transform:rotate(58deg) skewX(19deg);
  pointer-events:none;
  box-shadow:0 0 70px rgba(255,179,68,.045),inset 0 0 45px rgba(127,228,223,.025);
  animation:rz3-orbit-reverse 46s linear infinite;
}
body.rayzo-ui-v2-home .hero-wall .frame{
  z-index:1;
  padding:7px!important;
  border:1px solid rgba(255,255,255,.25)!important;
  border-radius:3px!important;
  background:linear-gradient(145deg,#242832,#0d0f13)!important;
  box-shadow:14px 18px 0 rgba(255,179,68,.075),0 28px 65px rgba(0,0,0,.58)!important;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  translate:0 -5px;
  animation:rz3-float 8.5s ease-in-out infinite;
  transition:box-shadow .35s var(--rz3-ease),filter .35s ease!important;
}
body.rayzo-ui-v2-home .hero-wall .f2{animation-delay:-2.1s}
body.rayzo-ui-v2-home .hero-wall .f3{animation-delay:-4.2s}
body.rayzo-ui-v2-home .hero-wall .f4{animation-delay:-6.3s}
body.rayzo-ui-v2-home .hero-wall .frame::after{
  content:"";
  position:absolute;
  inset:4px;
  border:1px solid rgba(255,255,255,.15);
  box-shadow:inset 0 0 26px rgba(0,0,0,.14);
  pointer-events:none;
}
body.rayzo-ui-v2-home .hero-wall .frame:hover{
  filter:saturate(1.14) brightness(1.06);
  box-shadow:18px 24px 0 rgba(127,228,223,.09),0 40px 85px rgba(0,0,0,.7)!important;
}
body.rayzo-ui-v2-home .hero-wall img{
  filter:contrast(1.04) saturate(1.06);
}
body.rayzo-ui-v2-home .spot-glow{
  opacity:.72;
  background:radial-gradient(circle,rgba(255,179,68,.19) 0%,transparent 70%)!important;
}
body.rayzo-ui-v2 .gallery-section,
body.rayzo-ui-v2 .rayzo-hub-section,
body.rayzo-ui-v2 .rayzo-plus-section,
body.rayzo-ui-v2 .upload-strip{background:transparent!important}
body.rayzo-ui-v2-home .gallery-section{padding:clamp(54px,7vw,92px) clamp(18px,5vw,78px) 110px!important}
body.rayzo-ui-v2 .section-head{
  border-bottom:1px solid var(--rz3-line)!important;
  gap:18px;
}
body.rayzo-ui-v2 .section-head h2,
body.rayzo-ui-v2 .rayzo-hub-head h2{
  font-size:clamp(2rem,4vw,3.6rem)!important;
  letter-spacing:-.06em!important;
  line-height:1!important;
}
body.rayzo-ui-v2 .plate,
body.rayzo-ui-v2 .rayzo-hub-kicker{
  color:var(--rz3-cyan)!important;
  font:500 .63rem var(--mono,ui-monospace,monospace)!important;
  letter-spacing:.16em;
}
body.rayzo-ui-v2 .controls{
  padding:16px!important;
  border:1px solid var(--rz3-line)!important;
  border-radius:7px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.04),rgba(255,255,255,.012))!important;
  box-shadow:0 16px 40px rgba(0,0,0,.12);
}
body.rayzo-ui-v2 .filters{gap:8px!important}
body.rayzo-ui-v2 .filter-btn,
body.rayzo-ui-v2 .filter-chip{
  border:1px solid var(--rz3-line)!important;
  border-radius:4px!important;
  background:rgba(255,255,255,.018)!important;
  color:#aab1bb!important;
  transition:transform .2s var(--rz3-ease),border-color .2s ease,color .2s ease,background .2s ease;
}
body.rayzo-ui-v2 .filter-btn:hover,
body.rayzo-ui-v2 .filter-chip:hover{
  transform:translateY(-2px);
  border-color:rgba(255,179,68,.48)!important;
  color:var(--rz3-text)!important;
}
body.rayzo-ui-v2 .filter-btn.active,
body.rayzo-ui-v2 .filter-chip.active{
  border-color:var(--rz3-orange)!important;
  background:var(--rz3-orange)!important;
  color:#171109!important;
  box-shadow:0 5px 18px rgba(255,179,68,.13);
}
body.rayzo-ui-v2 .search-wrap input,
body.rayzo-ui-v2 #searchInput,
body.rayzo-ui-v2 #boosterSearchInput{
  background:#0d0f13!important;
  border-color:var(--rz3-line-strong)!important;
  border-radius:5px!important;
  color:var(--rz3-text)!important;
}
body.rayzo-ui-v2 .grid .card,
body.rayzo-ui-v2 .tile,
body.rayzo-ui-v2 .art,
body.rayzo-ui-v2 .rayzo-collection-card,
body.rayzo-ui-v2 .rayzo-plus-card{
  border:1px solid var(--rz3-line)!important;
  border-radius:7px!important;
  background:linear-gradient(145deg,rgba(23,26,32,.96),rgba(10,11,14,.98))!important;
  box-shadow:0 20px 50px rgba(0,0,0,.3);
  transition:border-color .28s ease,box-shadow .28s ease,filter .28s ease;
}
body.rayzo-ui-v2 .grid .card:hover,
body.rayzo-ui-v2 .tile:hover,
body.rayzo-ui-v2 .art:hover,
body.rayzo-ui-v2 .rayzo-collection-card:hover,
body.rayzo-ui-v2 .rayzo-plus-card:hover{
  border-color:rgba(255,179,68,.48)!important;
  box-shadow:0 28px 65px rgba(0,0,0,.42),0 0 0 1px rgba(255,179,68,.10);
}
body.rayzo-ui-v2 .card-media{
  background:#08090b!important;
}
body.rayzo-ui-v2 .card-info h3{
  color:var(--rz3-text);
  letter-spacing:-.025em;
}
body.rayzo-ui-v2 .card-info .plate-no{
  color:var(--rz3-cyan)!important;
}
body.rayzo-ui-v2 .rayzo-mobile-nav{
  background:rgba(8,9,11,.94)!important;
  border-top:1px solid var(--rz3-line)!important;
  backdrop-filter:blur(22px);
}
body.rayzo-ui-v2 .rayzo-v2-corner{
  position:absolute;
  right:0;
  bottom:0;
  z-index:2;
  padding:0 12px 6px 0;
  pointer-events:none;
  color:var(--rz3-orange);
  font:500 .55rem var(--mono,ui-monospace,monospace);
  letter-spacing:.17em;
}
body.rayzo-ui-v2-page .wrap,
body.rayzo-ui-v2-page .page-shell{
  max-width:1180px;
  padding:clamp(22px,4vw,42px) clamp(16px,5vw,68px) 90px;
}
body.rayzo-ui-v2-page .nav,
body.rayzo-ui-v2-page .topbar{
  border-bottom:1px solid var(--rz3-line);
  padding-bottom:15px;
  margin-bottom:clamp(28px,5vw,65px);
}
body.rayzo-ui-v2-page .kicker{
  color:var(--rz3-cyan)!important;
  letter-spacing:.16em;
}
body.rayzo-ui-v2-page h1{
  color:var(--rz3-text);
  font-size:clamp(2.7rem,7vw,6rem);
  letter-spacing:-.065em;
  text-wrap:balance;
}
body.rayzo-ui-v2-page .sub{color:#aab1bb}
body.rayzo-ui-v2-page .card,
body.rayzo-ui-v2-page .tile{
  background:linear-gradient(145deg,rgba(23,26,32,.96),rgba(10,11,14,.98));
  border-color:var(--rz3-line);
}
body.rayzo-ui-v2-page .btn,
body.rayzo-ui-v2-page a.chip{border-radius:5px}
body.rayzo-ui-v2-page footer{
  border-color:var(--rz3-line);
  color:#89919c;
}
body.rayzo-ui-v2 .rayzo-v2-label{transform-origin:left center;animation:rz3-label-in .55s var(--rz3-ease) both}
@keyframes rz3-title-in{
  from{opacity:0;transform:translate3d(0,22px,0);filter:blur(6px)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes rz3-label-in{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:none}
}
@keyframes rz3-float{
  0%,100%{translate:0 -5px}
  50%{translate:0 9px}
}
@keyframes rz3-orbit{from{rotate:0deg}to{rotate:360deg}}
@keyframes rz3-orbit-reverse{from{rotate:360deg}to{rotate:0deg}}
@media(min-width:901px){
  body.rayzo-ui-v2-home .hero-wall .frame{visibility:visible!important;opacity:1!important}
}
@media(max-width:1100px){
  body.rayzo-ui-v2-home .hero{gap:30px!important;padding-left:clamp(18px,4vw,50px)!important;padding-right:clamp(18px,4vw,50px)!important}
  body.rayzo-ui-v2-home .hero-wall{min-height:470px!important}
}
@media(max-width:900px){
  body.rayzo-ui-v2-home header{min-height:62px;padding:8px 14px!important}
  body.rayzo-ui-v2-home header::after{display:none}
  body.rayzo-ui-v2-home .hero{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    min-height:0!important;
    padding:58px 18px 54px!important;
    gap:28px!important;
  }
  body.rayzo-ui-v2-home .hero-copy{width:100%;max-width:none}
  body.rayzo-ui-v2-home .hero-copy h1{font-size:clamp(3.3rem,10vw,6.1rem)!important}
  body.rayzo-ui-v2-home .hero-wall{width:100%;min-height:440px!important;max-width:620px;margin:0 auto}
  body.rayzo-ui-v2-home .hero::after{left:18px;bottom:14px}
  body.rayzo-ui-v2 .controls{padding:12px!important}
}
@media(max-width:640px){
  body.rayzo-ui-v2-home .hero{padding:46px 15px 44px!important}
  body.rayzo-ui-v2-home .hero-copy h1{font-size:clamp(3.05rem,12vw,4.4rem)!important;line-height:.92!important}
  body.rayzo-ui-v2-home .hero-copy>p{font-size:.95rem;line-height:1.7!important}
  body.rayzo-ui-v2-home .hero-wall{min-height:360px!important}
  body.rayzo-ui-v2-home .hero-wall .frame{animation-duration:11s}
  body.rayzo-ui-v2-home .booster-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px!important}
  body.rayzo-ui-v2-home .booster-stat{padding:10px 7px!important}
  body.rayzo-ui-v2-home .booster-stat strong{font-size:1.15rem}
  body.rayzo-ui-v2-home .booster-stat span{font-size:.5rem!important;letter-spacing:.04em}
  body.rayzo-ui-v2 .controls{border-radius:5px!important}
  body.rayzo-ui-v2 .filter-btn,body.rayzo-ui-v2 .filter-chip{padding:8px 11px!important}
  body.rayzo-ui-v2 .grid .card:hover,body.rayzo-ui-v2 .tile:hover,body.rayzo-ui-v2 .art:hover,
  body.rayzo-ui-v2 .rayzo-collection-card:hover,body.rayzo-ui-v2 .rayzo-plus-card:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
  body.rayzo-ui-v2::before{opacity:.4}
  body.rayzo-ui-v2 .hero-copy h1,
  body.rayzo-ui-v2 .rayzo-v2-label,
  body.rayzo-ui-v2-home .hero-wall::before,
  body.rayzo-ui-v2-home .hero-wall::after,
  body.rayzo-ui-v2-home .hero-wall .frame{animation:none!important;filter:none!important}
  body.rayzo-ui-v2 *{scroll-behavior:auto!important;transition:none!important}
}