/* =============================================================
   ADVANCED 3D — hero cube, octahedron, torus-knot
   Additive — layered on top of figures-3d.css
   ============================================================= */

/* ============ ADVANCED CUBE ============ */
.hero-cube-stage {
  perspective: 1600px;
  perspective-origin: 50% 40%;
  width: 100%;
  height: 520px;
  display: grid;
  place-items: center;
  position: relative;
}
.hero-cube {
  position: relative;
  width: 280px; height: 280px;
  transform-style: preserve-3d;
  animation: hero-cube-rotate 22s cubic-bezier(0.4,0,0.2,1) infinite;
}
@keyframes hero-cube-rotate {
  0%   { transform: rotateX(-25deg) rotateY(0)    rotateZ(0); }
  50%  { transform: rotateX(25deg)  rotateY(180deg) rotateZ(5deg); }
  100% { transform: rotateX(-25deg) rotateY(360deg) rotateZ(0); }
}
.hc-face {
  position: absolute;
  inset: 0;
  background:
    /* specular */
    radial-gradient(ellipse 80% 50% at 30% 15%, rgba(255,255,255,0.35) 0%, transparent 55%),
    /* rim */
    linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 30%),
    /* depth tint */
    linear-gradient(155deg, rgba(198,93,58,0.45), rgba(28,24,40,0.9)),
    /* inner ambient */
    radial-gradient(circle at 70% 90%, rgba(216,153,69,0.35), transparent 55%);
  border: 1px solid rgba(216,153,69,0.55);
  overflow: hidden;
  box-shadow:
    inset 0 0 40px rgba(0,0,0,0.5),
    inset 0 0 6px rgba(255,255,255,0.1);
}
/* etched tech pattern */
.hc-face::before {
  content: "";
  position: absolute;
  inset: 14px;
  background:
    linear-gradient(rgba(216,153,69,0.35) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216,153,69,0.35) 1px, transparent 1px),
    repeating-linear-gradient(45deg, transparent 0 16px, rgba(216,153,69,0.08) 16px 17px);
  background-size: 28px 28px, 28px 28px, auto;
  opacity: 0.7;
  pointer-events: none;
}
/* corner tick-marks */
.hc-face::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-top: 2px solid rgba(216,153,69,0.8);
  border-left: 2px solid rgba(216,153,69,0.8);
  width: 24px; height: 24px;
  box-shadow:
    calc(100% - 24px) 0   0 -2px rgba(216,153,69,0.8),
    0 calc(100% - 24px)   0 -2px rgba(216,153,69,0.8);
  pointer-events: none;
}
.hc-face.hc-front  { transform: translateZ(140px); }
.hc-face.hc-back   { transform: rotateY(180deg) translateZ(140px); }
.hc-face.hc-right  { transform: rotateY(90deg)  translateZ(140px); }
.hc-face.hc-left   { transform: rotateY(-90deg) translateZ(140px); }
.hc-face.hc-top    { transform: rotateX(90deg)  translateZ(140px); }
.hc-face.hc-bottom { transform: rotateX(-90deg) translateZ(140px); }

/* central glowing core */
.hero-cube .hc-core {
  position: absolute;
  top: 50%; left: 50%;
  width: 40px; height: 40px;
  margin: -20px 0 0 -20px;
  background: radial-gradient(circle, #fff 0%, #ffd08a 40%, #c65d3a 75%, transparent 100%);
  border-radius: 50%;
  box-shadow: 0 0 30px #d89945, 0 0 60px rgba(216,153,69,0.5);
  animation: hc-core-pulse 2.2s ease-in-out infinite;
  filter: blur(1px);
}
@keyframes hc-core-pulse {
  0%,100% { transform: scale(1); opacity: 0.85; }
  50%     { transform: scale(1.4); opacity: 1; }
}
/* orbiting rings around cube */
.hero-cube .hc-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 400px; height: 400px;
  margin: -200px 0 0 -200px;
  border: 1px solid rgba(216,153,69,0.35);
  border-radius: 50%;
  transform-style: preserve-3d;
}
.hero-cube .hc-ring.r1 { animation: hc-ring-spin 10s linear infinite; }
.hero-cube .hc-ring.r2 { animation: hc-ring-spin-b 14s linear infinite reverse; border-color: rgba(198,93,58,0.4); width: 460px; height: 460px; margin: -230px 0 0 -230px;}
.hero-cube .hc-ring.r3 { animation: hc-ring-spin-c 18s linear infinite; border-color: rgba(58,90,120,0.4); width: 520px; height: 520px; margin: -260px 0 0 -260px; }
@keyframes hc-ring-spin   { to { transform: rotateX(80deg) rotateZ(360deg); } }
@keyframes hc-ring-spin-b { to { transform: rotateY(70deg) rotateZ(360deg); } }
@keyframes hc-ring-spin-c { to { transform: rotateX(60deg) rotateY(60deg) rotateZ(360deg); } }
/* ring nodes */
.hero-cube .hc-ring::before,
.hero-cube .hc-ring::after {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 8px; height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: #d89945;
  box-shadow: 0 0 16px #d89945;
}
.hero-cube .hc-ring::after { left: auto; right: 0; background: #c65d3a; box-shadow: 0 0 16px #c65d3a; }

/* ============ OCTAHEDRON ============ */
.oct-stage {
  perspective: 1400px;
  width: 100%;
  height: 520px;
  display: grid;
  place-items: center;
  position: relative;
}
.fig-oct {
  position: relative;
  width: 260px; height: 260px;
  transform-style: preserve-3d;
  animation: oct-rotate 18s linear infinite;
}
@keyframes oct-rotate {
  0%   { transform: rotateX(10deg) rotateY(0)     rotateZ(0); }
  100% { transform: rotateX(10deg) rotateY(360deg) rotateZ(360deg); }
}
/* 8 triangular faces — 4 top fan + 4 bottom fan, equilateral look */
.oct-face {
  position: absolute;
  top: 50%; left: 50%;
  width: 180px; height: 180px;
  margin: -90px 0 0 -90px;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.35), transparent 55%),
    linear-gradient(180deg, rgba(216,153,69,0.25), rgba(156,68,37,0.9));
  border: 0;
  filter: drop-shadow(0 0 12px rgba(216,153,69,0.3));
  transform-origin: 50% 100%;
}
.oct-face::before {
  content: "";
  position: absolute;
  inset: 10%;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  background:
    repeating-linear-gradient(0deg, transparent 0 8px, rgba(255,255,255,0.06) 8px 9px),
    repeating-linear-gradient(60deg, transparent 0 8px, rgba(216,153,69,0.15) 8px 9px),
    repeating-linear-gradient(-60deg, transparent 0 8px, rgba(216,153,69,0.15) 8px 9px);
}
.oct-face::after {
  /* edge hairline */
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  background: linear-gradient(180deg, transparent 85%, rgba(216,153,69,0.5) 100%);
}
/* Top 4 faces — fan around Y, tilted up */
.oct-face.o-t1 { transform: rotateY(0deg)   translateZ(0) rotateX(-35.26deg); }
.oct-face.o-t2 { transform: rotateY(90deg)  translateZ(0) rotateX(-35.26deg); }
.oct-face.o-t3 { transform: rotateY(180deg) translateZ(0) rotateX(-35.26deg); }
.oct-face.o-t4 { transform: rotateY(270deg) translateZ(0) rotateX(-35.26deg); }
/* Bottom 4 — mirrored, different tint */
.oct-face.o-b1 { transform: rotateY(45deg)   translateZ(0) rotateX(-144.74deg);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.2), transparent 55%),
    linear-gradient(180deg, rgba(58,90,120,0.5), rgba(74,45,90,0.9));
}
.oct-face.o-b2 { transform: rotateY(135deg) translateZ(0) rotateX(-144.74deg);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.2), transparent 55%),
    linear-gradient(180deg, rgba(58,90,120,0.5), rgba(74,45,90,0.9));
}
.oct-face.o-b3 { transform: rotateY(225deg) translateZ(0) rotateX(-144.74deg);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.2), transparent 55%),
    linear-gradient(180deg, rgba(58,90,120,0.5), rgba(74,45,90,0.9));
}
.oct-face.o-b4 { transform: rotateY(315deg) translateZ(0) rotateX(-144.74deg);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.2), transparent 55%),
    linear-gradient(180deg, rgba(58,90,120,0.5), rgba(74,45,90,0.9));
}
/* Inner glow core */
.fig-oct .oct-core {
  position: absolute;
  top: 50%; left: 50%;
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  background: radial-gradient(circle, #fff, rgba(255,220,160,0.6) 40%, transparent 70%);
  border-radius: 50%;
  box-shadow: 0 0 40px #fff, 0 0 80px rgba(216,153,69,0.6);
  animation: oct-core-pulse 2s ease-in-out infinite;
}
@keyframes oct-core-pulse {
  0%,100% { transform: scale(1); filter: blur(0); }
  50%     { transform: scale(1.5); filter: blur(2px); }
}

/* ============ TORUS-KNOT (trefoil approximation via stacked rings) ============ */
.knot-stage {
  perspective: 1400px;
  perspective-origin: 50% 40%;
  width: 100%;
  height: 520px;
  display: grid;
  place-items: center;
  position: relative;
}
.fig-knot {
  position: relative;
  width: 360px; height: 360px;
  transform-style: preserve-3d;
  animation: knot-tumble 24s linear infinite;
}
@keyframes knot-tumble {
  0%   { transform: rotateX(60deg) rotateY(0); }
  100% { transform: rotateX(60deg) rotateY(360deg); }
}
/* 3 interlocking rings at 60° offsets — trefoil illusion */
.knot-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 8px solid transparent;
  background:
    linear-gradient(var(--lw-paper), var(--lw-paper)) padding-box,
    conic-gradient(from 0deg,
      #c65d3a 0%, #d89945 16%, #e8c65a 33%, #7ba05b 50%,
      #3a5a78 66%, #4a2d5a 83%, #9c3a70 100%) border-box;
  transform-style: preserve-3d;
  box-shadow: 0 0 40px rgba(216,153,69,0.3);
  filter: drop-shadow(0 0 10px rgba(0,0,0,0.5));
}
.knot-ring.k1 { transform: rotateX(70deg) rotateZ(0);   animation: knot-ring-spin 10s linear infinite; }
.knot-ring.k2 { transform: rotateX(70deg) rotateY(60deg); animation: knot-ring-spin 10s linear infinite reverse; }
.knot-ring.k3 { transform: rotateX(70deg) rotateY(120deg); animation: knot-ring-spin 10s linear infinite; animation-delay: -3s; }
@keyframes knot-ring-spin {
  to { filter: drop-shadow(0 0 10px rgba(0,0,0,0.5)) hue-rotate(360deg); }
}
/* extra bead trail on each ring, positioned around */
.knot-beads {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.knot-beads .bead {
  position: absolute;
  top: 50%; left: 50%;
  width: 10px; height: 10px;
  margin: -5px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 12px #fff, 0 0 24px rgba(216,153,69,0.7);
}
/* generated via JS — 24 beads */

/* Center glow dot behind the knot */
.knot-stage::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 100px; height: 100px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(216,153,69,0.6), transparent 60%);
  border-radius: 50%;
  filter: blur(20px);
  animation: knot-bg-pulse 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes knot-bg-pulse {
  0%,100% { opacity: 0.5; transform: translate(-50%,-50%) scale(1); }
  50%     { opacity: 1;   transform: translate(-50%,-50%) scale(1.4); }
}

/* ============ Section heading for advanced figures ============ */
.adv-heading {
  text-align: center;
  padding: 80px 24px 40px;
  position: relative;
  z-index: 5;
}
.adv-heading h3 {
  font-family: var(--lw-font-serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 16px 0 0;
  background: linear-gradient(180deg, #fff, #d89945 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.adv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding: 0 48px 80px;
}
@media (max-width: 900px) {
  .adv-grid { grid-template-columns: 1fr; }
}