/* ===============================================
           Base Styles
           =============================================== */
      :root {
        --bg-dark: #1e1e1c;
        --bg-light: #f0f0eb;
        --accent-1: #c57b57;
        --text-main: #f0f0eb;
        --font-serif: "Cormorant Garamond", serif;
        --font-sans: "Inter", "Noto Sans JP", sans-serif;
      }

      * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }

      body {
        background-color: var(--bg-dark);
        color: var(--text-main);
        font-family: var(--font-sans);
        overflow-x: hidden;
      }

      /* Intro */
      .intro-screen {
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: var(--bg-dark);
        position: relative;
      }

      .intro-screen h1 {
        font-family: var(--font-serif);
        font-size: clamp(3rem, 8vw, 6rem);
        font-weight: 400;
        line-height: 1;
        margin-bottom: 2rem;
        text-align: center;
        color: var(--accent-1);
        font-style: italic;
      }

      .intro-screen h1 span {
        display: block;
        font-family: var(--font-sans);
        font-size: 1rem;
        font-style: normal;
        letter-spacing: 0.2em;
        color: #888;
        margin-top: 10px;
        text-transform: uppercase;
      }

      .scroll-indicator {
        position: absolute;
        bottom: 40px;
        font-size: 0.8rem;
        letter-spacing: 2px;
        opacity: 0.6;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
      }
      .scroll-line {
        width: 1px;
        height: 60px;
        background-color: var(--accent-1);
        animation: extend 2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
        transform-origin: top;
      }

      @keyframes extend {
        0% {
          transform: scaleY(0);
        }
        50% {
          transform: scaleY(1);
        }
        51% {
          transform-origin: bottom;
        }
        100% {
          transform: scaleY(0);
          transform-origin: bottom;
        }
      }

      /* ===============================================
           Animation 1: Progress Circle
           =============================================== */
      .progress-wrapper {
        width: 100%;
        height: 250vh;
        background-color: var(--bg-dark);
      }

      .section-progress {
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
      }

      .box {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .box svg {
        transform-origin: center;
        transform: rotate(-90deg);
        overflow: visible;
        filter: drop-shadow(0 0 15px rgba(197, 123, 87, 0.2));
      }

      .progress-circle-bg {
        fill: none;
        stroke: #333;
        stroke-width: 1;
      }

      .progress-circle-track {
        fill: none;
        stroke: #333;
        stroke-width: 8;
        stroke-dasharray: 2 4;
        opacity: 0.5;
      }

      .progress-circle-main {
        fill: none;
        stroke: var(--accent-1);
        stroke-width: 2;
        stroke-linecap: square;
      }

      .box .text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: var(--accent-1);
        font-family: var(--font-serif);
        font-size: 5rem;
        font-weight: 400;
        display: flex;
        align-items: flex-start;
        line-height: 1;
      }

      .box .text .unit {
        font-size: 1.5rem;
        font-family: var(--font-sans);
        margin-left: 5px;
        margin-top: 10px;
        opacity: 0.7;
      }

      .box .text .percentage {
        font-variant-numeric: tabular-nums;
      }

      /* Footer */
      footer {
        padding: 40px 20px;
        text-align: center;
        background: #151515;
        color: #555;
        font-size: 0.7rem;
        letter-spacing: 1px;
      }