/* DV8FTC hub section styles — hero, icon rows, projects, games ring, contact. */

/* Icon row */
.icon-row {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 640px) {
  .icon-row { flex-direction: row; gap: 2.5rem; }
}
.icon-row-icon {
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  color: var(--primary);
  stroke-width: 1.25;
}
@media (min-width: 640px) {
  .icon-row-icon { width: 5rem; height: 5rem; }
}
.icon-row-body {
  min-width: 0;
  flex: 1;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}
.icon-row-body > * + * { margin-top: 1rem; }
@media (min-width: 640px) {
  .icon-row-body { font-size: 1.125rem; line-height: 1.75; }
}
.link-primary { color: var(--primary); }
.link-primary:hover { text-decoration: underline; }

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.hero-inner {
  position: relative;
  z-index: 10;
  margin-inline: auto;
  max-width: 64rem;
  padding: 4rem 1rem;
}
@media (min-width: 640px) {
  .hero-inner { padding: 5rem 1.5rem; }
}
.hero-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}
.hero-title {
  font-weight: 900;
  letter-spacing: -0.025em;
  cursor: default;
  user-select: none;
  position: relative;
  animation: fade-up 0.5s ease-out 0.15s both;
}
.hero-title-text {
  position: relative;
  font-size: 3rem;
  line-height: 1;
}
@media (min-width: 640px) {
  .hero-title-text { font-size: 3.75rem; }
}
@media (min-width: 1024px) {
  .hero-title-text { font-size: 4.5rem; }
}
.hero-tagline {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.75rem;
  user-select: none;
  animation: fade-in 0.6s ease-out 0.4s both;
}
@media (min-width: 640px) {
  .hero-tagline { font-size: 1.5rem; line-height: 2rem; }
}
.dim { color: color-mix(in srgb, var(--foreground) 60%, transparent); }

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

/* Hero glitch — periodic burst, ~0.56s of a 4s cycle starting at 37.5% */
.glitch-char {
  position: relative;
  display: inline-block;
  animation: glitch-hide 4s step-end infinite;
  animation-delay: calc(var(--i) * 70ms);
}
.glitch-char::after {
  content: attr(data-glitch);
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: glitch-show 4s step-end infinite;
  animation-delay: calc(var(--i) * 70ms);
}
@keyframes glitch-show {
  0%, 37.49% { opacity: 0; }
  37.5%, 39.24% { opacity: 1; }
  39.25%, 40.99% { opacity: 0; }
  41%, 42.74% { opacity: 1; }
  42.75%, 44.49% { opacity: 0; }
  44.5%, 46.24% { opacity: 1; }
  46.25%, 47.99% { opacity: 0; }
  48%, 49.74% { opacity: 1; }
  49.75%, 100% { opacity: 0; }
}
@keyframes glitch-hide {
  0%, 37.49% { color: var(--primary); }
  37.5%, 39.24% { color: transparent; text-shadow: none; }
  39.25%, 40.99% { color: var(--primary); }
  41%, 42.74% { color: transparent; text-shadow: none; }
  42.75%, 44.49% { color: var(--primary); }
  44.5%, 46.24% { color: transparent; text-shadow: none; }
  46.25%, 47.99% { color: var(--primary); }
  48%, 49.74% { color: transparent; text-shadow: none; }
  49.75%, 100% { color: var(--primary); }
}

/* Projects */
.project-grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .project-grid { grid-template-columns: repeat(2, 1fr); }
}
.project-card {
  height: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background-color: var(--card);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.project-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.project-card-title {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: var(--foreground);
}
.project-card-links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.project-card-link {
  color: var(--muted-foreground);
  transition: color 0.15s;
  display: inline-flex;
  align-items: center;
}
.project-card-link:hover { color: var(--primary); }
.project-card-desc {
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--muted-foreground);
  flex: 1;
}
@media (min-width: 640px) {
  .project-card-desc { font-size: 1rem; line-height: 1.5rem; }
}
.project-card-tags {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--muted-foreground);
}
.project-card-status {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.status-badge-group {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.status-badge-label {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--muted-foreground);
}
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.status-badge svg { width: 1em; height: 1em; }
.status-badge-latency { color: var(--muted-foreground); }
.status-online { color: var(--primary); }
.status-unreachable, .status-offline { color: var(--destructive); }
.status-idle { color: #eab308; }
.status-dnd { color: var(--destructive); }
.status-muted { color: var(--muted-foreground); }

/* References */
.reference-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .reference-grid { grid-template-columns: repeat(2, 1fr); }
}
.reference-card {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background-color: var(--card);
  padding: 1.5rem;
}
.reference-quote-icon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 1.25rem;
  height: 1.25rem;
  color: color-mix(in srgb, var(--primary) 30%, transparent);
}
.reference-quote {
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--muted-foreground);
  margin-bottom: 1.25rem;
  font-style: italic;
}
.reference-foot {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}
.reference-name {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--foreground);
}
.reference-role {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--primary);
}

/* Games ring */
.ring-clip { overflow-x: clip; }
.ring-stage {
  position: relative;
  height: 22rem;
  perspective: 1200px;
  --card-w: 18rem;
  --gap: 1.5rem;
  --r: calc((var(--card-w) + var(--gap)) / (2 * tan(180deg / var(--n))));
}
@media (max-width: 639px) {
  .ring-stage { perspective: 1600px; --card-w: 11rem; }
}
@supports not (width: tan(1deg)) {
  .ring-stage { --r: 448px; }
  @media (max-width: 639px) {
    .ring-stage { --r: 275px; }
  }
}
.ring {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
  animation: ring-spin 40s linear infinite;
}
@keyframes ring-spin {
  to { transform: rotateY(-360deg); }
}
.ring-slot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%)
    rotateY(calc(var(--i) * 360deg / var(--n))) translateZ(var(--r));
  transform-style: preserve-3d;
}
.ring-card {
  animation: ring-depth 40s linear infinite, ring-flip 40s step-end infinite;
  animation-delay: calc((var(--i) - var(--n)) * 40s / var(--n));
}
@keyframes ring-depth {
  0% { opacity: 1; }
  25% { opacity: 0.65; }
  50% { opacity: 0.3; }
  75% { opacity: 0.65; }
  100% { opacity: 1; }
}
@keyframes ring-flip {
  0%, 25% { transform: rotateY(0deg); }
  25.01%, 75% { transform: rotateY(180deg); }
  75.01%, 100% { transform: rotateY(0deg); }
}
.ring-stage:hover .ring,
.ring-stage:hover .ring-card,
.ring-stage:focus-within .ring,
.ring-stage:focus-within .ring-card {
  animation-play-state: paused;
}

.game-card {
  display: block;
  width: var(--card-w);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background-color: var(--card);
  overflow: hidden;
}
.game-banner {
  position: relative;
  width: 100%;
  aspect-ratio: 460 / 215;
}
.game-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.game-banner-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--card) 80%, transparent),
    transparent
  );
}
.game-banner-fallback {
  width: 100%;
  aspect-ratio: 460 / 215;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--primary) 5%, transparent);
  border-bottom: 1px solid var(--border);
}
.game-fallback-icon {
  width: 2.5rem;
  height: 2.5rem;
  color: color-mix(in srgb, var(--primary) 40%, transparent);
}
.game-meta { padding: 1rem; }
.game-name {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.game-genre {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--muted-foreground);
  margin-top: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .ring-stage {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    height: auto;
    perspective: none;
  }
  .ring { position: static; display: contents; animation: none; }
  .ring-slot {
    position: static;
    transform: none;
    scroll-snap-align: center;
    flex-shrink: 0;
  }
  .ring-card { animation: none; }
  .glitch-char, .glitch-char::after { animation: none; }
  .glitch-char { color: var(--primary); }
  .glitch-char::after { opacity: 0; }
  .hero-title, .hero-tagline { animation: none; }
}

/* Contact */
.contact-links > * + * { margin-top: 1.25rem; }
.contact-link {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.contact-link-icon {
  color: var(--primary);
  margin-top: 0.25rem;
  flex-shrink: 0;
}
.contact-link-cmd {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--muted-foreground);
}
.contact-link-value {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--foreground);
  transition: color 0.15s;
}
.contact-link:hover .contact-link-value { color: var(--primary); }
.contact-grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
}
@media (min-width: 768px) {
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
}
.contact-col-title {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 0.75rem;
}
.contact-signoff {
  margin-top: 3rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: color-mix(in srgb, var(--muted-foreground) 50%, transparent);
}

/* Discord status */
.discord-status > * + * { margin-top: 0.75rem; }
.discord-status-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.discord-avatar-wrap { position: relative; }
.discord-avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  border: 2px solid var(--border);
  transition: border-color 0.15s;
}
.discord-status-link:hover .discord-avatar { border-color: var(--primary); }
.discord-dot {
  position: absolute;
  bottom: -0.125rem;
  right: -0.125rem;
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  border: 2px solid var(--card);
}
.discord-dot-sm {
  position: static;
  width: 0.5rem;
  height: 0.5rem;
  border: none;
  background-color: #22c55e;
}
.discord-dot-online { background-color: var(--primary); }
.discord-dot-idle { background-color: #eab308; }
.discord-dot-dnd { background-color: var(--destructive); }
.discord-dot-offline { background-color: color-mix(in srgb, var(--muted-foreground) 50%, transparent); }

.discord-identity { flex: 1; }
.discord-name {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--foreground);
  transition: color 0.15s;
}
.discord-status-link:hover .discord-name { color: var(--primary); }
.discord-status-text {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--muted-foreground);
}
.discord-custom {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding-left: 0.5rem;
}
.discord-emoji { font-size: 0.875rem; line-height: 1.25rem; margin-top: 0.125rem; }
.discord-custom-text {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--muted-foreground);
  font-style: italic;
}
.discord-activity { padding-left: 0.5rem; }
.discord-activity-text {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--muted-foreground);
}
.discord-status-unavailable {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.discord-dot-off {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: color-mix(in srgb, var(--muted-foreground) 50%, transparent);
}

/* Discord widget */
.discord-widget {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background-color: var(--card);
  padding: 1rem;
}
.discord-widget > * + * { margin-top: 0.75rem; }
.discord-widget-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.discord-widget-icon { color: #5865F2; }
.discord-widget-name {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  color: var(--foreground);
}
.discord-widget-count {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.discord-widget-count-text {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--muted-foreground);
}
.discord-widget-num { color: var(--foreground); font-weight: 600; }
.discord-widget-sep {
  color: color-mix(in srgb, var(--muted-foreground) 40%, transparent);
  margin-inline: 0.25rem;
}
.discord-widget-users-icon { color: var(--muted-foreground); }
.discord-widget-visible {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--muted-foreground);
}
.discord-members {
  max-height: 12rem;
  overflow-y: auto;
}
.discord-members > * + * { margin-top: 0.375rem; }
.member-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.member-avatar-wrap { position: relative; flex-shrink: 0; }
.member-avatar {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
}
.member-dot {
  position: absolute;
  bottom: -0.125rem;
  right: -0.125rem;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 9999px;
  border: 1px solid var(--card);
}
.member-dot-online { background-color: #22c55e; }
.member-dot-idle { background-color: #eab308; }
.member-dot-dnd { background-color: #ef4444; }
.member-dot-offline { background-color: color-mix(in srgb, var(--muted-foreground) 50%, transparent); }
.member-name {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--muted-foreground);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.member-more {
  font-size: 0.75rem;
  line-height: 1rem;
  color: color-mix(in srgb, var(--muted-foreground) 60%, transparent);
  padding-left: 2rem;
}
.discord-widget-error {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--muted-foreground);
}
.discord-join {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.5rem 0.75rem;
  border-radius: calc(var(--radius) * 0.8);
  background-color: color-mix(in srgb, #5865F2 10%, transparent);
  border: 1px solid color-mix(in srgb, #5865F2 20%, transparent);
  font-size: 0.75rem;
  line-height: 1rem;
  color: #5865F2;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.discord-join:hover {
  background-color: color-mix(in srgb, #5865F2 20%, transparent);
  border-color: color-mix(in srgb, #5865F2 40%, transparent);
}