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

.hero {
  margin-top: 80px;
  min-height: calc(100vh - 80px);

  display: flex;
  align-items: center;
  justify-content: center;

  padding: var(--spacing-3xl) var(--spacing-lg);

  position: relative;
  overflow: hidden;

  background:
    radial-gradient(circle at top right,
      rgba(139,92,246,.15),
      transparent 35%),

    radial-gradient(circle at bottom left,
      rgba(6,182,212,.12),
      transparent 35%),

    linear-gradient(
      135deg,
      #0b1020 0%,
      #111827 50%,
      #0f172a 100%
    );
}

.hero::before {
  content: "";

  position: absolute;

  top: -250px;
  right: -250px;

  width: 500px;
  height: 500px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(139,92,246,.25),
      transparent 70%
    );

  filter: blur(60px);

  animation: floatGlow 10s ease-in-out infinite;
}

.hero::after {
  content: "";

  position: absolute;

  bottom: -250px;
  left: -250px;

  width: 500px;
  height: 500px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(6,182,212,.18),
      transparent 70%
    );

  filter: blur(60px);

  animation: floatGlowReverse 12s ease-in-out infinite;
}

@keyframes floatGlow {

  0%,100%{
    transform:translate(0,0);
  }

  50%{
    transform:translate(-40px,-40px);
  }
}

@keyframes floatGlowReverse {

  0%,100%{
    transform:translate(0,0);
  }

  50%{
    transform:translate(40px,40px);
  }
}

.hero__content {
  position: relative;
  z-index: 5;

  max-width: 1200px;
  width: 100%;

  text-align: center;
}

.hero__title {

  font-size: clamp(3rem, 8vw, 5rem);

  font-weight: 800;

  line-height: 1.1;

  margin-bottom: 1rem;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #d8b4fe,
      #67e8f9
    );

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.terminal-symbol {
  color: var(--color-accent-primary);
}

.hero__subtitle {

  max-width: 850px;

  margin: 0 auto;

  font-size: 1.25rem;

  line-height: 1.8;

  color: var(--color-text-secondary);
}

/* ==========================================
   TERMINAL GRID
========================================== */

.terminal-grid {

  display: grid;

  grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

  gap: 2rem;

  margin-top: 4rem;
}

/* ==========================================
   TERMINAL WINDOW
========================================== */

.terminal-panel {

  position: relative;

  background:
    rgba(20,27,45,.85);

  border:
    1px solid rgba(255,255,255,.08);

  border-radius: 18px;

  overflow: hidden;

  backdrop-filter: blur(16px);

  transition: all .35s ease;

  box-shadow:
    0 10px 40px rgba(0,0,0,.35);
}

.terminal-panel:hover {

  transform:
    translateY(-6px);

  border-color:
    rgba(139,92,246,.5);

  box-shadow:
    0 0 40px rgba(139,92,246,.25),
    0 12px 50px rgba(0,0,0,.45);
}

/* MAC STYLE HEADER */

.terminal-header {

  position: relative;

  padding: 1rem 1rem 1rem 4.5rem;

  text-align: left;

  font-family: var(--font-family-mono);

  color: #cbd5e1;

  background:
    rgba(255,255,255,.03);

  border-bottom:
    1px solid rgba(255,255,255,.06);
}

.terminal-header::before {

  content: "";

  position: absolute;

  left: 1rem;
  top: 50%;

  width: 12px;
  height: 12px;

  border-radius: 50%;

  transform: translateY(-50%);

  background: #ef4444;

  box-shadow:
    18px 0 0 #f59e0b,
    36px 0 0 #22c55e;
}

.terminal-header::after {

  content: "$";

  margin-left: .5rem;

  color: var(--color-accent-primary);
}

/* ==========================================
   TERMINAL CONTENT
========================================== */

.terminal-content {

  text-align: left;

  padding: 1.5rem;

  font-family: var(--font-family-mono);

  line-height: 2;
}

.terminal-content p {

  color: #cbd5e1;

  position: relative;

  padding-left: 1.5rem;
}

.terminal-content p::before {

  content: ">";

  position: absolute;

  left: 0;

  color: #67e8f9;
}

/* ==========================================
   CTA
========================================== */

.hero__cta {

  margin-top: 3rem;

  display: flex;

  justify-content: center;

  gap: 1rem;

  flex-wrap: wrap;
}

/* ==========================================
   BLINKING PROMPT
========================================== */

.hero__title::after {

  content: "_";

  color: #67e8f9;

  animation:
    blink 1s infinite;
}

@keyframes blink {

  0%,50%{
    opacity:1;
  }

  51%,100%{
    opacity:0;
  }
}

/* ==========================================
   MOBILE
========================================== */

@media (max-width:768px){

  .hero{
    padding:2rem 1.5rem;
  }

  .terminal-grid{
    grid-template-columns:1fr;
  }

  .hero__subtitle{
    font-size:1rem;
  }

}

.hero-command{

font-family: var(--font-family-mono);

font-size:1rem;

color:#67e8f9;

margin-bottom:1rem;

letter-spacing:.08em;

text-transform:lowercase;
}

.history-panel{

margin-top:2rem;
}

.projects-panel{

margin-top:2rem;
}

.projects-panel .terminal-content p{

cursor:pointer;

transition:all .25s ease;
}

.projects-panel .terminal-content p:hover{

color:#67e8f9;

transform:translateX(8px);
}

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

.nav-panel {

  margin-top: 2rem;

  max-width: 700px;

  margin-left: auto;
  margin-right: auto;
}

.terminal-link {

  color: #67e8f9;

  text-decoration: none;

  display: inline-block;

  transition: all .25s ease;

  font-family: var(--font-family-mono);
}

.terminal-link:hover {

  color: #d8b4fe;

  transform: translateX(8px);
}

/* ==========================================
   TERMINAL HEADER FIX
========================================== */

.terminal-header {

  display: flex;

  align-items: center;

  gap: .75rem;
}

/* remove extra purple $ if it still appears */

.terminal-header::after {

  display: none;
}

/* ==========================================
   COMMAND STYLE
========================================== */

.hero-command {

  font-family: var(--font-family-mono);

  color: #67e8f9;

  font-size: .95rem;

  margin-bottom: 1rem;

  letter-spacing: .05em;
}

/* ==========================================
   PROJECT TERMINAL
========================================== */

.projects-panel .terminal-content p {

  cursor: pointer;

  transition: all .25s ease;
}

.projects-panel .terminal-content p:hover {

  color: #d8b4fe;

  transform: translateX(10px);
}

/* ==========================================
   STICKY TERMINAL PROMPT
========================================== */

.floating-prompt {

  position: fixed;

  bottom: 20px;
  left: 20px;

  z-index: 9999;

  font-family: var(--font-family-mono);

  font-size: .9rem;

  color: #67e8f9;

  background: rgba(10,15,30,.85);

  border: 1px solid rgba(103,232,249,.25);

  padding: .75rem 1rem;

  border-radius: 12px;

  backdrop-filter: blur(16px);

  box-shadow:
    0 0 25px rgba(103,232,249,.15);
}

/* ==========================================
   PREMIUM GLOW
========================================== */

.history-panel:hover,
.projects-panel:hover,
.nav-panel:hover {

  box-shadow:
    0 0 40px rgba(139,92,246,.20),
    0 12px 50px rgba(0,0,0,.45);
}