/* ============================================================
   Premium Developer Portfolio - Hero Section Stylesheet
   ------------------------------------------------------------
   Sections in this file:
     1.  CSS Variables (colors, fonts, spacing, sizing, shadows)
     2.  Global Reset (consistent baseline across browsers)
     3.  Typography (font families, weights, responsive sizes)
     4.  Hero Layout (full-screen section, centered container)
     5.  Flexbox Structure (two-column grid on desktop)
     6.  Left Column (text content spacing rhythm)
     7.  Greeting Badge (rounded pill, soft border)
     8.  Main Heading (Space Grotesk Bold, focal point)
     9.  Professional Title (accent color highlight)
     10. Introduction (muted, readable paragraph)
     11. CTA Buttons (primary filled + secondary outlined)
     12. Social Icons (circular buttons, hover effects)
     13. Right Column (profile area composition)
     14. Profile Image (circular, gradient border, soft shadow)
     15. Decorative Shapes (blobs, rings, dots, square)
     16. Hover Effects (transitions and micro-interactions)
     17. Accessibility (visible focus states)
     18. Responsive Design (media queries for tablet & mobile)
   ============================================================ */


/* ============================================================
   1. CSS VARIABLES
   ------------------------------------------------------------
   CSS variables (custom properties) let us reuse values and make
   the theme easy to update. We store the color palette, fonts,
   spacing scale, sizing, shadows, and transitions here so the
   whole hero stays consistent. The 8px spacing system is
   reflected in the --space-* variables (8, 16, 24, 32, 48, 64,
   96). Centralizing these values is what makes the design feel
   handcrafted and intentional rather than ad-hoc.
   ============================================================ */
:root {
  /* ---- Color Palette ---- */
  --color-bg: #0F172A;              /* Deep navy background */
  --color-surface: #1E293B;         /* Surface/cards */
  --color-primary: #38BDF8;         /* Primary accent (links, primary button) */
  --color-accent: #F59E0B;          /* Warm accent (title, highlights) */
  --color-text: #F8FAFC;            /* Primary text */
  --color-muted: #94A3B8;           /* Muted/secondary text */
  --color-border: rgba(255, 255, 255, 0.08); /* Subtle borders */

  /* ---- Typography ---- */
  --font-heading: "Space Grotesk", sans-serif; /* Name & headings */
  --font-body: "Inter", sans-serif;            /* Body & UI text */

  /* ---- Sizing ---- */
  --max-width: 1200px;              /* Maximum content width */
  --button-radius: 999px;           /* Fully rounded pill button */
  --social-size: 48px;              /* Circular social icon size */
  --profile-size: 400px;            /* REFINED: larger profile image for stronger presence */

  /* ---- 8px Spacing System ---- */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;        /* REFINED: larger section spacing for premium breathing room */

  /* ---- Transitions (smooth, premium easing) ---- */
  --transition-speed: 300ms;
  --transition-ease: cubic-bezier(0.4, 0, 0.2, 1); /* Material-style easing */

  /* ---- Shadows / Glow (REFINED: softer, more natural) ---- */
  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.15);          /* Soft depth - refined softer */
  --shadow-card: 0 8px 30px rgba(0, 0, 0, 0.12);          /* REFINED: premium card shadow */
  --shadow-card-hover: 0 20px 50px rgba(0, 0, 0, 0.20);   /* REFINED: deeper hover shadow */
  --shadow-profile: 0 30px 80px rgba(0, 0, 0, 0.40);      /* Profile depth - refined */
  --shadow-primary: 0 8px 24px rgba(56, 189, 248, 0.30);  /* Primary button glow */
  --shadow-primary-hover: 0 12px 32px rgba(56, 189, 248, 0.45);

  /* ---- Border Radius (REFINED: more natural, varied) ---- */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-pill: 999px;
}


/* ============================================================
   2. GLOBAL RESET
   ------------------------------------------------------------
   Different browsers apply different default styles (margins,
   paddings, box-sizing). A reset creates a predictable baseline
   so our layout behaves consistently everywhere. We set
   box-sizing: border-box so padding/borders don't expand widths.
   ============================================================ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  /* Smooth scrolling when anchor links (#projects) are clicked */
  scroll-behavior: smooth;
}


/* ============================================================
   3. TYPOGRAPHY
   ------------------------------------------------------------
   We set the default body font to Inter (UI text) and a base
   color. Headings override the font-family with Space Grotesk
   where needed. A responsive base font-size on the body keeps
   text comfortable on all screen sizes.
   ============================================================ */
body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.6;                 /* Slightly looser for readability */
  -webkit-font-smoothing: antialiased;   /* Crisper text on macOS/Windows */
  -moz-osx-font-smoothing: grayscale;
}


/* ============================================================
   4. HERO LAYOUT
   ------------------------------------------------------------
   The .hero section spans the full viewport height (min-height:
   100vh) and centers its content both vertically and
   horizontally using Flexbox. A subtle radial-gradient overlay
   on the background adds gentle depth and a premium glow without
   being overly bright. The section is positioned relative so
   that any future decorative layers can anchor to it.
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  width: 100%;

  display: flex;
  align-items: center;              /* Vertically center the container */
  justify-content: center;          /* Horizontally center the container */

  padding: var(--space-6) var(--space-4); /* 64px top/bottom, 32px sides */

  /* REFINED: Added a subtle gradient overlay and ambient glow behind
     the profile area (right side) for premium depth */
  background:
    radial-gradient(circle at 75% 50%, rgba(56, 189, 248, 0.12), transparent 50%),
    radial-gradient(circle at 15% 20%, rgba(56, 189, 248, 0.10), transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(245, 158, 11, 0.08), transparent 45%),
    var(--color-bg);
}


/* ============================================================
   5. FLEXBOX STRUCTURE
   ------------------------------------------------------------
   .hero-container caps the content at a 1200px maximum width
   and centers it horizontally with auto margins. Flexbox
   creates the two-column layout: the left text column takes
   more space (1.2) so the copy stays the primary focus, while
   the right profile column (1) balances the composition. A
   generous gap (64px) keeps the columns from feeling cramped.
   ============================================================ */
.hero-container {
  position: relative;               /* Above any decorative layers */
  z-index: 1;

  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;                   /* Center the container horizontally */

  display: flex;
  align-items: center;              /* Vertically align both columns */
  justify-content: space-between;   /* Push columns apart */
  gap: var(--space-6);              /* 64px gap between columns */
}


/* ============================================================
   6. LEFT COLUMN
   ------------------------------------------------------------
   The left column holds all textual content. It takes a larger
   flex share so the reading flow dominates the layout. We use
   Flexbox with a column direction and a consistent vertical gap
   to create a calm, premium vertical rhythm between the badge,
   name, title, intro, buttons, and social links.
   ============================================================ */
.hero-left {
  flex: 1.2;                        /* Slightly wider than the right column */
  min-width: 0;                     /* Allows flex item to shrink correctly */

  display: flex;
  flex-direction: column;
  align-items: flex-start;          /* Left-align all text content */
  gap: var(--space-4);              /* REFINED: 32px gap for more premium breathing room */
}


/* ============================================================
   7. GREETING BADGE
   ------------------------------------------------------------
   A small rounded pill that introduces the developer in a
   friendly, handcrafted way. The soft border and muted text
   keep it subtle so it never competes with the main heading.
   The pill shape (border-radius: 999px) and small padding give
   it a crafted, tactile feel.
   ============================================================ */
.greeting-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);              /* 8px between emoji and text */

  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-muted);

  padding: var(--space-1) var(--space-2); /* 8px vertical, 16px horizontal */
  border-radius: 999px;             /* Fully rounded pill */
  border: 1px solid var(--color-border);
  background-color: rgba(30, 41, 59, 0.5); /* Slight surface tint */
}

/* The emoji is decorative; we ensure it inherits sizing nicely */
.greeting-emoji {
  font-size: 1rem;
  line-height: 1;
}


/* ============================================================
   8. MAIN HEADING
   ------------------------------------------------------------
   The developer's name is the visual focal point. It uses Space
   Grotesk Bold (700) at a large, responsive size with tight
   letter-spacing for a premium, modern look. A subtle gradient
   text fill (primary to accent) adds a handcrafted highlight
   without reducing contrast against the dark background.
   ============================================================ */
.hero-name {
  font-family: var(--font-heading);
  font-weight: 700;                 /* Space Grotesk Bold */
  font-size: clamp(2.75rem, 6vw, 4.5rem); /* Responsive: ~44px to ~72px */
  line-height: 1.05;                /* Tight line height for large display type */
  letter-spacing: -0.03em;          /* Tightening for a premium feel */

  /* Gradient text fill for a refined, handcrafted highlight */
  background: linear-gradient(135deg, var(--color-text) 0%, var(--color-primary) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent; /* Shows the gradient through the text */
  color: var(--color-text);         /* Fallback for non-clip browsers */
}


/* ============================================================
   9. PROFESSIONAL TITLE
   ------------------------------------------------------------
   The role sits directly below the name. It is smaller than the
   h1 and uses the warm accent color to add a single, deliberate
   highlight. This keeps the heading hierarchy correct (h2 after
   h1) and reinforces the developer's specialty at a glance.
   ============================================================ */
.hero-title {
  font-family: var(--font-heading);
  font-weight: 500;                 /* Lighter than the name for contrast */
  font-size: clamp(1.25rem, 2.5vw, 1.75rem); /* Responsive: ~20px to ~28px */
  letter-spacing: -0.01em;
  color: var(--color-accent);       /* Warm accent highlight */
}


/* ============================================================
   10. INTRODUCTION
   ------------------------------------------------------------
   A short, concise paragraph that tells visitors what the
   developer does. Keeping it to 2-3 lines maintains the
   premium, uncluttered feel. Muted text color and a max-width
   ensure it reads as supporting content with a comfortable
   line length (around 60-70 characters).
   ============================================================ */
.hero-intro {
  font-family: var(--font-body);
  font-size: 1.0625rem;             /* 17px - comfortable reading size */
  line-height: 1.7;                 /* Generous line height for readability */
  color: var(--color-muted);

  max-width: 32rem;                 /* Cap line length for readability */
  margin-top: var(--space-1);       /* Small extra breath above the paragraph */
}


/* ============================================================
   11. CTA BUTTONS
   ------------------------------------------------------------
   Two premium call-to-action buttons. The primary button uses a
   filled gradient (accent) style with a soft glow; the
   secondary button uses an outlined style for lower emphasis.
   Both share a base .btn class for consistent sizing, large
   click areas, rounded corners, and smooth hover transitions.
   ============================================================ */

/* Base button styles shared by both buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  white-space: nowrap;              /* Prevent the text from wrapping */

  padding: var(--space-2) var(--space-4); /* 16px vertical, 32px horizontal */
  border-radius: var(--button-radius);    /* Fully rounded pill */
  border: 1px solid transparent;

  cursor: pointer;
  transition:
    transform var(--transition-speed) var(--transition-ease),
    box-shadow var(--transition-speed) var(--transition-ease),
    background-color var(--transition-speed) var(--transition-ease),
    color var(--transition-speed) var(--transition-ease),
    border-color var(--transition-speed) var(--transition-ease);
}

/* The actions group spaces the two buttons and allows stacking */
.hero-actions {
  display: flex;
  flex-wrap: wrap;                  /* Allow wrapping on small screens */
  gap: var(--space-2);              /* 16px between buttons */
  margin-top: var(--space-2);       /* Extra breath above the CTAs */
}

/* Primary button: filled with the accent color and a soft glow */
.btn-primary {
  color: var(--color-bg);           /* Dark text on bright button for contrast */
  background: linear-gradient(135deg, var(--color-accent), #FBBF24);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.30);
}

/* Secondary button: outlined style for lower emphasis */
.btn-secondary {
  color: var(--color-text);
  background-color: transparent;
  border-color: var(--color-border);
}

/* REFINED: Hover now includes a slight scale for a more tactile feel */
.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);  /* Lift + subtle scale */
  box-shadow: 0 16px 40px rgba(245, 158, 11, 0.50);
}

/* REFINED: Hover now includes a slight scale for a more tactile feel */
.btn-secondary:hover {
  transform: translateY(-3px) scale(1.02);  /* Lift + subtle scale */
  background-color: rgba(30, 41, 59, 0.6);
  border-color: rgba(56, 189, 248, 0.4); /* Hint of primary on hover */
}

/* Active/pressed state: buttons sink slightly for feedback */
.btn:active {
  transform: translateY(0);
}


/* ============================================================
   12. SOCIAL ICONS
   ------------------------------------------------------------
   A row of circular icon buttons. Each link is a 48px circle
   with a soft border and muted icon color. On hover the circle
   fills with the primary color and the icon turns dark, giving
   a crisp, premium micro-interaction. The list uses Flexbox
   with a 16px gap.
   ============================================================ */
.social-links {
  margin-top: var(--space-2);       /* Breath above the social row */
}

.social-list {
  display: flex;
  align-items: center;
  gap: var(--space-2);              /* 16px between icons */
  list-style: none;                 /* Remove default bullet points */
}

/* Each circular social button */
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--social-size);
  height: var(--social-size);

  color: var(--color-muted);
  background-color: rgba(30, 41, 59, 0.5);
  border: 1px solid var(--color-border);
  border-radius: 50%;               /* Perfect circle */

  transition:
    color var(--transition-speed) var(--transition-ease),
    background-color var(--transition-speed) var(--transition-ease),
    border-color var(--transition-speed) var(--transition-ease),
    transform var(--transition-speed) var(--transition-ease),
    box-shadow var(--transition-speed) var(--transition-ease);
}

/* The SVG icon inherits the current text color */
.social-icon {
  width: 22px;
  height: 22px;
  display: block;
  transition: transform var(--transition-speed) var(--transition-ease);
}

/* REFINED: Hover now includes icon rotation + glow for a premium feel */
.social-link:hover {
  color: var(--color-bg);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(56, 189, 248, 0.35);  /* REFINED: added glow */
}

/* REFINED: Icon rotates 5° and scales on hover for a tactile feel */
.social-link:hover .social-icon {
  transform: rotate(5deg) scale(1.1);
}


/* ============================================================
   13. RIGHT COLUMN
   ------------------------------------------------------------
   The visual side of the hero. It holds the circular profile
   image and the decorative shapes. It takes a slightly smaller
   flex share (1) than the left column and is centered so the
   composition stays balanced. position: relative lets the
   decorative shapes anchor to it.
   ============================================================ */
.hero-right {
  position: relative;               /* Anchor for decorative shapes */
  flex: 1;
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  /* Fixed height keeps the decorative composition stable */
  min-height: var(--profile-size);
}


/* ============================================================
   14. PROFILE IMAGE
   ------------------------------------------------------------
   A large circular image wrapped in a gradient ring border with
   a soft shadow. The gradient ring is created with padding plus
   a conic/linear gradient background on the frame, while the
   inner image is clipped to a circle. This gives a premium,
   handcrafted "ring" effect without extra markup.
   ============================================================ */
.profile-frame {
  position: relative;               /* Above decorative shapes */
  z-index: 2;

  width: var(--profile-size);
  height: var(--profile-size);
  padding: 6px;                     /* Ring thickness */

  /* REFINED: Richer gradient ring with a third stop for depth */
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent), var(--color-primary));
  border-radius: 50%;               /* Circle */

  /* REFINED: Layered shadow - ambient glow + depth */
  box-shadow:
    var(--shadow-profile),
    0 0 80px rgba(56, 189, 248, 0.15);  /* REFINED: soft radial glow around profile */
}

/* The image itself is clipped to a circle inside the frame */
.profile-image {
  width: 100%;
  height: 100%;
  object-fit: cover;                /* Keep aspect ratio, fill the circle */
  border-radius: 50%;               /* Circle */
  display: block;

  /* Subtle inner border to separate image from the ring */
  border: 2px solid var(--color-bg);
}


/* ============================================================
   15. DECORATIVE SHAPES
   ------------------------------------------------------------
   Purely visual background shapes: soft blurred blobs, thin
   rings, and small geometric pieces. They add depth and a
   handcrafted composition without distracting from the
   profile. All are absolutely positioned and static (no
   animation) to keep the design calm and premium.
   ============================================================ */
.decor {
  position: absolute;
  inset: 0;                         /* Fill the right column */
  z-index: 1;
  pointer-events: none;             /* Never block clicks on the image */
}

/* Soft blurred color blobs for ambient depth */
.decor-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);               /* Soft, out-of-focus glow */
  opacity: 0.5;
}

/* REFINED: Larger, softer blobs for a more organic, ambient feel */
.decor-blob--primary {
  width: 280px;
  height: 280px;
  top: -50px;
  left: -40px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.40), transparent 70%);
}

.decor-blob--accent {
  width: 240px;
  height: 240px;
  bottom: -40px;
  right: -30px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.30), transparent 70%);
}

/* Thin outline rings for a handcrafted, geometric feel */
.decor-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--color-border);
}

/* REFINED: Larger rings to match the bigger profile image */
.decor-ring--1 {
  width: 460px;
  height: 460px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Perfectly center the ring */
}

.decor-ring--2 {
  width: 540px;
  height: 540px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-color: rgba(255, 255, 255, 0.04); /* Even more subtle outer ring */
}

/* Small floating dots (static, no animation) */
.decor-dot {
  position: absolute;
  border-radius: 50%;
}

.decor-dot--1 {
  width: 14px;
  height: 14px;
  top: 18%;
  right: 12%;
  background-color: var(--color-primary);
  box-shadow: 0 0 16px rgba(56, 189, 248, 0.6);
}

.decor-dot--2 {
  width: 10px;
  height: 10px;
  bottom: 22%;
  left: 10%;
  background-color: var(--color-accent);
  box-shadow: 0 0 14px rgba(245, 158, 11, 0.6);
}

/* A small rotated square for geometric variety */
.decor-square {
  position: absolute;
  width: 18px;
  height: 18px;
  top: 30%;
  left: 8%;
  border: 1px solid var(--color-accent);
  transform: rotate(45deg);
  opacity: 0.7;
}


/* ============================================================
   16. HOVER EFFECTS
   ------------------------------------------------------------
   Hover and focus transitions are defined inline with each
   component above for clarity. This section documents the
   shared micro-interaction philosophy: every interactive
   element lifts gently on hover and uses the same 300ms easing
   curve, so the whole hero feels cohesive and responsive to
   the user.
   ============================================================ */


/* ============================================================
   17. ACCESSIBILITY - VISIBLE FOCUS STATES
   ------------------------------------------------------------
   Keyboard users need to see where focus is. We use
   :focus-visible to show a clear outline only for keyboard
   navigation (not for mouse clicks). This keeps the design
   clean for mouse users while staying accessible. The outline
   uses the primary color for strong contrast against the dark
   background.
   ============================================================ */
.btn:focus-visible,
.social-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================================
   18. RESPONSIVE DESIGN - MEDIA QUERIES
   ------------------------------------------------------------
   We use two breakpoints:
     - Tablet  (max-width: 900px): stack the two columns
       vertically, center-align the text, and scale the profile
       image down. The layout becomes single-column.
     - Mobile  (max-width: 600px): tighten spacing, reduce the
       profile image further, and stack the CTA buttons full
       width for comfortable tap targets.
   ============================================================ */

/* ---- Tablet and smaller: stack vertically ---- */
@media (max-width: 900px) {
  .hero {
    padding: var(--space-6) var(--space-3); /* 64px top/bottom, 24px sides */
  }

  .hero-container {
    flex-direction: column;          /* Stack columns vertically */
    align-items: center;             /* Center-align stacked content */
    gap: var(--space-6);             /* 64px gap between stacked columns */
    text-align: center;
  }

  /* Center-align all text content on tablet/mobile */
  .hero-left {
    align-items: center;
    order: 2;                        /* Text below the profile on tablet */
  }

  .hero-right {
    order: 1;                        /* Profile first on tablet */
    min-height: 300px;
  }

  /* Scale the profile image down for tablet */
  :root {
    --profile-size: 280px;
  }

  /* Center the introduction text on smaller screens */
  .hero-intro {
    margin-left: auto;
    margin-right: auto;
  }

  /* Center the social links row */
  .social-list {
    justify-content: center;
  }
}

/* ---- Mobile: comfortable spacing and stacked buttons ---- */
@media (max-width: 600px) {
  .hero {
    padding: var(--space-5) var(--space-2); /* 48px top/bottom, 16px sides */
    min-height: 100vh;
  }

  .hero-container {
    gap: var(--space-5);             /* 48px gap on mobile */
  }

  /* Scale the profile image down further for mobile */
  :root {
    --profile-size: 220px;
  }

  /* Stack the CTA buttons full width for comfortable tap targets */
  .hero-actions {
    flex-direction: column;
    align-items: stretch;            /* Full-width buttons */
    width: 100%;
  }

  .btn {
    width: 100%;
    padding: var(--space-2) var(--space-3); /* Slightly tighter padding */
  }

  /* Slightly smaller decorative rings on mobile */
  .decor-ring--1 {
    width: 320px;
    height: 320px;
  }

  .decor-ring--2 {
    width: 380px;
    height: 380px;
  }
}