/* ===========================
   CUSTOM CURSOR
   =========================== */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  mix-blend-mode: difference;
}

.cursor-dot {
  width: var(--cursor-size);
  height: var(--cursor-size);
  border-radius: 50%;
  background: var(--warm-white);
  box-shadow: 0 0 10px rgba(255, 248, 240, 0.5);
  transition: transform 0.15s var(--ease-out-expo);
}

.cursor-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--cursor-ring-size);
  height: var(--cursor-ring-size);
  border-radius: 50%;
  border: 1px solid rgba(255, 248, 240, 0.3);
  transform: translate(-50%, -50%);
  animation: cursor-orbit 3s linear infinite;
  transition: width 0.4s var(--ease-out-expo),
              height 0.4s var(--ease-out-expo),
              border-color 0.3s;
}

@keyframes cursor-orbit {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.cursor-trail {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 248, 240, 0.15);
  pointer-events: none;
  z-index: 9998;
}

/* Directional arrow inside cursor ring */
.cursor-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.3s, color 0.3s;
  pointer-events: none;
  /* Size matches the expanded cursor-ring so the arrow sits on its edge */
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 2px;
  color: var(--warm-white);
}

/* In project section (grey cursor) — subtle hint arrow */
.cursor.has-direction .cursor-arrow {
  opacity: 0.4;
}

/* On the project link (colored cursor) — brighter arrow in project color */
.cursor.has-direction.is-hovering .cursor-arrow {
  opacity: 0.85;
}

/* Arrow picks up the project color */
.cursor.is-dino .cursor-arrow { color: var(--dino-green); }
.cursor.is-rara .cursor-arrow { color: var(--rara-cyan); }
.cursor.is-flux .cursor-arrow { color: var(--flux-magenta); }
.cursor.is-now .cursor-arrow  { color: var(--now-amber); }

/* Hover states */
.cursor.is-hovering .cursor-dot {
  transform: scale(0.5);
}

.cursor.is-hovering .cursor-ring {
  width: 60px;
  height: 60px;
  animation-duration: 1.5s;
}

/* Project-specific cursor colors */
.cursor.is-dino .cursor-ring { border-color: var(--dino-green); box-shadow: 0 0 15px var(--dino-green); }
.cursor.is-rara .cursor-ring { border-color: var(--rara-cyan); box-shadow: 0 0 15px var(--rara-cyan); }
.cursor.is-flux .cursor-ring { border-color: var(--flux-magenta); box-shadow: 0 0 15px var(--flux-magenta); }
.cursor.is-now .cursor-ring { border-color: var(--now-amber); box-shadow: 0 0 15px var(--now-amber); }

/* Hide cursor on touch */
@media (hover: none) and (pointer: coarse) {
  .cursor, .cursor-trail { display: none !important; }
}

/* ===========================
   HERO - EVENT HORIZON
   =========================== */
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 2.5rem + 8vw, 12rem);
  font-weight: 800;
  text-align: center;
  letter-spacing: -0.03em;
  position: relative;
  z-index: 2;
  color: var(--white-hot);
  text-shadow:
    0 0 60px rgba(255, 255, 255, 0.4),
    0 0 120px rgba(255, 255, 255, 0.15);
}

.hero-title .char {
  display: inline-block;
  will-change: transform, opacity;
}

.hero-enter-prompt {
  display: block;
  position: absolute;
  bottom: 12vh;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  opacity: 0.6;
  animation: float-down 2s ease-in-out infinite;
  cursor: none;
  transition: opacity 0.3s;
  z-index: 2;
}

.hero-enter-prompt:hover {
  opacity: 1;
}

@keyframes float-down {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(10px); }
}

/* Rotating tagline ring */
.tagline-ring {
  position: absolute;
  width: clamp(280px, 40vw, 550px);
  height: clamp(280px, 40vw, 550px);
  animation: spin 20s linear infinite;
  opacity: 0.2;
  z-index: 1;
}

.tagline-ring text {
  font-family: var(--font-mono);
  font-size: 14px;
  fill: var(--warm-white);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ===========================
   SINGULARITY - MANIFESTO
   =========================== */
.manifesto {
  max-width: 700px;
  text-align: center;
  position: relative;
}

.manifesto-line {
  font-size: var(--text-xl);
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.4;
  opacity: 0;
  will-change: transform, opacity;
}

.manifesto-line em {
  font-style: italic;
  color: var(--pulse-gold);
}

/* ===========================
   PROJECT CARDS
   =========================== */

/* Shared project styles */
.project {
  position: relative;
  will-change: transform, opacity;
}

.project-number {
  font-family: var(--font-mono);
  font-size: var(--text-massive);
  font-weight: 700;
  opacity: 0.04;
  position: absolute;
  z-index: 0;
  line-height: 1;
  user-select: none;
  will-change: transform;
}

.project-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  position: relative;
  z-index: 2;
  transition: transform 0.4s var(--ease-out-expo);
}

.project-link {
  display: block;
  position: relative;
  cursor: none;
}

.project-preview {
  position: relative;
  overflow: hidden;
  z-index: 1;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.5s var(--ease-out-expo),
              transform 0.5s var(--ease-out-expo);
}

.project-link:hover .project-preview {
  opacity: 1;
  transform: scale(1);
}

.project-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder backgrounds when images fail to load */
#project-dino .project-preview {
  background: linear-gradient(135deg, var(--deep-indigo), rgba(125, 255, 164, 0.15));
}
#project-rara .project-preview {
  background: linear-gradient(135deg, var(--deep-indigo), rgba(77, 238, 234, 0.15));
}
#project-flux .project-preview {
  background: linear-gradient(135deg, var(--deep-indigo), rgba(255, 77, 158, 0.15));
}
#project-now .project-preview {
  background: linear-gradient(135deg, var(--deep-indigo), rgba(255, 184, 77, 0.15));
}

/* --- Project 01: Dino Fietser --- */
#project-dino {
  padding-left: 5%;
}

#project-dino .project-number {
  left: -5%;
  top: -10%;
}

#project-dino .project-title {
  transform: rotate(-3deg);
  transform-origin: left center;
}

#project-dino .project-link:hover .project-title {
  transform: rotate(-3deg) translateY(-10px);
}

#project-dino .project-preview {
  width: min(65vw, 700px);
  height: min(40vw, 400px);
  border-radius: 8px;
  margin-left: -5%;
  margin-top: var(--space-sm);
  padding: 8px;
  background: rgba(13, 11, 26, 0.9);
  border: 1px solid rgba(125, 255, 164, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(125, 255, 164, 0.08);
}

#project-dino .project-preview img {
  border-radius: 4px;
}

#project-dino .project-preview::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 60px rgba(125, 255, 164, 0.2);
  pointer-events: none;
  border-radius: 8px;
}

/* --- Project 02: RaRa Robot --- */
#project-rara {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#project-rara .project-number {
  left: 5%;
  top: -5%;
}

#project-rara .project-number::after {
  content: '2';
  position: absolute;
  right: -120%;
}

#project-rara .project-preview {
  width: min(35vw, 350px);
  height: min(35vw, 350px);
  border-radius: 50%;
  margin-top: var(--space-sm);
  border: 2px solid rgba(77, 238, 234, 0.15);
  box-shadow: 0 0 20px rgba(77, 238, 234, 0.08);
  transition: opacity 0.5s var(--ease-out-expo),
              transform 0.5s var(--ease-out-expo),
              border-color 0.3s,
              box-shadow 0.3s;
}

#project-rara .project-link:hover .project-preview {
  border-color: var(--rara-cyan);
  transform: scale(1) rotate(5deg);
  box-shadow: 0 0 30px rgba(77, 238, 234, 0.2);
}

/* --- Project 03: in-Flux --- */
#project-flux {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: var(--space-lg);
}

#project-flux .project-number {
  right: 5%;
  top: -15%;
}

#project-flux .project-title {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: clamp(1.5rem, 1rem + 2vw, 3rem);
}

#project-flux .project-preview {
  width: min(55vw, 550px);
  height: min(35vw, 380px);
  border-radius: 8px;
  border: 2px solid rgba(255, 77, 158, 0.25);
  box-shadow: 0 8px 32px rgba(255, 77, 158, 0.12),
              0 0 0 1px rgba(255, 77, 158, 0.08);
}

#project-flux .project-preview::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 40px rgba(255, 77, 158, 0.15);
  pointer-events: none;
  border-radius: 6px;
}

/* --- Project 04: NowStalgia --- */
#project-now {
  display: flex;
  justify-content: center;
}

#project-now .project-number {
  left: 10%;
  bottom: -10%;
}

#project-now .project-preview {
  width: min(40vw, 400px);
  padding: 12px 12px 50px 12px;
  background: var(--warm-white);
  border-radius: 2px;
  transform: scale(0.95) rotate(2deg);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  margin-top: var(--space-sm);
}

#project-now .project-link:hover .project-preview {
  transform: scale(1) rotate(2deg);
}

#project-now .project-preview img {
  border-radius: 0;
  filter: sepia(80%) contrast(0.9);
  transition: filter 0.8s var(--ease-out-quart);
}

#project-now .project-link:hover .project-preview img {
  filter: sepia(0%) contrast(1);
}

/* Project responsive */
@media (max-width: 768px) {
  #project-flux {
    flex-direction: column;
  }

  #project-flux .project-title {
    writing-mode: horizontal-tb;
  }

  .project-preview {
    width: 85vw !important;
    height: auto !important;
    aspect-ratio: 16/10;
  }

  #project-rara .project-preview {
    width: 60vw !important;
    height: 60vw !important;
  }

  #project-now .project-preview {
    width: 75vw !important;
  }

  .project-number {
    font-size: clamp(4rem, 20vw, 8rem) !important;
  }
}

/* ===========================
   ORIGIN - FOOTER
   =========================== */
.origin-content {
  text-align: center;
  position: relative;
}

.origin-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: var(--space-lg);
}

.origin-links {
  display: flex;
  gap: var(--space-lg);
  justify-content: center;
  flex-wrap: wrap;
}

.origin-link {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  position: relative;
  cursor: none;
  padding: var(--space-xs) var(--space-sm);
  transition: color 0.3s;
}

.origin-link:hover {
  color: var(--pulse-gold);
}

.origin-link::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 228, 160, 0);
  transition: border-color 0.3s, transform 0.5s var(--ease-out-expo);
  transform: scale(0.8);
}

.origin-link:hover::before {
  border-color: rgba(255, 228, 160, 0.2);
  transform: scale(1.2);
}