/* ── Team page scrollable layout ── */
.team-hero {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* ── Particle canvas background ── */
#team-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ── Ambient gradient orbs ── */
.team-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(400px ellipse at 20% 50%, rgba(230,58,70,.04), transparent),
    radial-gradient(400px ellipse at 50% 50%, rgba(168,85,247,.03), transparent),
    radial-gradient(400px ellipse at 80% 50%, rgba(79,195,247,.04), transparent);
  z-index: 0;
  pointer-events: none;
  animation: tm-ambient 8s ease-in-out infinite alternate;
}
@keyframes tm-ambient {
  0%   { opacity: .5; }
  100% { opacity: 1; }
}

/* pin team-content & side inside team-hero */
.team-hero .team-content {
  position: absolute;
  left: 50%;
  top: calc(50% - 33px);
  transform: translate(-50%, -50%);
  z-index: 2;
}
.team-hero .team-side {
  position: fixed;
  left: 60px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
/* stripe stays inside hero (absolute, not fixed) */
.team-hero .team-stripe {
  position: absolute;
  bottom: 0;
  left: 500px;
  right: 0;
  height: 250px;
  z-index: 1;
}

/* ── Bottom panel (contributors + CTA) ── */
.team-bottom-panel {
  position: absolute;
  right: 40px;
  bottom: 36px;
  z-index: 5;
  text-align: right;
}
.team-bottom-panel__text {
  font: 300 13px 'Noto Sans KR', sans-serif;
  color: rgba(0,0,0,.35);
  letter-spacing: 0;
  margin: 0 0 14px;
}
.team-bottom-panel__bubbles {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 20px;
}
.tc-bubble {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 11px 'Poppins', sans-serif;
  color: #fff;
  letter-spacing: 0;
  margin-left: -8px;
  position: relative;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  flex-shrink: 0;
}
.tc-bubble:first-child { margin-left: 0; }
.team-bottom-panel__cta {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* ── Brand logo behind avatar ── */
.brand-logo-bg {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 130px; height: 130px;
  object-fit: contain;
  opacity: 0.15;
  z-index: 1;
  pointer-events: none;
  transition: opacity .6s ease, transform .7s cubic-bezier(.16,1,.3,1);
}
.team-member:hover .brand-logo-bg {
  opacity: 0.35;
  transform: translate(-50%, -50%) scale(1.1);
}
/* Calvin: SVG uses --fill-0, set to red */
.team-member--float .brand-logo-bg { --fill-0: #e63a46; }
/* HRUM & RIDM: bigger logos */
.team-member--hrum .brand-logo-bg,
.team-member--ridm .brand-logo-bg {
  width: 160px; height: 160px;
}

/* ── Orbital ring around avatar ── */
.team-avatar .orbit-ring {
  position: absolute;
  top: -16px; left: -16px;
  width: calc(100% + 32px);
  height: calc(100% + 32px);
  border-radius: 50%;
  border: 1px solid transparent;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
}
.team-member:hover .orbit-ring { opacity: 1; }
.team-member--float .orbit-ring {
  border-color: rgba(230,58,70,.2);
  animation: tm-orbit 6s linear infinite;
}
.team-member--hrum .orbit-ring {
  border-color: rgba(168,85,247,.2);
  animation: tm-orbit 7s linear infinite reverse;
}
.team-member--ridm .orbit-ring {
  border-color: rgba(79,195,247,.2);
  animation: tm-orbit 5s linear infinite;
}
@keyframes tm-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* orbit dot */
.orbit-ring::before {
  content: '';
  position: absolute;
  top: -3px; left: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  transform: translateX(-50%);
}
.team-member--float .orbit-ring::before { background: #e63a46; box-shadow: 0 0 8px #e63a46; }
.team-member--hrum .orbit-ring::before { background: #a855f7; box-shadow: 0 0 8px #a855f7; }
.team-member--ridm .orbit-ring::before { background: #4fc3f7; box-shadow: 0 0 8px #4fc3f7; }

/* ── Brand-specific circle colors on hover ── */
.team-member--float:hover .circle-bg {
  background: linear-gradient(135deg, #e7e7e7 0%, #fce4ec 100%) !important;
  box-shadow: 0 0 60px rgba(230,58,70,.18) !important;
}
.team-member--hrum:hover .circle-bg {
  background: linear-gradient(135deg, #e7e7e7 0%, #f3e5f5 100%) !important;
  box-shadow: 0 0 60px rgba(168,85,247,.18) !important;
}
.team-member--ridm:hover .circle-bg {
  background: linear-gradient(135deg, #e7e7e7 0%, #e1f5fe 100%) !important;
  box-shadow: 0 0 60px rgba(79,195,247,.18) !important;
}

/* ── Korean name under English name ── */
.team-name-kr {
  display: block;
  font: 400 12px 'Noto Sans KR', sans-serif;
  color: rgba(0,0,0,.4);
  margin-top: 2px;
  letter-spacing: 1px;
}

/* ── Brand tag under name ── */
.team-brand-tag {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 14px;
  font: 700 9px 'Poppins', sans-serif;
  letter-spacing: 3px;
  text-transform: uppercase;
  border-radius: 2px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s ease .1s, transform .4s cubic-bezier(.16,1,.3,1) .1s;
}
.team-member:hover .team-brand-tag {
  opacity: 1;
  transform: translateY(0);
}
.team-member--float .team-brand-tag {
  color: #e63a46;
  background: rgba(230,58,70,.06);
  border: 1px solid rgba(230,58,70,.12);
}
.team-member--hrum .team-brand-tag {
  color: #a855f7;
  background: rgba(168,85,247,.06);
  border: 1px solid rgba(168,85,247,.12);
}
.team-member--ridm .team-brand-tag {
  color: #4fc3f7;
  background: rgba(79,195,247,.06);
  border: 1px solid rgba(79,195,247,.12);
}

/* ── Brand-specific role color ── */
.team-member--float .team-role { color: #e63a46; }
.team-member--hrum .team-role { color: #a855f7; }
.team-member--ridm .team-role { color: #4fc3f7; }

/* ── Ambient glow behind avatar ── */
.team-avatar::after {
  content: '';
  position: absolute;
  top: -20px; left: -20px; right: -20px; bottom: -20px;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .6s ease;
  z-index: -1;
}
.team-member:hover .team-avatar::after { opacity: 1; }
.team-member--float .team-avatar::after {
  background: radial-gradient(circle, rgba(230,58,70,.10) 0%, transparent 70%);
}
.team-member--hrum .team-avatar::after {
  background: radial-gradient(circle, rgba(168,85,247,.10) 0%, transparent 70%);
}
.team-member--ridm .team-avatar::after {
  background: radial-gradient(circle, rgba(79,195,247,.10) 0%, transparent 70%);
}

/* ── Light cone effect under avatar on hover ── */
.team-member::before {
  content: '';
  position: absolute;
  bottom: -30px;
  left: 50%;
  width: 120px;
  height: 80px;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity .5s ease;
  pointer-events: none;
  z-index: -1;
}
.team-member:hover::before { opacity: 1; }
.team-member--float::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(230,58,70,.08), transparent 70%);
}
.team-member--hrum::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(168,85,247,.08), transparent 70%);
}
.team-member--ridm::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(79,195,247,.08), transparent 70%);
}

/* ── Connecting line SVG ── */
#team-connectors {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
#team-connectors line {
  stroke: rgba(0,0,0,.04);
  stroke-width: 1;
  stroke-dasharray: 4 6;
  animation: tm-dash 20s linear infinite;
}
@keyframes tm-dash { to { stroke-dashoffset: -200; } }

@media (max-width: 1024px) {
  .team-hero .team-side { display: none; }
  #team-connectors { display: none; }
}
@media (max-width: 768px) {
  .team-hero .team-content {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    padding-top: 120px;
  }
  .team-hero {
    height: auto;
    overflow: visible;
  }
  .team-hero .team-stripe {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    height: 120px;
  }
  .team-bottom-panel {
    position: relative;
    right: auto;
    bottom: auto;
    text-align: center;
    padding: 32px 24px 40px;
  }
  .team-bottom-panel__bubbles { justify-content: center; }
  .team-bottom-panel__cta { justify-content: center; flex-wrap: wrap; }
  #team-connectors { display: none; }
  .team-member::before { display: none; }
}

/* CTA button */
.team-next-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px;
  border: 1px solid rgba(0,0,0,.15);
  color: #2d2d2d;
  text-decoration: none;
  font: 600 11px 'Poppins', sans-serif;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: border-color .35s ease, color .35s ease;
}
.team-next-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #e63a46;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.team-next-btn:hover { border-color: #e63a46; color: #fff; }
.team-next-btn:hover::before { transform: scaleX(1); }

/* 기본: 브랜드=회색글씨+회색보더, 히스토리=빨간포인트+흰border */
.team-btn--brand {
  color: #999;
  border-color: #999;
}
.team-btn--history {
  background: #fff;
  border-color: #e63a46;
  color: #e63a46;
}
.team-btn--history:hover { background: #e63a46; border-color: #e63a46; color: #fff; }

/* 1175px 이상 */
@media (min-width: 1175px) {
  .team-bottom-panel__text { color: rgba(255,255,255,.6); }
  .team-btn--brand {
    background: #e63a46;
    border-color: #e63a46;
    color: #fff;
  }
}
.team-next-btn__text,
.team-next-btn__arrow { position: relative; z-index: 1; }
.team-next-btn__arrow { display: inline-block; transition: transform .3s ease; }
.team-next-btn:hover .team-next-btn__arrow { transform: translateX(5px); }
.team-next-btn:first-child:hover .team-next-btn__arrow { transform: translateX(-5px); }

/* ── Team iframe modal ── */
#team-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility .35s ease;
  padding: 24px;
}
#team-overlay.active { opacity: 1; visibility: visible; }

#team-modal {
  position: relative;
  width: 100%; max-width: 980px;
  height: 88vh;
  display: flex; flex-direction: column;
  background: #0e0e16;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
  transform: translateY(30px) scale(.97);
  opacity: 0;
  transition: transform .42s cubic-bezier(.16,1,.3,1), opacity .42s cubic-bezier(.16,1,.3,1);
}
#team-overlay.active #team-modal { transform: translateY(0) scale(1); opacity: 1; }
#team-overlay.team-overlay--jobs #team-modal { max-width: 900px; }
#team-modal::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, #e63a46, #4fc3f7, #a855f7);
}

#team-modal-bar {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px;
  height: 42px;
  background: rgba(7,7,15,0.98);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
#team-modal-label {
  display: flex; align-items: center; gap: 10px;
  font: 400 10px 'Courier New', monospace;
  letter-spacing: 4px; text-transform: uppercase;
  color: rgba(255,255,255,.4);
}
.tm-beacon {
  width: 6px; height: 6px; border-radius: 50%;
  background: #e63a46;
  box-shadow: 0 0 6px #e63a46;
  animation: tm-pulse 2s ease-in-out infinite;
}
@keyframes tm-pulse { 0%,100%{ opacity:.4 } 50%{ opacity:1 } }

#team-close {
  background: none; border: none; color: rgba(255,255,255,.4);
  font-size: 18px; cursor: pointer; padding: 4px 8px;
  transition: color .2s;
  display: flex; align-items: center; gap: 6px;
}
#team-close:hover { color: #fff; }
.tc-label { display: none; }

#team-loader {
  position: absolute; inset: 42px 0 0 0;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font: 400 10px 'Courier New', monospace;
  letter-spacing: 4px; text-transform: uppercase;
  color: rgba(255,255,255,.4);
  background: #0e0e16;
  z-index: 2;
}
.tl-dots { display: inline-flex; gap: 3px; }
.tl-dots i { display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.3); animation: tl-blink 1.4s ease-in-out infinite; }
.tl-dots i:nth-child(2) { animation-delay: .28s; }
.tl-dots i:nth-child(3) { animation-delay: .56s; }
@keyframes tl-blink { 0%,100%{ opacity:.15 } 50%{ opacity:.9 } }

#team-iframe {
  flex: 1; min-height: 0;
  width: 100%; border: none;
  background: #fff; display: block;
}

@media (max-width: 768px) {
  #team-overlay { padding: 0; align-items: flex-end; }
  #team-modal {
    max-width: 100%; height: 93vh;
    clip-path: none;
    transform: translateY(50px) scale(1);
  }
  #team-overlay.active #team-modal { transform: translateY(0) scale(1); }
  #team-close {
    font-size: 20px;
    padding: 10px 16px;
    color: rgba(255,255,255,.9);
    background: rgba(255,255,255,.08);
    border-radius: 8px;
  }
  .tc-label {
    display: inline;
    font: 500 13px 'Noto Sans KR', sans-serif;
    letter-spacing: 0;
  }
}

/* clickable cursor for team members */
.team-member[data-href] { cursor: pointer; }