/* Container & Wrapper */
.circle-animation-wrapper {
display: flex;
flex-direction: column;
align-items: center;
margin: 24px auto;
max-width: 420px;
}

.circle-container {
width: 100%;
max-width: 400px;
height: 350px;
display: flex;
justify-content: center;
align-items: center;
}

.circle-container svg {
width: 100%;
height: 100%;
overflow: visible;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
user-select: none;
}

/* 1. Centre Point & Label */
#centre {
fill: #1e293b;
transform-origin: 200px 200px;
animation: squeezeCentre 1.8s ease-in-out forwards;
}

#centreLabel {
font-size: 13px;
font-weight: 600;
fill: #475569;
opacity: 0;
animation: fadeInLabel 0.6s ease-out 1.4s forwards;
}

@keyframes squeezeCentre {
0% {
transform: scale(12.6);
opacity: 0.8;
  }
70% {
transform: scale(1.5);
opacity: 0.95;
  }
100% {
transform: scale(1);
opacity: 1;
  }
}

@keyframes fadeInLabel {
to {
opacity: 1;
  }
}

/* 2. Outer Circle */
#circle {
fill: none;
stroke: #0f172a;
stroke-width: 2.5;
stroke-dasharray: 879.6;
stroke-dashoffset: 879.6;
animation: drawCircle 5s linear 1.8s forwards;
}

@keyframes drawCircle {
from {
stroke-dashoffset: 879.6;
  }
to {
stroke-dashoffset: 0;
  }
}

/* 3. Radius Line, Endpoint Dot & Label */
#radiusGroup {
opacity: 0;
transform-origin: 200px 200px;
animation: radiusAnimation 5s linear 1.8s forwards;
}

#radiusLine {
stroke: #64748b;
stroke-width: 2;
}

#outerDot {
fill: #2563eb;
}

#radiusLabel {
font-size: 13px;
font-weight: 600;
fill: #2563eb;
}

@keyframes radiusAnimation {
0% {
opacity: 1;
transform: rotate(0deg);
  }
94% {
opacity: 1;
transform: rotate(360deg);
  }
100% {
opacity: 0;
transform: rotate(360deg);
  }
}

/* 4. Controls & Replay Button */
.animation-controls {
margin-top: 10px;
}

.replay-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 15px;
font-size: 13px;
font-weight: 500;
color: #334155;
background-color: #f1f5f9;
border: 1px solid #cbd5e1;
border-radius: 6px;
cursor: pointer;
transition: all 0.15s ease;
}

.replay-btn:hover {
background-color: #e2e8f0;
color: #0f172a;
}

.replay-btn:active {
transform: scale(0.97);
}

.replay-btn svg {
stroke: currentColor;
}



/* =====================================================================
   Shared layout for the additional topic animations added below.
   Each animation's markup sits in its own #<id>Demo wrapper, and every
   selector inside that animation's block is either an id unique to that
   animation or a class prefixed with that animation's own short code
   (eqr-, arc-, seg-, tex-, tin-, sec-, inc-, ccr-, sct-), so none of
   these can collide with each other, with .circle-container above, or
   with any other section's animation.
   ===================================================================== */

.topic-animation-wrapper {
  display: flex;
  justify-content: center;
  margin: 28px auto;
}

.topic-animation-wrapper svg {
  display: block;
  width: 100%;
  height: auto;
}

#eqrDemo { max-width: 380px; }
#arcDemo { max-width: 480px; overflow: visible; }
#segDemo { max-width: 500px; overflow: visible; }
#texDemo { max-width: 500px; font-family: Arial, sans-serif; }
#tinDemo { max-width: 560px; font-family: Arial, sans-serif; }
#secDemo { max-width: 520px; font-family: Arial, sans-serif; }
#incDemo { max-width: 480px; font-family: Arial, sans-serif; }
#ccrDemo { max-width: 480px; font-family: Arial, sans-serif; }
#sctDemo { max-width: 480px; font-family: Arial, sans-serif; }

/* arc/segment pieces slide sideways during their animation and can
   extend past the base viewBox, so those two wrappers keep their
   svg's overflow visible (matching the original standalone demos). */
#arcDemo svg,
#segDemo svg {
  overflow: visible;
}


/* =======================================================================
   1. CIRCLES, RADIUS & CENTRE  —  "Equal Radii" (every radius is equal)
   ======================================================================= */
        /* Circle */
        .eqr-circle {
            fill: none;
            stroke: black;
            stroke-width: 3;
        }

        /* Centre */
        .eqr-centre {
            fill: black;
        }

        /* Radius lines */
        .eqr-radius {
            stroke: #777;
            stroke-width: 3;
            stroke-linecap: round;

            stroke-dasharray: 140;
            stroke-dashoffset: 140;

            animation: eqrDrawRadius 1.5s ease-out forwards;
        }

        #eqrRadius2 {
            animation-delay: 0.8s;
        }

        @keyframes eqrDrawRadius {
            from {
                stroke-dashoffset: 140;
            }

            to {
                stroke-dashoffset: 0;
            }
        }

        /* End points */
        .eqr-endpoint {
            fill: #555;
            opacity: 0;
            animation: eqrShowDot 0.5s ease forwards;
            animation-delay: 1.5s;
        }

        #eqrDot2 {
            animation-delay: 2.3s;
        }

        @keyframes eqrShowDot {
            to {
                opacity: 1;
            }
        }

        /* r labels */
        .eqr-radius-label {
            font-family: Arial, sans-serif;
            font-size: 22px;
            font-style: italic;
            fill: #555;

            opacity: 0;
            animation: eqrShowLabel 0.5s ease forwards;
            animation-delay: 1.5s;
        }

        #eqrLabel2 {
            animation-delay: 2.3s;
        }

        @keyframes eqrShowLabel {
            to {
                opacity: 1;
            }
        }

        /* Equality */
        .eqr-equality {
            font-family: Arial, sans-serif;
            font-size: 25px;
            font-weight: bold;
            fill: #333;

            opacity: 0;
            animation: eqrShowEquality 0.8s ease forwards;
            animation-delay: 3s;
        }

        @keyframes eqrShowEquality {
            from {
                opacity: 0;
                transform: translateY(8px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    


/* =======================================================================
   5. SECANT  —  "Secant as the limiting case of a tangent"
   ======================================================================= */
    #secCircle {
        fill: white;
        stroke: black;
        stroke-width: 3;
    }

    #secSecant {
        stroke: #555;
        stroke-width: 3;
    }

    .sec-intersection {
        fill: black;
    }

    .sec-label {
        font-size: 23px;
        font-weight: bold;
        opacity: 0;
    }

    #secSecantLabel {
        animation: secShowLabel 0.5s ease forwards;
        animation-delay: 0.5s;
    }

    #secTangentLabel {
        opacity: 0;
    }

    #secLimitText {
        font-size: 20px;
        opacity: 0;
    }

    @keyframes secShowLabel {
        to {
            opacity: 1;
        }
    }

    #secTangentPoint {
        fill: black;
        opacity: 0;
    }


/* =======================================================================
   6. ARC  —  "Minor Arc and Major Arc"
   ======================================================================= */
#arcCircle {
    fill: none;
    stroke: black;
    stroke-width: 4;

    animation: arcHideCircle 0.4s ease forwards;
    animation-delay: 3s;
}

@keyframes arcHideCircle {

    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}


.arc-piece-cut {
    stroke: #777;
    stroke-width: 5;
    stroke-linecap: round;

    opacity: 0;

    animation: arcShowCut 0.5s ease forwards;
}

#arcCut2 {
    animation-delay: 0.35s;
}

@keyframes arcShowCut {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


.arc-piece {
    fill: none;
    stroke: black;
    stroke-width: 5;

    opacity: 0;
}


#arcMinorArc {

    animation:
        arcAppearArc 0.1s linear forwards,
        arcMoveMinor 1.4s cubic-bezier(.2,.8,.2,1) forwards;

    animation-delay:
        3s,
        3.05s;
}

@keyframes arcMoveMinor {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(130px);
    }
}


#arcMajorArc {

    animation:
        arcAppearArc 0.1s linear forwards,
        arcMoveMajor 1.4s cubic-bezier(.2,.8,.2,1) forwards;

    animation-delay:
        3s,
        3.05s;
}

@keyframes arcMoveMajor {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-130px);
    }
}


@keyframes arcAppearArc {

    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


.arc-label {
    font-family: Arial, sans-serif;
    font-size: 25px;
    font-weight: bold;

    fill: #444;

    opacity: 0;
}


#arcMinorLabel {

    animation:
        arcMoveMinorLabel 0.7s ease forwards;

    animation-delay: 4.1s;
}


#arcMajorLabel {

    animation:
        arcMoveMajorLabel 0.7s ease forwards;

    animation-delay: 4.1s;
}


@keyframes arcMoveMinorLabel {

    from {
        opacity: 0;
        transform: translateX(0);
    }

    to {
        opacity: 1;
        transform: translateX(130px);
    }
}


@keyframes arcMoveMajorLabel {

    from {
        opacity: 0;
        transform: translateX(0);
    }

    to {
        opacity: 1;
        transform: translateX(-130px);
    }
}


/* =======================================================================
   9. SEGMENT  —  "Minor and Major Segment"
   ======================================================================= */
#segInitialCircle {
    fill: none;
    stroke: black;
    stroke-width: 4;

    animation: segHideCircle 0.4s ease forwards;
    animation-delay: 3.2s;
}

@keyframes segHideCircle {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}


#segChord {
    stroke: #777;
    stroke-width: 4;
    stroke-linecap: round;

    stroke-dasharray: 288;
    stroke-dashoffset: 288;

    animation:
        segDrawChord 1.4s ease forwards,
        segHideChord 0.3s ease forwards;

    animation-delay:
        1.2s,
        3.2s;
}

@keyframes segDrawChord {
    from {
        stroke-dashoffset: 288;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes segHideChord {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}


.seg-point {
    fill: #555;

    opacity: 0;

    animation:
        segShowPoint 0.4s ease forwards,
        segHidePoint 0.3s ease forwards;

    animation-delay:
        2.3s,
        3.2s;
}

@keyframes segShowPoint {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes segHidePoint {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}


.seg-piece {
    stroke: black;
    stroke-width: 4;
    stroke-linejoin: round;

    opacity: 0;
}


#segMinorSegment {

    animation:
        segShowSegment 0.1s linear forwards,
        segMoveMinor 1.5s cubic-bezier(.2,.8,.2,1) forwards;

    animation-delay:
        3.2s,
        3.25s;
}

@keyframes segMoveMinor {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(130px);
    }
}


#segMajorSegment {

    animation:
        segShowSegment 0.1s linear forwards,
        segMoveMajor 1.5s cubic-bezier(.2,.8,.2,1) forwards;

    animation-delay:
        3.2s,
        3.25s;
}

@keyframes segMoveMajor {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-130px);
    }
}


@keyframes segShowSegment {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


.seg-label {
    font-family: Arial, sans-serif;
    font-size: 25px;
    font-weight: bold;

    fill: #444;

    opacity: 0;
}


#segMinorLabel {
    animation:
        segShowMinorLabel 0.7s ease forwards;

    animation-delay: 4.4s;
}


#segMajorLabel {
    animation:
        segShowMajorLabel 0.7s ease forwards;

    animation-delay: 4.4s;
}


@keyframes segShowMinorLabel {

    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


@keyframes segShowMajorLabel {

    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* =======================================================================
   10. SECTOR  —  "Sector Separation"
   ======================================================================= */
#sctCircle {
    fill: white;
    stroke: black;
    stroke-width: 3;

    animation: sctHideCircle 0.1s linear forwards;
    animation-delay: 2.7s;
}

@keyframes sctHideCircle {
    to {
        opacity: 0;
    }
}

.sct-radius {
    stroke: #555;
    stroke-width: 3;

    stroke-dasharray: 180;
    stroke-dashoffset: 180;

    animation:
        sctDrawRadius 1.2s ease forwards,
        sctHideRadius 0.1s linear forwards 2.7s;
}

#sctRadius2 {
    animation-delay: 0.6s, 2.7s;
}

@keyframes sctDrawRadius {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes sctHideRadius {
    to {
        opacity: 0;
    }
}

#sctSector {
    fill: white;
    stroke: black;
    stroke-width: 3;

    opacity: 0;

    animation:
        sctShowPiece 0.01s linear forwards 2.7s,
        sctMoveSector 1.4s ease forwards 2.8s;
}

@keyframes sctShowPiece {
    to {
        opacity: 1;
    }
}

@keyframes sctMoveSector {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(130px);
    }
}

#sctRemaining {
    fill: white;
    stroke: black;
    stroke-width: 3;

    opacity: 0;

    animation:
        sctShowPiece 0.01s linear forwards 2.7s,
        sctMoveRemaining 1.4s ease forwards 2.8s;
}

@keyframes sctMoveRemaining {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-130px);
    }
}

.sct-label {
    font-size: 24px;
    font-weight: bold;
    opacity: 0;
}

#sctSectorLabel {
    animation: sctShowLabel 0.5s ease forwards;
    animation-delay: 4.1s;
}

#sctRemainingLabel {
    animation: sctShowLabel 0.5s ease forwards;
    animation-delay: 4.1s;
}

@keyframes sctShowLabel {
    to {
        opacity: 1;
    }
}


/* =======================================================================
12. CIRCUMCIRCLE & CIRCUMRADIUS  —  "Circumcircle and Circumradius"
======================================================================= */
#ccrTriangle {
    fill: white;
    stroke: black;
    stroke-width: 3;
}

#ccrCircumcircle {
    fill: none;
    stroke: #777;
    stroke-width: 3;

    stroke-dasharray: 1131;
    stroke-dashoffset: 1131;

    animation: ccrDrawCircle 2.5s ease forwards;
    animation-delay: 1s;
}

@keyframes ccrDrawCircle {
    to {
        stroke-dashoffset: 0;
    }
}

#ccrCentre {
    fill: black;
    opacity: 0;

    animation: ccrShowCentre 0.3s ease forwards;
    animation-delay: 3.5s;
}

@keyframes ccrShowCentre {
    to {
        opacity: 1;
    }
}

#ccrRadius {
    stroke: #555;
    stroke-width: 3;

    stroke-dasharray: 180;
    stroke-dashoffset: 180;

    animation: ccrDrawRadius 1.2s ease forwards;
    animation-delay: 3.8s;
}

@keyframes ccrDrawRadius {
    to {
        stroke-dashoffset: 0;
    }
}

.ccr-label {
    font-size: 23px;
    font-weight: bold;
    opacity: 0;
}

#ccrCircleLabel {
    animation: ccrShowLabel 0.5s ease forwards;
    animation-delay: 4.8s;
}

#ccrRadiusLabel {
    animation: ccrShowLabel 0.5s ease forwards;
    animation-delay: 5s;
}

@keyframes ccrShowLabel {
    to {
        opacity: 1;
    }
}

.ccr-vertex {
    font-size: 20px;
    font-weight: bold;
}


/* =======================================================================
13. INCIRCLE & INRADIUS  —  "Incircle and Inradius"
======================================================================= */
#incTriangle {
    fill: white;
    stroke: black;
    stroke-width: 3;
}

#incIncircle {
    fill: none;
    stroke: #777;
    stroke-width: 3;

    stroke-dasharray: 565;
    stroke-dashoffset: 565;

    animation: incDrawCircle 2.2s ease forwards;
    animation-delay: 1s;
}

@keyframes incDrawCircle {
    to {
        stroke-dashoffset: 0;
    }
}

#incIncentre {
    fill: black;
    opacity: 0;

    animation: incShowCentre 0.3s ease forwards;
    animation-delay: 3.3s;
}

@keyframes incShowCentre {
    to {
        opacity: 1;
    }
}

#incInradius {
    stroke: #555;
    stroke-width: 3;

    stroke-dasharray: 104;
    stroke-dashoffset: 104;

    animation: incDrawRadius 1.2s ease forwards;
    animation-delay: 3.6s;
}

@keyframes incDrawRadius {
    to {
        stroke-dashoffset: 0;
    }
}

#incTouchPoint {
    fill: black;
    opacity: 0;

    animation: incShowTouch 0.3s ease forwards;
    animation-delay: 4.5s;
}

@keyframes incShowTouch {
    to {
        opacity: 1;
    }
}

.inc-label {
    font-size: 23px;
    font-weight: bold;
    opacity: 0;
}

#incCircleLabel {
    animation: incShowLabel 0.5s ease forwards;
    animation-delay: 4.7s;
}

#incRadiusLabel {
    animation: incShowLabel 0.5s ease forwards;
    animation-delay: 4.9s;
}

@keyframes incShowLabel {
    to {
        opacity: 1;
    }
}

.inc-vertex {
    font-size: 20px;
    font-weight: bold;
}


/* =======================================================================
17. TOUCHING CIRCLES  —  "Two Externally Touching Circles"
======================================================================= */
.tex-circle {
    fill: white;
    stroke: black;
    stroke-width: 3;
}

.tex-center {
    fill: black;
}

.tex-radius {
    stroke: #555;
    stroke-width: 3;
    stroke-dasharray: 8 6;
}

.tex-label {
    font-size: 24px;
    fill: black;
    font-style: italic;
}

.tex-contact-label {
    font-size: 20px;
    fill: black;
}


/* =======================================================================
17. TOUCHING CIRCLES  —  "Internally Touching Circles"
======================================================================= */
.tin-circle {
    fill: white;
    stroke: black;
    stroke-width: 3;
}

.tin-center {
    fill: black;
}

.tin-radius {
    stroke: #555;
    stroke-width: 3;
    stroke-dasharray: 2 8;
    stroke-linecap: round;
}

.tin-distance {
    stroke: #555;
    stroke-width: 3;
}

.tin-label {
    font-size: 24px;
    fill: black;
    font-style: italic;
}

.tin-equation {
    font-size: 24px;
    fill: black;
}

.tin-contact-label {
    font-size: 20px;
    fill: black;
}

/* =======================================================================
   18. SOLVED EXAMPLES STYLING & DIAGRAMS
   ======================================================================= */

.solved-example-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 22px 26px;
  margin: 28px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.example-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
  padding: 3px 8px;
  margin-bottom: 12px;
}

.example-question {
  font-size: 15.5px;
  font-weight: 600;
  color: #0f172a;
  line-height: 1.6;
  margin-bottom: 14px;
}

.example-solution {
  font-size: 14.5px;
  color: #334155;
  line-height: 1.7;
  border-top: 1px dashed #e2e8f0;
  padding-top: 16px;
}

.example-solution strong {
  color: #1e293b;
}

/* Solved Example Diagram Frames */
.se-diagram-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 16px;
  margin: 14px 0 18px 0;
}

.se-diagram-wrapper svg {
  display: block;
  max-width: 100%;
  height: auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  user-select: none;
}

/* Base Graphic Geometry Styles */
.se-stroke-main {
  fill: none;
  stroke: #0f172a;
  stroke-width: 2.5;
}

.se-stroke-sub {
  stroke: #64748b;
  stroke-width: 2;
  stroke-dasharray: 4 4;
}

.se-stroke-accent {
  stroke: #2563eb;
  stroke-width: 2;
}

.se-dot {
  fill: #1e293b;
}

.se-fill-primary {
  fill: rgba(37, 99, 235, 0.12);
  stroke: #2563eb;
  stroke-width: 2;
}

.se-fill-track {
  fill: rgba(245, 158, 11, 0.2);
  stroke: #d97706;
  stroke-width: 2;
}

.se-fill-shaded {
  fill: rgba(16, 185, 129, 0.25);
  stroke: #059669;
  stroke-width: 2;
}

.se-text {
  font-size: 13px;
  fill: #334155;
  font-weight: 500;
}

.se-text-bold {
  font-size: 13px;
  fill: #0f172a;
  font-weight: 700;
}

.se-text-accent {
  font-size: 13px;
  fill: #2563eb;
  font-weight: 600;
}