:root {
  --bg: #040404;
  --ivory: #f2e7d7;
  --muted: rgba(240, 225, 208, 0.68);
  --red: #b82519;
  --red-bright: #ff7057;
  --gold: #c89a61;
  --line: rgba(228, 201, 171, 0.22);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  background: #000;
  color: var(--ivory);
  font-family: "Oxanium", system-ui, sans-serif;
}

a { color: inherit; text-decoration: none; }

.darkimages-site {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: #000;
  background-image: url('assets/fixed-bg-blackwhite.png');
  background-position: center center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.darkimages-site::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background: rgba(78, 48, 22, .10);
  mix-blend-mode: color;
  pointer-events: none;
}
.darkimages-site::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.01), rgba(0,0,0,0) 44%, rgba(0,0,0,.12) 82%, rgba(0,0,0,.25) 100%);
  pointer-events: none;
}

.site-badge {
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.82);
  font-family: "Michroma", sans-serif;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  pointer-events: none;
}
.site-badge i {
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224, 174, 113, .92), transparent);
}

.hero-hub {
  position: relative;
  width: min(1500px, 100%);
  min-height: calc(100vh - 40px);
  display: grid;
  place-items: center;
  isolation: isolate;
  z-index: 2;
}

.hero-artwork,
.hero-vignette,
.hero-fog,
.hero-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-artwork {
  display: grid;
  place-items: center;
  z-index: 0;
  isolation: isolate;
}
.hero-artwork::before,
.hero-artwork::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  pointer-events: none;
}
.hero-artwork::before {
  z-index: 0;
  width: min(98vw, 1260px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 53%, rgba(36, 0, 0, .16) 59%, rgba(128, 0, 0, .34) 67%, rgba(205, 14, 14, .56) 73%, rgba(90, 0, 0, .28) 81%, rgba(0,0,0,0) 92%),
    radial-gradient(ellipse at 21% 31%, rgba(255, 30, 30, .26), rgba(130, 6, 6, .16) 18%, rgba(0,0,0,0) 34%),
    radial-gradient(ellipse at 73% 24%, rgba(226, 18, 18, .16), rgba(94, 0, 0, .10) 16%, rgba(0,0,0,0) 32%),
    radial-gradient(ellipse at 82% 67%, rgba(238, 26, 26, .22), rgba(122, 6, 6, .14) 16%, rgba(0,0,0,0) 34%),
    radial-gradient(ellipse at 34% 77%, rgba(200, 10, 10, .16), rgba(76, 0, 0, .10) 14%, rgba(0,0,0,0) 30%),
    radial-gradient(ellipse at 58% 17%, rgba(255, 44, 44, .14), rgba(0,0,0,0) 22%),
    radial-gradient(ellipse at 14% 58%, rgba(152, 8, 8, .14), rgba(0,0,0,0) 24%);
  filter: blur(16px) saturate(1.26) contrast(1.34);
  opacity: .95;
  mix-blend-mode: screen;
  animation: bloodGlowFlicker 4.2s ease-in-out infinite, bloodGlowBreathe 8.6s ease-in-out infinite;
}
.hero-artwork::after {
  z-index: 0;
  width: min(104vw, 1360px);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  background:
    conic-gradient(from 11deg,
      rgba(0,0,0,0) 0deg 19deg,
      rgba(142, 6, 6, .34) 19deg 31deg,
      rgba(52, 0, 0, .08) 31deg 39deg,
      rgba(0,0,0,0) 39deg 66deg,
      rgba(214, 20, 20, .22) 66deg 83deg,
      rgba(0,0,0,0) 83deg 126deg,
      rgba(124, 6, 6, .30) 126deg 138deg,
      rgba(0,0,0,0) 138deg 171deg,
      rgba(182, 12, 12, .18) 171deg 190deg,
      rgba(0,0,0,0) 190deg 236deg,
      rgba(108, 4, 4, .30) 236deg 254deg,
      rgba(0,0,0,0) 254deg 302deg,
      rgba(168, 10, 10, .20) 302deg 320deg,
      rgba(0,0,0,0) 320deg 360deg),
    radial-gradient(ellipse at 22% 43%, rgba(170, 10, 10, .18), rgba(0,0,0,0) 22%),
    radial-gradient(ellipse at 72% 58%, rgba(120, 4, 4, .18), rgba(0,0,0,0) 20%),
    radial-gradient(ellipse at 44% 82%, rgba(164, 12, 12, .16), rgba(0,0,0,0) 18%),
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 56%, rgba(116, 8, 8, .20) 68%, rgba(38, 0, 0, .08) 76%, rgba(0,0,0,0) 88%);
  filter: blur(20px) contrast(1.56) saturate(1.3);
  opacity: .82;
  mix-blend-mode: screen;
  animation: bloodSmokeSwirl 10.5s linear infinite, bloodSmokeFlicker 4.8s ease-in-out infinite;
}
.background-sphere {
  position: relative;
  z-index: 1;
  width: min(86vw, 1080px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  transform-style: preserve-3d;
  filter: drop-shadow(0 44px 96px rgba(0,0,0,.72));
  animation: sphereDriftLarge 14s ease-in-out infinite;
}
.background-sphere::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 17% 31%, rgba(255, 232, 198, .18) 0%, rgba(255, 232, 198, .08) 10%, rgba(255,255,255,0) 18%),
    radial-gradient(ellipse at 25% 44%, rgba(0,0,0,.18) 0%, rgba(0,0,0,.10) 14%, rgba(0,0,0,0) 22%),
    radial-gradient(ellipse at 19% 55%, rgba(0,0,0,.16) 0%, rgba(0,0,0,.08) 12%, rgba(0,0,0,0) 20%),
    radial-gradient(ellipse at 47% 33%, rgba(255, 235, 204, .22) 0%, rgba(255, 235, 204, .10) 11%, rgba(255,255,255,0) 20%),
    radial-gradient(ellipse at 53% 33%, rgba(255, 235, 204, .22) 0%, rgba(255, 235, 204, .10) 11%, rgba(255,255,255,0) 20%),
    radial-gradient(ellipse at 50% 46%, rgba(0,0,0,.22) 0%, rgba(0,0,0,.12) 14%, rgba(0,0,0,0) 24%),
    radial-gradient(ellipse at 50% 59%, rgba(0,0,0,.18) 0%, rgba(0,0,0,.09) 12%, rgba(0,0,0,0) 21%),
    radial-gradient(ellipse at 75% 31%, rgba(255, 232, 198, .18) 0%, rgba(255, 232, 198, .08) 10%, rgba(255,255,255,0) 18%),
    radial-gradient(ellipse at 83% 44%, rgba(0,0,0,.18) 0%, rgba(0,0,0,.10) 14%, rgba(0,0,0,0) 22%),
    radial-gradient(ellipse at 79% 55%, rgba(0,0,0,.16) 0%, rgba(0,0,0,.08) 12%, rgba(0,0,0,0) 20%),
    radial-gradient(ellipse at 50% 21%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 30%);
  mix-blend-mode: overlay;
  opacity: .92;
  filter: blur(8px) contrast(1.12);
}
.background-sphere::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 24% 9%, rgba(0,0,0,.70) 0%, rgba(0,0,0,.44) 10%, rgba(0,0,0,.12) 20%, rgba(0,0,0,0) 28%),
    radial-gradient(ellipse at 50% 7%, rgba(0,0,0,.76) 0%, rgba(0,0,0,.48) 11%, rgba(0,0,0,.14) 21%, rgba(0,0,0,0) 29%),
    radial-gradient(ellipse at 76% 9%, rgba(0,0,0,.70) 0%, rgba(0,0,0,.44) 10%, rgba(0,0,0,.12) 20%, rgba(0,0,0,0) 28%),
    linear-gradient(to bottom, rgba(0,0,0,.18) 0%, rgba(0,0,0,.06) 9%, rgba(0,0,0,0) 19%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.background-sphere-depth,
.background-sphere-rim,
.background-sphere-glass,
.hero-artwork-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.background-sphere-depth {
  z-index: 0;
  transform: translate3d(0, 26px, -110px) scale(1.03);
  background: radial-gradient(circle at 50% 42%, #1d1c1b 0 56%, #0f0f0f 68%, #050505 82%, #010101 100%);
  box-shadow: 0 68px 54px rgba(0,0,0,.9), 0 110px 140px rgba(0,0,0,.78), 0 0 40px rgba(0,0,0,.26);
}
.background-sphere-rim {
  z-index: 1;
  inset: -2.8%;
  width: 105.6%;
  height: 105.6%;
  transform: translateZ(-18px);
  background: radial-gradient(circle at 50% 46%, rgba(229,220,205,.16), rgba(80,72,67,.12) 54%, rgba(18,16,15,.9) 76%, rgba(5,5,5,.99) 100%);
  border: 2px solid rgba(213, 198, 184, .34);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset, 0 24px 52px rgba(0,0,0,.58), inset 0 -12px 24px rgba(0,0,0,.34);
}
.hero-artwork-image {
  z-index: 2;
  object-fit: cover;
  object-position: center 52%;
  transform: translateZ(14px) scale(.972);
  filter: url(#faceMorphFilter) saturate(.94) contrast(1.18) brightness(1.06);
  will-change: transform, filter;
}
.background-sphere-glass {
  z-index: 5;
  transform: translateZ(28px);
  background:
    radial-gradient(circle at 26% 20%, rgba(255,255,255,.68), rgba(255,255,255,.28) 10%, rgba(255,255,255,0) 20%),
    radial-gradient(ellipse at 34% 14%, rgba(255,255,255,.22), rgba(255,255,255,0) 24%),
    radial-gradient(circle at 73% 70%, rgba(255,255,255,.12), rgba(255,255,255,0) 24%),
    radial-gradient(ellipse at 50% 12%, rgba(255,255,255,.16), rgba(255,255,255,0) 36%),
    linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,0) 26% 54%, rgba(255,255,255,.26) 76%, rgba(255,255,255,0));
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: inset 0 1px rgba(255,255,255,.24), inset 0 -18px 34px rgba(0,0,0,.3), inset 12px -18px 28px rgba(0,0,0,.12), 0 0 34px rgba(255,255,255,.08);
}

.hero-vignette {
  z-index: 1;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.02), rgba(255,255,255,0) 22%),
    radial-gradient(circle at 50% 60%, rgba(148, 31, 19, .18), rgba(0,0,0,0) 22%),
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.35) 65%, rgba(0,0,0,.66));
}

.hero-fog {
  z-index: 2;
  background: radial-gradient(circle at center, rgba(255,255,255,.08), rgba(255,255,255,0) 60%);
  filter: blur(42px);
  mix-blend-mode: screen;
  opacity: .35;
}
.hero-fog-one { transform: translate(-22vw, -8vh) scale(1.25); animation: fogMoveA 18s ease-in-out infinite alternate; }
.hero-fog-two { transform: translate(20vw, -12vh) scale(1); animation: fogMoveB 26s ease-in-out infinite alternate; opacity: .22; }
.hero-noise {
  z-index: 3;
  opacity: .13;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.015) 1px, transparent 1px);
  background-size: 4px 4px;
  mix-blend-mode: soft-light;
}

.portal-links {
  position: absolute;
  inset: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
}

.portal-link {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: transform .3s ease, filter .3s ease;
  filter: drop-shadow(0 22px 40px rgba(0,0,0,.5));
}
.portal-link:hover,
.portal-link:focus-visible {
  transform: translateY(-10px) scale(1.02);
  outline: none;
}
.portal-link::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: clamp(185px, 16.5vw, 292px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(.94);
  background:
    radial-gradient(circle, rgba(255, 232, 186, .14) 0%, rgba(255, 214, 146, .12) 34%, rgba(0,0,0,0) 52%),
    radial-gradient(circle, rgba(0,0,0,0) 56%, rgba(255, 219, 150, .44) 67%, rgba(225, 151, 60, .34) 73%, rgba(154, 84, 24, .18) 80%, rgba(0,0,0,0) 90%),
    radial-gradient(circle at 32% 28%, rgba(255, 245, 215, .18), rgba(0,0,0,0) 26%),
    radial-gradient(circle at 68% 72%, rgba(255, 198, 112, .10), rgba(0,0,0,0) 22%);
  filter: blur(20px);
  opacity: .76;
  pointer-events: none;
  z-index: 0;
  animation: amberSphereGlow 5.8s ease-in-out infinite;
}
.portal-link:nth-child(2)::before { animation-delay: -1.9s; }
.portal-link:nth-child(3)::before { animation-delay: -3.6s; }
.portal-link > * { position: relative; z-index: 1; }
.portal-link--ai { left: 10.5%; top: 58%; }
.portal-link--art { left: 50%; top: 61%; transform: translateX(-50%); }
.portal-link--art:hover, .portal-link--art:focus-visible { transform: translateX(-50%) translateY(-10px) scale(1.02); }
.portal-link--brand { right: 10.5%; top: 58%; }

.portal-caption {
  color: #efe1cf;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(14px, 1.1vw, 18px);
  letter-spacing: .08em;
  text-shadow: 0 2px 12px rgba(0,0,0,.6);
}

/* ======================= AI HERO LOGO ======================= */
.hero-logo-stage--ai {
  position: relative;
  width: clamp(215px, 17.5vw, 290px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  isolation: isolate;
  animation: aiStageFloat 6.4s ease-in-out infinite;
}
.hero-logo-stage--ai .hero-logo-glow {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.62), rgba(255,188,164,.42) 20%, rgba(230,64,44,.42) 40%, rgba(120,18,14,.18) 62%, rgba(0,0,0,0) 80%);
  filter: blur(22px);
  animation: aiGlowPulse 4s ease-in-out infinite;
}
.hero-orb-cluster {
  position: absolute;
  inset: 2%;
  animation: orbitSpin 26s linear infinite;
}
.hero-orb {
  position: absolute;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,243,238,.98), rgba(241,86,64,.9) 35%, rgba(116,15,12,.98) 72%, rgba(25,5,5,1));
  box-shadow: 0 0 14px rgba(255,86,66,.55), 0 0 24px rgba(110,14,12,.25);
}
.official-logo {
  position: relative;
  z-index: 2;
  display: block;
  width: 88%;
  max-width: 290px;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.7)) drop-shadow(0 0 14px rgba(169, 28, 20, .26));
}
.hero-logo-stage--ai .hero-logo-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(115deg, transparent 18%, rgba(255,255,255,.12) 42%, transparent 58%);
  transform: translateX(-140%);
  animation: sweepMove 4.5s ease-in-out infinite;
  mix-blend-mode: screen;
}
.orb-one{top:5%;left:49%}.orb-two{top:12%;right:18%}.orb-three{top:23%;right:8%}.orb-four{top:39%;right:4%}.orb-five{bottom:31%;right:8%}
.orb-six{bottom:16%;right:18%}.orb-seven{bottom:5%;left:49%}.orb-eight{bottom:16%;left:18%}.orb-nine{bottom:31%;left:8%}.orb-ten{top:39%;left:4%}
.orb-eleven{top:23%;left:8%}.orb-twelve{top:12%;left:18%}.orb-thirteen{top:10%;left:32%}.orb-fourteen{top:18%;right:31%}.orb-fifteen{top:50%;right:0%}
.orb-sixteen{bottom:18%;right:30%}.orb-seventeen{bottom:10%;left:31%}.orb-eighteen{top:50%;left:0%}.orb-nineteen{top:72%;left:21%}.orb-twenty{top:72%;right:21%}

/* ======================= ART HERO LOGO ======================= */
.hero-logo-stage--sigil {
  position: relative;
  width: clamp(225px, 18.8vw, 315px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  animation: medallionFloat 8.5s ease-in-out infinite;
}
.hero-red-flicker,
.hero-logo-aura,
.hero-logo-plinth,
.hero-logo-orbit,
.hero-orbital-nodes,
.hero-medallion,
.hero-logo-stage--sigil .hero-logo-sweep { position: absolute; }
.hero-red-flicker {
  inset: -8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(130,18,14,.44), rgba(84,11,10,.14) 32%, rgba(0,0,0,0) 65%),
    radial-gradient(circle at 40% 38%, rgba(255,88,60,.18), rgba(255,88,60,0) 24%),
    radial-gradient(circle at 62% 60%, rgba(255,88,60,.12), rgba(255,88,60,0) 20%);
  filter: blur(26px);
  animation: redFlickerCore 4s steps(10,end) infinite;
}
.hero-logo-aura {
  width: 76%; height: 76%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236,229,214,.08), rgba(236,229,214,.02) 48%, rgba(0,0,0,0) 72%), radial-gradient(circle, rgba(128,16,12,.18), rgba(0,0,0,0) 66%);
  filter: blur(16px);
  animation: auraPulse 4.8s ease-in-out infinite;
}
.hero-logo-plinth {
  left: 50%; bottom: 10%;
  width: 58%; height: 10%;
  transform: translateX(-50%) rotateX(72deg);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.95), rgba(0,0,0,.58) 42%, rgba(0,0,0,.16) 68%, transparent 80%);
  filter: blur(10px);
}
.hero-logo-orbit {
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 18px rgba(0,0,0,.24), inset 0 0 8px rgba(255,255,255,.02);
}
.hero-logo-orbit--far { inset: -1%; border: 1px solid rgba(188,68,50,.2); animation: orbitFarSpin 40s linear infinite; }
.hero-logo-orbit--outer { inset: 4%; border: 1px solid rgba(232,225,211,.18); animation: orbitOuterSpin 32s linear infinite; }
.hero-logo-orbit--outer::before { content:""; position:absolute; inset:-1px; border-radius:50%; border:1px dashed rgba(232,225,211,.1); }
.hero-logo-orbit--mid { inset: 10%; border: 1px solid rgba(206,84,62,.24); animation: orbitMidSpin 28s linear infinite reverse; }
.hero-logo-orbit--inner { inset: 18%; border: 1px solid rgba(232,225,211,.12); animation: orbitInnerSpin 22s linear infinite reverse; }
.hero-logo-orbit--far::before,
.hero-logo-orbit--far::after,
.hero-logo-orbit--mid::before,
.hero-logo-orbit--mid::after,
.hero-logo-orbit--inner::before,
.hero-logo-orbit--inner::after,
.hero-crest__orbit--far::before,
.hero-crest__orbit--far::after,
.hero-crest__orbit--mid::before,
.hero-crest__orbit--mid::after,
.hero-crest__orbit--inner::before,
.hero-crest__orbit--inner::after {
  content:"";
  position:absolute;
  border-radius:50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,238,225,.96), rgba(205,52,35,.92) 32%, rgba(83,12,10,.96) 72%, rgba(26,5,5,.98));
  box-shadow: 0 0 15px rgba(255,86,58,.44), 0 0 28px rgba(120,17,14,.2);
}
.hero-logo-orbit--far::before { width:14px; height:14px; top:8%; left:17%; }
.hero-logo-orbit--far::after { width:10px; height:10px; bottom:14%; right:11%; }
.hero-logo-orbit--mid::before { width:12px; height:12px; top:12%; right:16%; }
.hero-logo-orbit--mid::after { width:9px; height:9px; bottom:18%; left:10%; }
.hero-logo-orbit--inner::before { width:10px; height:10px; top:-5px; left:calc(50% - 5px); }
.hero-logo-orbit--inner::after { width:10px; height:10px; bottom:-5px; left:calc(50% - 5px); }
.hero-orbital-nodes { inset: 0; animation: nodesSpinOne 18s linear infinite; }
.hero-orbital-nodes span,
.hero-crest__nodes span {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,247,236,.96), rgba(255,126,90,.92) 26%, rgba(184,31,22,.96) 56%, rgba(65,8,7,.98) 100%);
  box-shadow: 0 0 14px rgba(255,98,68,.42), 0 0 26px rgba(120,17,15,.20), inset 0 0 4px rgba(255,255,255,.26);
}
.hero-orbital-nodes--one span:nth-child(1){top:8%;left:49%}.hero-orbital-nodes--one span:nth-child(2){top:49%;right:8%;width:11px;height:11px}.hero-orbital-nodes--one span:nth-child(3){bottom:10%;left:48%}.hero-orbital-nodes--one span:nth-child(4){top:47%;left:8%;width:10px;height:10px}
.hero-orbital-nodes--two{inset:10%;animation:nodesSpinTwo 24s linear infinite reverse}.hero-orbital-nodes--two span:nth-child(1){top:10%;left:25%;width:10px;height:10px}.hero-orbital-nodes--two span:nth-child(2){top:28%;right:8%;width:8px;height:8px}.hero-orbital-nodes--two span:nth-child(3){bottom:12%;left:18%;width:9px;height:9px}
.hero-orbital-nodes--three{inset:-4%;animation:nodesSpinThree 34s linear infinite}.hero-orbital-nodes--three span:nth-child(1){top:16%;left:10%;width:6px;height:6px}.hero-orbital-nodes--three span:nth-child(2){top:20%;right:12%;width:7px;height:7px}.hero-orbital-nodes--three span:nth-child(3){bottom:14%;right:18%;width:6px;height:6px}.hero-orbital-nodes--three span:nth-child(4){bottom:20%;left:12%;width:7px;height:7px}.hero-orbital-nodes--three span:nth-child(5){top:50%;left:50%;width:5px;height:5px;transform:translate(-50%,-50%)}
.hero-medallion {
  position: relative;
  z-index: 3;
  width: 72%;
  aspect-ratio: 1;
  transform-style: preserve-3d;
}
.hero-medallion-depth,
.hero-medallion-rim,
.hero-medallion-face,
.hero-medallion-glass,
.hero-crest__depth,
.hero-crest__rim,
.hero-crest__face,
.hero-crest__glass {
  position:absolute; inset:0; width:100%; height:100%; border-radius:50%;
}
.hero-medallion-depth,
.hero-crest__depth {
  z-index:0;
  transform: translate3d(0, 18px, -70px) scale(1.035);
  background: radial-gradient(circle at 50% 42%, #2a2825 0 58%, #12110f 67%, #070706 78%, #020202 100%);
  box-shadow: 0 54px 44px rgba(0,0,0,.88), 0 92px 90px rgba(0,0,0,.72), 0 0 28px rgba(0,0,0,.24);
}
.hero-medallion-rim,
.hero-crest__rim {
  z-index:1; inset:-4%; width:108%; height:108%; transform: translateZ(-12px);
  background: radial-gradient(circle at 50% 48%, rgba(229,220,205,.24), rgba(76,66,60,.14) 54%, rgba(23,20,19,.88) 74%, rgba(6,6,6,.98) 100%);
  border: 2px solid rgba(211,193,175,.38);
  box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 16px 34px rgba(0,0,0,.58), inset 0 -10px 18px rgba(0,0,0,.3);
}
.hero-medallion-face,
.hero-crest__face {
  z-index:2;
  object-fit: contain;
  transform: translateZ(22px);
  filter: drop-shadow(0 12px 16px rgba(0,0,0,.48));
}
.hero-medallion-glass,
.hero-crest__glass {
  z-index:3; transform: translateZ(34px);
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.24), rgba(255,255,255,0) 22%),
    linear-gradient(130deg, rgba(255,255,255,.12), rgba(255,255,255,0) 30% 58%, rgba(255,255,255,.14) 78%, rgba(255,255,255,0));
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px rgba(255,255,255,.12), inset 0 -12px 22px rgba(0,0,0,.32), inset 8px -10px 18px rgba(0,0,0,.12);
}
.hero-logo-stage--sigil .hero-logo-sweep {
  inset:0; border-radius:50%; background:linear-gradient(115deg, transparent 14%, rgba(255,255,255,.12) 40%, transparent 56%); mix-blend-mode:screen; transform:translateX(-140%); animation:sweepMove 4.8s ease-in-out infinite;
}

/* ======================= BRAND HERO CREST ======================= */
.hero-crest {
  position: relative;
  width: clamp(225px, 18.6vw, 312px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
  perspective: 1600px;
  isolation: isolate;
  animation: medallionFloat 8.2s ease-in-out infinite;
}
.hero-crest__flicker {
  position:absolute; inset:-10%; border-radius:50%; z-index:0;
  background:
    radial-gradient(circle at 50% 50%, rgba(120,18,14,.44), rgba(88,12,10,.18) 24%, rgba(48,7,6,.08) 48%, transparent 68%),
    radial-gradient(circle at 42% 38%, rgba(255,92,64,.18) 0, transparent 28%),
    radial-gradient(circle at 64% 60%, rgba(255,96,70,.10) 0, transparent 20%);
  filter: blur(34px);
  mix-blend-mode: screen;
  animation: redFlickerCore 3.8s steps(10, end) infinite, redFlickerDrift 12s ease-in-out infinite;
}
.hero-crest__aura {
  position:absolute; width:76%; height:76%; border-radius:50%; z-index:0;
  background: radial-gradient(circle at 50% 50%, rgba(232,225,211,.10), rgba(232,225,211,.03) 48%, transparent 72%), radial-gradient(circle at 50% 50%, rgba(128,16,12,.18), transparent 66%);
  filter: blur(22px);
  animation: auraPulse 4.8s ease-in-out infinite;
}
.hero-crest__shadow {
  position:absolute; left:50%; bottom:9%; width:56%; height:13%; z-index:0; border-radius:50%; transform:translateX(-50%) rotateX(72deg); background:radial-gradient(ellipse, rgba(0,0,0,.96), rgba(0,0,0,.62) 42%, rgba(0,0,0,.18) 68%, transparent 80%); filter: blur(10px);
}
.hero-crest__orbit { position:absolute; border-radius:50%; pointer-events:none; z-index:1; box-shadow:0 0 18px rgba(0,0,0,.26), inset 0 0 10px rgba(255,255,255,.02); }
.hero-crest__orbit--far { inset:-1%; border:1px solid rgba(188,68,50,.20); animation:orbitFarSpin 44s linear infinite; }
.hero-crest__orbit--far::before { width:14px; height:14px; top:8%; left:17%; }
.hero-crest__orbit--far::after { width:10px; height:10px; bottom:14%; right:11%; }
.hero-crest__orbit--outer { inset:4%; border:1px solid rgba(232,225,211,.18); box-shadow:0 0 0 1px rgba(255,255,255,.03) inset, 0 0 24px rgba(0,0,0,.26); animation:orbitOuterSpin 34s linear infinite; }
.hero-crest__orbit--outer::before { content:""; position:absolute; inset:-1px; border-radius:50%; border:1px dashed rgba(232,225,211,.10); }
.hero-crest__orbit--mid { inset:10%; border:1px solid rgba(206,84,62,.24); animation:orbitMidSpin 28s linear infinite reverse; }
.hero-crest__orbit--mid::before { width:12px; height:12px; top:12%; right:16%; }
.hero-crest__orbit--mid::after { width:9px; height:9px; bottom:18%; left:10%; }
.hero-crest__orbit--inner { inset:18%; border:1px solid rgba(232,225,211,.12); animation:orbitInnerSpin 22s linear infinite reverse; }
.hero-crest__orbit--inner::before { width:10px; height:10px; top:-5px; left:calc(50% - 5px); }
.hero-crest__orbit--inner::after { width:10px; height:10px; bottom:-5px; left:calc(50% - 5px); }
.hero-crest__nodes { position:absolute; inset:0; z-index:1; }
.hero-crest__nodes--one { animation:nodesSpinOne 18s linear infinite; }
.hero-crest__nodes--one span:nth-child(1) { top: 8%; left: 49%; width: 13px; height: 13px; }
.hero-crest__nodes--one span:nth-child(2) { top: 49%; right: 8%; width: 11px; height: 11px; }
.hero-crest__nodes--one span:nth-child(3) { bottom: 10%; left: 48%; width: 12px; height: 12px; }
.hero-crest__nodes--one span:nth-child(4) { top: 47%; left: 8%; width: 10px; height: 10px; }
.hero-crest__nodes--two { inset:10%; animation:nodesSpinTwo 24s linear infinite reverse; }
.hero-crest__nodes--two span:nth-child(1) { top: 10%; left: 25%; width: 10px; height: 10px; }
.hero-crest__nodes--two span:nth-child(2) { top: 28%; right: 8%; width: 8px; height: 8px; }
.hero-crest__nodes--two span:nth-child(3) { bottom: 12%; left: 18%; width: 9px; height: 9px; }
.hero-crest__nodes--three { inset:-4%; animation:nodesSpinThree 34s linear infinite; }
.hero-crest__nodes--three span:nth-child(1) { top: 16%; left: 10%; width: 6px; height: 6px; }
.hero-crest__nodes--three span:nth-child(2) { top: 20%; right: 12%; width: 7px; height: 7px; }
.hero-crest__nodes--three span:nth-child(3) { bottom: 14%; right: 18%; width: 6px; height: 6px; }
.hero-crest__nodes--three span:nth-child(4) { bottom: 20%; left: 12%; width: 7px; height: 7px; }
.hero-crest__nodes--three span:nth-child(5) { top: 50%; left: 50%; width: 5px; height: 5px; transform: translate(-50%, -50%); }
.hero-crest__medallion { position:relative; z-index:3; width:72%; aspect-ratio:1; transform-style:preserve-3d; }

/* ======================= KEYFRAMES ======================= */
@keyframes aiStageFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes aiGlowPulse { 0%,100%{opacity:.68;transform:scale(.96)} 50%{opacity:1;transform:scale(1.06)} }
@keyframes orbitSpin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes sweepMove { 0%, 18% { transform: translateX(-140%); opacity: 0; } 30%, 62% { opacity: .95; } 78%, 100% { transform: translateX(140%); opacity: 0; } }
@keyframes redFlickerCore { 0%,100%{opacity:.56} 20%{opacity:.78} 40%{opacity:.44} 60%{opacity:.82} 80%{opacity:.6} }
@keyframes redFlickerDrift { 0%{transform:translate(0,0) scale(1)} 50%{transform:translate(2px,-4px) scale(1.03)} 100%{transform:translate(-2px,2px) scale(1)} }
@keyframes auraPulse { 0%,100%{opacity:.7;transform:scale(.98)} 50%{opacity:1;transform:scale(1.04)} }
@keyframes orbitFarSpin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes orbitOuterSpin { from{transform:rotate(0)} to{transform:rotate(-360deg)} }
@keyframes orbitMidSpin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes orbitInnerSpin { from{transform:rotate(0)} to{transform:rotate(-360deg)} }
@keyframes nodesSpinOne { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes nodesSpinTwo { from{transform:rotate(0)} to{transform:rotate(-360deg)} }
@keyframes nodesSpinThree { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes medallionFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes fogMoveA { from{transform:translate(-22vw,-8vh) scale(1.25)} to{transform:translate(-10vw,-2vh) scale(1.34)} }
@keyframes fogMoveB { from{transform:translate(20vw,-12vh) scale(1)} to{transform:translate(8vw,-6vh) scale(1.18)} }

@keyframes sphereDriftLarge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}


@keyframes bloodGlowFlicker {
  0%, 100% { opacity: .9; filter: blur(18px) saturate(1.18) contrast(1.24); }
  12% { opacity: 1; }
  26% { opacity: .74; filter: blur(20px) saturate(1.28) contrast(1.34); }
  40% { opacity: .98; }
  53% { opacity: .8; }
  69% { opacity: 1; filter: blur(16px) saturate(1.24) contrast(1.38); }
  84% { opacity: .76; }
}
@keyframes bloodGlowBreathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1) translateX(0) translateY(0); }
  22% { transform: translate(-49.4%, -50.5%) scale(1.018) translateX(-6px) translateY(3px); }
  47% { transform: translate(-50.8%, -49.2%) scale(1.04) translateX(5px) translateY(-4px); }
  73% { transform: translate(-49.8%, -50.9%) scale(1.022) translateX(-4px) translateY(-3px); }
}
@keyframes bloodSmokeSwirl {
  0% { transform: translate(-50%, -50%) rotate(0deg) scale(1) skewX(0deg) skewY(0deg); }
  18% { transform: translate(-48.9%, -50.8%) rotate(58deg) scale(1.03) skewX(4deg) skewY(-1deg); }
  37% { transform: translate(-50.7%, -49.1%) rotate(137deg) scale(1.07) skewX(-3deg) skewY(2deg); }
  61% { transform: translate(-49.3%, -50.4%) rotate(221deg) scale(1.02) skewX(5deg) skewY(-2deg); }
  84% { transform: translate(-51.1%, -49.5%) rotate(309deg) scale(1.06) skewX(-4deg) skewY(2deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(1) skewX(0deg) skewY(0deg); }
}
@keyframes bloodSmokeFlicker {
  0%, 100% { opacity: .72; filter: blur(20px) contrast(1.46) saturate(1.22); }
  14% { opacity: .88; }
  29% { opacity: .62; filter: blur(24px) contrast(1.62) saturate(1.34); }
  43% { opacity: .9; }
  57% { opacity: .7; filter: blur(18px) contrast(1.48) saturate(1.28); }
  74% { opacity: .84; }
  89% { opacity: .66; filter: blur(22px) contrast(1.58) saturate(1.3); }
}

@keyframes amberSphereGlow {
  0%, 100% { opacity: .66; transform: translate(-50%, -50%) scale(.92); filter: blur(21px) saturate(1.02); }
  50% { opacity: .82; transform: translate(-50%, -50%) scale(1.01); filter: blur(18px) saturate(1.08); }
}

/* ======================= RESPONSIVE ======================= */
@media (max-width: 1200px) {
  .hero-artwork::before { width: min(102vw, 1120px); }
  .hero-artwork::after { width: min(108vw, 1180px); }
  .background-sphere { width: min(90vw, 980px); }
  .portal-link--ai { left: 6%; top: 60%; }
  .portal-link--art { left: 50%; top: 61%; transform: translateX(-50%); }
  .portal-link--brand { right: 6%; top: 60%; }
}

@media (max-width: 900px) {
  .darkimages-site {
    padding: 0;
    isolation: isolate;
    background-color: #000;
    background-image: url('assets/witches-bg-mobile.png');
    background-position: center 26%;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
  }
  .hero-hub { min-height: 100vh; width: 100%; position: relative; z-index: 2; }
  .hero-artwork {
    inset: 0;
    height: 100vh;
    min-height: 100vh;
    display: block;
    overflow: hidden;
  }
  .background-sphere,
  .background-sphere::before,
  .background-sphere::after,
  .background-sphere-depth,
  .background-sphere-rim,
  .background-sphere-glass,
  .hero-artwork-image {
    display: none !important;
  }
  .darkimages-site::before {
    display: block !important;
    z-index: 0;
    opacity: 1;
  }
  .darkimages-site::after {
    z-index: 1;
  }
  .hero-artwork::before,
  .hero-artwork::after {
    display: block !important;
  }
  .hero-artwork::before {
    width: min(125vw, 960px);
  }
  .hero-artwork::after {
    width: min(132vw, 1040px);
  }
  .portal-links {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: max(56vh, 400px);
    justify-items: center;
    padding-bottom: 14px;
  }
  .portal-link,
  .portal-link--art,
  .portal-link:hover,
  .portal-link:focus-visible,
  .portal-link--art:hover,
  .portal-link--art:focus-visible {
    position: relative;
    left: auto; right: auto; top: auto; bottom: auto;
    transform: none;
  }
  .hero-logo-stage--ai,
  .hero-logo-stage--sigil,
  .hero-crest { width: min(72vw, 320px); }
}

@media (max-width: 560px) {
  .site-badge {
    top: 10px; left: 10px; right: 10px;
    justify-content: center;
    gap: 8px;
    font-size: 8px;
  }
  .site-badge i { width: 20px; }
  .hero-artwork::before { width: min(118vw, 700px); }
  .hero-artwork::after { width: min(124vw, 760px); }
  .portal-links { margin-top: max(58vh, 390px); }
  .portal-caption { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   GLASS SPHERE PASS — remove all orbiting orbs/elements
   ========================================================= */
.hero-orb-cluster,
.hero-orb,
.hero-logo-orbit,
.hero-orbital-nodes,
.hero-crest__orbit,
.hero-crest__nodes {
  display: none !important;
}

.hero-logo-stage--ai,
.hero-logo-stage--sigil,
.hero-crest {
  overflow: visible;
}

.hero-logo-stage--ai,
.hero-logo-stage--sigil,
.hero-crest,
.hero-medallion,
.hero-crest__medallion,
.ai-sphere {
  transform-style: preserve-3d;
}

/* AI sphere */
.ai-sphere {
  position: relative;
  z-index: 2;
  width: 74%;
  aspect-ratio: 1;
  animation: sphereDrift 8.2s ease-in-out infinite;
}
.ai-sphere::before {
  content: "";
  position: absolute;
  inset: 16%;
  z-index: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 46%, rgba(44,28,25,.42), rgba(28,16,15,.58) 24%, rgba(90,18,14,.26) 42%, rgba(16,8,8,.18) 60%, rgba(0,0,0,0) 76%),
    radial-gradient(ellipse at 50% 78%, rgba(22,12,12,.46), rgba(70,14,12,.18) 28%, rgba(0,0,0,0) 62%);
  filter: blur(10px);
  transform: translateZ(8px);
  pointer-events: none;
}
.ai-sphere::after {
  content: "";
  position: absolute;
  left: 20%;
  right: 20%;
  bottom: 18%;
  height: 18%;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(18,10,10,.72), rgba(66,12,12,.32) 28%, rgba(36,8,8,.14) 52%, rgba(0,0,0,0) 76%);
  filter: blur(12px);
  transform: translateZ(14px);
  pointer-events: none;
}
.ai-sphere-depth,
.ai-sphere-rim,
.ai-sphere-glass {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.ai-sphere-depth {
  z-index: 0;
  transform: translate3d(0, 18px, -72px) scale(1.04);
  background: radial-gradient(circle at 50% 42%, #222120 0 58%, #11100f 67%, #060606 80%, #020202 100%);
  box-shadow: 0 54px 44px rgba(0,0,0,.88), 0 92px 90px rgba(0,0,0,.72), 0 0 28px rgba(0,0,0,.24);
}
.ai-sphere-rim {
  z-index: 1;
  inset: -4%;
  width: 108%;
  height: 108%;
  transform: translateZ(-12px);
  background: radial-gradient(circle at 50% 42%, rgba(255,247,238,.38), rgba(124,102,92,.18) 48%, rgba(22,18,17,.88) 72%, rgba(6,6,6,.98) 100%);
  border: 2px solid rgba(211,193,175,.34);
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset, 0 16px 34px rgba(0,0,0,.58), inset 0 -10px 18px rgba(0,0,0,.3);
}
.ai-logo-fill {
  display: none !important;
  position: absolute;
  inset: 11%;
  z-index: 2;
  width: 78%;
  height: 78%;
  margin: auto;
  transform: translateZ(18px) scale(1.015);
  background:
    radial-gradient(circle at 50% 20%, rgba(58,36,33,.72), rgba(34,20,19,.86) 22%, rgba(78,14,14,.58) 42%, rgba(36,8,8,.46) 62%, rgba(0,0,0,0) 100%),
    linear-gradient(180deg, rgba(42,26,24,.88) 0%, rgba(26,16,16,.92) 34%, rgba(64,14,14,.76) 62%, rgba(22,8,8,.68) 100%);
  -webkit-mask-image: url('assets/paulbooth-ai-logo-swapped.png');
  mask-image: url('assets/paulbooth-ai-logo-swapped.png');
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: .92;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.42)) drop-shadow(0 0 12px rgba(20,8,8,.34));
  pointer-events: none;
}
.hero-logo-stage--ai .official-logo {
  position: absolute;
  inset: 11%;
  z-index: 3;
  width: 78%;
  height: 78%;
  margin: auto;
  object-fit: contain;
  transform: translateZ(24px);
  opacity: 1;
  mix-blend-mode: normal;
  filter: brightness(2.05) contrast(1.24) saturate(1.14) drop-shadow(0 12px 16px rgba(0,0,0,.38)) drop-shadow(0 0 18px rgba(255, 246, 240, .2));
}
.ai-sphere-glass {
  z-index: 3;
  transform: translateZ(34px);
  background:
    radial-gradient(circle at 31% 23%, rgba(255,255,255,.42), rgba(255,255,255,0) 22%),
    radial-gradient(circle at 64% 68%, rgba(255,255,255,.1), rgba(255,255,255,0) 30%),
    linear-gradient(130deg, rgba(255,255,255,.18), rgba(255,255,255,0) 30% 58%, rgba(255,255,255,.22) 78%, rgba(255,255,255,0));
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: inset 0 1px rgba(255,255,255,.24), inset 0 -14px 24px rgba(0,0,0,.24), inset 8px -10px 18px rgba(0,0,0,.06), 0 0 38px rgba(255,255,255,.14);
}

/* Shared glass-sphere feel for Art and Brand */
.hero-medallion,
.hero-crest__medallion {
  animation: sphereDrift 8.6s ease-in-out infinite;
}
.hero-medallion-rim,
.hero-crest__rim {
  border-width: 2px;
  border-color: rgba(218, 204, 189, .36);
  background:
    radial-gradient(circle at 50% 44%, rgba(239,232,220,.18), rgba(90,81,74,.12) 54%, rgba(18,16,15,.92) 76%, rgba(5,5,5,.99) 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 20px 44px rgba(0,0,0,.56),
    0 0 24px rgba(255,255,255,.04);
}
.hero-medallion-glass,
.hero-crest__glass {
  background:
    radial-gradient(circle at 31% 23%, rgba(255,255,255,.32), rgba(255,255,255,0) 20%),
    radial-gradient(circle at 64% 68%, rgba(255,255,255,.07), rgba(255,255,255,0) 28%),
    linear-gradient(130deg, rgba(255,255,255,.14), rgba(255,255,255,0) 30% 58%, rgba(255,255,255,.16) 78%, rgba(255,255,255,0));
  border-color: rgba(255,255,255,.12);
  box-shadow: inset 0 1px rgba(255,255,255,.14), inset 0 -14px 24px rgba(0,0,0,.3), inset 8px -10px 18px rgba(0,0,0,.1);
}
.hero-medallion-face,
.hero-crest__face {
  inset: 11%;
  width: 78%;
  height: 78%;
  margin: auto;
  object-fit: contain;
}

/* Tone down extra effects so the spheres read cleaner */
.hero-red-flicker,
.hero-crest__flicker {
  opacity: .6;
}
.hero-logo-aura,
.hero-crest__aura,
.hero-logo-glow {
  opacity: .75;
}
.hero-logo-sweep {
  opacity: .78;
}

@keyframes sphereDrift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Mouse-responsive parallax for the large background glass sphere */
.hero-background-sphere,
.hero-artwork-image,
.hero-background-sphere-glass {
  will-change: transform;
}
.hero-background-sphere {
  transition: transform .18s ease-out;
}
.hero-artwork-image,
.hero-background-sphere-glass {
  transition: transform .22s ease-out;
}
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .hero-background-sphere,
  .hero-artwork-image,
  .hero-background-sphere-glass {
    transition: none;
    transform: none !important;
  }
}

/* =========================================================
   AUTHORITATIVE INNER-SPHERE SHADOW PASS
   Deepens the shadows INSIDE every glass sphere.
   ========================================================= */
.background-sphere-glass,
.ai-sphere-glass,
.hero-medallion-glass,
.hero-crest__glass {
  background:
    radial-gradient(circle at 28% 20%, rgba(255,255,255,.24), rgba(255,255,255,0) 17%),
    radial-gradient(circle at 68% 70%, rgba(0,0,0,.34), rgba(0,0,0,0) 42%),
    radial-gradient(circle at 50% 82%, rgba(0,0,0,.62), rgba(0,0,0,0) 46%),
    radial-gradient(circle at 10% 50%, rgba(0,0,0,.36), rgba(0,0,0,0) 38%),
    radial-gradient(circle at 90% 52%, rgba(0,0,0,.42), rgba(0,0,0,0) 38%),
    linear-gradient(135deg, rgba(255,255,255,.11), rgba(255,255,255,0) 28% 55%, rgba(0,0,0,.28) 76%, rgba(0,0,0,.5));
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.10),
    inset 0 -28px 44px rgba(0,0,0,.62),
    inset 20px -18px 34px rgba(0,0,0,.30),
    inset -20px -18px 34px rgba(0,0,0,.34),
    inset 0 0 40px rgba(0,0,0,.22) !important;
}

.background-sphere-rim,
.ai-sphere-rim,
.hero-medallion-rim,
.hero-crest__rim {
  background:
    radial-gradient(circle at 48% 36%, rgba(227,220,208,.11), rgba(52,47,43,.10) 40%, rgba(12,11,10,.72) 68%, rgba(2,2,2,.99) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.035) inset,
    inset 0 -20px 30px rgba(0,0,0,.58),
    inset 18px -12px 26px rgba(0,0,0,.24),
    inset -18px -12px 26px rgba(0,0,0,.28),
    0 22px 46px rgba(0,0,0,.58) !important;
}

.background-sphere-depth,
.ai-sphere-depth,
.hero-medallion-depth,
.hero-crest__depth {
  background:
    radial-gradient(circle at 46% 34%, #161514 0 40%, #0a0909 58%, #030303 78%, #000 100%) !important;
}

.hero-artwork-image {
  filter: saturate(.9) contrast(1.1) brightness(.80) !important;
}

.hero-logo-stage--ai .official-logo,
.hero-medallion-face,
.hero-crest__face {
  filter:
    brightness(1.35)
    contrast(1.22)
    drop-shadow(0 10px 14px rgba(0,0,0,.74))
    drop-shadow(0 0 12px rgba(0,0,0,.34)) !important;
}

/* =========================================================
   LOGO SPHERES — remove visible outline lines
   Keeps the glass depth, shadows, glow and hover behavior.
   ========================================================= */
.ai-sphere-rim,
.hero-medallion-rim,
.hero-crest__rim,
.ai-sphere-glass,
.hero-medallion-glass,
.hero-crest__glass {
  border: 0 !important;
  outline: 0 !important;
}

.ai-sphere-rim,
.hero-medallion-rim,
.hero-crest__rim {
  box-shadow:
    inset 0 -20px 30px rgba(0,0,0,.58),
    inset 18px -12px 26px rgba(0,0,0,.24),
    inset -18px -12px 26px rgba(0,0,0,.28),
    0 22px 46px rgba(0,0,0,.58) !important;
}

.morph-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}


/* =========================================================
   MOBILE TUNING — brighter PaulBooth.ai sphere + larger faces
   ========================================================= */
@media (max-width: 900px) {
  .darkimages-site {
    background-position: center 20%;
    background-size: 122% auto;
  }

  .portal-links {
    margin-top: max(58vh, 420px);
  }

  .ai-sphere::before {
    background:
      radial-gradient(circle at 50% 46%, rgba(54,34,29,.24), rgba(28,16,15,.28) 24%, rgba(90,18,14,.14) 42%, rgba(16,8,8,.06) 60%, rgba(0,0,0,0) 76%),
      radial-gradient(ellipse at 50% 78%, rgba(22,12,12,.18), rgba(70,14,12,.08) 28%, rgba(0,0,0,0) 62%);
    filter: blur(8px);
  }

  .ai-sphere::after {
    background: radial-gradient(ellipse at center, rgba(18,10,10,.34), rgba(66,12,12,.14) 28%, rgba(36,8,8,.06) 52%, rgba(0,0,0,0) 76%);
    filter: blur(10px);
  }

  .ai-sphere-depth {
    background: radial-gradient(circle at 46% 34%, #201d1b 0 42%, #100e0d 60%, #050404 80%, #010101 100%) !important;
  }

  .ai-sphere-rim {
    background:
      radial-gradient(circle at 48% 36%, rgba(234,226,214,.18), rgba(88,78,70,.14) 42%, rgba(18,16,15,.58) 70%, rgba(4,4,4,.96) 100%) !important;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.045) inset,
      inset 0 -12px 18px rgba(0,0,0,.36),
      inset 12px -10px 18px rgba(0,0,0,.14),
      inset -12px -10px 18px rgba(0,0,0,.16),
      0 18px 34px rgba(0,0,0,.46) !important;
  }

  .ai-sphere-glass {
    background:
      radial-gradient(circle at 28% 20%, rgba(255,255,255,.34), rgba(255,255,255,0) 18%),
      radial-gradient(circle at 68% 70%, rgba(0,0,0,.16), rgba(0,0,0,0) 42%),
      radial-gradient(circle at 50% 82%, rgba(0,0,0,.26), rgba(0,0,0,0) 46%),
      radial-gradient(circle at 10% 50%, rgba(0,0,0,.16), rgba(0,0,0,0) 38%),
      radial-gradient(circle at 90% 52%, rgba(0,0,0,.18), rgba(0,0,0,0) 38%),
      linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,0) 28% 55%, rgba(0,0,0,.14) 76%, rgba(0,0,0,.24)) !important;
    box-shadow:
      inset 0 2px 2px rgba(255,255,255,.14),
      inset 0 -16px 24px rgba(0,0,0,.32),
      inset 12px -10px 18px rgba(0,0,0,.16),
      inset -12px -10px 18px rgba(0,0,0,.16),
      inset 0 0 24px rgba(0,0,0,.10),
      0 0 22px rgba(255,255,255,.05) !important;
  }

  .hero-logo-stage--ai .official-logo,
  .hero-logo-stage--ai .ai-logo-fill {
  display: none !important;
    filter:
      brightness(1.62)
      contrast(1.28)
      saturate(1.06)
      drop-shadow(0 8px 12px rgba(0,0,0,.58))
      drop-shadow(0 0 10px rgba(255,255,255,.08)) !important;
    opacity: 1 !important;
  }
}

@media (max-width: 560px) {
  .darkimages-site {
    background-position: center 18%;
    background-size: 132% auto;
  }

  .portal-links {
    margin-top: max(60vh, 430px);
  }

  .hero-logo-stage--ai,
  .hero-logo-stage--sigil,
  .hero-crest {
    width: min(74vw, 330px);
  }
}


/* =========================================================
   MOBILE LEGIBILITY — brighten all three logo spheres
   ========================================================= */
@media (max-width: 900px) {
  .portal-caption {
    color: #fff8ec !important;
    font-size: clamp(15px, 4.2vw, 18px) !important;
    font-weight: 600 !important;
    letter-spacing: .09em !important;
    text-shadow:
      0 1px 0 #000,
      0 -1px 0 #000,
      1px 0 0 #000,
      -1px 0 0 #000,
      0 2px 8px rgba(0,0,0,.95),
      0 0 12px rgba(255,220,170,.28) !important;
    opacity: 1 !important;
  }

  .hero-logo-stage--ai .official-logo {
    filter:
      brightness(2.65)
      contrast(1.34)
      saturate(1.12)
      drop-shadow(0 5px 8px rgba(0,0,0,.48))
      drop-shadow(0 0 14px rgba(255,236,214,.18)) !important;
    opacity: 1 !important;
  }

  .hero-medallion-face {
    filter:
      brightness(1.72)
      contrast(1.18)
      saturate(1.08)
      drop-shadow(0 5px 9px rgba(0,0,0,.48))
      drop-shadow(0 0 12px rgba(255,210,150,.16)) !important;
    opacity: 1 !important;
  }

  .hero-crest__face {
    filter:
      brightness(2.05)
      contrast(1.24)
      saturate(1.08)
      drop-shadow(0 5px 9px rgba(0,0,0,.50))
      drop-shadow(0 0 12px rgba(255,220,180,.16)) !important;
    opacity: 1 !important;
  }

  .ai-sphere-glass,
  .hero-medallion-glass,
  .hero-crest__glass {
    background:
      radial-gradient(circle at 29% 20%, rgba(255,255,255,.38), rgba(255,255,255,.08) 12%, rgba(255,255,255,0) 24%),
      radial-gradient(circle at 70% 72%, rgba(0,0,0,.11), rgba(0,0,0,0) 40%),
      radial-gradient(circle at 50% 84%, rgba(0,0,0,.18), rgba(0,0,0,0) 44%),
      linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0) 32% 62%, rgba(0,0,0,.10) 82%, rgba(0,0,0,.18)) !important;
    box-shadow:
      inset 0 2px 2px rgba(255,255,255,.16),
      inset 0 -12px 20px rgba(0,0,0,.22),
      inset 8px -8px 14px rgba(0,0,0,.10),
      inset -8px -8px 14px rgba(0,0,0,.10),
      0 0 28px rgba(255,240,220,.08) !important;
    opacity: .82 !important;
  }

  .ai-sphere-rim,
  .hero-medallion-rim,
  .hero-crest__rim {
    background:
      radial-gradient(circle at 48% 36%, rgba(244,235,222,.24), rgba(112,95,82,.14) 42%, rgba(24,20,18,.46) 72%, rgba(5,5,5,.92) 100%) !important;
    box-shadow:
      inset 0 -10px 16px rgba(0,0,0,.28),
      inset 8px -7px 12px rgba(0,0,0,.10),
      inset -8px -7px 12px rgba(0,0,0,.10),
      0 16px 30px rgba(0,0,0,.42) !important;
  }

  .hero-logo-glow,
  .hero-logo-aura,
  .hero-crest__aura {
    opacity: 1 !important;
  }
}


/* =========================================================
   FINAL MOBILE VISIBILITY OVERRIDE — loaded last intentionally
   ========================================================= */
@media (max-width: 900px) {
  .portal-caption {
    color: #fffaf0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;
    text-shadow:
      0 0 2px #000,
      0 0 5px #000,
      0 2px 8px #000,
      0 0 16px rgba(255,228,190,.42) !important;
  }

  .ai-sphere-glass,
  .hero-medallion-glass,
  .hero-crest__glass {
    opacity: .22 !important;
    background:
      radial-gradient(circle at 28% 20%, rgba(255,255,255,.26), rgba(255,255,255,0) 23%),
      linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,0) 45%, rgba(0,0,0,.06)) !important;
    box-shadow: inset 0 1px 1px rgba(255,255,255,.18), inset 0 -6px 12px rgba(0,0,0,.10) !important;
  }

  .ai-sphere::before,
  .ai-sphere::after {
    opacity: .22 !important;
  }

  .ai-sphere-depth,
  .hero-medallion-depth,
  .hero-crest__depth {
    background: radial-gradient(circle at 48% 38%, #4a4038 0%, #2d2521 38%, #15100e 68%, #050303 100%) !important;
  }

  .ai-sphere-rim,
  .hero-medallion-rim,
  .hero-crest__rim {
    background: radial-gradient(circle at 48% 36%, rgba(255,244,226,.34), rgba(143,116,94,.20) 43%, rgba(44,33,28,.48) 72%, rgba(6,5,5,.94) 100%) !important;
    box-shadow: inset 0 -8px 14px rgba(0,0,0,.20), 0 12px 24px rgba(0,0,0,.38) !important;
  }

  .hero-logo-stage--ai .official-logo {
    filter:
      brightness(3.35)
      contrast(1.15)
      saturate(1.22)
      drop-shadow(0 3px 6px rgba(0,0,0,.35))
      drop-shadow(0 0 16px rgba(255,220,185,.28)) !important;
    mix-blend-mode: screen !important;
  }

  .hero-medallion-face {
    filter:
      brightness(2.20)
      contrast(1.08)
      saturate(1.18)
      drop-shadow(0 3px 6px rgba(0,0,0,.30))
      drop-shadow(0 0 14px rgba(255,200,130,.24)) !important;
  }

  .hero-crest__face {
    filter:
      brightness(2.60)
      contrast(1.10)
      saturate(1.16)
      drop-shadow(0 3px 6px rgba(0,0,0,.32))
      drop-shadow(0 0 14px rgba(255,215,170,.22)) !important;
  }

  .hero-logo-stage--ai .hero-logo-glow,
  .hero-logo-aura,
  .hero-crest__aura {
    opacity: 1 !important;
    filter: blur(18px) brightness(1.35) !important;
  }
}


/* =========================================================
   ABSOLUTE MOBILE SHADOW REMOVAL — logo spheres fully readable
   ========================================================= */
@media (max-width: 900px) {
  .ai-sphere::before,
  .ai-sphere::after {
    display: none !important;
  }

  .ai-sphere-depth,
  .hero-medallion-depth,
  .hero-crest__depth {
    background: radial-gradient(circle at 50% 42%, #2d2825 0%, #171413 44%, #090808 76%, #030303 100%) !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .ai-sphere-rim,
  .hero-medallion-rim,
  .hero-crest__rim {
    background:
      radial-gradient(circle at 48% 36%, rgba(255,247,236,.22), rgba(152,132,114,.10) 42%, rgba(28,24,22,.18) 70%, rgba(5,5,5,.42) 100%) !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .ai-sphere-glass,
  .hero-medallion-glass,
  .hero-crest__glass {
    opacity: .52 !important;
    background:
      radial-gradient(circle at 27% 18%, rgba(255,255,255,.48), rgba(255,255,255,.18) 11%, rgba(255,255,255,0) 24%),
      radial-gradient(circle at 72% 72%, rgba(255,255,255,.08), rgba(255,255,255,0) 22%),
      linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,0) 36%, rgba(255,255,255,.08) 70%, rgba(255,255,255,0)) !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .hero-logo-stage--ai .official-logo,
  .hero-medallion-face,
  .hero-crest__face {
    mix-blend-mode: normal !important;
    opacity: 1 !important;
  }

  .hero-logo-stage--ai .official-logo {
    filter:
      brightness(3.55)
      contrast(1.22)
      saturate(1.24)
      drop-shadow(0 0 10px rgba(255,225,195,.26)) !important;
  }

  .hero-medallion-face {
    filter:
      brightness(2.45)
      contrast(1.12)
      saturate(1.12)
      drop-shadow(0 0 8px rgba(255,214,150,.18)) !important;
  }

  .hero-crest__face {
    filter:
      brightness(2.85)
      contrast(1.14)
      saturate(1.12)
      drop-shadow(0 0 8px rgba(255,224,180,.18)) !important;
  }

  .portal-caption {
    color: #fffaf0 !important;
    opacity: 1 !important;
    text-shadow:
      0 0 2px rgba(0,0,0,.72),
      0 1px 6px rgba(0,0,0,.72),
      0 0 10px rgba(255,230,195,.18) !important;
  }
}


/* =========================================================
   TRUE MOBILE SHADOW REMOVAL — no dark layers over logo art
   ========================================================= */
@media screen and (max-width: 900px), screen and (pointer: coarse) {
  .portal-link,
  .portal-link:hover,
  .portal-link:focus-visible {
    filter: none !important;
    box-shadow: none !important;
  }

  .ai-sphere,
  .hero-medallion,
  .hero-crest__medallion {
    background: rgba(22, 16, 14, .22) !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .ai-sphere::before,
  .ai-sphere::after,
  .ai-sphere-depth,
  .ai-sphere-rim,
  .ai-sphere-glass,
  .hero-medallion-depth,
  .hero-medallion-rim,
  .hero-medallion-glass,
  .hero-crest__depth,
  .hero-crest__rim,
  .hero-crest__glass {
    display: none !important;
    opacity: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .hero-logo-stage--ai .official-logo,
  .hero-medallion-face,
  .hero-crest__face {
    position: absolute !important;
    inset: 6% !important;
    width: 88% !important;
    height: 88% !important;
    margin: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    mix-blend-mode: normal !important;
    box-shadow: none !important;
  }

  .hero-logo-stage--ai .official-logo {
    filter: brightness(2.8) contrast(1.2) saturate(1.16) !important;
  }

  .hero-medallion-face {
    filter: brightness(1.7) contrast(1.1) saturate(1.08) !important;
  }

  .hero-crest__face {
    filter: brightness(2.0) contrast(1.12) saturate(1.08) !important;
  }

  .portal-caption {
    color: #fffaf2 !important;
    opacity: 1 !important;
    filter: none !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.7) !important;
  }
}


/* =========================================================
   FINAL MOBILE NO-DROP-SHADOW ENFORCEMENT
   ========================================================= */
@media screen and (max-width: 900px), screen and (pointer: coarse) {
  .portal-link,
  .portal-link:hover,
  .portal-link:focus-visible,
  .portal-link::before,
  .portal-link::after,
  .portal-link *,
  .portal-link *::before,
  .portal-link *::after {
    box-shadow: none !important;
    filter: none !important;
  }

  .portal-link::before,
  .hero-logo-stage--ai .hero-logo-glow,
  .hero-crest__aura,
  .hero-crest__shadow,
  .hero-crest__orbit,
  .hero-crest__nodes {
    display: none !important;
    opacity: 0 !important;
  }

  .portal-link,
  .portal-link:hover,
  .portal-link:focus-visible {
    filter: none !important;
    transform: none !important;
  }

  .ai-sphere,
  .hero-medallion,
  .hero-crest__medallion {
    background: rgba(16, 12, 11, .08) !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .ai-sphere::before,
  .ai-sphere::after,
  .ai-sphere-depth,
  .ai-sphere-rim,
  .ai-sphere-glass,
  .hero-medallion-depth,
  .hero-medallion-rim,
  .hero-medallion-glass,
  .hero-crest__depth,
  .hero-crest__rim,
  .hero-crest__glass {
    display: none !important;
    opacity: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .hero-logo-stage--ai .official-logo,
  .hero-medallion-face,
  .hero-crest__face {
    position: absolute !important;
    inset: 6% !important;
    width: 88% !important;
    height: 88% !important;
    margin: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    mix-blend-mode: normal !important;
    box-shadow: none !important;
  }

  .hero-logo-stage--ai .official-logo {
    filter: brightness(3.0) contrast(1.18) saturate(1.12) !important;
  }

  .hero-medallion-face {
    filter: brightness(1.95) contrast(1.08) saturate(1.04) !important;
  }

  .hero-crest__face {
    filter: brightness(2.2) contrast(1.08) saturate(1.04) !important;
  }

  .portal-caption {
    color: #fffaf2 !important;
    opacity: 1 !important;
    filter: none !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.65) !important;
  }
}


/* =========================================================
   MOBILE LOGO SPHERE FLATTENING — remove dark backing entirely
   ========================================================= */
@media screen and (max-width: 900px), screen and (pointer: coarse) {
  .hero-logo-stage--ai,
  .hero-medallion,
  .hero-crest__medallion,
  .ai-sphere {
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    border: 0 !important;
    outline: 0 !important;
  }

  .hero-logo-stage--ai,
  .hero-medallion,
  .hero-crest__medallion {
    width: min(78vw, 350px) !important;
    aspect-ratio: 1 / 1 !important;
  }

  .hero-logo-stage--ai::before,
  .hero-logo-stage--ai::after,
  .hero-medallion::before,
  .hero-medallion::after,
  .hero-crest__medallion::before,
  .hero-crest__medallion::after,
  .ai-sphere::before,
  .ai-sphere::after,
  .ai-sphere-depth,
  .ai-sphere-rim,
  .ai-sphere-glass,
  .hero-medallion-depth,
  .hero-medallion-rim,
  .hero-medallion-glass,
  .hero-crest__depth,
  .hero-crest__rim,
  .hero-crest__glass,
  .hero-crest__aura,
  .hero-crest__shadow,
  .hero-crest__orbit,
  .hero-crest__nodes,
  .hero-logo-stage--ai .hero-logo-glow,
  .hero-logo-stage--ai .hero-logo-sweep {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    box-shadow: none !important;
    filter: none !important;
    background: transparent !important;
  }

  .hero-logo-stage--ai .official-logo,
  .hero-medallion-face,
  .hero-crest__face {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    mix-blend-mode: normal !important;
    filter: none !important;
    box-shadow: none !important;
  }

  .hero-logo-stage--ai .official-logo {
    filter: brightness(3.8) contrast(1.3) saturate(1.16) !important;
  }

  .hero-medallion-face {
    filter: brightness(2.65) contrast(1.18) saturate(1.08) !important;
  }

  .hero-crest__face {
    filter: brightness(3.1) contrast(1.18) saturate(1.08) !important;
  }

  .portal-caption {
    color: #fffdf7 !important;
    opacity: 1 !important;
    font-size: clamp(1rem, 3.9vw, 1.25rem) !important;
    letter-spacing: .08em !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.45) !important;
  }
}


/* =========================================================
   GLASS EFFECT REMOVAL — remove glass overlays and sweeps
   ========================================================= */
.background-sphere-glass,
.ai-sphere-glass,
.hero-medallion-glass,
.hero-crest__glass,
.hero-logo-stage--ai .hero-logo-glow,
.hero-logo-stage--ai .hero-logo-sweep,
.hero-logo-stage--sigil .hero-logo-sweep,
.hero-crest__aura,
.hero-crest__shadow {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.background-sphere,
.ai-sphere,
.hero-medallion,
.hero-crest__medallion {
  backdrop-filter: none !important;
}


/* =========================================================
   REMOVE GLASS SPHERES — flatten all sphere containers
   ========================================================= */
.background-sphere,
.ai-sphere,
.hero-medallion,
.hero-crest__medallion {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  overflow: visible !important;
  backdrop-filter: none !important;
}

.background-sphere::before,
.background-sphere::after,
.ai-sphere::before,
.ai-sphere::after,
.background-sphere-depth,
.background-sphere-rim,
.background-sphere-glass,
.ai-sphere-depth,
.ai-sphere-rim,
.ai-sphere-glass,
.hero-medallion-depth,
.hero-medallion-rim,
.hero-medallion-glass,
.hero-crest__depth,
.hero-crest__rim,
.hero-crest__glass,
.hero-logo-stage--ai .hero-logo-glow,
.hero-logo-stage--ai .hero-logo-sweep,
.hero-logo-stage--sigil .hero-logo-sweep,
.hero-crest__aura,
.hero-crest__shadow {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

.hero-artwork-image,
.hero-logo-stage--ai .official-logo,
.hero-medallion-face,
.hero-crest__face {
  border-radius: 0 !important;
  box-shadow: none !important;
}

.hero-logo-stage--ai,
.hero-logo-stage--sigil,
.hero-crest {
  filter: none !important;
}


/* =========================================================
   LOGO-ONLY MODE — remove glass spheres and show breathing glowing logos
   ========================================================= */
.hero-logo-stage--ai,
.hero-logo-stage--sigil,
.hero-crest {
  filter: none !important;
}

.ai-sphere,
.hero-medallion,
.hero-crest__medallion {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  filter: none !important;
  backdrop-filter: none !important;
  animation: logoBreath 6.6s ease-in-out infinite !important;
}

.ai-sphere::before,
.ai-sphere::after,
.ai-sphere-depth,
.ai-sphere-rim,
.ai-sphere-glass,
.hero-medallion-depth,
.hero-medallion-rim,
.hero-medallion-glass,
.hero-crest__depth,
.hero-crest__rim,
.hero-crest__glass,
.hero-logo-sweep,
.hero-logo-orbit,
.hero-orbital-nodes,
.hero-red-flicker,
.hero-logo-aura,
.hero-logo-plinth,
.hero-crest__flicker,
.hero-crest__aura,
.hero-crest__shadow,
.hero-crest__orbit,
.hero-crest__nodes,
.hero-logo-stage--ai .hero-logo-glow {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.hero-logo-stage--ai .official-logo,
.hero-medallion-face,
.hero-crest__face {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  margin: 0 !important;
  border-radius: 0 !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
  animation: logoBreath 6.6s ease-in-out infinite !important;
}

.hero-logo-stage--ai .official-logo {
  filter: brightness(2.7) contrast(1.2) saturate(1.18)
    drop-shadow(0 0 16px rgba(255,246,236,.24))
    drop-shadow(0 0 34px rgba(255,168,128,.22)) !important;
}

.hero-medallion-face {
  filter: brightness(1.45) contrast(1.08) saturate(1.08)
    drop-shadow(0 0 16px rgba(255,232,206,.18))
    drop-shadow(0 0 28px rgba(182,64,56,.22)) !important;
}

.hero-crest__face {
  filter: brightness(1.78) contrast(1.12) saturate(1.1)
    drop-shadow(0 0 14px rgba(255,233,208,.20))
    drop-shadow(0 0 28px rgba(219,144,72,.22)) !important;
}

@keyframes logoBreath {
  0%, 100% {
    transform: scale(0.985);
  }
  50% {
    transform: scale(1.03);
  }
}

@media (max-width: 900px) {
  .hero-logo-stage--ai .official-logo,
  .hero-medallion-face,
  .hero-crest__face {
    inset: 4% !important;
    width: 92% !important;
    height: 92% !important;
  }

  .hero-logo-stage--ai .official-logo {
    filter: brightness(3.05) contrast(1.22) saturate(1.2)
      drop-shadow(0 0 14px rgba(255,246,236,.22))
      drop-shadow(0 0 24px rgba(255,168,128,.18)) !important;
  }

  .hero-medallion-face {
    filter: brightness(1.68) contrast(1.08) saturate(1.06)
      drop-shadow(0 0 12px rgba(255,232,206,.16))
      drop-shadow(0 0 20px rgba(182,64,56,.18)) !important;
  }

  .hero-crest__face {
    filter: brightness(2.0) contrast(1.1) saturate(1.08)
      drop-shadow(0 0 12px rgba(255,233,208,.18))
      drop-shadow(0 0 20px rgba(219,144,72,.18)) !important;
  }
}


/* =========================================================
   LOGO LINKS — REMOVE GLASS
   ========================================================= */
.ai-sphere,
.hero-medallion,
.hero-crest__medallion {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  overflow: visible !important;
}

.ai-sphere::before,
.ai-sphere::after,
.ai-sphere-depth,
.ai-sphere-rim,
.ai-sphere-glass,
.hero-medallion::before,
.hero-medallion::after,
.hero-medallion-depth,
.hero-medallion-rim,
.hero-medallion-glass,
.hero-crest__medallion::before,
.hero-crest__medallion::after,
.hero-crest__depth,
.hero-crest__rim,
.hero-crest__glass,
.hero-logo-sweep {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

.hero-logo-stage--ai .official-logo,
.hero-medallion-face,
.hero-crest__face {
  border-radius: 0 !important;
}


/* =========================================================
   TUNE LOGO BRIGHTNESS + RED/AMBER BREATHING GLOW
   ========================================================= */
.hero-logo-stage--ai .official-logo,
.hero-medallion-face,
.hero-crest__face {
  will-change: transform, filter;
}

.hero-logo-stage--ai .official-logo {
  animation: logoPulseAi 6.8s ease-in-out infinite !important;
  filter: brightness(1.56) contrast(1.14) saturate(1.08)
    drop-shadow(0 0 8px rgba(255,235,214,.08))
    drop-shadow(0 0 14px rgba(180,46,32,.14))
    drop-shadow(0 0 19px rgba(210,120,46,.10)) !important;
}

.hero-medallion-face {
  animation: logoPulseArt 6.8s ease-in-out infinite !important;
  filter: brightness(0.86) contrast(1.05) saturate(1.01)
    drop-shadow(0 0 7px rgba(255,225,196,.07))
    drop-shadow(0 0 13px rgba(170,42,30,.11))
    drop-shadow(0 0 17px rgba(200,112,44,.09)) !important;
}

.hero-crest__face {
  animation: logoPulseBrand 6.8s ease-in-out infinite !important;
  filter: brightness(1.10) contrast(1.07) saturate(1.03)
    drop-shadow(0 0 8px rgba(255,226,198,.08))
    drop-shadow(0 0 14px rgba(176,46,34,.13))
    drop-shadow(0 0 19px rgba(208,118,48,.10)) !important;
}

@keyframes logoPulseAi {
  0%, 100% {
    transform: scale(0.985);
    filter: brightness(1.00) contrast(1.13) saturate(1.06)
      drop-shadow(0 0 6px rgba(255,236,216,.08))
      drop-shadow(0 0 10px rgba(156,34,26,.10))
      drop-shadow(0 0 14px rgba(178,96,34,.08));
  }
  50% {
    transform: scale(1.035);
    filter: brightness(1.36) contrast(1.15) saturate(1.08)
      drop-shadow(0 0 8px rgba(255,240,222,.11))
      drop-shadow(0 0 16px rgba(194,46,30,.17))
      drop-shadow(0 0 22px rgba(228,134,42,.13));
  }
}

@keyframes logoPulseArt {
  0%, 100% {
    transform: scale(0.985);
    filter: brightness(0.62) contrast(1.04) saturate(1.0)
      drop-shadow(0 0 5px rgba(255,230,204,.05))
      drop-shadow(0 0 9px rgba(150,34,26,.08))
      drop-shadow(0 0 12px rgba(170,94,36,.06));
  }
  50% {
    transform: scale(1.03);
    filter: brightness(0.92) contrast(1.06) saturate(1.01)
      drop-shadow(0 0 7px rgba(255,236,214,.08))
      drop-shadow(0 0 14px rgba(186,44,30,.14))
      drop-shadow(0 0 18px rgba(218,126,44,.10));
  }
}

@keyframes logoPulseBrand {
  0%, 100% {
    transform: scale(0.985);
    filter: brightness(1.06) contrast(1.06) saturate(1.01)
      drop-shadow(0 0 6px rgba(255,231,206,.07))
      drop-shadow(0 0 10px rgba(152,36,28,.10))
      drop-shadow(0 0 14px rgba(174,98,38,.08));
  }
  50% {
    transform: scale(1.03);
    filter: brightness(1.16) contrast(1.07) saturate(1.02)
      drop-shadow(0 0 8px rgba(255,236,214,.10))
      drop-shadow(0 0 16px rgba(188,46,32,.16))
      drop-shadow(0 0 20px rgba(222,130,46,.12));
  }
}

@media (max-width: 900px) {
  .hero-logo-stage--ai .official-logo {
    filter: brightness(1.70) contrast(1.14) saturate(1.08)
      drop-shadow(0 0 6px rgba(255,236,216,.08))
      drop-shadow(0 0 12px rgba(180,46,32,.13))
      drop-shadow(0 0 16px rgba(210,120,46,.10)) !important;
  }

  .hero-medallion-face {
    filter: brightness(0.90) contrast(1.05) saturate(1.0)
      drop-shadow(0 0 5px rgba(255,230,204,.05))
      drop-shadow(0 0 10px rgba(170,42,30,.10))
      drop-shadow(0 0 14px rgba(200,112,44,.08)) !important;
  }

  .hero-crest__face {
    filter: brightness(1.24) contrast(1.06) saturate(1.02)
      drop-shadow(0 0 6px rgba(255,231,206,.07))
      drop-shadow(0 0 12px rgba(176,46,34,.12))
      drop-shadow(0 0 16px rgba(208,118,48,.10)) !important;
  }
}