/* =========================================
           Reset & Base Styles
           ========================================= */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        font-family: "Noto Sans JP", sans-serif;
        color: #333;
        background-color: #f4f4f4;
        overflow: hidden; /* Prevent scroll during loading */
      }

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

      /* =========================================
           Loading Screen Styles
           ========================================= */
      .loader-wrap {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        z-index: 9999;
        pointer-events: none;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }

      /* Split Curtain Layers */
      .loader-curtain-top,
      .loader-curtain-bottom {
        position: absolute;
        left: 0;
        width: 100%;
        height: 50vh; /* Half height each */
        background-color: #1a202c; /* Dark Navy/Black */
        z-index: 1;
      }

      .loader-curtain-top {
        top: 0;
        transform-origin: top;
      }

      .loader-curtain-bottom {
        bottom: 0;
        transform-origin: bottom;
      }

      /* Content inside the loader */
      .loader-content {
        position: relative;
        z-index: 2;
        color: #fff;
        font-family: "Noto Serif JP", serif;
        text-align: center;
      }

      .loader-counter {
        font-size: 4rem;
        font-weight: 300;
        line-height: 1;
        margin-bottom: 10px;
        display: block;
        font-variant-numeric: tabular-nums;
      }

      .loader-text {
        font-size: 0.875rem;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        opacity: 0.7;
      }

      /* Progress Bar Line */
      .loader-line-wrap {
        width: 200px;
        height: 1px;
        background: rgba(255, 255, 255, 0.2);
        margin-top: 20px;
        position: relative;
        overflow: hidden;
      }

      .loader-line {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 0%;
        background: #c5a059; /* Gold accent */
      }

      /* =========================================
           Main Content Styles
           ========================================= */
      .hero {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        visibility: hidden;
      }

      .hero-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Image: Desk/Laptop vibe for Web Coder */
        background-image: url("https://images.unsplash.com/photo-1497215728101-856f4ea42174?q=80&w=2070&auto=format&fit=crop");
        background-size: cover;
        background-position: center;
        z-index: 1;
        transform: scale(1.2);
      }

      .hero-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 2;
      }

      .hero-content {
        position: relative;
        z-index: 3;
        color: #fff;
        text-align: center;
        padding: 20px;
      }

      /* Reveal Text Wrapper */
      .reveal-wrap {
        overflow: hidden;
        display: block;
        margin-bottom: 0.5rem;
      }

      .reveal-text {
        display: block;
        transform: translateY(110%);
      }

      .hero-subtitle {
        font-size: 1rem;
        letter-spacing: 0.3em;
        font-weight: 500;
        color: #c5a059;
        margin-bottom: 15px;
      }

      .hero-title {
        font-family: "Noto Serif JP", serif;
        font-size: 4rem;
        font-weight: 600;
        line-height: 1.1;
        margin-bottom: 40px;
      }

      .btn-wrap {
        opacity: 0;
        margin-top: 20px;
      }

      .btn {
        display: inline-block;
        padding: 15px 40px;
        border: 1px solid rgba(255, 255, 255, 0.6);
        color: #fff;
        font-size: 0.9rem;
        letter-spacing: 0.1em;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
      }

      .btn:hover {
        background: #c5a059;
        border-color: #c5a059;
        color: #000;
      }

      /* Responsive */
      @media (max-width: 768px) {
        .hero-title {
          font-size: 2.8rem;
        }
      }