/* ============================================================
   components.css — Tactical Obsidian Reusable UI Components
   Site title, project list, cards, video, badges, buttons,
   and animation utilities. No 1px borders — tonal layering only.
   ============================================================ */

/* --- Site Title ------------------------------------------- */
.site-title {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-3xl) 0 var(--space-2xl);
  color: var(--on-surface);
}

.icon-anchor {
  display: inline-block;
  color: var(--primary);
  line-height: 1;
}

.site-title__anchor {
  font-size: var(--text-3xl);
}

/* Hover bob — use on linked titles (e.g. in a nav bar), not on static heroes.
   Apply .site-title--link to the <a> element to enable. */
a.site-title--link:hover .site-title__anchor {
  animation: anchor-bob 0.6s var(--ease-out);
}

.site-title__text {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  color: var(--on-surface);
  line-height: 1;
}


/* --- Project List ----------------------------------------- */
.project-list {
  display: flex;
  flex-direction: column;
}

.project-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-md);
  text-decoration: none;
  color: inherit;
  background: transparent;
  border-radius: var(--radius-md);
  transition:
    background var(--duration-fast) var(--ease-out);
}

/* Alternating tonal backgrounds — no dividers per spec */
.project-item:nth-child(even) {
  background: var(--surface-container-low);
}

a.project-item:hover {
  background: var(--surface-container);
  color: inherit;
}

.project-item__icon {
  flex-shrink: 0;
  font-size: var(--text-xl);
  line-height: 1.4;
  width: 1.6em;
  text-align: center;
}

.project-item__body {
  flex: 1;
  min-width: 0;
}

.project-item__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xs);
}

.project-item__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--on-surface);
  transition: color var(--duration-fast) var(--ease-out);
}

a.project-item:hover .project-item__name {
  color: var(--primary);
}

.project-item__desc {
  font-size: var(--text-sm);
  color: var(--on-surface-variant);
  line-height: var(--leading-normal);
}

.project-item__arrow {
  flex-shrink: 0;
  align-self: center;
  color: var(--on-surface-dim);
  font-size: var(--text-sm);
  transition:
    transform var(--duration-normal) var(--ease-out),
    color var(--duration-normal) var(--ease-out);
}

a.project-item:hover .project-item__arrow {
  transform: translateX(4px);
  color: var(--primary);
}

/* Muted / retired variant */
.project-item--muted {
  opacity: 0.5;
}

.project-item--muted .project-item__name {
  text-decoration: line-through;
  color: var(--on-surface-variant);
}


/* --- Card ------------------------------------------------- */
/* Tonal layering — no borders. Surface sits on a darker parent. */
.card {
  position: relative;
  background: var(--surface-container-low);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  transition:
    transform var(--duration-normal) var(--ease-out),
    background var(--duration-normal) var(--ease-out),
    box-shadow var(--duration-normal) var(--ease-out);
}

.card:hover {
  transform: translateY(-3px);
  background: var(--surface-container);
}

/* Active / accent variant — ambient glow on hover */
.card--accent:hover {
  box-shadow: var(--glow-active);
}

/* Muted / retired variant */
.card--muted {
  opacity: 0.5;
  background: var(--surface);
}

.card--muted:hover {
  opacity: 0.65;
  transform: translateY(-2px);
  background: var(--surface-container-low);
  box-shadow: none;
}

/* Clickable card (entire card is a link) */
.card--link {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}

.card--link:hover {
  color: inherit;
}

.card__icon {
  font-size: var(--text-2xl);
  margin-bottom: var(--space-sm);
  line-height: 1;
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-xs);
  color: var(--on-surface);
  transition: color var(--duration-fast) var(--ease-out);
}

.card--link:hover .card__title {
  color: var(--primary);
}

.card--muted .card__title {
  text-decoration: line-through;
  color: var(--on-surface-variant);
}

.card--muted:hover .card__title {
  color: var(--on-surface-variant);
}

.card__subtitle {
  font-size: var(--text-sm);
  color: var(--on-surface-variant);
}

.card__description {
  font-size: var(--text-sm);
  color: var(--on-surface-variant);
  margin-top: var(--space-sm);
  line-height: var(--leading-normal);
}

.card__arrow {
  position: absolute;
  right: var(--space-lg);
  top: 50%;
  transform: translateY(-50%) translateX(0);
  color: var(--on-surface-dim);
  font-size: var(--text-sm);
  transition:
    transform var(--duration-normal) var(--ease-out),
    color var(--duration-normal) var(--ease-out);
}

.card--link:hover .card__arrow {
  transform: translateY(-50%) translateX(4px);
  color: var(--primary);
}

.card--muted .card__arrow {
  display: none;
}


/* --- Badge ------------------------------------------------ */
/* Tonal backgrounds, no borders */
.badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-full);
  line-height: 1;
  vertical-align: middle;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.badge--neutral {
  background: var(--surface-container-high);
  color: var(--on-surface-variant);
}

.badge--accent {
  background: var(--primary-glow);
  color: var(--primary);
}

.badge--retired {
  background: var(--surface-container);
  color: var(--on-surface-retired);
}


/* --- Video Container -------------------------------------- */
/* Inner glow (1px white at 10%) to prevent bleed into AMOLED black.
   No borders per spec — tonal + inner glow only. */
.video-wrap {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  transition: box-shadow var(--duration-slow) var(--ease-out);
  aspect-ratio: var(--video-ratio, 16 / 9);
}

.video-wrap:hover {
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.10),
    var(--glow-subtle);
}

.video-wrap video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius-xl);
}


/* --- Footer ----------------------------------------------- */
.footer {
  position: relative;
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  color: var(--on-surface-dim);
  font-size: var(--text-sm);
}

/* Subtle primary glow line — gradient wash, not a border */
.footer::before {
  content: '';
  display: block;
  width: 60px;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--primary-container),
    transparent
  );
  margin: 0 auto var(--space-lg);
  border-radius: var(--radius-full);
  opacity: 0.5;
}

.footer a {
  color: var(--on-surface-variant);
}

.footer a:hover {
  color: var(--primary);
}


/* --- Divider ---------------------------------------------- */
/* Use sparingly — prefer tonal layering. Gradient wash, not a line. */
.divider {
  border: none;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--surface-container-high),
    transparent
  );
  margin-block: var(--space-2xl);
}

.divider--accent {
  background: linear-gradient(
    90deg,
    transparent,
    var(--primary-container),
    transparent
  );
  opacity: 0.5;
}


/* --- Button ----------------------------------------------- */
/* Primary: gradient fill per spec */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-out),
    box-shadow var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

.btn--primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-container));
  color: var(--on-primary);
}

.btn--primary:hover {
  box-shadow: var(--glow-active);
  transform: translateY(-1px);
}

/* Secondary: ghost style — ghost border, no fill */
.btn--secondary {
  background: transparent;
  color: var(--on-surface);
  box-shadow: inset 0 0 0 1px var(--ghost-border);
}

.btn--secondary:hover {
  background: var(--surface-container-low);
  box-shadow: inset 0 0 0 1px var(--outline-variant);
}

/* Tertiary: text-only */
.btn--tertiary {
  background: transparent;
  color: var(--on-surface-variant);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding-inline: var(--space-sm);
}

.btn--tertiary:hover {
  color: var(--primary);
}


/* --- Tactical Module (Custom Component) ------------------- */
/* "Control Panel" aesthetic: header bar + recessed content area */
.tactical-module {
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.tactical-module__header {
  background: var(--surface-container-highest);
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--on-surface-variant);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  min-height: 1.5rem;
  display: flex;
  align-items: center;
}

.tactical-module__content {
  background: var(--surface-lowest);
  padding: var(--space-lg);
}


/* --- Inputs & Fields -------------------------------------- */
.input {
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-container-low);
  color: var(--on-surface);
  border: none;
  border-bottom: 1px solid transparent;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-size: var(--text-base);
  transition:
    border-color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out);
}

.input:focus {
  outline: none;
  border-bottom-color: var(--primary);
}

.input--error {
  background: var(--error-container);
}


/* --- Animation Keyframes ---------------------------------- */
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.10),
      var(--glow-active);
  }
}

@keyframes anchor-bob {
  0%   { transform: rotate(0deg);   }
  25%  { transform: rotate(12deg);  }
  50%  { transform: rotate(-8deg);  }
  75%  { transform: rotate(4deg);   }
  100% { transform: rotate(0deg);   }
}


/* --- Animation Utilities ---------------------------------- */
.animate-fade-in {
  animation: fade-in var(--duration-slow) var(--ease-out) both;
  animation-delay: var(--delay, 0ms);
}

.animate-slide-up {
  animation: slide-up var(--duration-slow) var(--ease-out) both;
  animation-delay: var(--delay, 0ms);
}

.animate-slide-down {
  animation: slide-down var(--duration-normal) var(--ease-out) both;
  animation-delay: var(--delay, 0ms);
}

.animate-pulse-glow {
  animation: pulse-glow 3s var(--ease-in-out) 2;
}


/* --- Responsive helpers ----------------------------------- */
@media (max-width: 640px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 641px) {
  .hide-desktop { display: none !important; }
}


/* --- Reduced motion --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}