/*
==================================================
================= BASE STYLES ==================
=================================================
Table of Content:
0. Reset Styles
  0.1 Box Sizing
  0.2 Margin & Padding Reset
  0.3 HTML & Body Defaults
  0.4 Form & Button Reset
  0.5 List Reset
1. Root Variables (Theme System)
  1.1 Colors
  1.2 Typography
  1.3 Spacing System
  1.4 Border Radius
  1.5 Shadows
  1.6 Transitions
2. Dark Theme Overrides
3. Utilities
  3.1 Snowflake Animation
  3.2 Reveal Scroll Animation
  3.3 Section Title Styling (title)
  3.4 Vertical Padding Utility (pd-y)
==================================================
*/

/* ============================================
   0. RESET STYLES
============================================ */

/* --- 0.1 Box Sizing --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* --- 0.2 Margin & Padding Reset --- */
* {
  margin: 0;
  padding: 0;
}

/* --- 0.3 HTML & Body Defaults --- */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  overflow-y: hidden;
}

/* --- 0.4 Form & Button Reset --- */
button,
input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}

/* --- 0.5 Button specific --- */
button {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- 0.6 List Reset --- */
ul,
ol {
  list-style: none;
}

/* ============================================
   1. ROOT VARIABLES (THEME SYSTEM)
============================================ */

/* --- 1.1 Colors --- */
:root {
  --color-primary: #0065f8 ;
  --color-secondary: #00caff;
  --color-tertiary: #00ffde;

  --site-bg-gradient: repeating-linear-gradient(to left top, #0065f8 0%, #004080 100%);
  --color-bg-light: #ffffff;
  --color-bg-dark: #121212;

  --color-text-primary: #000000;
  --color-text-secondary: #666666;
  --color-text-inverse: #ffffff;

  /* --- 1.2 Typography --- */
  --font-family-base: 'Poppins', sans-serif;
  --font-family-heading: 'Montserrat', 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.5rem;
  --font-size-xxl: 2rem;
  --font-size-xxxl: 3.5rem;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --line-height-sm: 1.2;
  --line-height-md: 1.5;
  --line-height-lg: 1.8;

  /* --- 1.3 Spacing System --- */
  --spacing-xxs: 0.25rem;
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;
  --spacing-xxxl: 6rem;

  /* --- 1.4 Border Radius --- */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 50%;

  /* --- 1.5 Shadows --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0px 0px 4px 4px #0065f8;
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.2);

  /* --- 1.6 Transitions --- */
  --transition-fast: 0.2s;
  --transition-normal: 0.3s;
  --transition-slow: 0.8s ease;
}

/* ============================================
   2. DARK THEME OVERRIDES
============================================ */
[data-theme="dark"] {
  --site-bg-gradient: linear-gradient(180deg, #0a192f 0%, #00111f 100%);
  --color-text-primary: #e6eef8;
  --color-text-secondary: #b8c7dd;
}

/* ============================================
   3. UTILITIES
============================================ */

/* --- 3.1 Snowflake Animation --- */
.snowflake {
  position: absolute;
  top: 30px;
  z-index: -1000;
  animation: fall linear infinite;
}

.snowflake .inner {
  display: block;
  background: #fff;
  border-radius: 50%;
  animation: sway ease-in-out infinite;
}

@keyframes fall {
  to {
    transform: translateY(100vh);
  }
}

@keyframes sway {

  0%,
  100% {
    transform: translateX(-30px);
  }

  50% {
    transform: translateX(30px);
  }
}

/* --- 3.2 Reveal Scroll Animation --- */
.reveal {
  opacity: 0;
  transform: translateY(50px) scale(0.98) rotateX(8deg);
  filter: blur(6px);
  transition:
    opacity 0.9s ease-out,
    transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.8s ease-out;
  will-change: opacity, transform, filter;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0) scale(1) rotateX(0deg);
  filter: blur(0);
}

/* --- 3.3 Section Title Styling --- */
/* Adds an underline + hover animation for section titles */
.title {
  position: relative;
}

.title::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background-color: var(--color-primary);
  border-radius: var(--radius-sm);
  transition: var(--transition-normal);
}

.title:hover::after {
  width: 120px;
}

/* --- 3.4 Vertical Padding Utility (pd-y) --- */
/* Adds vertical padding to sections for consistent spacing */
.pd-y {
  padding: var(--spacing-xxxl) 0;
}