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


:root {
  --accent: #7EE7FF;
}


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


/* Body */
body {
  font-family: 'Exo 2', sans-serif;
  color: #fff;
  height: auto;
  overflow-y: auto;
  position: relative;
  background: #050509;
}

/* Animated background container */
.animated-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: -3;
  background: radial-gradient(circle at 25% 30%, rgba(138, 43, 226, 0.70), transparent 55%),
              radial-gradient(circle at 75% 65%, rgba(0, 206, 209, 0.70), transparent 55%),
              radial-gradient(circle at 50% 50%, rgba(255, 182, 193, 0.65), transparent 55%);
  background-size: 220% 220%;
  filter: blur(40px);
  opacity: 1;
  animation: gentleMove 12s linear infinite;
}


/* Large visible floating circles */
.animated-bg::before,
.animated-bg::after {
  content: '';
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, transparent 80%);
  animation: floatCircle 10s ease-in-out infinite;
  z-index: -3;
  opacity: 0.95;
}


.animated-bg::after {
  top: 58%;
  left: 68%;
  width: 420px;
  height: 420px;
  animation-duration: 12s;
}


/* Keyframes for smooth motion */
@keyframes gentleMove {
  0% { background-position: 0% 0%, 100% 0%, 50% 50%; }
  50% { background-position: 100% 50%, 0% 100%, 50% 50%; }
  100% { background-position: 0% 0%, 100% 0%, 50% 50%; }
}


@keyframes floatCircle {
  0% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(45px) translateX(35px); }
  100% { transform: translateY(0) translateX(0); }
}


/* Noise overlay */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: -2;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgba(255,255,255,0.12)'><rect width='1' height='1'/></svg>");
  background-repeat: repeat;
  opacity: 0.25;
  animation: noiseMove 1.5s steps(2) infinite;
}


@keyframes noiseMove {
  0% { transform: translate(0,0); }
  25% { transform: translate(-10px,5px); }
  50% { transform: translate(5px,-10px); }
  75% { transform: translate(-5px,10px); }
  100% { transform: translate(0,0); }
}


/* Flex container */
.split-container {
  display: flex;
  width: 100%;
  min-height: 100vh;
  overflow: visible;
  transition: all 0.5s ease;
  position: relative;
  z-index: 2;
}


/* Left panel */
.split.left {
  flex: 1;
  background: linear-gradient(180deg, rgba(10,10,10,0.88), rgba(8,8,12,0.6));
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 3rem;
  overflow-y: auto;
  transition: flex 0.5s ease, padding 0.5s ease;
  position: relative;
}


/* Right panel */
.split.right {
  flex: 0.3; 
  background: linear-gradient(180deg, rgba(12,12,14,0.9), rgba(14,14,18,0.7));
  padding: 3rem;
  overflow-y: auto;
  transition: flex 0.5s ease, padding 0.5s ease, opacity 0.5s ease;
  position: sticky;
  top: 0;
  height: 100vh;
}


/* Right panel hidden */
.split-container.right-hidden .split.right {
  flex: 0 0 0;      
  padding: 0;      
  opacity: 0;      
  pointer-events: none;
}


.split.right {
  position: sticky;
  top: 0; /* stick to top exactly */
  height: 100vh; /* take full viewport height */
  overflow-y: auto;
}


.split-container.right-hidden .split.left {
  flex: 2;
  justify-content: center;
  align-items: flex-start;
}


/* Scrollbars */
.split.right::-webkit-scrollbar,
.split.left::-webkit-scrollbar {
  width: 12px;
}


.split.right::-webkit-scrollbar-track,
.split.left::-webkit-scrollbar-track {
  background: #111;
}


.split.right::-webkit-scrollbar-thumb,
.split.left::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.25);
  border-radius: 6px;
}


.split.right::-webkit-scrollbar-thumb:hover,
.split.left::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.45);
}


/* Left content fade-in & slide */
.split.left .content {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s ease;
}


.split.left .content.fade-in {
  opacity: 1;
  transform: translateY(0);
}


.split.left .content.slide-out {
  transform: translateX(-20px);
  opacity: 0;
}


.split.left .content.slide-in {
  transform: translateX(0);
  opacity: 1;
}


/* Left headings */
.split.left h1 {
  display: flex;
  align-items: center;
  gap: 10px; /* space between name and signature */
  font-family: 'Exo 2', sans-serif;
  font-size: 3rem;
  margin-bottom: 0.5rem;
  color: var(--accent);
  position: relative;
}


/* Make the h1 a flex container */
.split.left h1 {
  display: flex;
  align-items: center; /* vertically center signature with name */
  gap: 10px; /* space between name and signature */
  font-family: 'Exo 2', sans-serif;
  font-size: 3rem;
  margin-bottom: 0.5rem;
  color: var(--accent);
}


/* Signature image styling */
.split.left h1 .signature {
  width: 20%;              /* slightly bigger than normal text */
  height: auto;
  cursor: pointer;
  display: inline-block;
  transform: translateY(10%) rotate(-2deg); /* move it down 10% of its own height */
  transition: transform 0.3s ease;
}


.split.left h1 .signature:hover {
  transform: translateY(10%) rotate(0deg) scale(1.05); /* keep the downward shift on hover */
}


/* Homepage underline animation */
.split.left h1::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 50%;
  height: 3px;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease, opacity 0.5s ease;
}


.split.left h1.active::after {
  transform: scaleX(1);
  opacity: 1;
}


/* Subheading and paragraphs */
.split.left h2 {
  font-size: 1.3rem;
  color: #bdbdbd;
  margin-bottom: 2rem;
}


.split.left p {
  line-height: 1.6;
  margin-bottom: 2rem;
  color: #ddd;
}


.split.left .subheading {
  font-size: 1.4rem;
  color: #cfcfcf;
  margin-bottom: 1rem;
}


/* Skills */
.skills {
  transition: opacity 0.3s;
}


.skills.hidden {
  opacity: 0;
  display: none;
}


.skills h3 {
  margin-bottom: 1rem;
  color: var(--accent);
}


.skills ul {
  list-style: none;
}


.skills li {
  margin-bottom: 0.5rem;
  color: #fff;
}


/* Homepage button */
.homepage-card {
  background: rgba(126,231,255,0.07);
  padding: 1.5rem;
  border-radius: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  color: #eefcff;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 1s forwards;
  animation-delay: 0.1s;
  transition: transform 0.3s, background 0.3s, box-shadow 0.3s, color 0.3s;
}


.homepage-card:hover {
  transform: scale(1.05);
  background: rgba(126,231,255,0.14);
  box-shadow: 0 0 18px rgba(126,231,255,0.12);
}


.homepage-card.selected {
  background: rgba(126,231,255,0.18);
  box-shadow: 0 0 22px rgba(126,231,255,0.14);
}


/* Learning outcome cards */
.outcome-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns */
  gap: 1.5rem;
}

/* Make the first card span both columns */
.outcome-grid .outcome-card:first-child {
  grid-column: span 2;
}



.outcome-card {
  background: rgba(255,255,255,0.06);
  padding: 1.5rem;
  border-radius: 1rem;
  text-align: center;
  font-weight: 600;
  transition: transform 0.3s, background 0.3s, box-shadow 0.3s, color 0.3s, filter 0.3s;
  opacity: 0;
  animation: fadeUp 1s ease forwards;
  animation-delay: 0.5s;
  color: #f5f9fb;
  cursor: pointer;
  position: relative;
}

.outcome-card:hover {
  transform: scale(1.05);
  background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.08));
  box-shadow: 0 0 20px rgba(126,231,255,0.18);
  filter: drop-shadow(0 0 18px var(--accent));
}


.outcome-card::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 25%;
  width: 50%;
  height: 2px;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.outcome-card:hover::after {
  transform: scaleX(1);
  box-shadow: 0 0 12px var(--accent);
}


/* Projects */
.section-title {
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid rgba(255,255,255,0.12);
  padding-bottom: 0.5rem;
  font-family: 'Exo 2', sans-serif;
  color: var(--accent);
}


.projects {
  margin-bottom: 3rem;
}


.projects .project-card {
  background: rgba(255,255,255,0.06);
  padding: 2rem;
  border-radius: 1rem;
  transition: transform 0.3s, background 0.3s, box-shadow 0.3s;
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeUp 1s ease forwards;
}


.project-card:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,0.12);
  box-shadow: 0 0 18px rgba(126,231,255,0.10);
}


.project-card h3 {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  color: var(--accent);
}


/* Progress boxes */
.progress-boxes {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  width: 100%;
}


.progress-box {
  display: flex;
  gap: 2rem;
  background: rgba(255,255,255,0.06);
  padding: 1.5rem;
  border-radius: 1rem;
  width: 90%;
  max-width: 1000px;
  min-width: 300px;
  max-height: 500px;
  overflow: hidden;
  box-sizing: border-box;
}


.progress-box img {
  flex-shrink: 0;
  width: 400px;
  height: auto;
  border-radius: 0.5rem;
  object-fit: cover;
  display: block;
  margin: auto 0;
}

/* Container for the images inside progress boxes */
.progress-box .img-container {
  display: flex;
  justify-content: center;   /* center horizontally */
  align-items: center;       /* center vertically */
  height: 100%;              /* fill the parent box */
  padding: 10px;             /* optional: spacing inside the container */
  box-sizing: border-box;    /* include padding in height */
}

/* Images inside the container */
.progress-box .img-container img {
  max-width: 100%;           /* scale down if needed */
  max-height: 100%;          /* don't overflow vertically */
  object-fit: contain;       /* maintain aspect ratio */
  display: block;            /* remove inline baseline alignment */
}

.progress-box .text {
  flex: 1;
  overflow-y: auto;
  max-height: 500px;
  padding-right: 0.5rem;
}


.progress-box .text::-webkit-scrollbar {
  width: 8px;
}


.progress-box .text::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
}


.progress-box .text::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.22);
  border-radius: 4px;
}


.progress-box .text::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,0.42);
}


.progress-box .text h3 {
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
  color: var(--accent);
}


.progress-box .text h4 {
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-size: 1.1rem;
  color: var(--accent);
}


.progress-box .text p {
  margin-bottom: 1em;
  line-height: 1.6;
  color: #ddd;
  word-break: break-word;
}


/* Left/right text alignment */
.progress-box.left .text,
.progress-box.right .text {
  text-align: left;
}


/* Progress separator */
.progress-separator {
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,0.28);
  margin: 2rem 0;
  border-radius: 1px;
}


/* Toggle button */
.toggle-right {
  position: fixed;
  top: 1rem;
  right: 1rem;
  background: rgba(255,255,255,0.12);
  border: none;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  z-index: 1000;
  transition: background 0.3s;
}


.toggle-right:hover {
  background: rgba(255,255,255,0.22);
}


/* Center left content when right hidden */
.split-container.right-hidden .split.left .content {
  max-width: 800px;
  margin: 0 auto;
}


/* Fade animation keyframes */
@keyframes fadeUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}


/* Image overrides for specific weeks */
.progress-box img[src="images/Figma.png"]  { width: 200px; }
.progress-box img[src="images/Figma4.png"]  { width: 200px; }
.progress-box img[src="videos/PW.gif"]  { width: 350px; }
.progress-box img[src="videos/PW1.gif"]  { width: 350px; }
.progress-box img[src="images/Pw_production.png"] { width: 400px;}
.progress-box img[src="images/Logo.png"] { width: 400px;}
.progress-box.logo-for-our-studio img { width: 130px; }
.progress-box.final-version-of-logo img { width: 300px; }
.progress-box img[src="images/PW_poster.png"] { width: 330px; }

/* Particle background */
.particle-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  mix-blend-mode: screen;
}


.particle-bg .particle {
  position: absolute;
  width: var(--size, 22px);
  height: var(--size, 22px);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.95), rgba(126,231,255,0.9) 40%, rgba(126,231,255,0.15) 100%);
  transform: translate(0,0);
  animation-name: floatParticle;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
  animation-duration: var(--d, 10s);
  opacity: var(--o, 0.6);
  filter: drop-shadow(0 0 18px rgba(126,231,255,0.35));
}


/* Particle animation */
@keyframes floatParticle {
  0% { transform: translate(0, 0) scale(1); opacity: var(--o, 0.6); }
  50% { transform: translate(var(--dx, 20px), var(--dy, -20px)) scale(1.35); opacity: calc(var(--o, 0.6) * 0.7); }
  100% { transform: translate(0, 0) scale(1); opacity: var(--o, 0.6); }
}


/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .particle-bg, .animated-bg { animation: none !important; transition: none !important; }
  .particle-bg .particle { animation: none !important; opacity: 0.12 !important; }
}


/* Ensure stacking order */
.animated-bg { z-index: -3 !important; }
.animated-bg::before, .animated-bg::after { z-index: -3 !important; }
body::after { z-index: -2 !important; }
.particle-bg { z-index: 1 !important; }
.split-container { z-index: 2 !important; position: relative; }