/* ThreeUI-inspired effect layer.
   Palette values here mirror the base design tokens so every effect reads as
   part of one system. Each block degrades to the untouched original layout
   when WebGL is unavailable, the device is low tier, or motion is reduced. */

@property --fx-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

:root {
  --fx-field-start: #6366f1;
  --fx-field-end: #22d3ee;
  --fx-node: #b0b1c4;
  --fx-node-hot: #22d3ee;
  --fx-edge: #6366f1;
  --fx-shimmer: rgba(236, 235, 242, 0.9);
  --fx-shimmer-soft: rgba(236, 235, 242, 0.35);
  --fx-fade: 1.2s;
  --fx-speed: 5.5s;
}

html[data-theme='light'] {
  --fx-field-start: #5b5ef0;
  --fx-field-end: #16b8d8;
  --fx-node: #5a5f78;
  --fx-node-hot: #16b8d8;
  --fx-edge: #5b5ef0;
  --fx-shimmer: rgba(10, 12, 22, 0.7);
  --fx-shimmer-soft: rgba(10, 12, 22, 0.28);
}

/* ---------- Hero: silk field ---------- */

.hero-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--fx-fade) var(--ease);
  -webkit-mask-image: radial-gradient(118% 96% at 66% 46%, #000 0%, rgba(0, 0, 0, 0.72) 44%, transparent 78%);
  mask-image: radial-gradient(118% 96% at 66% 46%, #000 0%, rgba(0, 0, 0, 0.72) 44%, transparent 78%);
}

.hero-field.fx-ready {
  opacity: 1;
}

.hero-field-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hero-field::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 62%, transparent) 30%, transparent 56%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  z-index: 1;
}

/* ---------- Skills: topology constellation ---------- */

#skills {
  position: relative;
}

#skills > .container {
  position: relative;
  z-index: 1;
}

.skills-field {
  position: absolute;
  top: 50%;
  right: 0;
  width: min(780px, 56%);
  height: min(780px, 72%);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity var(--fx-fade) var(--ease);
}

.skills-field.fx-ready {
  opacity: 0.9;
}

.constellation-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.constellation-label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 11px;
  border-radius: 11px;
  border: 1px solid var(--border-2);
  background: color-mix(in srgb, var(--bg) 76%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 14px 32px -16px rgba(0, 0, 0, 0.75);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  translate: -50% calc(-100% - 16px);
  transition: opacity 0.2s var(--ease);
}

.constellation-label.is-visible {
  opacity: 1;
}

.constellation-label-name {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}

.constellation-label-group {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-2);
  line-height: 1.2;
}

.skills-field-hint {
  display: none;
  align-items: center;
  gap: 7px;
  margin: 16px 0 0;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--muted);
}

.skills-field-hint::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gradient);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

html[data-fx='on'] .skills-field-hint {
  display: inline-flex;
}

/* ---------- Liquid glass CTA ---------- */

.fx-glass {
  position: relative;
  isolation: isolate;
}

.fx-glass-blur:not(.btn-primary) {
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}

.fx-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1.5px;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    var(--fx-shimmer-soft) 18deg,
    var(--fx-shimmer) 34deg,
    transparent 66deg,
    transparent 186deg,
    var(--fx-shimmer-soft) 204deg,
    var(--fx-shimmer) 220deg,
    transparent 252deg,
    transparent 360deg
  );
  background: conic-gradient(
    from var(--fx-angle),
    transparent 0deg,
    var(--fx-shimmer-soft) 18deg,
    var(--fx-shimmer) 34deg,
    transparent 66deg,
    transparent 186deg,
    var(--fx-shimmer-soft) 204deg,
    var(--fx-shimmer) 220deg,
    transparent 252deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: fx-glass-spin var(--fx-speed) linear infinite;
  opacity: 0.62;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}

.fx-glass:hover::before,
.fx-glass:focus-visible::before {
  opacity: 1;
}

.fx-glass:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
}

@keyframes fx-glass-spin {
  to {
    --fx-angle: 360deg;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .hero-field,
  .skills-field {
    transition: none;
  }

  .fx-glass::before {
    animation: none;
    --fx-angle: 34deg;
    opacity: 0.5;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .skills-field {
    right: 0;
    width: 62%;
    height: min(660px, 62%);
  }

  .skills-field.fx-ready {
    opacity: 0.72;
  }
}

@media (max-width: 900px) {
  .hero-field {
    -webkit-mask-image: radial-gradient(132% 66% at 50% 60%, #000 0%, rgba(0, 0, 0, 0.66) 42%, transparent 76%);
    mask-image: radial-gradient(132% 66% at 50% 60%, #000 0%, rgba(0, 0, 0, 0.66) 42%, transparent 76%);
  }

  .hero-field::after {
    background: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 58%, transparent) 24%, transparent 50%);
  }
}

@media (max-width: 720px) {
  .skills-field {
    top: 0;
    right: 0;
    width: 100%;
    height: 56%;
    transform: none;
  }

  .skills-field.fx-ready {
    opacity: 0.5;
  }

  .constellation-label {
    display: none;
  }
}

@media (hover: none) {
  html[data-fx='on'] .skills-field-hint {
    display: none;
  }
}