/* ========================================
   ChiricaAccess Portal - Premium Design System
   Designed with Apple/Stripe/Vercel-level precision
   ======================================== */

/* === CSS Custom Properties - Design Tokens === */
:root {
    /* Theme Colors */
    --primary: #c42d26; /* Less vibrant red */
    --primary-dark: #9e2520;
    --primary-light: #d54840;
    --secondary: #1d3242;
    --secondary-dark: #0f1a21;
    --secondary-light: #2d4d65;
    
    /* Neutral Colors */
    --white: #ffffff;
    --off-white: #f7f9fc;
    --light-gray: #e1e5eb;
    --medium-gray: #8a94a6;
    --dark-gray: #3e4c59;
    --black: #1a202c;
    
    /* Status Colors */
    --success: #38b249;
    --warning: #f7b955;
    --error: #e12d39;
    --info: #2d7ff9;
    
    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    --font-size-5xl: 3rem;
    
    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;
    --space-10: 4rem;
    --space-12: 5rem;
    --space-16: 8rem;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    --shadow-outline: 0 0 0 3px rgba(220, 32, 21, 0.5);
    
    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-normal: 250ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-slow: 500ms cubic-bezier(0.16, 1, 0.3, 1);
    
    /* Border Radius */
    --radius-sm: 0.125rem;
    --radius-md: 0.25rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-full: 9999px;
    
    /* Z-index layers */
    --z-background: -10;
    --z-default: 1;
    --z-sticky: 100;
    --z-overlay: 200;
    --z-modal: 300;
    --z-tooltip: 400;
  }
  
  /* === Core Reset and Defaults === */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
  
  html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  
  body {
    font-family: var(--font-family);
    font-size: var(--font-size-md);
    line-height: 1.5;
    color: var(--black);
    background-color: var(--secondary);
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
  }
  
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  button {
    font: inherit;
    cursor: pointer;
    background: none;
    border: none;
  }
  
  /* === Layout === */
  .container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-4);
  }
  
  /* === Hero Section === */
  .hero {
    position: relative;
    min-height: 100vh;
    width: 100%;
    color: var(--white);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  
  .hero-background {
    position: absolute;
    inset: 0;
    z-index: var(--z-background);
  }
  
  .hero-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: contrast(110%) brightness(0.9);
  }
  
  .hero-overlay {
    position: absolute;
    inset: 0;
    z-index: calc(var(--z-background) + 1);
    background: linear-gradient(
      140deg, 
      rgba(29, 50, 66, 0.85) 0%, 
      rgba(29, 50, 66, 0.75) 50%,
      rgba(220, 32, 21, 0.4) 100%
    );
    /* Add texture */
    background-blend-mode: multiply;
  }
  
  /* Container Base */
  .container {
    position: relative;
    width: 100%;
    padding: 0 10px; /* Maintain minimum 10px padding on either side */
    z-index: var(--z-default);
    display: flex;
    flex-direction: column;
    max-width: 1280px;
    margin: 0 auto;
    transition: padding var(--transition-normal); /* Smooth transition for padding changes */
  }
  
  /* Hero Container */
  .hero .container {
    height: 100vh;
  }
  
  /* Top section with logo and slogan */
  .top-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin-bottom: var(--space-8);
    padding-top: var(--space-5);
    transition: all 0.3s ease; /* Smooth transition for layout changes */
  }
  
  /* Logo positioning */
  .logo-container {
    opacity: 0; /* Start hidden for animation */
    transform: scale(0.8) translateY(-30px); /* Initial state for animation */
    transition: transform 0.3s ease, margin 0.3s ease; /* Smooth transitions */
  }
  
  .firm-logo {
    height: 70px;
    width: auto;
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3));
    transition: height 0.3s ease; /* Smooth transition for size changes */
  }
  
  /* Content layout */
  .hero-content {
    position: relative;
    flex: 1; /* Take remaining space */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end; /* Position from bottom */
    padding-bottom: 15vh; /* 15% from bottom */
    transition: padding-bottom 0.3s ease;
  }
  
  /* Title styling with metallic effect */
  .headline-container {
    text-align: center;
    position: relative;
    margin-bottom: 20vh; /* Space between title and button */
    transition: margin-bottom 0.3s ease;
  }
  
  .portal-title {
    position: relative;
    font-size: clamp(3.5rem, 5vw + 1rem, 7rem); /* Fluid typography */
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--white);
    margin-bottom: var(--space-2);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    opacity: 0; /* Start hidden for animation */
    transform-style: preserve-3d;
    perspective: 500px;
    transition: font-size 0.3s ease;
  }
  
  .title-text {
    display: inline-block;
    position: relative;
    background: linear-gradient(
      135deg,
      #ffffff 0%,
      #e9e9e9 20%,
      #ffffff 40%,
      #e0e0e0 60%,
      #ffffff 80%,
      #ececec 100%
    );
    background-size: 200% auto;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    text-fill-color: transparent;
    -webkit-text-fill-color: transparent;
  }
  
  .portal-subtitle {
    font-size: 1.5rem; /* Further increased from 1.35rem */
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--white);
    margin-top: calc(var(--space-2) * -1);
    opacity: 0; /* Start hidden for animation */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-left: 30px; /* Offset to the right */
    gap: 0.5rem;
    transition: font-size 0.3s ease, margin 0.3s ease, padding 0.3s ease;
  }
  
  .lock-icon {
    width: 1.25rem;
    height: 1.25rem;
    stroke: var(--primary);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
    transition: width 0.3s ease, height 0.3s ease;
  }
  
  /* Slogan Container */
  .slogan-container {
    max-width: 800px;
    text-align: right;
    opacity: 0; /* Start hidden for animation */
    transform: translateX(100px) rotate(2deg); /* Initial state for animation */
    transition: all 0.3s ease; /* Smooth transition for layout changes */
  }
  
  .hero-slogan {
    /* Fluid typography with clamp() - min size, preferred size, max size */
    font-size: clamp(var(--font-size-lg), 0.5vw + 1rem, var(--font-size-3xl));
    font-weight: 700; /* Bolder text */
    line-height: 1.5;
    letter-spacing: 0.01em; /* Slightly increased for better readability */
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); /* Enhanced shadow for depth */
    white-space: nowrap; /* Prevent text wrapping */
    transition: font-size 0.3s ease, white-space 0.3s ease; /* Smooth transition */
  }
  
  .highlight {
    color: var(--primary);
    font-weight: 800; /* Extra bold for highlights */
    text-shadow: 0 0 8px rgba(196, 45, 38, 0.4); /* Updated to match new red */
    position: relative;
    display: inline-block;
  }
  
  /* CTA Container */
  .cta-container {
    opacity: 0; /* Start hidden for animation */
    transform: translateY(50px); /* Initial state for animation */
    text-align: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  
  /* Login Button Styling - Super Sleek */
  .btn-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-6);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    color: var(--white);
    font-weight: 500;
    font-size: var(--font-size-md);
    transition: 
      transform var(--transition-normal),
      box-shadow var(--transition-normal),
      background var(--transition-normal);
    box-shadow: 
      0 4px 12px rgba(0, 0, 0, 0.1),
      inset 0 1px 1px rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
  }
  
  .btn-login::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      110deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    transform: translateX(-100%);
    transition: transform 0.7s ease;
  }
  
  .btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 
      0 6px 20px rgba(0, 0, 0, 0.15),
      inset 0 1px 1px rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.15);
  }
  
  .btn-login:hover::before {
    transform: translateX(100%);
  }
  
  .btn-login:active {
    transform: translateY(0);
    box-shadow: 
      0 2px 6px rgba(0, 0, 0, 0.1),
      inset 0 1px 1px rgba(255, 255, 255, 0.1);
  }
  
  .btn-login-icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .btn-login-icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
  }
  
  /* Scroll Indicator */
  .scroll-indicator {
    position: absolute;
    bottom: var(--space-6);
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.6;
    cursor: pointer;
    transition: opacity var(--transition-normal);
  }
  
  .scroll-indicator:hover {
    opacity: 1;
  }
  
  .scroll-indicator svg {
    width: 30px;
    height: 30px;
    stroke: var(--white);
  }
  
  /* Features Section */
  .features {
    background: var(--white);
    padding: var(--space-6) 0; /* Reduced from var(--space-12) */
    flex: 1 0 auto;
  }
  
  .section-title {
    text-align: center;
    font-size: var(--font-size-3xl); /* Reduced from var(--font-size-4xl) */
    font-weight: 700;
    color: var(--secondary);
    margin-bottom: var(--space-5); /* Reduced from var(--space-8) */
    opacity: 0; /* Start hidden for animation */
  }
  
  .features-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: var(--space-4); /* Reduced from var(--space-6) */
    margin-top: var(--space-4); /* Reduced from var(--space-8) */
    transition: grid-template-columns 0.3s ease;
  }
  
  .feature-card {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--space-4); /* Reduced from var(--space-6) */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    opacity: 0; /* Start hidden for animation */
    transform: scale(0.9); /* Start slightly smaller for animation */
  }
  
  .feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
  }
  
  .feature-icon {
    width: 50px; /* Reduced from 60px */
    height: 50px; /* Reduced from 60px */
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--off-white);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-3); /* Reduced from var(--space-4) */
  }
  
  .feature-icon svg {
    width: 25px; /* Reduced from 30px */
    height: 25px; /* Reduced from 30px */
    stroke: var(--primary);
  }
  
  .feature-title {
    font-size: var(--font-size-lg); /* Reduced from var(--font-size-xl) */
    font-weight: 600;
    color: var(--secondary);
    margin-bottom: var(--space-2); /* Reduced from var(--space-3) */
  }
  
  .feature-description {
    color: var(--dark-gray);
    font-size: var(--font-size-md);
    line-height: 1.5; /* Reduced from 1.6 */
  }
  
  
  /* Footer */
  .footer {
    background: var(--secondary-dark);
    min-height: 6rem; /* Explicit height for the footer */
    display: flex;
    align-items: center;
    color: var(--white);
  }
  
  .footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 100%;
    transition: flex-direction 0.3s ease;
  }
  
  .footer-logo {
    padding: 10px 0; /* Added 10px padding top and bottom */
  }
  
  .footer-logo-img {
    height: calc(3.5rem * 0.9); /* Exactly 90% of footer height */
    width: auto;
    transition: height 0.3s ease;
  }
  
  .footer-info {
    font-size: var(--font-size-xl); /* Much bigger text */
    font-weight: 700; /* Bolder text */
    color: var(--white);
    text-align: right;
    transition: transform var(--transition-normal), opacity var(--transition-normal);
  }
  
  .footer-info:hover {
    transform: scaleY(1.02);
    opacity: 0.9;
    color: var(--primary-light);
  }
  
  /* Enhanced Animation Classes */
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  @keyframes fadeInDelayed {
    0% { opacity: 0; }
    40% { opacity: 0; }
    100% { opacity: 1; }
  }
  
  @keyframes fadeInUp {
    from { 
      opacity: 0;
      transform: translateY(20px);
    }
    to { 
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* More dramatic fly-in animations */
  @keyframes flyInZoom {
    0% {
      opacity: 0;
      transform: scale(0.8) translateY(-80px);
    }
    30% {
      opacity: 0.3;
    }
    100% {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }
  
  @keyframes flyInDramatic {
    0% {
      opacity: 0;
      transform: translateY(-100px) scale(0.5) rotateX(20deg);
      transform-origin: center;
    }
    40% {
      opacity: 0.4;
    }
    70% {
      transform: translateY(15px) scale(1.03) rotateX(-5deg);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1) rotateX(0);
    }
  }
  
  @keyframes flyInDramaticRight {
    0% {
      opacity: 0;
      transform: translateX(120px) rotate(3deg);
    }
    60% {
      opacity: 0.8;
      transform: translateX(-10px) rotate(-0.5deg);
    }
    100% {
      opacity: 1;
      transform: translateX(0) rotate(0);
    }
  }
  
  @keyframes flyInUpDramatic {
    0% {
      opacity: 0;
      transform: translateY(80px) scale(0.9);
    }
    70% {
      opacity: 0.9;
      transform: translateY(-10px) scale(1.01);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
  
  /* Metallic shine animation */
  @keyframes shimmer {
    0% {
      opacity: 0;
      background-position: -200% 0;
    }
    15% {
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    70% {
      opacity: 1;
    }
    85% {
      opacity: 0;
    }
    100% {
      opacity: 0;
      background-position: 200% 0;
    }
  }
  
  @keyframes metallicPulse {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  
  @keyframes scaleIn {
    from {
      opacity: 0;
      transform: scale(0.9);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  @keyframes pulse {
    0% {
      opacity: 0.6;
      transform: translateX(-50%) scale(1);
    }
    50% {
      opacity: 1;
      transform: translateX(-50%) scale(1.1);
    }
    100% {
      opacity: 0.6;
      transform: translateX(-50%) scale(1);
    }
  }
  
  .animated {
    animation-duration: 1.2s; /* Longer for more drama */
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); /* More dramatic easing */
  }
  
  .fade-in.animated {
    animation-name: fadeIn;
  }
  
  .fade-in-delayed.animated {
    animation-name: fadeInDelayed;
    animation-duration: 2s;
  }
  
  .fade-in-up.animated {
    animation-name: fadeInUp;
  }
  
  .fly-in-zoom.animated {
    animation-name: flyInZoom;
    animation-duration: 1.5s;
  }
  
  .fly-in-dramatic.animated {
    animation-name: flyInDramatic;
    animation-duration: 1.6s;
  }
  
  .fly-in-dramatic-right.animated {
    animation-name: flyInDramaticRight;
    animation-duration: 1.4s;
  }
  
  .fly-in-up-dramatic.animated {
    animation-name: flyInUpDramatic;
    animation-duration: 1.3s;
  }
  
  .scale-in.animated {
    animation-name: scaleIn;
  }
  
  .pulse.animated {
    animation-name: pulse;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
  
  /* === Media Queries === */
  /* Layout gradually adapts as screen width changes */
  @media (max-width: 768px) {
    .top-section {
      flex-direction: column;
      align-items: stretch;
    }
    
    .logo-container {
      align-self: flex-start;
      margin-bottom: var(--space-4);
    }
    
    .slogan-container {
      text-align: right;
      align-self: flex-end;
    }
    
    .hero-slogan {
      white-space: normal; /* Allow text to wrap */
    }
  }
  
  @media (max-width: 600px) {
    .slogan-container {
      text-align: right;
      align-self: flex-end;
    }
    
    .hero-slogan {
      font-size: 0.92rem;
      line-height: 1.2;
      white-space: normal; /* Allow text to wrap */
      word-break: break-word;
      padding-right: 2vw;
    }
    .footer-info {
      font-size: 1.04rem;
      font-weight: 700;
      text-align: right;
      padding: 0;
    }
  }
  
  @media (min-width: 640px) {
    .features-grid {
      grid-template-columns: repeat(2, 1fr);
      padding-bottom: 50px;
    }
  }
  
  @media (min-width: 768px) {
    .top-section {
      padding-top: var(--space-6);
    }
    
    .firm-logo {
      height: 80px;
    }
    
    .footer-content {
      flex-direction: row;
      justify-content: space-between;
    }
  }
  
  @media (min-width: 1024px) {
    .top-section {
      padding-top: var(--space-8);
    }
    
    .firm-logo {
      height: 100px;
    }
    
    .features-grid {
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-4);
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }