/* ============================================================
   EFFECTS.CSS — Visual effects layer (10 features)
   Colors: --cyan #00d4ff | --purple #a855f7 | --gold #ffd700
   ============================================================ */

/* ── 1. SCROLL PROGRESS BAR ─────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #00d4ff 0%, #a855f7 50%, #ffd700 100%);
  z-index: 10000;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.8), 0 0 16px rgba(168, 85, 247, 0.4);
  transition: width 0.08s linear;
}

/* ── 2. CURSOR BLOB ─────────────────────────────────────── */
#cursor-blob {
  position: fixed;
  width: 340px;
  height: 340px;
  background: radial-gradient(
    ellipse at center,
    rgba(0, 212, 255, 0.16) 0%,
    rgba(168, 85, 247, 0.10) 45%,
    transparent 72%
  );
  border-radius: 60% 40% 70% 30% / 50% 60% 40% 70%;
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  filter: blur(4px);
  animation: blobMorph 9s ease-in-out infinite alternate;
  opacity: 0;
  transition: opacity 0.6s ease;
  will-change: transform, border-radius;
}

#cursor-blob.visible {
  opacity: 1;
}

@keyframes blobMorph {
  0%   { border-radius: 60% 40% 70% 30% / 50% 60% 40% 70%; }
  16%  { border-radius: 40% 60% 30% 70% / 65% 35% 60% 40%; }
  33%  { border-radius: 70% 30% 50% 50% / 30% 70% 55% 45%; }
  50%  { border-radius: 35% 65% 60% 40% / 55% 45% 70% 30%; }
  66%  { border-radius: 55% 45% 40% 60% / 40% 60% 35% 65%; }
  83%  { border-radius: 45% 55% 65% 35% / 70% 30% 50% 50%; }
  100% { border-radius: 65% 35% 45% 55% / 45% 55% 65% 35%; }
}

/* ── 3. BACKGROUND BLOBS ────────────────────────────────── */
.bg-blob {
  position: fixed;
  border-radius: 60% 40% 70% 30% / 50% 60% 40% 70%;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  will-change: transform, border-radius;
}

.bg-blob-1 {
  width: 520px;
  height: 520px;
  background: radial-gradient(ellipse, rgba(0, 212, 255, 0.22) 0%, transparent 70%);
  top: -120px;
  left: -120px;
  filter: blur(80px);
  opacity: 0.9;
  animation: bgBlobMorph1 16s ease-in-out infinite alternate,
             bgBlobFloat1 12s ease-in-out infinite alternate;
}

.bg-blob-2 {
  width: 620px;
  height: 620px;
  background: radial-gradient(ellipse, rgba(168, 85, 247, 0.20) 0%, transparent 70%);
  bottom: -160px;
  right: -160px;
  filter: blur(90px);
  opacity: 0.85;
  animation: bgBlobMorph2 19s ease-in-out infinite alternate,
             bgBlobFloat2 14s ease-in-out infinite alternate;
}

.bg-blob-3 {
  width: 400px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(255, 215, 0, 0.14) 0%, transparent 70%);
  top: 38%;
  left: 55%;
  filter: blur(70px);
  opacity: 0.75;
  animation: bgBlobMorph3 13s ease-in-out infinite alternate,
             bgBlobFloat3 10s ease-in-out infinite alternate;
}

@keyframes bgBlobMorph1 {
  0%   { border-radius: 60% 40% 70% 30% / 50% 60% 40% 70%; }
  33%  { border-radius: 40% 60% 30% 70% / 65% 35% 60% 40%; }
  66%  { border-radius: 70% 30% 50% 50% / 30% 70% 55% 45%; }
  100% { border-radius: 50% 50% 40% 60% / 55% 45% 65% 35%; }
}

@keyframes bgBlobMorph2 {
  0%   { border-radius: 35% 65% 60% 40% / 55% 45% 70% 30%; }
  33%  { border-radius: 55% 45% 40% 60% / 40% 60% 35% 65%; }
  66%  { border-radius: 45% 55% 65% 35% / 70% 30% 50% 50%; }
  100% { border-radius: 65% 35% 45% 55% / 45% 55% 65% 35%; }
}

@keyframes bgBlobMorph3 {
  0%   { border-radius: 50% 50% 60% 40% / 40% 60% 50% 50%; }
  50%  { border-radius: 65% 35% 35% 65% / 60% 40% 65% 35%; }
  100% { border-radius: 40% 60% 55% 45% / 50% 50% 40% 60%; }
}

@keyframes bgBlobFloat1 {
  0%   { transform: translate(0px, 0px); }
  50%  { transform: translate(30px, 20px); }
  100% { transform: translate(10px, 35px); }
}

@keyframes bgBlobFloat2 {
  0%   { transform: translate(0px, 0px); }
  50%  { transform: translate(-25px, -20px); }
  100% { transform: translate(-10px, -35px); }
}

@keyframes bgBlobFloat3 {
  0%   { transform: translate(0px, 0px); }
  50%  { transform: translate(20px, -25px); }
  100% { transform: translate(-15px, 20px); }
}

/* ── 4. PARTICLES CANVAS ────────────────────────────────── */
#particles-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* ── 5. GRAIN OVERLAY ───────────────────────────────────── */
#grain-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
  opacity: 0.038;
}

/* ── 6. CURTAIN REVEAL ──────────────────────────────────── */
[data-reveal="curtain"] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.95s cubic-bezier(0.77, 0, 0.18, 1);
}

[data-reveal="curtain"].curtain-open {
  clip-path: inset(0 0% 0 0);
}

/* ── 7. MAGNETIC BUTTON ─────────────────────────────────── */
[data-magnetic] {
  transition: transform 0.2s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.2s ease;
  display: inline-block;
}

/* ── 8. TYPEWRITER ──────────────────────────────────────── */
.typewriter-cursor {
  display: inline-block;
  margin-left: 2px;
  font-weight: 300;
  animation: twBlink 0.7s step-end infinite;
  color: #00d4ff;
}

@keyframes twBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── 9. INFINITE MARQUEE ────────────────────────────────── */
.marquee-container {
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}

.marquee-track {
  display: flex;
  gap: 2rem;
  width: max-content;
  animation: marqueeScroll 28s linear infinite;
}

.marquee-container:hover .marquee-track {
  animation-play-state: paused;
}

@keyframes marqueeScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── MARQUEE PARTNER CARD SIZING ────────────────────────── */
.marquee-track .partner-card {
  min-width: 280px;
  max-width: 280px;
  flex-shrink: 0;
}

/* ── 10. PARALLAX SECTIONS ──────────────────────────────── */
[data-parallax] {
  will-change: transform;
}


/* ── PAGE TRANSITIONS ───────────────────────────────────── */

/* Dark overlay — fades away to reveal new page on entry */
#page-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 99996;
  pointer-events: none;
  background: #06080f;
  opacity: 1;
  transition: opacity 0.4s ease;
}

#page-transition-overlay.page-revealed {
  opacity: 0;
}

/* Body enter: zoom in from depth */
body.page-enter {
  animation: pageEnter 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
  transform-origin: center center;
}

@keyframes pageEnter {
  0%   { transform: scale(0.88) rotate(-2deg); filter: blur(14px); opacity: 0; }
  55%  { transform: scale(1.02) rotate(0.3deg); filter: blur(3px);  opacity: 1; }
  100% { transform: scale(1)    rotate(0deg);  filter: blur(0);    opacity: 1; }
}

/* ── EFFECT: GLITCH (about.html) ────────────────────────── */
body.glitch-exit {
  animation: glitchExit 0.78s steps(3) forwards;
  pointer-events: none;
  overflow: hidden;
}

@keyframes glitchExit {
  0%   { filter: none;                                          transform: none; }
  10%  { filter: hue-rotate(90deg) saturate(10) contrast(3);   transform: translate(5px, 0) scaleX(1.01); }
  22%  { filter: hue-rotate(-60deg) saturate(8) brightness(1.5); transform: translate(-7px, 2px) scaleX(0.99); }
  36%  { filter: none;                                          transform: none; }
  52%  { filter: hue-rotate(180deg) saturate(15) contrast(4) brightness(2); transform: translate(4px, -3px); }
  67%  { filter: hue-rotate(45deg) saturate(6);                transform: translate(-5px, 0); }
  82%  { filter: brightness(5) saturate(20);                   transform: scale(1.02); }
  100% { filter: brightness(0);                                transform: none; opacity: 0; }
}

/* ── EFFECT: BSOD (student_life.html) ───────────────────── */
#bsod-overlay {
  position: fixed; inset: 0; z-index: 99998;
  background: #0078d4;
  color: #fff;
  font-family: 'Segoe UI', system-ui, sans-serif;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.07s;
}

#bsod-overlay.show { opacity: 1; }

.bsod-inner { max-width: 560px; text-align: left; padding: 0 20px; }
.bsod-emoji { font-size: 5em; margin-bottom: 24px; line-height: 1; }
.bsod-title { font-size: 1.25em; font-weight: 600; margin-bottom: 18px; }
.bsod-inner p { font-size: 0.95em; line-height: 1.6; margin: 0 0 4px; }
.bsod-progress { color: #cde8ff; margin-top: 14px; font-size: 0.92em; }

/* ── EFFECT: PROGRESS (applicants.html) ─────────────────── */
#progress-overlay {
  position: fixed; inset: 0; z-index: 99998;
  background: #000a14;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s;
}

#progress-overlay.show { opacity: 1; }

.progress-inner {
  font-family: 'Courier New', monospace;
  color: #00d4ff;
  width: 430px; max-width: 90vw;
}

.progress-title {
  font-size: 1.05em; color: #a855f7;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 212, 255, 0.25);
}

.progress-log {
  font-size: 0.8em; color: #7891a8;
  min-height: 96px; margin-bottom: 14px;
  overflow-y: auto;
}
.progress-log p, .progress-log-line { margin: 4px 0; }

.progress-bar-track {
  height: 16px;
  background: rgba(0, 212, 255, 0.08);
  border: 1px solid rgba(0, 212, 255, 0.35);
  border-radius: 2px; overflow: hidden; margin-bottom: 5px;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #0056b3, #00d4ff, #a855f7);
  width: 0%;
  transition: width 0.2s ease;
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

.progress-pct { text-align: right; font-size: 0.82em; color: #00d4ff; }

/* ── EFFECT: TERMINAL (contacts.html) ───────────────────── */
#terminal-overlay {
  position: fixed; inset: 0; z-index: 99998;
  background: rgba(0, 0, 0, 0.93);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s;
}

#terminal-overlay.show { opacity: 1; }

.terminal-window {
  width: 520px; max-width: 92vw;
  background: #0d1117;
  border-radius: 8px;
  border: 1px solid rgba(0, 212, 255, 0.22);
  box-shadow: 0 0 40px rgba(0, 212, 255, 0.12), 0 20px 60px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}

.terminal-titlebar {
  background: #1c2128;
  padding: 9px 14px;
  display: flex; align-items: center; gap: 7px;
}

.term-dot {
  width: 12px; height: 12px; border-radius: 50%; display: inline-block;
}
.term-dot.red    { background: #ff5f56; }
.term-dot.yellow { background: #ffbd2e; }
.term-dot.green  { background: #27c93f; }
.term-titletext  { color: #7891a8; font-size: 0.78em; font-family: monospace; margin-left: 6px; }

.terminal-body {
  padding: 14px 16px; font-family: 'Courier New', monospace;
  font-size: 0.86em; min-height: 130px; color: #c8d6e8;
}

.term-line         { line-height: 1.75; color: #00d4ff; margin: 0; }
.term-line.term-response { color: #7891a8; }
.term-prompt       { color: #a855f7; }
.term-cmd          { color: #00d4ff; }
.term-out          { color: #7891a8; }
.term-ok           { color: #27c93f; }
.term-cursor {
  display: inline-block; width: 8px; height: 1em;
  background: #00d4ff; vertical-align: text-bottom;
  animation: termBlink 0.55s step-end infinite;
}
@keyframes termBlink { 50% { opacity: 0; } }

/* ── REDUCED MOTION ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #cursor-blob, .bg-blob, [data-reveal="curtain"], [data-magnetic],
  .marquee-track, .typewriter-cursor, [data-parallax],
  .director-photo, body.page-enter, body.glitch-exit {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    clip-path: none !important;
  }
}