/* Ciatto V4 — atmospheric brands, keyed to film progress.
   This layer is decorative: the interactive company links remain in the scenes
   and the accessible catalog modal. The existing C WebGL shader is unchanged. */
.brand-film-layer{
  position:absolute;
  inset:0;
  z-index:1;
  isolation:isolate;
  pointer-events:none;
  overflow:hidden;
  perspective:1100px;
  perspective-origin:68% 46%;
  transform-style:preserve-3d;
  contain:layout paint;
}
.orbit-item{
  position:absolute;
  top:50%;
  left:75%;
  min-width:180px;
  max-width:245px;
  height:67px;
  padding:12px 13px 12px 12px;
  gap:12px;
  display:flex;
  align-items:center;
  border:1px solid rgba(229,239,249,.23);
  background:linear-gradient(122deg,rgba(34,46,58,.84),rgba(13,19,26,.85));
  border-radius:6px;
  box-shadow:0 18px 50px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.045);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  color:#edf3f7;
  text-shadow:0 1px 10px rgba(0,0,0,.23);
  opacity:0;
  visibility:hidden;
  white-space:nowrap;
  transform-origin:50% 50%;
  transform-style:preserve-3d;
  backface-visibility:hidden;
  will-change:transform,opacity,filter;
  pointer-events:none;
}
.orbit-item::before{
  position:absolute;
  content:"";
  inset:0;
  border-radius:6px;
  background:linear-gradient(145deg,rgba(201,225,243,.075),transparent 45%);
  pointer-events:none;
}
.orbit-item::after{
  position:absolute;
  content:"";
  left:16px;
  bottom:-13px;
  width:52px;
  height:1px;
  background:linear-gradient(90deg,rgba(198,223,243,.5),transparent);
  transform:rotate(-24deg);
  transform-origin:left;
  pointer-events:none;
}
.orbit-logo{
  display:grid;
  place-items:center;
  flex:0 0 39px;
  width:39px;
  height:39px;
  border:1px solid rgba(217,228,240,.18);
  background:#111821;
  border-radius:7px;
  position:relative;
  overflow:hidden;
}
.orbit-logo img,.orbit-logo .official-svg{
  position:relative;
  display:block;
  width:27px;
  height:27px;
  object-fit:contain;
  z-index:1;
  flex-shrink:0;
}
.orbit-logo .orbit-monogram{
  font-size:15px;
  color:#d3e2f0;
  font-weight:650;
  letter-spacing:-.055em;
  line-height:1;
  position:absolute;
}
.orbit-logo:has(img) .orbit-monogram,
.orbit-logo:has(svg) .orbit-monogram{opacity:0}
.orbit-logo img[hidden]~.orbit-monogram{opacity:1}
.orbit-logo-ciatto .orbit-monogram{
  opacity:1;
  font-size:23px;
  font-weight:550;
  color:#f3f5f7;
}
.orbit-identity{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
  overflow:hidden;
}
.orbit-title{
  font-weight:550;
  font-size:13px;
  letter-spacing:-.035em;
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
}
.orbit-domain{
  font-family:Inter,system-ui,-apple-system,sans-serif;
  font-size:10px;
  letter-spacing:.006em;
  line-height:1.3;
  color:#a5b7c5;
  overflow:hidden;
  text-overflow:ellipsis;
}
.orbit-tick{
  width:3px;
  height:3px;
  flex:0 0 3px;
  border-radius:50%;
  background:#b6d9ed;
  align-self:flex-start;
  box-shadow:0 0 9px rgba(175,214,248,.5);
}
@media(max-width:1050px){
  .brand-film-layer{perspective:950px;perspective-origin:76% 36%}
  .orbit-item{min-width:160px;max-width:200px;height:61px;padding:9px;gap:10px}
  .orbit-title{font-size:12px}
  .orbit-domain{font-size:9px}
  .orbit-logo{width:35px;height:35px;flex-basis:35px}
}
@media(max-width:700px){
  .brand-film-layer{perspective:800px;perspective-origin:70% 25%;mask-image:linear-gradient(to bottom,black 0%,black 45%,transparent 68%);-webkit-mask-image:linear-gradient(to bottom,black 0%,black 45%,transparent 68%)}
  .orbit-item{min-width:125px;max-width:158px;height:52px;padding:8px;gap:7px;border-radius:5px}
  .orbit-logo{width:28px;height:28px;flex:0 0 28px;border-radius:5px}
  .orbit-logo img,.orbit-logo .official-svg{width:20px;height:20px}
  .orbit-logo .orbit-monogram{font-size:12px}
  .orbit-logo-ciatto .orbit-monogram{font-size:17px}
  .orbit-title{font-size:11px}
  .orbit-domain{font-size:8px}
  .orbit-tick{display:none}
  .orbit-item::after{display:none}
}
@media(prefers-reduced-motion:reduce){
  .brand-film-layer{display:none!important}
}

/* No verified individual identity: show an explicitly typographic catalog label,
   not a newly invented trademark or a stand-in company logo. */
.catalog-logo-text .brand-fallback{
  display:block;
  max-width:45px;
  text-align:center;
  white-space:normal;
  overflow-wrap:break-word;
  font-size:10px;
  letter-spacing:-.02em;
  line-height:1.1;
  padding:2px;
}

/* Existing product wordmarks are displayed at their native aspect ratio.
   Avoid cropping or replacing them with artificial initials. */
.catalog-logo-wordmark {
  width:115px;
  flex:0 0 115px;
  border-color:rgba(228,236,242,.10);
  background:rgba(10,16,22,.50);
}
.catalog-logo-wordmark .favicon-image {
  position:relative;
  width:105px;
  height:38px;
  object-fit:contain;
  border-radius:0;
}
.catalog-logo-wordmark.wordmark-plu7{width:66px;flex-basis:66px}
.catalog-logo-wordmark.wordmark-plu7 .favicon-image{width:59px;height:38px}
.orbit-logo-wordmark{width:91px;flex:0 0 91px}
.orbit-logo-wordmark img{width:83px!important;max-width:83px;height:33px!important;object-fit:contain}
.orbit-item:has(.orbit-logo-wordmark){min-width:247px}
.orbit-logo-wordmark.orbit-logo-plu7{width:66px;flex-basis:66px}
.orbit-logo-wordmark.orbit-logo-plu7 img{width:58px!important}
@media(max-width:700px){
  .catalog-logo-wordmark{width:96px;flex-basis:96px}
  .catalog-logo-wordmark .favicon-image{width:90px;height:33px}
  .orbit-logo-wordmark{width:72px;flex-basis:72px}
  .orbit-logo-wordmark img{width:66px!important;height:27px!important}
  .orbit-item:has(.orbit-logo-wordmark){min-width:197px}
  .orbit-logo-wordmark.orbit-logo-plu7{width:56px;flex-basis:56px}
  .orbit-logo-wordmark.orbit-logo-plu7 img{width:49px!important}
}

/* When there is a verified logo, never draw a monogram underneath it. */
.catalog-logo:has(> img) > .brand-fallback,
.catalog-logo:has(> svg) > .brand-fallback,
.orbit-logo:has(> img) > .orbit-monogram,
.orbit-logo:has(> svg) > .orbit-monogram { display:none !important; }