@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');

:root {
  --bg: #121212;
  --card-bg: #1d1d1d;
  --text: #e0e0e0;
  --heading: #ffffff;
  --accent: #7dadd4;
  --radius: 8px;
  --shadow: 0 2px 6px rgba(0,0,0,.4);
  --easing: cubic-bezier(0.25,0.8,0.25,1);
  --duration: 1000ms;
  --hover-duration: 150ms;
  
  --blob-blur: 280px;
  --blob-opacity: 0.9;
  --blob-mobile-blur: 280px;
  --blob-mobile-opacity: 0.3;

  --blob1-size: 500px;
  --blob2-size: 700px;
  --blob3-size: 550px;
  --blob4-size: 750px;
  --blob5-size: 500px;

  --blob-color-1: #144714;
  --blob-color-2: #0d3a88;
  --blob-color-3: #005f73;
  --blob-color-4: #3d003d;
  --blob-color-5: #032a4c;
}

body, html {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Open Sans', sans-serif;
  overflow-x: hidden;
}

body::before {
    position: fixed;
    left: 0;
    top: 0;
    content: '';
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 50%;
    background: #111010;
    filter: url(#noiseFilter);
}

.floating-blobs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.floating-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(var(--blob-blur));
  opacity: 0.7;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.blob-1 {
  width: var(--blob1-size);
  height: var(--blob1-size);
  background-color: var(--blob-color-1);
  top: 20%;
  left: 20%;
  animation: float-1 25s infinite;
}

.blob-2 {
  width: var(--blob2-size);
  height: var(--blob2-size);
  background-color: var(--blob-color-2);
  top: 60%;
  right: 10%;
  animation: float-2 30s infinite;
}

.blob-3 {
  width: var(--blob3-size);
  height: var(--blob3-size);
  background-color: var(--blob-color-3);
  bottom: 20%;
  left: 20%;
  animation: float-3 35s infinite;
}

.blob-4 {
  width: var(--blob4-size);
  height: var(--blob4-size);
  background-color: var(--blob-color-4);
  top: 40%;
  left: 50%;
  animation: float-4 28s infinite;
}

.blob-5 {
  width: var(--blob5-size);
  height: var(--blob5-size);
  background-color: var(--blob-color-5);
  top: 80%;
  right: 30%;
  animation: float-5 32s infinite;
}

@keyframes float-1 {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(100px, -50px) scale(1.1); }
  50% { transform: translate(200px, 100px) scale(0.9); }
  75% { transform: translate(-50px, 150px) scale(1.2); }
}

@keyframes float-2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(-150px, -100px) scale(1.3) rotate(120deg); }
  66% { transform: translate(-200px, 50px) scale(0.8) rotate(240deg); }
}

@keyframes float-3 {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(80px, -120px) scale(1.1); }
  40% { transform: translate(-100px, -80px) scale(0.9); }
  60% { transform: translate(150px, 60px) scale(1.2); }
  80% { transform: translate(-80px, 100px); }
}

@keyframes float-4 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  50% { transform: translate(-300px, -200px) scale(1.4) rotate(180deg); }
}

@keyframes float-5 {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-120px, -80px) scale(1.3); }
  50% { transform: translate(80px, -150px) scale(0.7); }
  75% { transform: translate(-200px, 100px) scale(1.1); }
}

h1, h2, h3, h4, h5, h6 {
  color: var(--heading);
  font-weight: 600;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

.hidden { display: none; }

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

section {
  padding: 60px 0;
  min-height: 50vh;
  position: relative;
  z-index: 10;
}

/* Hero Section */
.hero-section {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 10;
}

.hero-title span {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px) rotateX(90deg);
  animation: letter-appear var(--duration) var(--easing) forwards;
}

@keyframes letter-appear {
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
  }
}

.tagline {
  opacity: 0;
  transform: translateY(20px);
  animation: fade-slide-up var(--duration) var(--easing) forwards;
  animation-delay: calc(var(--duration) + 500ms);
}

@keyframes fade-slide-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.cta-button {
  opacity: 0;
  transform: translateY(20px);
  animation: fade-slide-up var(--duration) var(--easing) forwards;
  animation-delay: calc(var(--duration) + 800ms);
  padding: 12px 24px;
  background: var(--accent);
  color: var(--heading) !important;
  border: none;
  border-radius: var(--radius);
  font-size: 1.1em;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--hover-duration) var(--easing), box-shadow var(--hover-duration) var(--easing);
  position: relative;
  z-index: 10;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
}

/* Special styling for glass button to ensure text visibility */
.cta-button.glass3d {
  background: rgba(255, 255, 255, 0.034);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--heading) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}

.cta-button.glass3d::before {
  background: rgba(255, 255, 255, 0.082);
}

/* Glassmorphism Effect */
.glass3d {
  --filter-glass3d: blur(13px) brightness(0.73) saturate(4);
  --color-glass3d: rgba(255, 255, 255, 0.1);
  --border-glass3d: 1px solid rgba(255, 255, 255, 0.18);
  position: relative;
  z-index: 4;
  border: var(--border-glass3d);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}
.glass3d::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  z-index: -1;
  -webkit-backdrop-filter: var(--filter-glass3d);
  backdrop-filter: var(--filter-glass3d);
  background: var(--color-glass3d);
}
.glass3d::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  z-index: -1;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
}
.glass3d > * {
  position: relative;
  z-index: 6;
}

/* Projects & Cards */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.project-card {
  background: transparent;
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
  transform: translateY(50px) rotateX(15deg);
  transition: opacity var(--duration) var(--easing), transform var(--duration) var(--easing), box-shadow var(--hover-duration) var(--easing);
  position: relative;
  overflow: hidden;
}

.project-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(100,181,246,0.1) 0%, transparent 70%);
  background-size: 200% 200%;
  animation: shift-bg-position 20s linear infinite;
  z-index: 0;
  opacity: 0.5;
}

@keyframes shift-bg-position {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.project-card.visible {
  opacity: 1;
  transform: translateY(0) rotateX(0deg);
}

.project-card:hover {
  transform: scale(1.03) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  box-shadow: 0 8px 20px rgba(0,0,0,.6);
}

.project-card h3,
.project-card p,
.project-card .meta,
.project-card a {
  position: relative;
  z-index: 1;
}

.project-card h3 {
  margin-top: 0;
  color: var(--heading);
  transform: translateZ(20px);
}

.project-card p {
  margin-bottom: 10px;
  font-size: 0.9em;
  transform: translateZ(10px);
}

.project-card .meta {
  font-size: 0.8em;
  color: #aaa;
  transform: translateZ(5px);
}

.project-card a {
  color: var(--accent);
  font-weight: 600;
}

.project-card.is-clickable {
  cursor: pointer;
}

.project-card.is-clickable:focus {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* Blog Posts */
.blog-posts-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.blog-post-card {
  background: transparent;
  border-radius: var(--radius);
  padding: 20px;
  width: 100%;
  max-width: 480px;
  transition: transform var(--hover-duration) var(--easing), box-shadow var(--hover-duration) var(--easing);
}

.blog-post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0,0,0,.5);
}

.blog-post-card h3 {
  margin-top: 0;
  color: var(--heading);
}

.blog-post-card .date {
  font-size: 0.9em;
  font-style: italic;
  color: #aaa;
  margin-bottom: 0;
}

.blog-post-card a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.blog-post-card a:hover h3 {
  text-decoration: underline;
  color: var(--accent);
}

/* Error Messages */
.error-message {
  color: #ff6b6b;
  text-align: center;
  padding: 20px;
  background: rgba(255,107,107,0.1);
  border: 1px solid rgba(255,107,107,0.3);
  border-radius: var(--radius);
}

.error-message a {
  color: #ff6b6b;
  font-weight: 600;
}

/* Footer */
footer {
  text-align: center;
  padding: 20px 0;
  border-top: 1px solid #333;
  margin-top: 40px;
}

/* Responsive Design */
@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;
  }
  .floating-blob {
    animation: none !important;
    opacity: 0.2 !important;
  }
}

@media (max-width: 768px) {
  .floating-blob {
    filter: blur(var(--blob-mobile-blur));
    opacity: var(--blob-mobile-opacity);
    /* sizes remain from variables for variation */
  }
}