/* PixiCore AI Studio → Wardrobe bridge v3
   Single premium VTON entry point + navigation clarity */

/* ---------- Premium navigation ---------- */
.ai-studio-orbital-page .ai-premium-navbar {
  --nav-border: rgba(134, 176, 255, .16);
  min-height: var(--aio-nav-h);
  padding: 9px 0;
  border: 0;
  border-bottom: 1px solid var(--nav-border);
  background:
    radial-gradient(circle at 20% -100%, rgba(82, 125, 255, .19), transparent 44%),
    linear-gradient(180deg, rgba(3, 10, 25, .97), rgba(4, 12, 29, .92)) !important;
  box-shadow: 0 18px 55px rgba(0, 6, 20, .38), inset 0 1px rgba(255,255,255,.025);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.ai-studio-orbital-page .ai-premium-navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 0 35%, rgba(111, 151, 255, .045) 49%, transparent 63%);
  transform: translateX(-40%);
  animation: aiNavSheen 9s ease-in-out infinite;
}

.ai-studio-orbital-page .ai-premium-navbar::after {
  height: 1px;
  opacity: .88;
  background: linear-gradient(90deg, transparent 4%, #567eff 27%, #4ddcff 50%, #9c67ff 73%, transparent 96%);
  box-shadow: 0 0 22px rgba(77, 216, 255, .24);
}

.ai-studio-orbital-page .ai-nav-shell {
  position: relative;
  z-index: 1;
  max-width: 1680px;
  gap: clamp(14px, 2vw, 30px);
}

.ai-studio-orbital-page .ai-nav-brand {
  flex: 0 0 auto;
  gap: 10px;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

.ai-studio-orbital-page .ai-nav-logo {
  position: relative;
  isolation: isolate;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(100, 191, 255, .27);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(78, 126, 255, .22), rgba(69, 222, 214, .08));
  box-shadow: 0 12px 30px rgba(31, 100, 231, .22), inset 0 1px rgba(255,255,255,.1);
}

.ai-studio-orbital-page .ai-nav-logo::before,
.ai-studio-orbital-page .ai-nav-logo::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -5px;
  border: 1px solid rgba(99, 150, 255, .13);
  border-radius: 18px;
  animation: aiNavLogoOrbit 7s linear infinite;
}

.ai-studio-orbital-page .ai-nav-logo::after {
  inset: -9px;
  border-style: dashed;
  opacity: .45;
  animation-direction: reverse;
  animation-duration: 12s;
}

.ai-studio-orbital-page .ai-nav-logo img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 4px 9px rgba(73, 159, 255, .18));
}

.ai-studio-orbital-page .ai-nav-brand-copy {
  min-width: 0;
  display: grid;
  line-height: 1;
}

.ai-studio-orbital-page .ai-nav-brand-copy strong {
  color: #f6f9ff;
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: -.02em;
}

.ai-studio-orbital-page .ai-nav-brand-copy small {
  margin-top: 5px;
  color: #8297bb;
  font-size: .49rem;
  font-weight: 750;
  letter-spacing: .135em;
  text-transform: uppercase;
}

.ai-studio-orbital-page .ai-nav-primary {
  align-items: center;
  gap: 2px;
  margin-left: clamp(8px, 1.5vw, 24px);
  padding: 4px;
  border: 1px solid rgba(126, 176, 255, .09);
  border-radius: 16px;
  background: rgba(255,255,255,.022);
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}

.ai-studio-orbital-page .ai-premium-navbar .ai-nav-primary .nav-link {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0;
  padding: 0 13px !important;
  border-radius: 11px;
  color: #aebbd2 !important;
  font-size: .76rem;
  font-weight: 730;
  letter-spacing: .005em;
}

.ai-studio-orbital-page .ai-premium-navbar .ai-nav-primary .nav-link:hover,
.ai-studio-orbital-page .ai-premium-navbar .ai-nav-primary .nav-link:focus-visible {
  color: #fff !important;
  background: rgba(83, 126, 255, .1);
}

.ai-studio-orbital-page .ai-premium-navbar .ai-nav-primary .nav-link.active {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(77,125,255,.31), rgba(155,104,255,.2));
  box-shadow: inset 0 0 0 1px rgba(124, 173, 255, .23), 0 8px 19px rgba(21, 54, 139, .18);
}

.ai-studio-orbital-page .ai-premium-navbar .ai-nav-primary .nav-link.active::after {
  left: 22%;
  right: 22%;
  bottom: 2px;
}

.ai-studio-orbital-page .ai-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-studio-orbital-page .ai-nav-wardrobe {
  position: relative;
  isolation: isolate;
  min-height: 46px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px 5px 7px;
  overflow: hidden;
  border: 1px solid rgba(76, 225, 190, .23);
  border-radius: 14px;
  background: radial-gradient(circle at 0 0, rgba(60, 224, 191, .15), transparent 48%), linear-gradient(135deg, rgba(14, 59, 79, .64), rgba(28, 33, 87, .62));
  color: #f7ffff;
  box-shadow: 0 10px 30px rgba(0, 17, 42, .22), inset 0 1px rgba(255,255,255,.065);
  text-decoration: none;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.ai-studio-orbital-page .ai-nav-wardrobe::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -70% 52% -70% -25%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
  transform: rotate(18deg) translateX(-120%);
  animation: aiWardrobeNavSweep 6.5s ease-in-out infinite;
}

.ai-studio-orbital-page .ai-nav-wardrobe:hover,
.ai-studio-orbital-page .ai-nav-wardrobe:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  border-color: rgba(88, 235, 202, .43);
  box-shadow: 0 15px 34px rgba(6, 50, 76, .34), 0 0 0 3px rgba(67, 216, 255, .055);
}

.ai-studio-orbital-page .ai-nav-wardrobe-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(77, 229, 196, .2), rgba(80, 123, 255, .16));
  color: #7ff0d2;
  box-shadow: inset 0 0 0 1px rgba(115, 237, 210, .12);
}

.ai-studio-orbital-page .ai-nav-wardrobe > span:nth-child(2) {
  min-width: 0;
  display: grid;
  line-height: 1.1;
}

.ai-studio-orbital-page .ai-nav-wardrobe strong {
  color: #f7ffff;
  font-size: .68rem;
  font-weight: 840;
  white-space: nowrap;
}

.ai-studio-orbital-page .ai-nav-wardrobe small {
  margin-top: 3px;
  color: #80a9b5;
  font-size: .47rem;
  white-space: nowrap;
}

.ai-studio-orbital-page .ai-nav-wardrobe > b {
  padding: 3px 6px;
  border: 1px solid rgba(108, 236, 203, .17);
  border-radius: 999px;
  background: rgba(40, 168, 132, .12);
  color: #91f3d7;
  font-size: .43rem;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ai-studio-orbital-page .ai-nav-contact {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 11px;
  color: #aebbd2;
  font-size: .72rem;
  font-weight: 720;
  text-decoration: none;
}

.ai-studio-orbital-page .ai-nav-contact:hover { color: #fff; background: rgba(255,255,255,.045); }

.ai-studio-orbital-page .ai-nav-language {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  border: 1px solid rgba(126, 176, 255, .13);
  border-radius: 11px;
  background: rgba(255,255,255,.025);
  color: #7591bb;
}

.ai-studio-orbital-page .ai-nav-language select {
  width: 48px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #dce7f8;
  font-size: .66rem;
  font-weight: 800;
  box-shadow: none;
  outline: 0;
}

.ai-studio-orbital-page .ai-nav-language option { background: #08162d; color: #fff; }

.ai-studio-orbital-page .ai-nav-toggle {
  width: 44px;
  height: 42px;
  display: none;
  padding: 9px;
  border: 1px solid rgba(116, 174, 255, .22);
  border-radius: 13px;
  background: rgba(16, 40, 71, .85);
  box-shadow: none;
}

.ai-studio-orbital-page .ai-nav-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  margin: 4px 0;
  border-radius: 999px;
  background: #dce9fb;
}

/* ---------- Dedicated VTON portal ---------- */
.ai-studio-orbital-page .ai-workbench.is-vton-portal-mode {
  min-height: 520px;
  display: flex;
  flex-direction: column;
}

.ai-studio-orbital-page .ai-vton-portal {
  position: relative;
  isolation: isolate;
  min-height: 500px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr);
  align-items: center;
  gap: clamp(22px, 4vw, 64px);
  overflow: hidden;
  margin: 4px 0 0;
  padding: clamp(28px, 4vw, 58px);
  border: 1px solid rgba(124, 160, 255, .25);
  border-radius: clamp(24px, 3vw, 38px);
  background:
    radial-gradient(circle at 9% 12%, rgba(109, 79, 255, .23), transparent 34%),
    radial-gradient(circle at 91% 84%, rgba(45, 215, 191, .13), transparent 35%),
    linear-gradient(145deg, rgba(13, 29, 67, .99), rgba(5, 14, 36, .99) 64%, rgba(7, 22, 42, .99));
  box-shadow: 0 34px 90px rgba(0, 5, 22, .44), inset 0 1px rgba(255,255,255,.07);
}

.ai-studio-orbital-page .ai-vton-portal::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: .32;
  background-image: linear-gradient(rgba(127, 166, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(127, 166, 255, .055) 1px, transparent 1px);
  background-size: 45px 45px;
  mask-image: linear-gradient(100deg, #000, transparent 75%);
}

.ai-studio-orbital-page .ai-vton-portal::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 460px;
  height: 460px;
  right: -110px;
  top: -125px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(101, 96, 255, .2), transparent 67%);
  filter: blur(8px);
}

.ai-studio-orbital-page .ai-vton-portal-ambient,
.ai-studio-orbital-page .ai-vton-portal-ambient i {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ai-studio-orbital-page .ai-vton-portal-ambient i {
  width: 5px;
  height: 5px;
  left: 12%;
  top: 19%;
  border-radius: 50%;
  background: #63dfff;
  box-shadow: 0 0 16px #63dfff, 165px 58px 0 -1px #9c7cff, 350px 235px 0 -1px #4ce2bd, 540px 72px 0 -1px #f1bd68;
  animation: aiVtonStarDrift 8s ease-in-out infinite;
}

.ai-studio-orbital-page .ai-vton-portal-ambient i:nth-child(2) { left: 24%; top: 78%; opacity: .55; animation-delay: -3s; }
.ai-studio-orbital-page .ai-vton-portal-ambient i:nth-child(3) { left: 62%; top: 27%; opacity: .35; animation-delay: -6s; }

.ai-studio-orbital-page .ai-vton-portal-copy { position: relative; z-index: 2; min-width: 0; }

.ai-studio-orbital-page .ai-vton-portal-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #a8baff;
  font-size: .61rem;
  font-weight: 850;
  letter-spacing: .15em;
}

.ai-studio-orbital-page .ai-vton-portal-kicker > i {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(156, 123, 255, .23);
  border-radius: 10px;
  background: rgba(117, 83, 255, .13);
  color: #b99cff;
}

.ai-studio-orbital-page .ai-vton-portal h3 {
  max-width: 720px;
  margin: 18px 0 14px;
  color: #fff;
  font-size: clamp(1.65rem, 3.2vw, 3.15rem);
  font-weight: 860;
  line-height: 1.02;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.ai-studio-orbital-page .ai-vton-portal-copy > p {
  max-width: 68ch;
  margin: 0;
  color: #aebed9;
  font-size: clamp(.78rem, 1.05vw, .93rem);
  line-height: 1.72;
}

.ai-studio-orbital-page .ai-vton-portal-features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin-top: 24px;
}

.ai-studio-orbital-page .ai-vton-portal-features > span {
  min-width: 0;
  min-height: 76px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 8px;
  padding: 11px;
  border: 1px solid rgba(139, 166, 232, .12);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}

.ai-studio-orbital-page .ai-vton-portal-features i {
  grid-row: 1 / 3;
  align-self: center;
  color: #6fdad5;
  font-size: .82rem;
}

.ai-studio-orbital-page .ai-vton-portal-features strong { color: #f5f9ff; font-size: .82rem; }
.ai-studio-orbital-page .ai-vton-portal-features small { overflow: hidden; color: #768baa; font-size: .48rem; text-overflow: ellipsis; white-space: nowrap; }

.ai-studio-orbital-page .ai-vton-portal-actions {
  display: flex;
  align-items: center;
  gap: 17px;
  margin-top: 27px;
}

.ai-studio-orbital-page .ai-vton-portal-cta {
  min-width: 250px;
  min-height: 58px;
  display: grid;
  grid-template-columns: 34px 1fr 28px;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 0;
  border-radius: 17px;
  background: linear-gradient(118deg, #7155fa, #5d6cf6 48%, #29afd8);
  box-shadow: 0 18px 42px rgba(68, 69, 217, .35), inset 0 1px rgba(255,255,255,.17);
  text-align: left;
  transition: transform .24s ease, box-shadow .24s ease;
}

.ai-studio-orbital-page .ai-vton-portal-cta:hover,
.ai-studio-orbital-page .ai-vton-portal-cta:focus-visible {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 24px 48px rgba(68, 69, 217, .44), 0 0 0 4px rgba(76, 213, 255, .07);
}

.ai-studio-orbital-page .ai-vton-portal-cta > i,
.ai-studio-orbital-page .ai-vton-portal-cta > b {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(255,255,255,.12);
  color: #fff;
}

.ai-studio-orbital-page .ai-vton-portal-cta > b { width: 28px; height: 28px; }
.ai-studio-orbital-page .ai-vton-portal-cta > span { display: grid; }
.ai-studio-orbital-page .ai-vton-portal-cta strong { color: #fff; font-size: .78rem; }
.ai-studio-orbital-page .ai-vton-portal-cta small { color: rgba(238,245,255,.68); font-size: .5rem; }

.ai-studio-orbital-page .ai-vton-portal-actions > p {
  max-width: 250px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: #7187aa;
  font-size: .55rem;
  line-height: 1.45;
}

.ai-studio-orbital-page .ai-vton-portal-actions > p i { margin-top: 2px; color: #55dcb5; }

.ai-studio-orbital-page .ai-vton-portal-visual {
  position: relative;
  min-height: 430px;
  display: grid;
  place-items: center;
  perspective: 1000px;
}

.ai-studio-orbital-page .ai-vton-portal-visual::after {
  content: "";
  position: absolute;
  bottom: 19px;
  width: 65%;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,.42);
  filter: blur(14px);
}

.ai-studio-orbital-page .ai-vton-portal-core {
  position: relative;
  z-index: 4;
  width: min(245px, 68%);
  height: 385px;
  display: grid;
  place-items: end center;
  overflow: hidden;
  border: 1px solid rgba(135, 160, 255, .2);
  border-radius: 42% 42% 28px 28px / 20% 20% 28px 28px;
  background: radial-gradient(circle at 50% 24%, rgba(109, 104, 255, .22), transparent 46%), linear-gradient(180deg, rgba(17, 33, 79, .2), rgba(5, 14, 36, .76));
  box-shadow: 0 35px 70px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.08);
  animation: aiVtonCoreFloat 5.6s ease-in-out infinite;
}

.ai-studio-orbital-page .ai-vton-portal-core::before {
  content: "";
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(102, 222, 222, .13);
  border-radius: inherit;
}

.ai-studio-orbital-page .ai-vton-portal-core img {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 20px 20px rgba(0,0,0,.3));
}

.ai-studio-orbital-page .ai-vton-portal-orbit {
  position: absolute;
  z-index: 1;
  width: 350px;
  height: 350px;
  border: 1px solid rgba(120, 156, 255, .19);
  border-radius: 50%;
  transform: rotateX(65deg) rotateZ(0deg);
  box-shadow: 0 0 40px rgba(71, 119, 255, .04), inset 0 0 40px rgba(67, 216, 255, .025);
  animation: aiVtonPortalOrbit 11s linear infinite;
}

.ai-studio-orbital-page .ai-vton-portal-orbit::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  left: 49%;
  top: -5px;
  border-radius: 50%;
  background: #5ddcff;
  box-shadow: 0 0 17px #5ddcff;
}

.ai-studio-orbital-page .ai-vton-portal-orbit-b {
  width: 415px;
  height: 415px;
  border-style: dashed;
  border-color: rgba(157, 105, 255, .16);
  transform: rotateX(68deg) rotateZ(24deg);
  animation-duration: 17s;
  animation-direction: reverse;
}

.ai-studio-orbital-page .ai-vton-portal-orbit-b::before { background: #a777ff; box-shadow: 0 0 17px #a777ff; }
.ai-studio-orbital-page .ai-vton-portal-orbit-c { width: 285px; height: 285px; transform: rotateX(61deg) rotateZ(-31deg); animation-duration: 8s; }
.ai-studio-orbital-page .ai-vton-portal-orbit-c::before { background: #59e1bd; box-shadow: 0 0 17px #59e1bd; }

.ai-studio-orbital-page .ai-vton-float {
  position: absolute;
  z-index: 6;
  min-width: 110px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid rgba(137, 170, 244, .18);
  border-radius: 15px;
  background: rgba(8, 21, 49, .83);
  box-shadow: 0 16px 35px rgba(0,0,0,.27), inset 0 1px rgba(255,255,255,.06);
  backdrop-filter: blur(13px);
  animation: aiVtonFloatCard 5.5s ease-in-out infinite;
}

.ai-studio-orbital-page .ai-vton-float > i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(100, 118, 255, .13);
  color: #a48dff;
}

.ai-studio-orbital-page .ai-vton-float span { display: grid; }
.ai-studio-orbital-page .ai-vton-float strong { color: #fff; font-size: .72rem; }
.ai-studio-orbital-page .ai-vton-float small { color: #7188aa; font-size: .45rem; text-transform: uppercase; letter-spacing: .06em; }
.ai-studio-orbital-page .ai-vton-float-a { left: 0; top: 16%; }
.ai-studio-orbital-page .ai-vton-float-b { right: 0; top: 42%; animation-delay: -2.2s; }
.ai-studio-orbital-page .ai-vton-float-b > i { color: #5ce2be; background: rgba(45, 202, 163, .11); }
.ai-studio-orbital-page .ai-vton-float-c { left: 7%; bottom: 12%; animation-delay: -4s; }
.ai-studio-orbital-page .ai-vton-float-c > i { color: #65d6ff; background: rgba(45, 158, 215, .11); }

/* Portal mode hides the now-obsolete embedded generation form. */
.ai-studio-orbital-page .ai-workbench.is-vton-portal-mode > .ai-workflow-banner,
.ai-studio-orbital-page .ai-workbench.is-vton-portal-mode > .ai-form-grid,
.ai-studio-orbital-page .ai-workbench.is-vton-portal-mode > .ai-field,
.ai-studio-orbital-page .ai-workbench.is-vton-portal-mode > .ai-suggestions,
.ai-studio-orbital-page .ai-workbench.is-vton-portal-mode > .ai-image-controls > :not(#aiVtonFields),
.ai-studio-orbital-page .ai-workbench.is-vton-portal-mode > .ai-contract-notice,
.ai-studio-orbital-page .ai-workbench.is-vton-portal-mode > .ai-mask-editor,
.ai-studio-orbital-page .ai-workbench.is-vton-portal-mode > .ai-private-adult-panel,
.ai-studio-orbital-page .ai-workbench.is-vton-portal-mode > .ai-job-progress-shell,
.ai-studio-orbital-page .ai-workbench.is-vton-portal-mode > .ai-result,
.ai-studio-orbital-page .ai-workbench.is-vton-portal-mode > .ai-run-button {
  display: none !important;
}

.ai-studio-orbital-page .ai-workbench.is-vton-portal-mode > .ai-image-controls {
  display: block !important;
}

.ai-studio-orbital-page .ai-workbench.is-vton-portal-mode #aiVtonFields {
  display: grid !important;
}

@keyframes aiNavSheen { 0%, 68%, 100% { transform: translateX(-45%); opacity: 0; } 76% { opacity: 1; } 90% { transform: translateX(50%); opacity: 0; } }
@keyframes aiNavLogoOrbit { to { transform: rotate(360deg); } }
@keyframes aiWardrobeNavSweep { 0%, 58%, 100% { transform: rotate(18deg) translateX(-130%); } 82% { transform: rotate(18deg) translateX(260%); } }
@keyframes aiVtonStarDrift { 0%,100% { transform: translate3d(0,0,0); opacity: .45; } 50% { transform: translate3d(12px,-9px,0); opacity: .9; } }
@keyframes aiVtonCoreFloat { 0%,100% { transform: translateY(4px) rotateY(-1deg); } 50% { transform: translateY(-10px) rotateY(2deg); } }
@keyframes aiVtonPortalOrbit { to { transform: rotateX(65deg) rotateZ(360deg); } }
@keyframes aiVtonFloatCard { 0%,100% { transform: translateY(3px); } 50% { transform: translateY(-7px); } }

@media (min-width: 1700px) {
  .ai-studio-orbital-page .ai-nav-shell { max-width: 1840px; }
  .ai-studio-orbital-page .ai-vton-portal { grid-template-columns: 1.15fr .85fr; padding: 64px 76px; }
  .ai-studio-orbital-page .ai-vton-portal-visual { min-height: 480px; }
  .ai-studio-orbital-page .ai-vton-portal-core { width: 275px; height: 430px; }
}

@media (max-width: 1399.98px) {
  .ai-studio-orbital-page .ai-nav-toggle { display: block; }
  .ai-studio-orbital-page .ai-premium-navbar .navbar-collapse {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid rgba(128, 173, 255, .14);
    border-radius: 18px;
    background: rgba(5, 16, 38, .98);
    box-shadow: 0 20px 50px rgba(0,0,0,.34);
  }
  .ai-studio-orbital-page .ai-nav-primary { margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .ai-studio-orbital-page .ai-nav-actions { justify-content: flex-end; margin-top: 10px; }
}

@media (max-width: 1050px) {
  .ai-studio-orbital-page .ai-vton-portal { grid-template-columns: 1fr; }
  .ai-studio-orbital-page .ai-vton-portal-visual { min-height: 390px; }
  .ai-studio-orbital-page .ai-vton-portal-features { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767.98px) {
  .ai-studio-orbital-page .ai-premium-navbar { padding: 7px 0; }
  .ai-studio-orbital-page .ai-nav-brand-copy small { display: none; }
  .ai-studio-orbital-page .ai-nav-primary { grid-template-columns: 1fr 1fr; gap: 4px; }
  .ai-studio-orbital-page .ai-nav-primary .nav-item:last-child { grid-column: 1 / -1; }
  .ai-studio-orbital-page .ai-nav-actions { display: grid; grid-template-columns: 1fr auto; }
  .ai-studio-orbital-page .ai-nav-wardrobe { grid-column: 1 / -1; }
  .ai-studio-orbital-page .ai-nav-contact { justify-content: center; border: 1px solid rgba(126, 176, 255, .1); }
  .ai-studio-orbital-page .ai-vton-portal { min-height: 0; padding: 25px 18px; border-radius: 24px; }
  .ai-studio-orbital-page .ai-vton-portal h3 { font-size: clamp(1.55rem, 9vw, 2.25rem); }
  .ai-studio-orbital-page .ai-vton-portal-features { gap: 7px; }
  .ai-studio-orbital-page .ai-vton-portal-features > span { min-height: 68px; }
  .ai-studio-orbital-page .ai-vton-portal-actions { display: grid; }
  .ai-studio-orbital-page .ai-vton-portal-cta { width: 100%; min-width: 0; }
  .ai-studio-orbital-page .ai-vton-portal-actions > p { max-width: none; }
  .ai-studio-orbital-page .ai-vton-portal-visual { min-height: 330px; }
  .ai-studio-orbital-page .ai-vton-portal-core { width: 185px; height: 300px; }
  .ai-studio-orbital-page .ai-vton-portal-orbit { width: 270px; height: 270px; }
  .ai-studio-orbital-page .ai-vton-portal-orbit-b { width: 315px; height: 315px; }
  .ai-studio-orbital-page .ai-vton-portal-orbit-c { width: 230px; height: 230px; }
  .ai-studio-orbital-page .ai-vton-float { min-width: 94px; padding: 7px 8px; }
  .ai-studio-orbital-page .ai-vton-float-a { left: -4px; }
  .ai-studio-orbital-page .ai-vton-float-b { right: -5px; }
}

@media (max-width: 420px) {
  .ai-studio-orbital-page .ai-nav-logo { width: 40px; height: 40px; }
  .ai-studio-orbital-page .ai-nav-brand-copy strong { font-size: .9rem; }
  .ai-studio-orbital-page .ai-vton-portal-features { grid-template-columns: 1fr 1fr; }
  .ai-studio-orbital-page .ai-vton-portal-features small { white-space: normal; }
  .ai-studio-orbital-page .ai-vton-portal-visual { min-height: 300px; }
  .ai-studio-orbital-page .ai-vton-float-c { bottom: 6%; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-studio-orbital-page .ai-premium-navbar::before,
  .ai-studio-orbital-page .ai-nav-logo::before,
  .ai-studio-orbital-page .ai-nav-logo::after,
  .ai-studio-orbital-page .ai-nav-wardrobe::before,
  .ai-studio-orbital-page .ai-vton-portal-ambient i,
  .ai-studio-orbital-page .ai-vton-portal-core,
  .ai-studio-orbital-page .ai-vton-portal-orbit,
  .ai-studio-orbital-page .ai-vton-float { animation: none !important; }
}

/* The workbench is narrower than the viewport: component-level responsiveness is required. */
.ai-studio-orbital-page .ai-workbench.is-vton-portal-mode { container-type: inline-size; container-name: vton-workbench; }

@container vton-workbench (max-width: 920px) {
  .ai-studio-orbital-page .ai-vton-portal {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: clamp(25px, 6cqw, 46px);
  }
  .ai-studio-orbital-page .ai-vton-portal h3 {
    max-width: 15ch;
    font-size: clamp(1.8rem, 6.4cqw, 2.75rem);
  }
  .ai-studio-orbital-page .ai-vton-portal-copy > p { max-width: 66ch; }
  .ai-studio-orbital-page .ai-vton-portal-visual { min-height: 360px; }
}

@container vton-workbench (max-width: 680px) {
  .ai-studio-orbital-page .ai-vton-portal { padding: 25px 20px; border-radius: 25px; }
  .ai-studio-orbital-page .ai-vton-portal h3 { max-width: 13ch; font-size: clamp(1.65rem, 8cqw, 2.2rem); }
  .ai-studio-orbital-page .ai-vton-portal-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-studio-orbital-page .ai-vton-portal-features small { white-space: normal; }
  .ai-studio-orbital-page .ai-vton-portal-actions { display: grid; }
  .ai-studio-orbital-page .ai-vton-portal-actions > p { max-width: none; }
  .ai-studio-orbital-page .ai-vton-portal-cta { width: 100%; min-width: 0; }
  .ai-studio-orbital-page .ai-vton-portal-visual { min-height: 320px; }
  .ai-studio-orbital-page .ai-vton-portal-core { width: 190px; height: 305px; }
  .ai-studio-orbital-page .ai-vton-portal-orbit { width: 275px; height: 275px; }
  .ai-studio-orbital-page .ai-vton-portal-orbit-b { width: 320px; height: 320px; }
  .ai-studio-orbital-page .ai-vton-portal-orbit-c { width: 228px; height: 228px; }
}