<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Text Skeleton Loading</title>

  <style>
    :root {
      --bg-body: #0d1628;
      --bg-card: #16223a;
      --border-card: rgba(255, 255, 255, 0.08);
      
      /* Skeleton Design System Colors */
      --skeleton-base: #22324f;
      --skeleton-shimmer: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 100%
      );
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      background-color: var(--bg-body);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      color-scheme: dark;
    }
    
    /* Container */
    .info-card {
      width: 360px;
      background: var(--bg-card);
      border: 1px solid var(--border-card);
      border-radius: 16px;
      padding: 24px;
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    }
    
    /* Base Skeleton Line Class */
    .skeleton-text {
      background-color: var(--skeleton-base);
      position: relative;
      overflow: hidden;
      border-radius: 6px;
      /* Matching standard text flow proportions */
      height: 14px;
      margin-bottom: 12px;
    }
    
    /* Skeleton Title Styling */
    .skeleton-title {
      height: 20px;
      width: 65%;
      margin-bottom: 20px;
      border-radius: 6px;
    }
    
    /* Micro-variations for natural text paragraph flow */
    .skeleton-text.w-100 { width: 80%; }
    .skeleton-text.w-90  { width: 100%; }
    .skeleton-text.w-80  { width: 60%; }
    .skeleton-text.w-50  { width: 90%; margin-bottom: 0; } /* Last line in paragraph */
    
    /* High-Performance Shimmer Effect (GPU Accelerated) */
    .skeleton-text::after,
    .skeleton-title::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      transform: translateX(-100%);
      background: var(--skeleton-shimmer);
      animation: shimmer 1.6s infinite ease-in-out;
    }
    
    @keyframes shimmer {
      100% {
        transform: translateX(100%);
      }
    }
    
    /* Accessibility: Accessibility for users preferring reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .skeleton-text::after,
      .skeleton-title::after {
        animation: pulse 2s infinite ease-in-out;
        transform: none;
        background: transparent;
      }
    
      @keyframes pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.4; }
      }
    }
    
    /* 1. The light beam pseudo-element */
    .skeleton-text::after {
      content: "";
      position: absolute;
      inset: 0;
      
      /* Start the light beam completely outside the left edge */
      transform: translateX(-100%);
      
      /* Soft white highlight gradient */
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.08) 50%,
        transparent 100%
      );
    
      /* Call the animation definition below */
      animation: shimmer 1.6s infinite ease-in-out;
    }
    
    /* 2. The movement instructions */
    @keyframes shimmer {
      100% {
        /* Move the light beam all the way past the right edge */
        transform: translateX(100%);
      }
    }
  </style>
</head>
<body>

  <div class="info-card" aria-hidden="true" aria-label="Loading text content">

    <!-- Heading / Title Placeholder -->
		<div class="skeleton-text skeleton-title"></div>
    
    <!-- Paragraph Text Placeholders -->
    <div class="skeleton-text w-100"></div>
    <div class="skeleton-text w-90"></div>
    <div class="skeleton-text w-80"></div>
    <div class="skeleton-text w-50"></div>

  </div>

</body>
</html>