/* =========================
   CSS BASE RESET
========================= */

*,
*::before,
*::after{
box-sizing:border-box;
margin:0;
padding:0;
}

html{
scroll-behavior:smooth;
}

body{
min-height:100vh;
line-height:1.6;
-webkit-font-smoothing:antialiased;
}

img,
picture,
video,
canvas{
max-width:100%;
display:block;
}

a{
text-decoration:none;
color:inherit;
}

ul{
list-style:none;
}

/* =========================
   DESIGN TOKENS
========================= */
:root{
  /* COLORS */
  
  --color-primary: oklch(58.9% 0.232 282.7);
  --color-secondary: oklch(65.2% 0.245 310.1);

  /* Background and surface switch between light/dark */ 
  --color-bg: light-dark(oklch(97% 0.003 260), oklch(18.1% 0.031 260));
  --color-surface: light-dark(oklch(92% 0.005 260), oklch(22.5% 0.028 260));
  /* Text switches for readability */ 
  --color-text: light-dark(oklch(15% 0.02 260), oklch(97% 0.003 260));
  --color-muted: light-dark(oklch(40% 0.01 260), oklch(70% 0.003 260));

  /*==============================================*/
    
    /* Royal Blue */
  /*--color-primary: oklch(55% 0.25 270); /* deep, vivid royal blue */
 /* --color-primary-light: oklch(65% 0.20 270); /* lighter variant */
 /* --color-primary-dark: oklch(40% 0.20 270); /* darker variant */

  /* Orange Accent */
 /* --color-secondary: oklch(65% 0.25 40); /* bright orange */
  /*--color-secondary-light: oklch(75% 0.20 40); /* lighter orange */
  /*--color-secondary-dark: oklch(50% 0.25 40); /* deeper orange */

  /* Neutral background/text */
  /*--color-bg: light-dark(oklch(97% 0.003 260), oklch(15% 0.02 260));
  --color-surface: light-dark(oklch(92% 0.005 260), oklch(22% 0.03 260));
  --color-text: light-dark(oklch(15% 0.02 260), oklch(97% 0.003 260));
  --color-muted: light-dark(oklch(40% 0.01 260), oklch(70% 0.003 260));


/* TYPOGRAPHY */

--font-main: system-ui, -apple-system, sans-serif;

--fs-xl: clamp(2.5rem, 5vw, 4rem);
--fs-lg: clamp(1.5rem, 3vw, 2rem);
--fs-md: clamp(1rem, 2vw, 1.2rem);


/* SPACING */

--space-sm:0.5rem;
--space-md:1rem;
--space-lg:2rem;
--space-xl:4rem;


/* LAYOUT */

--container-width:1200px;

/* EFFECTS */

--radius:12px;
--transition:0.3s ease;

}

/* =========================
   BASE STYLES
========================= */

body{
font-family:var(--font-main);
background:var(--color-bg);
color:var(--color-text);
padding-inline:var(--space-md);
}

h1{
font-size:var(--fs-xl);
line-height:1.2;
}

h2{
font-size:var(--fs-lg);
margin-bottom:var(--space-lg);
}

p{
font-size:var(--fs-md);
color:var(--color-muted);
}

section{
padding-block:var(--space-xl);
}

/* =========================
   CONTAINER SYSTEM
========================= */
.container{
max-width:var(--container-width);
margin-inline:auto;
}

/* =========================
   LAYOUT PLACEHOLDERS
========================= */

.hero{
min-height:90vh;
}

.portfolio{
text-align:center;
}

/* =========================
   HERO SECTION
========================= */

.hero{
display:flex;
align-items:center;
min-height:90vh;
background-image: image-set(
    url("../images/hero-bg.avif") type("image/avif"),
    url("../images/hero-bg.webp") type("image/webp"),
    url("../images/hero-bg.jpg") type("image/jpeg")
  );background-size:cover;
background-position:center;
position:relative;
}

.hero-wrapper{

display:flex;
align-items:center;
justify-content:flex-start;
width:100%;

}

/* Create Glassmorphism effect */
.hero-content {
  max-width: 650px;
  padding: var(--space-xl);
  background: oklch(97% 0.003 260 / 0.25);   /* translucent light background */
  backdrop-filter: blur(16px);
  border-radius: var(--radius);
  border: 1px solid oklch(97% 0.003 260 / 0.08); /* subtle border */
}

/* Adjust Hero Content Typography */
.hero-content h1{
margin-bottom:var(--space-md);
}

.hero-content p{
margin-bottom:var(--space-lg);
max-width:50ch;
color: whitesmoke;

}

/* Add Overlay */
.hero::before{
content:"";
position:absolute;
inset:0;
background: oklch(0% 0 0 / 0.45);

}

.hero-wrapper{
position:relative;
}


/* Code the buttons of the Hero */
.hero-actions{
display:flex;
gap:var(--space-md);
flex-wrap:wrap;
}
.btn-primary{
padding:0.8rem 1.6rem;
background:var(--color-primary);
border-radius:var(--radius);
color:white;
font-weight:600;
transition:var(--transition);
}

.btn-primary:hover{ /*Hover effect: */
transform:translateY(-2px);
opacity:0.9;
}

.btn-secondary{
padding:0.8rem 1.6rem;
border:1px solid var(--color-secondary);
border-radius:var(--radius);
color:var(--color-primary);
transition:var(--transition);
}

.btn-secondary:hover{ /*Hover effect: */
background:var(--color-secondary);
color: white;
}

/* =========================
   NAVIGATION
========================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
 /* background: oklch(4% 0.01 260 / 0.6);
  backdrop-filter: blur(12px);*/
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
}

/* Logo */
.logo {
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.5px;
}

/* Hide Default <summary> Marker */
.nav-toggle {
  list-style: none;
  cursor: pointer;
}

.nav-toggle::-webkit-details-marker {
  display: none;
}

/* Hamburger Icon */
.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle span {
  width: 26px;
  height: 2px;
  background: var(--color-primary);
  display: block;
}

/* Navigation Links (shared styles) */
.nav-links {
  gap: var(--space-lg);
}

.nav-links a {
  font-size: 0.95rem;
  color: var(--color-text);
  transition: var(--transition);
}

.nav-links a:hover {
  color: var(--color-primary);
}

/* =========================
   Desktop Navigation
========================= */
.nav-links.desktop {
  display: flex; /* always visible */
}

/* Hide mobile menu on desktop */
@media (min-width: 769px) {
  .nav-menu.mobile {
    display: none;
  }
}

/* =========================
   Mobile Navigation
========================= */
@media (max-width: 768px) {
  /* Hide desktop links */
  .nav-links.desktop {
    display: none;
  }

  /* Show mobile menu */
  .nav-menu.mobile {
    display: block;
  }

  .nav-links.mobile {
    position: absolute;
    top: 70px;
    right: 20px;
    flex-direction: column;
    background: var(--color-surface);
    padding: var(--space-lg);
    border-radius: var(--radius);
    min-width: 200px;
    box-shadow: 0 10px 30px oklch(0% 0 0 / 0.3);
    display: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: 0.25s ease;
  }

  /* Reveal when <details> is open */
  .nav-menu[open] .nav-links.mobile {
    display: flex;
    opacity: 1;
    transform: translateY(0);
  }

  /* Adjust mobile layout */
  .navbar {
    padding-inline: var(--space-md);
  }
}

/* =========================
   SCROLL ANIMATIONS
========================= */
/* Add animation keyframes */

@keyframes fade-slide-up{

from{
opacity:0;
transform:translateY(40px);
}

to{
opacity:1;
transform:translateY(0);
}

}

/* Add animation to the hero section */
.hero-content{
animation:fade-slide-up 0.8s ease forwards;

}
/* Add viewport-triggered animation behavior. */
.hero-content,
.portfolio h2,
.portfolio-grid{

animation:fade-slide-up 0.9s ease both;
animation-timeline:view();
animation-range:entry 0% cover 40%;

}

/* Individual Project Cards animation */
.animate-in{

animation:fade-slide-up 0.7s ease both;
animation-timeline:view();
animation-range:entry 10% cover 40%;

}

/* =========================
   PORTFOLIO GRID
========================= */

.portfolio-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:var(--space-lg);
margin-top:var(--space-lg);

}
/* Style the Project Cards*/
.project-card{
position:relative;
overflow:hidden;
border-radius:var(--radius);
background:var(--color-surface);
transition:var(--transition);

}

.project-card img{
width:100%;
height:100%;
object-fit:cover;
display:block;

}

/* Add text overlay */
.project-card h3{
position:absolute;
bottom:0;
left:0;
right:0;
padding:1rem;
background:linear-gradient(
transparent,
rgba(0,0,0,0.7)
);
color:white;
font-size:1rem;

}
/* Create the Bento Layout to implement grid spanning */
.project-card.large{
grid-column:span 2;
grid-row:span 2;

}

.project-card.tall{
grid-row:span 2;

}
/* Add card hover effects */
.project-card:hover{

transform:translateY(-6px);

}

.project-card img{

transition:transform 0.4s ease;

}

.project-card:hover img{

transform:scale(1.05);

}
/* Add Mobile Layout Adjustment to Prevent large cards from breaking layout on small screens */
@media (max-width:700px){

.project-card.large{

grid-column:span 1;
grid-row:span 1;

}

.project-card.tall{

grid-row:span 1;

}

}

/* Add Container Queries to the Portfolio */
.portfolio-grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:var(--space-lg);
container-type:inline-size;

}
/* Add a responsive layout inside project cards */
@container (min-width:400px){
.project-card{
display:grid;
grid-template-rows:1fr auto;

}

}
/* Upgrade Project Card Layout to create a more advanced responsive card layout */
@container (min-width:500px){
.project-card{
grid-template-columns:1fr 1fr;

}

.project-card img{
height:100%;

}

}
/* Add a Fluid Typography using clamp() */
.project-card h3{

font-size:clamp(1rem,2vw,1.3rem);

}

/* Add smooth micro interaction on the project cards */
.project-card:hover{

box-shadow:0 12px 30px rgba(0,0,0,0.25);

}