/* =========================================================================
   Surface Areas and Volumes — chapter-specific diagram styles
   Assumes the shared /css/notes-content.css already provides page chrome
   (.notes-page-wrap, .notes-toc, .topic-section, .topic-heading,
   .definition-box, .formula-box, .circle-animation-wrapper,
   .circle-container, .animation-controls, .replay-btn,
   .solved-example-card, .example-badge/-question/-solution,
   .se-diagram-wrapper, .se-fill-primary/-shaded/-track, .se-stroke-main/
   -accent, .se-dot, .se-text/-bold/-accent) exactly as it did for the
   circles chapter. Only this chapter's solid diagrams live here.
   ========================================================================= */

svg { overflow: visible; }

/* ---- shared palette for every solid diagram ---------------------------- */
.sv-face-front  { fill: #dbeafe; stroke: #0f172a; stroke-width: 2; stroke-linejoin: round; }
.sv-face-top    { fill: #bfdbfe; stroke: #0f172a; stroke-width: 2; stroke-linejoin: round; }
.sv-face-side   { fill: #93c5fd; stroke: #0f172a; stroke-width: 2; stroke-linejoin: round; }
.sv-solid-fill  { fill: #dbeafe; stroke: #0f172a; stroke-width: 2; stroke-linejoin: round; }
.sv-cap-fill    { fill: #bfdbfe; stroke: #0f172a; stroke-width: 2; }
.sv-inner-fill  { fill: #eff6ff; stroke: #0f172a; stroke-width: 1.75; }
.sv-hollow-gap  { fill: #ffffff; stroke: #0f172a; stroke-width: 1.75; }
.sv-outline     { fill: none; stroke: #0f172a; stroke-width: 2; }
.sv-hidden      { fill: none; stroke: #64748b; stroke-width: 1.5; stroke-dasharray: 5 4; }
.sv-dim-line    { stroke: #d97706; stroke-width: 1.5; }
.sv-accent-line { stroke: #ef4444; stroke-width: 2; }
.sv-dot         { fill: #0f172a; }
.sv-label       { font-size: 15px; font-weight: 600; fill: #1e293b; }
.sv-label-accent{ font-size: 14px; font-weight: 600; fill: #d97706; }
.sv-label-muted { font-size: 13px; fill: #64748b; }
.sv-caption     { font-size: 13.5px; fill: #475569; font-weight: 500; }

/* ==================================================================
    cubiod
   ================================================================== */
.cuboid-stack-demo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
}

.cuboid-stack-demo svg {
  width: 100%;
  height: auto;
  max-height: 380px;
  overflow: visible;
}

.cuboid-stack-demo .layer {
  fill: #ffffff;
  stroke: #1e293b;
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.cuboid-stack-demo #layer0 {
  animation: stackFirstLayer 0.6s ease-out forwards;
}

@keyframes stackFirstLayer {
  0% { opacity: 0; transform: translateY(20px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.cuboid-stack-demo #layer1  { animation: stackAppear 0.12s ease-out 0.60s forwards; }
.cuboid-stack-demo #layer2  { animation: stackAppear 0.12s ease-out 0.72s forwards; }
.cuboid-stack-demo #layer3  { animation: stackAppear 0.12s ease-out 0.84s forwards; }
.cuboid-stack-demo #layer4  { animation: stackAppear 0.12s ease-out 0.96s forwards; }
.cuboid-stack-demo #layer5  { animation: stackAppear 0.12s ease-out 1.08s forwards; }
.cuboid-stack-demo #layer6  { animation: stackAppear 0.12s ease-out 1.20s forwards; }
.cuboid-stack-demo #layer7  { animation: stackAppear 0.12s ease-out 1.32s forwards; }
.cuboid-stack-demo #layer8  { animation: stackAppear 0.12s ease-out 1.44s forwards; }
.cuboid-stack-demo #layer9  { animation: stackAppear 0.12s ease-out 1.56s forwards; }
.cuboid-stack-demo #layer10 { animation: stackAppear 0.12s ease-out 1.68s forwards; }
.cuboid-stack-demo #layer11 { animation: stackAppear 0.12s ease-out 1.80s forwards; }
.cuboid-stack-demo #layer12 { animation: stackAppear 0.12s ease-out 1.92s forwards; }
.cuboid-stack-demo #layer13 { animation: stackAppear 0.12s ease-out 2.04s forwards; }
.cuboid-stack-demo #layer14 { animation: stackAppear 0.12s ease-out 2.16s forwards; }
.cuboid-stack-demo #layer15 { animation: stackAppear 0.12s ease-out 2.28s forwards; }
.cuboid-stack-demo #layer16 { animation: stackAppear 0.12s ease-out 2.40s forwards; }
.cuboid-stack-demo #layer17 { animation: stackAppear 0.12s ease-out 2.52s forwards; }
.cuboid-stack-demo #layer18 { animation: stackAppear 0.12s ease-out 2.64s forwards; }
.cuboid-stack-demo #layer19 { animation: stackAppear 0.12s ease-out 2.76s forwards; }

@keyframes stackAppear {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cuboid-stack-demo #frontFace,
.cuboid-stack-demo #rightFace,
.cuboid-stack-demo #topFace {
  opacity: 0;
  stroke: #1e293b;
  stroke-width: 2.2;
  stroke-linejoin: round;
}

.cuboid-stack-demo #frontFace {
  fill: #ffffff;
  animation: stackAppear 0.6s ease-out 2.88s forwards;
}

.cuboid-stack-demo #rightFace {
  fill: #cbd5e1;
  animation: stackAppear 0.6s ease-out 3.00s forwards;
}

.cuboid-stack-demo #topFace {
  fill: #f1f5f9;
  animation: stackAppear 0.6s ease-out 3.12s forwards;
}

.cuboid-stack-demo #outline {
  fill: none;
  stroke: #0f172a;
  stroke-width: 2.5;
  stroke-linejoin: round;
  opacity: 0;
  animation: stackAppear 0.4s ease-in 3.50s forwards;
}

/* ==================================================================
    cube
   ================================================================== */
.cube-stack-demo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.cube-stack-demo svg {
  width: 100%;
  height: auto;
  max-height: 340px;
  overflow: visible;
}

.cube-stack-demo .cube-layer {
  fill: #ffffff;
  stroke: #1e293b;
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.cube-stack-demo #cubeLayer0 {
  animation: cubeFirstLayer 0.6s ease-out forwards;
}

@keyframes cubeFirstLayer {
  0% { opacity: 0; transform: translateY(20px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.cube-stack-demo #cubeLayer1  { animation: cubeAppear 0.12s ease-out 0.60s forwards; }
.cube-stack-demo #cubeLayer2  { animation: cubeAppear 0.12s ease-out 0.72s forwards; }
.cube-stack-demo #cubeLayer3  { animation: cubeAppear 0.12s ease-out 0.84s forwards; }
.cube-stack-demo #cubeLayer4  { animation: cubeAppear 0.12s ease-out 0.96s forwards; }
.cube-stack-demo #cubeLayer5  { animation: cubeAppear 0.12s ease-out 1.08s forwards; }
.cube-stack-demo #cubeLayer6  { animation: cubeAppear 0.12s ease-out 1.20s forwards; }
.cube-stack-demo #cubeLayer7  { animation: cubeAppear 0.12s ease-out 1.32s forwards; }
.cube-stack-demo #cubeLayer8  { animation: cubeAppear 0.12s ease-out 1.44s forwards; }
.cube-stack-demo #cubeLayer9  { animation: cubeAppear 0.12s ease-out 1.56s forwards; }
.cube-stack-demo #cubeLayer10 { animation: cubeAppear 0.12s ease-out 1.68s forwards; }
.cube-stack-demo #cubeLayer11 { animation: cubeAppear 0.12s ease-out 1.80s forwards; }
.cube-stack-demo #cubeLayer12 { animation: cubeAppear 0.12s ease-out 1.92s forwards; }
.cube-stack-demo #cubeLayer13 { animation: cubeAppear 0.12s ease-out 2.04s forwards; }
.cube-stack-demo #cubeLayer14 { animation: cubeAppear 0.12s ease-out 2.16s forwards; }
.cube-stack-demo #cubeLayer15 { animation: cubeAppear 0.12s ease-out 2.28s forwards; }
.cube-stack-demo #cubeLayer16 { animation: cubeAppear 0.12s ease-out 2.40s forwards; }
.cube-stack-demo #cubeLayer17 { animation: cubeAppear 0.12s ease-out 2.52s forwards; }
.cube-stack-demo #cubeLayer18 { animation: cubeAppear 0.12s ease-out 2.64s forwards; }
.cube-stack-demo #cubeLayer19 { animation: cubeAppear 0.12s ease-out 2.76s forwards; }
.cube-stack-demo #cubeLayer20 { animation: cubeAppear 0.12s ease-out 2.88s forwards; }

@keyframes cubeAppear {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cube-stack-demo #cubeFrontFace,
.cube-stack-demo #cubeRightFace,
.cube-stack-demo #cubeTopFace {
  opacity: 0;
  stroke: #1e293b;
  stroke-width: 2.2;
  stroke-linejoin: round;
}

.cube-stack-demo #cubeFrontFace {
  fill: #ffffff;
  animation: cubeAppear 0.6s ease-out 3.00s forwards;
}

.cube-stack-demo #cubeRightFace {
  fill: #cbd5e1;
  animation: cubeAppear 0.6s ease-out 3.12s forwards;
}

.cube-stack-demo #cubeTopFace {
  fill: #f1f5f9;
  animation: cubeAppear 0.6s ease-out 3.24s forwards;
}

.cube-stack-demo #cubeOutline {
  fill: none;
  stroke: #0f172a;
  stroke-width: 2.4;
  stroke-linejoin: round;
  opacity: 0;
  animation: cubeAppear 0.4s ease-in 3.60s forwards;
}

/* ==================================================================
    cylinder
   ================================================================== */
.cylinder-stack-demo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.cylinder-stack-demo svg {
  width: 100%;
  height: auto;
  max-height: 340px;
  overflow: visible;
}

.cylinder-stack-demo .cylinder-layer {
  fill: #ffffff;
  stroke: #1e293b;
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.cylinder-stack-demo #cylinderLayer0 {
  animation: cylinderFirstLayer 0.6s ease-out forwards;
}

@keyframes cylinderFirstLayer {
  0% { opacity: 0; transform: translateY(20px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.cylinder-stack-demo #cylinderLayer1  { animation: cylinderAppear 0.12s ease-out 0.60s forwards; }
.cylinder-stack-demo #cylinderLayer2  { animation: cylinderAppear 0.12s ease-out 0.72s forwards; }
.cylinder-stack-demo #cylinderLayer3  { animation: cylinderAppear 0.12s ease-out 0.84s forwards; }
.cylinder-stack-demo #cylinderLayer4  { animation: cylinderAppear 0.12s ease-out 0.96s forwards; }
.cylinder-stack-demo #cylinderLayer5  { animation: cylinderAppear 0.12s ease-out 1.08s forwards; }
.cylinder-stack-demo #cylinderLayer6  { animation: cylinderAppear 0.12s ease-out 1.20s forwards; }
.cylinder-stack-demo #cylinderLayer7  { animation: cylinderAppear 0.12s ease-out 1.32s forwards; }
.cylinder-stack-demo #cylinderLayer8  { animation: cylinderAppear 0.12s ease-out 1.44s forwards; }
.cylinder-stack-demo #cylinderLayer9  { animation: cylinderAppear 0.12s ease-out 1.56s forwards; }
.cylinder-stack-demo #cylinderLayer10 { animation: cylinderAppear 0.12s ease-out 1.68s forwards; }
.cylinder-stack-demo #cylinderLayer11 { animation: cylinderAppear 0.12s ease-out 1.80s forwards; }
.cylinder-stack-demo #cylinderLayer12 { animation: cylinderAppear 0.12s ease-out 1.92s forwards; }
.cylinder-stack-demo #cylinderLayer13 { animation: cylinderAppear 0.12s ease-out 2.04s forwards; }
.cylinder-stack-demo #cylinderLayer14 { animation: cylinderAppear 0.12s ease-out 2.16s forwards; }
.cylinder-stack-demo #cylinderLayer15 { animation: cylinderAppear 0.12s ease-out 2.28s forwards; }
.cylinder-stack-demo #cylinderLayer16 { animation: cylinderAppear 0.12s ease-out 2.40s forwards; }
.cylinder-stack-demo #cylinderLayer17 { animation: cylinderAppear 0.12s ease-out 2.52s forwards; }
.cylinder-stack-demo #cylinderLayer18 { animation: cylinderAppear 0.12s ease-out 2.64s forwards; }
.cylinder-stack-demo #cylinderLayer19 { animation: cylinderAppear 0.12s ease-out 2.76s forwards; }
.cylinder-stack-demo #cylinderLayer20 { animation: cylinderAppear 0.12s ease-out 2.88s forwards; }

@keyframes cylinderAppear {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cylinder-stack-demo #cylinderBody,
.cylinder-stack-demo #cylinderTop {
  opacity: 0;
  stroke: #1e293b;
  stroke-width: 2.2;
}

.cylinder-stack-demo #cylinderBody {
  fill: #ffffff;
  animation: cylinderAppear 0.6s ease-out 3.00s forwards;
}

.cylinder-stack-demo #cylinderTop {
  fill: #f1f5f9;
  animation: cylinderAppear 0.6s ease-out 3.12s forwards;
}

.cylinder-stack-demo #bottomArc,
.cylinder-stack-demo #cylinderOutline {
  fill: none;
  stroke: #0f172a;
  stroke-width: 2.2;
  opacity: 0;
  animation: cylinderAppear 0.4s ease-in 3.50s forwards;
}

.cylinder-stack-demo #cylinderOutline {
  stroke-linejoin: round;
}

/* ==================================================================
    hollow cylinder
   ================================================================== */
.hollow-cylinder-stack-demo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.hollow-cylinder-stack-demo svg {
  width: 100%;
  height: auto;
  max-height: 340px;
  overflow: visible;
}

.hollow-cylinder-stack-demo .ring-layer {
  fill: #ffffff;
  stroke: #1e293b;
  stroke-width: 2;
  opacity: 0;
}

.hollow-cylinder-stack-demo #ringLayer0 {
  animation: ringFirstLayer 0.6s ease-out forwards, ringFadeStack 0.45s ease-out 3.40s forwards;
}

@keyframes ringFirstLayer {
  0% { opacity: 0; transform: translateY(20px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.hollow-cylinder-stack-demo #ringLayer1  { animation: ringAppear 0.12s ease-out 0.60s forwards, ringFadeStack 0.45s ease-out 3.40s forwards; }
.hollow-cylinder-stack-demo #ringLayer2  { animation: ringAppear 0.12s ease-out 0.72s forwards, ringFadeStack 0.45s ease-out 3.40s forwards; }
.hollow-cylinder-stack-demo #ringLayer3  { animation: ringAppear 0.12s ease-out 0.84s forwards, ringFadeStack 0.45s ease-out 3.40s forwards; }
.hollow-cylinder-stack-demo #ringLayer4  { animation: ringAppear 0.12s ease-out 0.96s forwards, ringFadeStack 0.45s ease-out 3.40s forwards; }
.hollow-cylinder-stack-demo #ringLayer5  { animation: ringAppear 0.12s ease-out 1.08s forwards, ringFadeStack 0.45s ease-out 3.40s forwards; }
.hollow-cylinder-stack-demo #ringLayer6  { animation: ringAppear 0.12s ease-out 1.20s forwards, ringFadeStack 0.45s ease-out 3.40s forwards; }
.hollow-cylinder-stack-demo #ringLayer7  { animation: ringAppear 0.12s ease-out 1.32s forwards, ringFadeStack 0.45s ease-out 3.40s forwards; }
.hollow-cylinder-stack-demo #ringLayer8  { animation: ringAppear 0.12s ease-out 1.44s forwards, ringFadeStack 0.45s ease-out 3.40s forwards; }
.hollow-cylinder-stack-demo #ringLayer9  { animation: ringAppear 0.12s ease-out 1.56s forwards, ringFadeStack 0.45s ease-out 3.40s forwards; }
.hollow-cylinder-stack-demo #ringLayer10 { animation: ringAppear 0.12s ease-out 1.68s forwards, ringFadeStack 0.45s ease-out 3.40s forwards; }
.hollow-cylinder-stack-demo #ringLayer11 { animation: ringAppear 0.12s ease-out 1.80s forwards, ringFadeStack 0.45s ease-out 3.40s forwards; }
.hollow-cylinder-stack-demo #ringLayer12 { animation: ringAppear 0.12s ease-out 1.92s forwards, ringFadeStack 0.45s ease-out 3.40s forwards; }
.hollow-cylinder-stack-demo #ringLayer13 { animation: ringAppear 0.12s ease-out 2.04s forwards, ringFadeStack 0.45s ease-out 3.40s forwards; }
.hollow-cylinder-stack-demo #ringLayer14 { animation: ringAppear 0.12s ease-out 2.16s forwards, ringFadeStack 0.45s ease-out 3.40s forwards; }
.hollow-cylinder-stack-demo #ringLayer15 { animation: ringAppear 0.12s ease-out 2.28s forwards, ringFadeStack 0.45s ease-out 3.40s forwards; }
.hollow-cylinder-stack-demo #ringLayer16 { animation: ringAppear 0.12s ease-out 2.40s forwards, ringFadeStack 0.45s ease-out 3.40s forwards; }
.hollow-cylinder-stack-demo #ringLayer17 { animation: ringAppear 0.12s ease-out 2.52s forwards, ringFadeStack 0.45s ease-out 3.40s forwards; }
.hollow-cylinder-stack-demo #ringLayer18 { animation: ringAppear 0.12s ease-out 2.64s forwards, ringFadeStack 0.45s ease-out 3.40s forwards; }
.hollow-cylinder-stack-demo #ringLayer19 { animation: ringAppear 0.12s ease-out 2.76s forwards, ringFadeStack 0.45s ease-out 3.40s forwards; }
.hollow-cylinder-stack-demo #ringLayer20 { animation: ringAppear 0.12s ease-out 2.88s forwards, ringFadeStack 0.45s ease-out 3.40s forwards; }

@keyframes ringAppear {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ringFadeStack {
  from { opacity: 1; }
  to { opacity: 0; }
}

.hollow-cylinder-stack-demo .final-surface {
  opacity: 0;
}

.hollow-cylinder-stack-demo #outerBody {
  fill: #f8fafc;
  stroke: none;
  animation: ringSurfaceShow 0.5s ease-out 3.50s forwards;
}

.hollow-cylinder-stack-demo #innerBody {
  fill: #ffffff;
  stroke: none;
  animation: ringSurfaceShow 0.5s ease-out 3.55s forwards;
}

.hollow-cylinder-stack-demo #topRing {
  fill: #e2e8f0;
  stroke: #1e293b;
  stroke-width: 2.2;
  animation: ringSurfaceShow 0.5s ease-out 3.60s forwards;
}

@keyframes ringSurfaceShow {
  from { opacity: 0; }
  to { opacity: 1; }
}

.hollow-cylinder-stack-demo .solid-line {
  fill: none;
  stroke: #0f172a;
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: 0;
  animation: ringLineShow 0.4s ease-out 3.90s forwards;
}

.hollow-cylinder-stack-demo .hidden-line {
  fill: none;
  stroke: #64748b;
  stroke-width: 1.8;
  stroke-dasharray: 4 4;
  stroke-linecap: round;
  opacity: 0;
  animation: ringLineShow 0.4s ease-out 3.90s forwards;
}

@keyframes ringLineShow {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ==================================================================
    cone
   ================================================================== */
.cone-container {
    width: 380px;
    height: 310px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.cone-container svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* STACKED CIRCULAR LAYERS */
.circle-layer {
    fill: white;
    stroke: black;
    stroke-width: 2.2;
    opacity: 0;
}

/* FIRST LAYER */
#circleLayer0 {
    animation:
        firstLayer
        0.8s
        ease-out
        0s
        forwards,
        fadeStack
        0.45s
        ease-out
        3.70s
        forwards;
}

@keyframes firstLayer {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* CIRCLE TIMING */
#circleLayer1  { animation: appear 0.15s ease-out 0.80s forwards, fadeStack 0.45s ease-out 3.70s forwards; }
#circleLayer2  { animation: appear 0.15s ease-out 0.95s forwards, fadeStack 0.45s ease-out 3.70s forwards; }
#circleLayer3  { animation: appear 0.15s ease-out 1.10s forwards, fadeStack 0.45s ease-out 3.70s forwards; }
#circleLayer4  { animation: appear 0.15s ease-out 1.25s forwards, fadeStack 0.45s ease-out 3.70s forwards; }
#circleLayer5  { animation: appear 0.15s ease-out 1.40s forwards, fadeStack 0.45s ease-out 3.70s forwards; }
#circleLayer6  { animation: appear 0.15s ease-out 1.55s forwards, fadeStack 0.45s ease-out 3.70s forwards; }
#circleLayer7  { animation: appear 0.15s ease-out 1.70s forwards, fadeStack 0.45s ease-out 3.70s forwards; }
#circleLayer8  { animation: appear 0.15s ease-out 1.85s forwards, fadeStack 0.45s ease-out 3.70s forwards; }
#circleLayer9  { animation: appear 0.15s ease-out 2.00s forwards, fadeStack 0.45s ease-out 3.70s forwards; }
#circleLayer10 { animation: appear 0.15s ease-out 2.15s forwards, fadeStack 0.45s ease-out 3.70s forwards; }
#circleLayer11 { animation: appear 0.15s ease-out 2.30s forwards, fadeStack 0.45s ease-out 3.70s forwards; }
#circleLayer12 { animation: appear 0.15s ease-out 2.45s forwards, fadeStack 0.45s ease-out 3.70s forwards; }
#circleLayer13 { animation: appear 0.15s ease-out 2.60s forwards, fadeStack 0.45s ease-out 3.70s forwards; }
#circleLayer14 { animation: appear 0.15s ease-out 2.75s forwards, fadeStack 0.45s ease-out 3.70s forwards; }
#circleLayer15 { animation: appear 0.15s ease-out 2.90s forwards, fadeStack 0.45s ease-out 3.70s forwards; }
#circleLayer16 { animation: appear 0.15s ease-out 3.05s forwards, fadeStack 0.45s ease-out 3.70s forwards; }
#circleLayer17 { animation: appear 0.15s ease-out 3.20s forwards, fadeStack 0.45s ease-out 3.70s forwards; }
#circleLayer18 { animation: appear 0.15s ease-out 3.35s forwards, fadeStack 0.45s ease-out 3.70s forwards; }

@keyframes appear {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* FADE STACK */
@keyframes fadeStack {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* FINAL CONE */
.final-surface {
    opacity: 0;
}

/* CONE BODY */
#coneBody {
    fill: #f2f2f2;
    stroke: none;
    animation: surfaceShow 0.5s ease-out 3.80s forwards;
}

/* CONE BASE */
#coneBase {
    fill: #eeeeee;
    stroke: black;
    stroke-width: 2.2;
    animation: surfaceShow 0.5s ease-out 3.85s forwards;
}

/* RIGHT-SIDE SHADING */
#coneShade {
    fill: #d8d8d8;
    stroke: none;
    opacity: 0;
    animation: surfaceShow 0.5s ease-out 3.90s forwards;
}

@keyframes surfaceShow {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* VISIBLE SOLID LINES */
.solid-line {
    fill: none;
    stroke: black;
    stroke-width: 2.2;
    stroke-linecap: round;
    opacity: 0;
    animation: lineShow 0.4s ease-out 4.30s forwards;
}

/* HIDDEN DOTTED LINES */
.hidden-line {
    fill: none;
    stroke: black;
    stroke-width: 2.2;
    stroke-dasharray: 4 4;
    stroke-linecap: round;
    opacity: 0;
    animation: lineShow 0.4s ease-out 4.30s forwards;
}

@keyframes lineShow {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==================================================================
    sphere
   ================================================================== */
.sphere-container {
    width: 380px;
    height: 310px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.sphere-container svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* STACKED CIRCULAR LAYERS */
.sphere-container .circle-layer {
    fill: white;
    stroke: black;
    stroke-width: 2.2;
    opacity: 0;
}

/* LAYER ANIMATION */
.sphere-container #circleLayer0 {
    animation:
        firstLayer
        0.8s
        ease-out
        0s
        forwards,
        fadeStack
        0.45s
        ease-out
        3.70s
        forwards;
}

.sphere-container #circleLayer1  { animation: appear 0.15s ease-out 0.80s forwards, fadeStack 0.45s ease-out 3.70s forwards; }
.sphere-container #circleLayer2  { animation: appear 0.15s ease-out 0.95s forwards, fadeStack 0.45s ease-out 3.70s forwards; }
.sphere-container #circleLayer3  { animation: appear 0.15s ease-out 1.10s forwards, fadeStack 0.45s ease-out 3.70s forwards; }
.sphere-container #circleLayer4  { animation: appear 0.15s ease-out 1.25s forwards, fadeStack 0.45s ease-out 3.70s forwards; }
.sphere-container #circleLayer5  { animation: appear 0.15s ease-out 1.40s forwards, fadeStack 0.45s ease-out 3.70s forwards; }
.sphere-container #circleLayer6  { animation: appear 0.15s ease-out 1.55s forwards, fadeStack 0.45s ease-out 3.70s forwards; }
.sphere-container #circleLayer7  { animation: appear 0.15s ease-out 1.70s forwards, fadeStack 0.45s ease-out 3.70s forwards; }
.sphere-container #circleLayer8  { animation: appear 0.15s ease-out 1.85s forwards, fadeStack 0.45s ease-out 3.70s forwards; }
.sphere-container #circleLayer9  { animation: appear 0.15s ease-out 2.00s forwards, fadeStack 0.45s ease-out 3.70s forwards; }
.sphere-container #circleLayer10 { animation: appear 0.15s ease-out 2.15s forwards, fadeStack 0.45s ease-out 3.70s forwards; }
.sphere-container #circleLayer11 { animation: appear 0.15s ease-out 2.30s forwards, fadeStack 0.45s ease-out 3.70s forwards; }
.sphere-container #circleLayer12 { animation: appear 0.15s ease-out 2.45s forwards, fadeStack 0.45s ease-out 3.70s forwards; }
.sphere-container #circleLayer13 { animation: appear 0.15s ease-out 2.60s forwards, fadeStack 0.45s ease-out 3.70s forwards; }
.sphere-container #circleLayer14 { animation: appear 0.15s ease-out 2.75s forwards, fadeStack 0.45s ease-out 3.70s forwards; }
.sphere-container #circleLayer15 { animation: appear 0.15s ease-out 2.90s forwards, fadeStack 0.45s ease-out 3.70s forwards; }
.sphere-container #circleLayer16 { animation: appear 0.15s ease-out 3.05s forwards, fadeStack 0.45s ease-out 3.70s forwards; }

@keyframes firstLayer {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes appear {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeStack {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* FINAL SPHERE */
.sphere-container .final-surface {
    opacity: 0;
}

#sphereBody {
    fill: #eeeeee;
    stroke: black;
    stroke-width: 2.2;
    animation:
        surfaceShow
        0.5s
        ease-out
        3.80s
        forwards;
}

#sphereShade {
    fill: #d4d4d4;
    stroke: none;
    opacity: 0;
    animation:
        surfaceShow
        0.5s
        ease-out
        3.90s
        forwards;
}

@keyframes surfaceShow {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* =====================================================
   HEMISPHERE 
   ===================================================== */
.hemisphere-container {
    width: 380px;
    height: 310px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.hemisphere-container svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* STACKED CIRCULAR LAYERS */
.hemisphere-container .circle-layer {
    fill: white;
    stroke: black;
    stroke-width: 2.2;
    opacity: 0;
}

/* LAYER ANIMATION */
.hemisphere-container #hemiLayer0 {
    animation:
        firstLayer
        0.8s
        ease-out
        0s
        forwards,
        fadeStack
        0.45s
        ease-out
        2.20s
        forwards;
}

.hemisphere-container #hemiLayer1 { animation: appear 0.15s ease-out 0.80s forwards, fadeStack 0.45s ease-out 2.20s forwards; }
.hemisphere-container #hemiLayer2 { animation: appear 0.15s ease-out 0.95s forwards, fadeStack 0.45s ease-out 2.20s forwards; }
.hemisphere-container #hemiLayer3 { animation: appear 0.15s ease-out 1.10s forwards, fadeStack 0.45s ease-out 2.20s forwards; }
.hemisphere-container #hemiLayer4 { animation: appear 0.15s ease-out 1.25s forwards, fadeStack 0.45s ease-out 2.20s forwards; }
.hemisphere-container #hemiLayer5 { animation: appear 0.15s ease-out 1.40s forwards, fadeStack 0.45s ease-out 2.20s forwards; }
.hemisphere-container #hemiLayer6 { animation: appear 0.15s ease-out 1.55s forwards, fadeStack 0.45s ease-out 2.20s forwards; }
.hemisphere-container #hemiLayer7 { animation: appear 0.15s ease-out 1.70s forwards, fadeStack 0.45s ease-out 2.20s forwards; }

/* FINAL HEMISPHERE */
.hemisphere-container .final {
    opacity: 0;
}

/* DOME BODY */
#hemisphereBody {
    fill: #eeeeee;
    stroke: none;
    animation:
        surfaceShow
        0.5s
        ease-out
        2.30s
        forwards;
}

/* BASE FILL */
#hemisphereBase {
    fill: #f5f5f5;
    stroke: none;
    animation:
        surfaceShow
        0.5s
        ease-out
        2.30s
        forwards;
}

/* RIGHT-SIDE SHADE */
#hemisphereShade {
    fill: #d4d4d4;
    stroke: none;
    animation:
        surfaceShow
        0.5s
        ease-out
        2.40s
        forwards;
}

/* SOLID VISIBLE OUTLINES */
.hemisphere-container .solid-line {
    fill: none;
    stroke: black;
    stroke-width: 2.2;
    stroke-linecap: round;
    opacity: 0;
    animation:
        lineShow
        0.4s
        ease-out
        2.60s
        forwards;
}

/* HIDDEN BASE OUTLINE */
.hemisphere-container .hidden-line {
    fill: none;
    stroke: black;
    stroke-width: 2.2;
    stroke-dasharray: 4 4;
    stroke-linecap: round;
    opacity: 0;
    animation:
        lineShow
        0.4s
        ease-out
        2.60s
        forwards;
}

/* =====================================================
   FRUSTUM 
   ===================================================== */
.frustum-stack-container {
    width: 380px;
    height: 310px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.frustum-stack-container svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.frustum-stack-container .layer {
    fill: white;
    stroke: black;
    stroke-width: 2.2;
    opacity: 0;
}

/* STACKING ANIMATION */
.frustum-stack-container #frustumLayer0  { animation: frustumAppear 0.4s ease-out 0.00s forwards, frustumFadeStack 0.5s ease-out 3.40s forwards; }
.frustum-stack-container #frustumLayer1  { animation: frustumAppear 0.4s ease-out 0.15s forwards, frustumFadeStack 0.5s ease-out 3.40s forwards; }
.frustum-stack-container #frustumLayer2  { animation: frustumAppear 0.4s ease-out 0.30s forwards, frustumFadeStack 0.5s ease-out 3.40s forwards; }
.frustum-stack-container #frustumLayer3  { animation: frustumAppear 0.4s ease-out 0.45s forwards, frustumFadeStack 0.5s ease-out 3.40s forwards; }
.frustum-stack-container #frustumLayer4  { animation: frustumAppear 0.4s ease-out 0.60s forwards, frustumFadeStack 0.5s ease-out 3.40s forwards; }
.frustum-stack-container #frustumLayer5  { animation: frustumAppear 0.4s ease-out 0.75s forwards, frustumFadeStack 0.5s ease-out 3.40s forwards; }
.frustum-stack-container #frustumLayer6  { animation: frustumAppear 0.4s ease-out 0.90s forwards, frustumFadeStack 0.5s ease-out 3.40s forwards; }
.frustum-stack-container #frustumLayer7  { animation: frustumAppear 0.4s ease-out 1.05s forwards, frustumFadeStack 0.5s ease-out 3.40s forwards; }
.frustum-stack-container #frustumLayer8  { animation: frustumAppear 0.4s ease-out 1.20s forwards, frustumFadeStack 0.5s ease-out 3.40s forwards; }
.frustum-stack-container #frustumLayer9  { animation: frustumAppear 0.4s ease-out 1.35s forwards, frustumFadeStack 0.5s ease-out 3.40s forwards; }
.frustum-stack-container #frustumLayer10 { animation: frustumAppear 0.4s ease-out 1.50s forwards, frustumFadeStack 0.5s ease-out 3.40s forwards; }
.frustum-stack-container #frustumLayer11 { animation: frustumAppear 0.4s ease-out 1.65s forwards, frustumFadeStack 0.5s ease-out 3.40s forwards; }
.frustum-stack-container #frustumLayer12 { animation: frustumAppear 0.4s ease-out 1.80s forwards, frustumFadeStack 0.5s ease-out 3.40s forwards; }
.frustum-stack-container #frustumLayer13 { animation: frustumAppear 0.4s ease-out 1.95s forwards, frustumFadeStack 0.5s ease-out 3.40s forwards; }
.frustum-stack-container #frustumLayer14 { animation: frustumAppear 0.4s ease-out 2.10s forwards, frustumFadeStack 0.5s ease-out 3.40s forwards; }
.frustum-stack-container #frustumLayer15 { animation: frustumAppear 0.4s ease-out 2.25s forwards, frustumFadeStack 0.5s ease-out 3.40s forwards; }
.frustum-stack-container #frustumLayer16 { animation: frustumAppear 0.4s ease-out 2.40s forwards, frustumFadeStack 0.5s ease-out 3.40s forwards; }
.frustum-stack-container #frustumLayer17 { animation: frustumAppear 0.4s ease-out 2.55s forwards, frustumFadeStack 0.5s ease-out 3.40s forwards; }

@keyframes frustumAppear {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes frustumFadeStack {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* FINAL FRUSTUM */
.frustum-stack-container .final {
    opacity: 0;
}

.frustum-stack-container #frustumSurface,
.frustum-stack-container #frustumTop,
.frustum-stack-container #frustumBottom,
.frustum-stack-container #frustumBottomHidden,
.frustum-stack-container #outerLeft,
.frustum-stack-container #outerRight {
    animation: finalFrustumAppear 0.6s ease-out 3.40s forwards;
}

@keyframes finalFrustumAppear {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* FINAL SURFACE */
.frustum-stack-container .surface {
    fill: white;
    stroke: none;
}

/* OUTLINE */
.frustum-stack-container .outline {
    fill: none;
    stroke: black;
    stroke-width: 2.5;
    stroke-linecap: round;
}

/* HIDDEN LINE */
.frustum-stack-container .hidden {
    fill: none;
    stroke: black;
    stroke-width: 2;
    stroke-dasharray: 4 5;
}

/* =====================================================
   HOLLOW SPHERE 
   ===================================================== */
.hollow-sphere-container {
    width: 380px;
    height: 310px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.hollow-sphere-container svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* ANNULAR SPHERE LAYERS */
.hollow-sphere-container .annular-layer {
    fill: white;
    fill-rule: evenodd;
    stroke: black;
    stroke-width: 2.2;
    opacity: 0;
}

/* LAYER ANIMATIONS */
.hollow-sphere-container #hsphLayer0 {
    animation:
        firstLayer 0.8s ease-out 0s forwards,
        fadeStack 0.5s ease-out 3.7s forwards;
}

.hollow-sphere-container #hsphLayer1  { animation: layerAppear 0.45s ease-out 0.80s forwards, fadeStack 0.5s ease-out 3.7s forwards; }
.hollow-sphere-container #hsphLayer2  { animation: layerAppear 0.45s ease-out 0.95s forwards, fadeStack 0.5s ease-out 3.7s forwards; }
.hollow-sphere-container #hsphLayer3  { animation: layerAppear 0.45s ease-out 1.10s forwards, fadeStack 0.5s ease-out 3.7s forwards; }
.hollow-sphere-container #hsphLayer4  { animation: layerAppear 0.45s ease-out 1.25s forwards, fadeStack 0.5s ease-out 3.7s forwards; }
.hollow-sphere-container #hsphLayer5  { animation: layerAppear 0.45s ease-out 1.40s forwards, fadeStack 0.5s ease-out 3.7s forwards; }
.hollow-sphere-container #hsphLayer6  { animation: layerAppear 0.45s ease-out 1.55s forwards, fadeStack 0.5s ease-out 3.7s forwards; }
.hollow-sphere-container #hsphLayer7  { animation: layerAppear 0.45s ease-out 1.70s forwards, fadeStack 0.5s ease-out 3.7s forwards; }
.hollow-sphere-container #hsphLayer8  { animation: layerAppear 0.45s ease-out 1.85s forwards, fadeStack 0.5s ease-out 3.7s forwards; }
.hollow-sphere-container #hsphLayer9  { animation: layerAppear 0.45s ease-out 2.00s forwards, fadeStack 0.5s ease-out 3.7s forwards; }
.hollow-sphere-container #hsphLayer10 { animation: layerAppear 0.45s ease-out 2.15s forwards, fadeStack 0.5s ease-out 3.7s forwards; }
.hollow-sphere-container #hsphLayer11 { animation: layerAppear 0.45s ease-out 2.30s forwards, fadeStack 0.5s ease-out 3.7s forwards; }
.hollow-sphere-container #hsphLayer12 { animation: layerAppear 0.45s ease-out 2.45s forwards, fadeStack 0.5s ease-out 3.7s forwards; }
.hollow-sphere-container #hsphLayer13 { animation: layerAppear 0.45s ease-out 2.60s forwards, fadeStack 0.5s ease-out 3.7s forwards; }
.hollow-sphere-container #hsphLayer14 { animation: layerAppear 0.45s ease-out 2.75s forwards, fadeStack 0.5s ease-out 3.7s forwards; }
.hollow-sphere-container #hsphLayer15 { animation: layerAppear 0.45s ease-out 2.90s forwards, fadeStack 0.5s ease-out 3.7s forwards; }
.hollow-sphere-container #hsphLayer16 { animation: layerAppear 0.45s ease-out 3.05s forwards, fadeStack 0.5s ease-out 3.7s forwards; }
.hollow-sphere-container #hsphLayer17 { animation: layerAppear 0.45s ease-out 3.20s forwards, fadeStack 0.5s ease-out 3.85s forwards; }
.hollow-sphere-container #hsphLayer18 { animation: layerAppear 0.45s ease-out 3.35s forwards, fadeStack 0.5s ease-out 3.85s forwards; }

/* Shift final appearance slightly so the newly added layers finish stacking first */
.hollow-sphere-container .final-surface {
    opacity: 0;
    animation: finalAppear 0.7s ease-out 4.10s forwards;
}

.hollow-sphere-container .anim-dim {
    animation-delay: 4.35s;
}

/* OUTER SPHERE */
.hollow-sphere-container .outer-sphere {
    fill: url(#sphereGradient);
    stroke: black;
    stroke-width: 2.5;
}

/* INNER HOLLOW BOUNDARY */
.hollow-sphere-container .inner-sphere {
    fill: none;
    stroke: black;
    stroke-width: 2.2;
    stroke-dasharray: 3 5;
}

@keyframes layerAppear {
    0% {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes finalAppear {
    0% {
        opacity: 0;
        /* transform: scale(0.94); */
    }
    100% {
        opacity: 1;
        /* transform: scale(1); */
    }
}

/* =========================================================================
   Derivation Box & Aside Box Styles
   ========================================================================= */

.derivation-box {
  position: relative;
  margin: 1.5rem 0;
  padding: 1.25rem 1.5rem;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 4px solid #3b82f6; /* Accent border matching the math theme */
  border-radius: 8px;
  color: #334155;
  font-size: 0.95rem;
  line-height: 1.65;
}

.derivation-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2563eb;
  margin-bottom: 0.5rem;
}

/* Also needed for Section 10 (Cone) & Section 11 (Sphere) */
.aside-box {
  position: relative;
  margin: 1.25rem 0;
  padding: 1rem 1.25rem;
  background-color: #f1f5f9;
  border-left: 3px dashed #64748b;
  border-radius: 6px;
  color: #475569;
  font-size: 0.9rem;
  line-height: 1.6;
}

.aside-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #475569;
  margin-bottom: 0.4rem;
}

/* =========================================================================
   Center Replay Buttons Below Animations
   ========================================================================= */

.circle-animation-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 1.5rem 0;
}

.animation-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 1rem;
}

.replay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #334155;
  background-color: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.replay-btn:hover {
  background-color: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}

/* =========================================================================
   Dimension Lines & Labels for 3D Animations
   ========================================================================= */

.anim-dim {
  opacity: 0;
  animation: dimFadeIn 0.5s ease-out forwards;
}

@keyframes dimFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Individual delays matching each solid's completion time */
.cuboid-stack-demo .anim-dim        { animation-delay: 3.6s; }
.cube-stack-demo .anim-dim          { animation-delay: 3.7s; }
.cylinder-stack-demo .anim-dim      { animation-delay: 3.6s; }
.hollow-cylinder-stack-demo .anim-dim { animation-delay: 4.0s; }
.cone-container .anim-dim           { animation-delay: 4.4s; }
.sphere-container .anim-dim         { animation-delay: 4.0s; }
.hemisphere-container .anim-dim     { animation-delay: 2.7s; }
.hollow-sphere-container .anim-dim  { animation-delay: 4.2s; }
.frustum-stack-container .anim-dim  { animation-delay: 3.8s; }

/* Dimension lines styling */
.dim-line {
  stroke: #d97706;
  stroke-width: 1.5;
  stroke-linecap: round;
}

.dim-guide {
  stroke: #94a3b8;
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

.dim-center-axis {
  stroke: #64748b;
  stroke-width: 1.25;
  stroke-dasharray: 4 3;
}

/* Dimension text styling */
.dim-text {
  font-family: 'Cambria Math', 'Times New Roman', serif;
  font-size: 14px;
  font-style: italic;
  font-weight: 700;
  fill: #b45309;
}