/* ═══════════════════════════════════════════
   hero.css — Hero Section
   Simplified: lighter background scrim, unified text color,
   removed chip / alias / tagline / action button clutter.
═══════════════════════════════════════════ */
.hero {
  position: relative; z-index: 2;
  min-height: 100vh;
  display: flex; align-items: center;
  padding: 9rem 3rem 6rem;
  overflow: hidden;
  /* Lighter left scrim — text is readable without burying the world */
  background: linear-gradient(
    105deg,
    rgba(2, 6, 14, 0.92) 0%,
    rgba(2, 6, 14, 0.88) 28%,
    rgba(2, 6, 14, 0.55) 42%,
    rgba(2, 6, 14, 0.18) 56%,
    transparent 68%
  );
}

/* Ambient orbs — reduced so they don't compete with WebGL */
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(100px); pointer-events: none; z-index: 0;
}
.orb-1 {
  width: 55vw; height: 55vw; max-width: 700px;
  top: -20%; left: -20%;
  background: radial-gradient(circle, rgba(12,34,54,0.50) 0%, transparent 70%);
  animation: orb-1 20s ease-in-out infinite alternate;
}
.orb-2 {
  width: 38vw; height: 38vw; max-width: 500px;
  bottom: -15%; right: -12%;
  background: radial-gradient(circle, rgba(29,136,112,0.14) 0%, transparent 70%);
  animation: orb-2 25s ease-in-out infinite alternate;
}
.orb-3 {
  width: 24vw; height: 24vw; max-width: 340px;
  top: 35%; left: 52%;
  background: radial-gradient(circle, rgba(61,255,208,0.04) 0%, transparent 70%);
  animation: orb-3 16s ease-in-out infinite alternate;
}
@keyframes orb-1 { to { transform: translate(4%,  5%) scale(1.05); } }
@keyframes orb-2 { to { transform: translate(-5%,-4%) scale(1.07); } }
@keyframes orb-3 { to { transform: translate(-10%,8%) scale(0.94); } }

/* Bioluminescent particles */
.hero-particle {
  position: absolute; border-radius: 50%;
  background: var(--c-biolume); box-shadow: 0 0 6px var(--c-biolume);
  pointer-events: none; z-index: 1;
  animation: particle-float var(--p-dur,8s) ease-in-out infinite var(--p-del,0s);
}
@keyframes particle-float {
  0%,100% { transform: translate(0,0) scale(1); opacity: var(--p-op, 0.3); }
  33%  { transform: translate(var(--p-x,10px), var(--p-y,-15px)) scale(1.3); opacity: calc(var(--p-op,0.3)*1.5); }
  66%  { transform: translate(calc(var(--p-x,10px)*-0.5), var(--p-y2,-8px)) scale(0.8); opacity: calc(var(--p-op,0.3)*0.5); }
}

/* Hero content container */
.hero-body {
  position: relative; z-index: 2;
  max-width: 580px;
}

/* Eyebrow */
.hero-eyebrow {
  font-family: var(--font-mono); font-size: var(--t-sm);
  letter-spacing: 0.22em; color: var(--c-biolume); text-transform: lowercase;
  margin-bottom: 1.4rem;
  opacity: 0; animation: fade-up 0.7s var(--ease) 0.1s forwards;
}

/* Name */
.hero-name {
  font-family: var(--font-serif); font-size: var(--t-hero);
  font-weight: 700; line-height: 0.92; letter-spacing: -0.01em;
  display: flex; flex-direction: column;
  margin-bottom: 1.4rem;
  filter: drop-shadow(0 2px 16px rgba(2,8,16,0.90));
  opacity: 0; animation: fade-up 0.8s var(--ease) 0.22s forwards;
}
/* Both spans share the same color family as all body text */
.name-first {
  background: linear-gradient(140deg, var(--c-star) 0%, var(--c-biolume-soft) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.name-last {
  background: linear-gradient(140deg, var(--c-biolume-soft) 0%, var(--c-biolume) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* Divider rule */
.hero-rule {
  width: 48px; height: 1.5px;
  background: linear-gradient(to right, var(--c-biolume), transparent);
  margin-bottom: 1.6rem;
  opacity: 0; animation: fade-up 0.6s var(--ease) 0.38s forwards;
}

/* One-sentence mission — same color as hero name base (--c-star) */
.hero-mission {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 300; line-height: 1.55;
  color: var(--c-star);
  margin-bottom: 2rem;
  opacity: 0; animation: fade-up 0.7s var(--ease) 0.52s forwards;
}

/* Scroll hint */
.hero-scroll {
  position: absolute; bottom: 2.5rem; left: 3rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem;
  opacity: 0; animation: fade-up 0.6s var(--ease) 1.0s forwards;
}
.scroll-word {
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--c-ghost);
}
.scroll-line {
  display: block; width: 1px; height: 44px;
  background: linear-gradient(to bottom, var(--c-teal), transparent);
  animation: scroll-pulse 2.5s ease-in-out infinite;
}
@keyframes scroll-pulse { 50% { opacity: 0.25; transform: scaleY(0.7); } }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 720px) {
  .hero { padding: 7rem 1.5rem 5rem; }
  .hero-scroll { left: 1.5rem; }
}

/* ═══════════════════════════════════════════
   PORTAL HUB
═══════════════════════════════════════════ */
.hero-portals {
  margin-top: 0;
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start;
}

.portal {
  --portalColor: #3dffd0;
  --portalGlow:  rgba(61,255,208,0.28);
  --portalLine:  rgba(61,255,208,0.30);
  position: relative; display: flex; flex-direction: column;
  align-items: center; gap: 6px; width: 80px; padding: 12px 6px 10px;
  background: rgba(2,4,12,0.65); border: 1px solid var(--portalLine);
  cursor: pointer; text-align: center; text-decoration: none;
  clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px),
    calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
  transition: transform 300ms cubic-bezier(0.16,1,0.3,1), box-shadow 300ms ease, background 200ms;
  isolation: isolate;
}
.portal::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.04) 0%, transparent 40%);
  pointer-events: none; z-index: 1;
}
.portal-gem { position: relative; width: 48px; height: 48px; flex-shrink: 0; }
.portal-sigil {
  position: relative; z-index: 2; width: 100%; height: 100%;
  color: var(--portalColor); display: block;
  animation: sigil-idle 6s ease-in-out infinite; transform-origin: center;
}
@keyframes sigil-idle {
  0%,100% { opacity:0.70; transform:rotate(0deg) scale(1); }
  33%      { opacity:0.90; transform:rotate(2deg) scale(1.03); }
  66%      { opacity:0.80; transform:rotate(-1.5deg) scale(0.98); }
}
.portal-gem-core {
  position: absolute; inset: 25%; border-radius: 50%;
  background: radial-gradient(circle, var(--portalColor) 0%, var(--portalGlow) 50%, transparent 100%);
  opacity: 0.25; animation: core-pulse 2.8s ease-in-out infinite; pointer-events: none; z-index: 0;
}
@keyframes core-pulse {
  0%,100% { opacity:0.18; transform:scale(0.8); }
  50%      { opacity:0.50; transform:scale(1.3); }
}
.portal-gem-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--portalColor); opacity: 0; pointer-events: none; z-index: 3;
}
.portal-gem-ring.ring-1 {
  inset: -4px; border-style: solid; border-color: transparent;
  border-top-color: var(--portalColor); border-bottom-color: var(--portalColor);
  opacity: 0.20; animation: ring-cw 5s linear infinite;
}
.portal-gem-ring.ring-2 {
  inset: -10px; border-style: solid; border-color: transparent;
  border-left-color: var(--portalColor); border-right-color: var(--portalColor);
  opacity: 0.12; animation: ring-ccw 3.5s linear infinite;
}
@keyframes ring-cw  { to { transform: rotate(360deg); } }
@keyframes ring-ccw { to { transform: rotate(-360deg); } }

.portal-label {
  display: block; position: relative; z-index: 2;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--c-star); transition: color 200ms; line-height: 1.2;
}
.portal-desc {
  display: block; position: relative; z-index: 2;
  font-family: var(--font-mono); font-size: 0.50rem; letter-spacing: 0.06em;
  color: var(--c-mist); line-height: 1.4; transition: color 200ms;
}
.portal-dest {
  display: block; position: relative; z-index: 2;
  font-family: var(--font-mono); font-size: 0.52rem; letter-spacing: 0.10em;
  color: var(--portalColor); opacity: 0; transform: translateY(4px);
  transition: opacity 200ms, transform 200ms; margin-top: 2px; white-space: nowrap;
}
.portal:hover .portal-dest { opacity: 1; transform: translateY(0); }

.portal[data-portal="techart"]  { --portalColor:#3dffd0; --portalGlow:rgba(61,255,208,0.28); --portalLine:rgba(61,255,208,0.25); }
.portal[data-portal="pipeline"] { --portalColor:#2ab89a; --portalGlow:rgba(42,184,154,0.28); --portalLine:rgba(42,184,154,0.25); }
.portal[data-portal="creative"] { --portalColor:#9d78f5; --portalGlow:rgba(157,120,245,0.28); --portalLine:rgba(157,120,245,0.25); }

.portal:hover {
  transform: translateY(-6px) scale(1.08); background: rgba(2,4,12,0.88);
  box-shadow: 0 0 0 1px var(--portalLine), 0 0 20px var(--portalGlow), 0 12px 28px rgba(0,0,0,0.55);
}
.portal:hover .portal-sigil { animation: sigil-active 1.8s ease-in-out infinite; }
@keyframes sigil-active {
  0%,100% { opacity:1; transform:rotate(0deg) scale(1); }
  50%      { opacity:1; transform:rotate(5deg) scale(1.06); }
}
.portal:hover .portal-gem-core { opacity: 0.85; animation: core-pulse-active 1.4s ease-in-out infinite; }
@keyframes core-pulse-active {
  0%,100% { opacity:0.5; transform:scale(1.0); }
  50%      { opacity:1.0; transform:scale(1.5); }
}
.portal:hover .portal-gem-ring.ring-1 { opacity: 0.55; animation-duration: 2.5s; }
.portal:hover .portal-gem-ring.ring-2 { opacity: 0.35; animation-duration: 1.8s; }
.portal:hover .portal-label { color: var(--portalColor); }
.portal:hover .portal-desc  { color: var(--c-star); }
.portal:active { transform: translateY(-2px) scale(0.97); }

.portal-spark {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: var(--portalColor); pointer-events: none; opacity: 0;
  animation: spark-drift 3.5s ease-in-out infinite; box-shadow: 0 0 3px var(--portalColor);
}
.portal-spark.s1 { top:20%; left:15%;  animation-delay:0s;   animation-duration:4.0s; }
.portal-spark.s2 { top:35%; right:12%; animation-delay:1.2s; animation-duration:3.2s; width:1.5px; height:1.5px; }
.portal-spark.s3 { top:60%; left:22%;  animation-delay:2.1s; animation-duration:4.6s; width:1px;   height:1px; }
.portal-spark.s4 { top:55%; right:20%; animation-delay:0.7s; animation-duration:3.8s; width:1.5px; height:1.5px; }
@keyframes spark-drift {
  0%   { opacity:0;    transform:translate(0,0px) scale(0.5); }
  15%  { opacity:0.75; }
  80%  { opacity:0.40; }
  100% { opacity:0;    transform:translate(var(--spark-dx,4px),-18px) scale(1.4); }
}
.portal-spark.s1 { --spark-dx: 3px; }
.portal-spark.s2 { --spark-dx:-4px; }
.portal-spark.s3 { --spark-dx: 5px; }
.portal-spark.s4 { --spark-dx:-3px; }
.portal:hover .portal-spark { animation-duration: 1.6s; }

@media (max-width: 480px) {
  .portal { width: 72px; padding: 10px 5px 8px; }
  .portal-gem { width: 42px; height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-particle, .orb-1, .orb-2, .orb-3,
  .portal-sigil, .portal-gem-core, .portal-gem-ring,
  .portal-spark, .scroll-line { animation: none !important; }
  .hero-eyebrow, .hero-name, .hero-rule,
  .hero-mission, .hero-scroll { opacity: 1 !important; animation: none !important; }
}