/* V8.6 content-aware holographic scene prototype.
   Only screen 03 is redesigned here. All approved V6 copy and interactions remain in HTML/JS. */

[data-layout="community-loop"] .scene-media {
  background-color: #020f20;
  background-image: url("assets/v86/desktop/scene-s3.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

[data-layout="community-loop"] .scene-media img { opacity: 0; }

[data-layout="community-loop"] .scene-shade {
  background:
    linear-gradient(90deg, rgba(1, 10, 24, .32), transparent 39%, rgba(2, 18, 35, .06)),
    linear-gradient(0deg, rgba(1, 12, 26, .22), transparent 24%);
}

[data-layout="community-loop"] .ambient-grid { opacity: .035; }

[data-layout="community-loop"] .screen-heading-copy {
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

[data-layout="community-loop"] .screen-no,
[data-layout="community-loop"] .screen-heading p,
[data-layout="community-loop"] .screen-heading h2,
[data-layout="community-loop"] .screen-heading .section-desc {
  color: #f2feff;
  text-shadow: 0 2px 12px rgba(0, 7, 18, .96), 0 0 18px rgba(28, 207, 237, .48);
}

[data-layout="community-loop"] .screen-heading p { color: #62e8ff; }

[data-layout="community-loop"] .holo-surface {
  color: #f3feff;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  isolation: isolate;
  overflow: visible;
}

[data-layout="community-loop"] .holo-surface::before {
  content: "";
  position: absolute;
  inset: -15px -18px;
  z-index: -1;
  border: 0;
  border-radius: 48%;
  background: radial-gradient(ellipse, rgba(0, 8, 21, .96), rgba(1, 26, 49, .70) 54%, rgba(2, 49, 72, .24) 72%, transparent 82%);
  filter: blur(5px);
  pointer-events: none;
}

[data-layout="community-loop"] .holo-surface::after {
  inset: auto 14% 3px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(103, 239, 255, .9), transparent);
  box-shadow: 0 0 12px rgba(71, 219, 241, .72);
  transform-origin: center;
  animation: v86SignalSweep 4.2s ease-in-out infinite;
  animation-delay: var(--v86-delay, 0s);
}

[data-layout="community-loop"] .holo-surface:hover,
[data-layout="community-loop"] .holo-surface:focus-visible {
  outline: none;
  filter: drop-shadow(0 0 13px rgba(72, 224, 245, .54));
  box-shadow: none;
}

[data-layout="community-loop"] .holo-surface:focus-visible {
  box-shadow: 0 0 0 1px rgba(145, 246, 255, .82), 0 0 18px rgba(63, 224, 246, .34);
}

[data-layout="community-loop"] .node-ring { display: none; }
[data-layout="community-loop"] .module-action { display: none; }
[data-layout="community-loop"] .orbit-node {
  transform: none;
  animation: v86NodeReveal .9s ease-out both;
  animation-delay: var(--v86-delay, 0s);
}
[data-layout="community-loop"] .orbit-node-1 { --v86-delay: 0s; }
[data-layout="community-loop"] .orbit-node-2 { --v86-delay: .8s; }
[data-layout="community-loop"] .orbit-node-3 { --v86-delay: 1.6s; }
[data-layout="community-loop"] .orbit-node-4 { --v86-delay: 2.4s; }

[data-layout="community-loop"] .node-icon {
  position: relative;
  color: #dffcff;
  border-color: rgba(126, 241, 255, .82);
  background: radial-gradient(circle, rgba(68, 214, 235, .32), rgba(2, 29, 52, .42));
  box-shadow: inset 0 0 12px rgba(218, 253, 255, .18), 0 0 16px rgba(52, 218, 241, .46);
  transition: filter .2s ease, box-shadow .2s ease;
}

[data-layout="community-loop"] .orbit-node .node-icon::before {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(113, 239, 255, .52);
  border-radius: 50%;
  box-shadow: 0 0 9px rgba(73, 223, 244, .22);
  animation: v86NodePulse 4.2s ease-out infinite;
  animation-delay: var(--v86-delay, 0s);
  pointer-events: none;
}

[data-layout="community-loop"] .orbit-node:is(:hover, :focus-visible, :active) .node-icon {
  filter: brightness(1.15);
  box-shadow: inset 0 0 13px rgba(231, 255, 255, .26), 0 0 20px rgba(64, 225, 246, .58);
}

[data-layout="community-loop"] .module-index { color: #8af2ff; font-size: 10px; }
[data-layout="community-loop"] .module-title {
  color: #fff;
  font-size: clamp(17px, 1.38vw, 21px);
  text-shadow: 0 2px 10px rgba(0, 5, 15, .98), 0 0 11px rgba(70, 223, 244, .42);
}
[data-layout="community-loop"] .module-summary {
  color: #e5fbff;
  font-size: 12px;
  font-weight: 720;
  text-shadow: 0 2px 9px rgba(0, 5, 15, .98), 0 0 7px rgba(28, 184, 215, .22);
}

@keyframes v86NodeReveal {
  0% { opacity: .58; filter: brightness(1.34) drop-shadow(0 0 10px rgba(86, 232, 250, .54)); }
  100% { opacity: 1; filter: none; }
}

@keyframes v86NodePulse {
  0%, 58%, 100% { opacity: .16; transform: scale(.92); }
  72% { opacity: .68; transform: scale(1.16); }
  86% { opacity: 0; transform: scale(1.38); }
}

@keyframes v86SignalSweep {
  0%, 62%, 100% { opacity: .18; transform: translateX(-28%) scaleX(.55); }
  76% { opacity: .72; transform: translateX(0) scaleX(1); }
  90% { opacity: .08; transform: translateX(28%) scaleX(.55); }
}
[data-layout="community-loop"] .module-tags i {
  color: #d9faff;
  border-color: rgba(91, 224, 244, .42);
  background: rgba(2, 23, 42, .40);
}
[data-layout="community-loop"] .orbit-line {
  border-color: rgba(103, 232, 249, .42);
  box-shadow: inset 0 0 20px rgba(48, 210, 234, .14), 0 0 18px rgba(45, 211, 236, .18);
  opacity: .38;
}

[data-layout="community-loop"] .community-core {
  border-color: rgba(122, 241, 255, .66);
  color: #f5feff;
  background: radial-gradient(circle at 35% 24%, rgba(195, 250, 255, .18), rgba(18, 134, 169, .15) 46%, rgba(1, 21, 42, .34) 71%, transparent 73%);
  box-shadow: inset 0 0 24px rgba(218, 252, 255, .13), 0 0 38px rgba(49, 215, 239, .34);
  backdrop-filter: none;
}
[data-layout="community-loop"] .community-core span,
[data-layout="community-loop"] .community-core small { color: #bdeff7; }
[data-layout="community-loop"] .community-core strong {
  color: #fff;
  text-shadow: 0 0 12px rgba(67, 225, 246, .72);
}

[data-layout="community-loop"] .data-strip {
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

[data-layout="community-loop"] .data-point {
  border: 0;
  border-top: 1px solid rgba(110, 239, 255, .72);
  border-radius: 0;
  color: #f6feff;
  background: linear-gradient(180deg, rgba(17, 137, 170, .24), transparent 76%);
  box-shadow: 0 -5px 16px rgba(50, 219, 242, .16);
  text-shadow: 0 2px 8px rgba(0, 6, 16, .96);
}
[data-layout="community-loop"] .data-point span { color: #c9f3f9; font-size: 10px; }

@media (min-width: 768px) {
  [data-layout="community-loop"] .screen-heading {
    top: calc(var(--topbar-height) + 18px);
    left: clamp(22px, 4vw, 66px);
    max-width: min(480px, 36vw);
  }

  [data-layout="community-loop"] .screen-heading h2 { font-size: clamp(27px, 2.6vw, 38px); }
  [data-layout="community-loop"] .screen-heading .section-desc { font-size: 12px; line-height: 1.5; }
  [data-layout="community-loop"] .layout-host { padding-inline: clamp(18px, 2.4vw, 38px); }
  [data-layout="community-loop"] .community-orbit { width: 100%; max-width: none; }
  [data-layout="community-loop"] .community-core {
    left: 55%;
    top: 47%;
    width: clamp(130px, 12vw, 176px);
    transform: translate(-50%, -50%);
  }
  [data-layout="community-loop"] .orbit-line {
    left: 61%;
    top: 49%;
    width: min(670px, 54vw);
    height: min(320px, 45vh);
  }
  [data-layout="community-loop"] .orbit-node {
    width: clamp(150px, 13vw, 196px);
    min-height: 116px;
    padding: 13px 14px 12px;
    border-radius: 0;
  }
  [data-layout="community-loop"] .orbit-node-1 { left: 29%; top: 18%; }
  [data-layout="community-loop"] .orbit-node-2 { right: 3%; top: 21%; }
  [data-layout="community-loop"] .orbit-node-3 { left: 24%; right: auto; top: auto; bottom: 17%; }
  [data-layout="community-loop"] .orbit-node-4 { right: 2%; left: auto; top: auto; bottom: 17%; }
  [data-layout="community-loop"] .orbit-node .module-summary { -webkit-line-clamp: 1; }
  [data-layout="community-loop"] .orbit-node .module-tags i:nth-child(n+2) { display: none; }
  [data-layout="community-loop"] .data-strip {
    left: 10%;
    right: 8%;
    bottom: 0;
    width: auto;
    transform: none;
  }
}

@media (max-width: 767px) {
  [data-layout="community-loop"] .scroll-scene { background: #020f20; }
  [data-layout="community-loop"] .scene-media {
    background-image: url("assets/v86/mobile/scene-s3.png");
    background-position: center top;
    background-size: cover;
  }
  [data-layout="community-loop"] .scene-shade {
    background:
      linear-gradient(180deg, rgba(1, 10, 24, .12), transparent 28%, rgba(2, 14, 28, .10) 72%, rgba(1, 10, 22, .30)),
      radial-gradient(circle at 50% 24%, transparent, rgba(1, 10, 24, .12) 75%);
  }
  [data-layout="community-loop"] .screen-heading {
    padding: calc(var(--topbar-height) + 12px) 12px 0;
    max-width: 92%;
  }
  [data-layout="community-loop"] .screen-heading-copy { padding: 6px 10px 7px 8px; }
  [data-layout="community-loop"] .screen-heading h2 { font-size: clamp(23px, 6.4vw, 29px); }
  [data-layout="community-loop"] .screen-heading .section-desc { max-width: 260px; font-size: 10.5px; }
  [data-layout="community-loop"] .layout-host { padding: 10px 10px 112px; }
  [data-layout="community-loop"] .community-orbit {
    min-height: 960px;
    display: block;
    margin: 0;
  }
  [data-layout="community-loop"] .orbit-line {
    left: 50%;
    top: 170px;
    width: 70%;
    height: 650px;
    transform: translateX(-50%) rotate(-7deg);
  }
  [data-layout="community-loop"] .community-core {
    position: absolute;
    left: 50%;
    top: 220px;
    width: 132px;
    min-height: 132px;
    aspect-ratio: 1;
    transform: translateX(-50%) translateZ(34px);
  }
  [data-layout="community-loop"] .orbit-node {
    position: absolute;
    width: min(43%, 180px);
    min-height: 128px;
    margin: 0;
    padding: 12px 10px;
    border-radius: 0;
  }
  [data-layout="community-loop"] .orbit-node::before { inset: -15px -8px; }
  [data-layout="community-loop"] .orbit-node-1 { left: 1%; top: 82px; }
  [data-layout="community-loop"] .orbit-node-2 { right: 0; left: auto; top: 360px; }
  [data-layout="community-loop"] .orbit-node-3 { left: 1%; right: auto; top: 520px; }
  [data-layout="community-loop"] .orbit-node-4 { right: 0; left: auto; top: 635px; }
  [data-layout="community-loop"] .orbit-node .node-icon { width: 32px; height: 32px; }
  [data-layout="community-loop"] .orbit-node .module-index { font-size: 10px; }
  [data-layout="community-loop"] .orbit-node .module-title { font-size: 16px; line-height: 1.18; }
  [data-layout="community-loop"] .orbit-node .module-summary { font-size: 11.5px; line-height: 1.38; -webkit-line-clamp: 2; }
  [data-layout="community-loop"] .orbit-node .module-tags { display: none; }
  [data-layout="community-loop"] .data-strip {
    position: absolute;
    left: 1%;
    right: 1%;
    bottom: 18px;
    width: auto;
    transform: none;
    grid-template-columns: repeat(2, 1fr);
    gap: 7px;
    padding: 0;
  }
  [data-layout="community-loop"] .data-point { min-height: 66px; padding: 8px 6px; }
  [data-layout="community-loop"] .data-point strong { font-size: 16px; }
  [data-layout="community-loop"] .data-point span { font-size: 10px; line-height: 1.25; }
}

@media (max-width: 390px) {
  [data-layout="community-loop"] .orbit-node { width: 43%; }
  [data-layout="community-loop"] .orbit-node-1 { top: 78px; }
  [data-layout="community-loop"] .orbit-node-2 { top: 360px; }
  [data-layout="community-loop"] .orbit-node-3 { top: 516px; }
  [data-layout="community-loop"] .orbit-node-4 { top: 635px; }
}

@media (min-width: 1180px) {
  [data-layout="community-loop"] .orbit-node {
    height: clamp(132px, 10vw, 144px);
    min-height: 0;
  }
  [data-layout="community-loop"] .orbit-node .module-tags { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-layout="community-loop"] .holo-surface { transition: none; }
  [data-layout="community-loop"] .orbit-node,
  [data-layout="community-loop"] .orbit-node .node-icon::before,
  [data-layout="community-loop"] .orbit-node::after { animation: none; }
  [data-layout="community-loop"] .orbit-node .node-icon::before { opacity: .34; transform: scale(1.08); }
}