/**
 * custom.css — Infidata Solusi Integrasi
 * Design system components: glass-card, hex-container, tech-grid, scroll reveal, utilities
 * Requirements: 15.4, 15.5, 15.6
 */

/* ============================================================
   CSS Custom Properties (Design System Tokens)
   ============================================================ */

:root {
  /* Primary palette */
  --color-primary:                  #003d9b;
  --color-primary-container:        #0052cc;
  --color-on-primary:               #ffffff;
  --color-on-primary-container:     #c4d2ff;
  --color-inverse-primary:          #b2c5ff;
  --color-primary-fixed:            #dae2ff;
  --color-primary-fixed-dim:        #b2c5ff;
  --color-on-primary-fixed:         #001848;
  --color-on-primary-fixed-variant: #0040a2;

  /* Secondary palette */
  --color-secondary:                #535f72;
  --color-on-secondary:             #ffffff;
  --color-secondary-container:      #d7e3fa;
  --color-on-secondary-container:   #596578;
  --color-secondary-fixed:          #d7e3fa;
  --color-secondary-fixed-dim:      #bbc7dd;
  --color-on-secondary-fixed:       #101c2c;
  --color-on-secondary-fixed-variant: #3c475a;

  /* Tertiary palette */
  --color-tertiary:                 #314368;
  --color-on-tertiary:              #ffffff;
  --color-tertiary-container:       #495a81;
  --color-on-tertiary-container:    #c1d2ff;
  --color-tertiary-fixed:           #d8e2ff;
  --color-tertiary-fixed-dim:       #b4c6f3;
  --color-on-tertiary-fixed:        #051a3e;
  --color-on-tertiary-fixed-variant: #35466c;

  /* Error palette */
  --color-error:                    #ba1a1a;
  --color-on-error:                 #ffffff;
  --color-error-container:          #ffdad6;
  --color-on-error-container:       #93000a;

  /* Surface palette */
  --color-surface:                  #f8f9fb;
  --color-surface-dim:              #d9dadc;
  --color-surface-bright:           #f8f9fb;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low:    #f3f4f6;
  --color-surface-container:        #edeef0;
  --color-surface-container-high:   #e7e8ea;
  --color-surface-container-highest: #e1e2e4;
  --color-on-surface:               #191c1e;
  --color-on-surface-variant:       #434654;
  --color-inverse-surface:          #2e3132;
  --color-inverse-on-surface:       #f0f1f3;
  --color-surface-tint:             #0c56d0;
  --color-surface-variant:          #e1e2e4;

  /* Outline */
  --color-outline:                  #737685;
  --color-outline-variant:          #c3c6d6;

  /* Background */
  --color-background:               #f8f9fb;
  --color-on-background:            #191c1e;

  /* Typography */
  --font-headline:  'Montserrat', sans-serif;
  --font-body:      'Inter', sans-serif;

  /* Spacing (4px base grid) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Border radius */
  --radius-sm:   0.125rem;
  --radius:      0.25rem;
  --radius-md:   0.375rem;
  --radius-lg:   0.5rem;
  --radius-xl:   0.75rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-reveal: 700ms cubic-bezier(0.16, 1, 0.3, 1);
}


/* ============================================================
   Glass Card — dark/hero sections (Requirement 15.4)
   ============================================================ */

.glass-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  transition: border-color var(--transition-base),
              background var(--transition-base),
              box-shadow var(--transition-base);
}

.glass-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 32px rgba(0, 61, 155, 0.15);
}


/* ============================================================
   Glass Card Light — bright/light sections
   ============================================================ */

.glass-card-light {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: var(--radius-xl);
  transition: border-color var(--transition-base),
              background var(--transition-base),
              box-shadow var(--transition-base);
}

.glass-card-light:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 82, 204, 0.2);
  box-shadow: 0 4px 20px rgba(0, 61, 155, 0.08);
}


/* ============================================================
   Hex Container — hexagonal icon framing (Requirement 15.5)
   ============================================================ */

.hex-container {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Size variants */
.hex-container-sm {
  width: 48px;
  height: 48px;
}

.hex-container-md {
  width: 64px;
  height: 64px;
}

.hex-container-lg {
  width: 80px;
  height: 80px;
}

/* Color variants */
.hex-container-primary {
  background: linear-gradient(135deg, var(--color-primary-container), var(--color-primary));
}

.hex-container-secondary {
  background: rgba(255, 255, 255, 0.1);
}

.hex-container-light {
  background: var(--color-secondary-container);
}


/* ============================================================
   Tech Grid Background — radial gradient dots (Requirement 15.6)
   ============================================================ */

.tech-grid {
  background-image: radial-gradient(
    circle,
    rgba(0, 82, 204, 0.1) 1px,
    transparent 1px
  );
  background-size: 32px 32px;
}

/* Variant: lighter dots for dark backgrounds */
.tech-grid-dark {
  background-image: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.08) 1px,
    transparent 1px
  );
  background-size: 32px 32px;
}

/* Variant: denser grid */
.tech-grid-dense {
  background-image: radial-gradient(
    circle,
    rgba(0, 82, 204, 0.12) 1px,
    transparent 1px
  );
  background-size: 20px 20px;
}


/* ============================================================
   Scroll Reveal Animation (IntersectionObserver-driven)
   ============================================================ */

/**
 * Initial state: elements with [data-reveal] start hidden and shifted down.
 * JavaScript (shared.js → initScrollReveal) adds/removes these classes
 * via IntersectionObserver when the element enters the viewport.
 */
[data-reveal] {
  opacity: 0;
  transform: translateY(2rem); /* ~32px = translate-y-8 */
  transition:
    opacity var(--transition-reveal),
    transform var(--transition-reveal);
  will-change: opacity, transform;
}

/* Revealed state — added by JS when element enters viewport */
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/**
 * Staggered delay variants — apply to children for cascade effect.
 * Usage: <div data-reveal data-reveal-delay="1"> ... </div>
 */
[data-reveal][data-reveal-delay="1"] { transition-delay: 100ms; }
[data-reveal][data-reveal-delay="2"] { transition-delay: 200ms; }
[data-reveal][data-reveal-delay="3"] { transition-delay: 300ms; }
[data-reveal][data-reveal-delay="4"] { transition-delay: 400ms; }
[data-reveal][data-reveal-delay="5"] { transition-delay: 500ms; }

/**
 * Tailwind-compatible utility classes used by initScrollReveal() in shared.js.
 * The JS implementation toggles opacity-0/opacity-100 and translate-y-8/translate-y-0
 * Tailwind classes directly. These declarations ensure the transitions work even
 * when Tailwind CDN is not yet loaded or for non-Tailwind contexts.
 */
.opacity-0  { opacity: 0; }
.opacity-100 { opacity: 1; }
.translate-y-8 { transform: translateY(2rem); }
.translate-y-0 { transform: translateY(0); }
.transition-all { transition-property: all; }
.duration-700   { transition-duration: 700ms; }


/* ============================================================
   Focus Indicators — Accessibility (Requirement 13.6)
   ============================================================ */

/**
 * Visible focus ring for all interactive elements navigated via keyboard.
 * Meets WCAG 2.1 Level AA — 3:1 contrast ratio for focus indicator.
 */
:focus-visible {
  outline: 2px solid var(--color-primary-container);
  outline-offset: 3px;
  border-radius: var(--radius);
}

/* Remove default outline only when :focus-visible is supported */
:focus:not(:focus-visible) {
  outline: none;
}

/* Enhanced focus for buttons */
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--color-primary-container);
  outline-offset: 3px;
  border-radius: var(--radius);
  box-shadow: 0 0 0 4px rgba(0, 82, 204, 0.15);
}

/* Enhanced focus for links */
a:focus-visible {
  outline: 2px solid var(--color-primary-container);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Enhanced focus for form inputs */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--color-primary-container);
  outline-offset: 0;
  border-color: var(--color-primary-container);
  box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.1);
}


/* ============================================================
   Transition Utilities
   ============================================================ */

.transition-fast   { transition: all var(--transition-fast); }
.transition-base   { transition: all var(--transition-base); }
.transition-slow   { transition: all var(--transition-slow); }

/* Specific property transitions */
.transition-colors {
  transition: color var(--transition-base),
              background-color var(--transition-base),
              border-color var(--transition-base);
}

.transition-transform {
  transition: transform var(--transition-base);
}

.transition-opacity {
  transition: opacity var(--transition-base);
}

.transition-shadow {
  transition: box-shadow var(--transition-base);
}


/* ============================================================
   Hero Gradient — dark hero sections
   ============================================================ */

.hero-gradient {
  background: linear-gradient(135deg, #091e42 0%, #002147 60%, #003d9b 100%);
}

.hero-gradient-overlay {
  background: linear-gradient(
    to bottom,
    rgba(9, 30, 66, 0.0) 0%,
    rgba(9, 30, 66, 0.6) 100%
  );
}


/* ============================================================
   Reduced Motion — Accessibility
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}