/* ============================================================
   ICONS.CSS
   Every small animated icon used inside a card: the 3D cube
   (3D Modelling), the face mesh (AR Dev), the browser bar
   (Web Dev), the controller mesh (Game Dev), plus the small
   pulse-dot and social chip used elsewhere.

   Each icon's *idle* animation speed is set here. The *hover
   speed-up* for each is wired in js/card-effects.js via
   setupHoverSpeed() — the multiplier there is (idle ÷ target
   hover duration), so if you change a duration below, update
   the matching call in main.js to keep the ratio sensible.
   ============================================================ */

.icon-wrap { margin-top: 8px; }

/* ---------- 3D Modelling: rotating wireframe cube ---------- */
.cube-scene { width: 44px; height: 44px; perspective: 200px; }
.cube3d { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; animation: cubeSpin 10s linear infinite; }
.cube3d .face { position: absolute; inset: 0; border: 1px solid var(--accent); background: rgba(166,108,255,0.05); }
.cube3d .front  { transform: translateZ(22px); }
.cube3d .back   { transform: translateZ(-22px) rotateY(180deg); }
.cube3d .right  { transform: rotateY(90deg) translateZ(22px); }
.cube3d .left   { transform: rotateY(-90deg) translateZ(22px); }
.cube3d .top    { transform: rotateX(90deg) translateZ(22px); }
.cube3d .bottom { transform: rotateX(-90deg) translateZ(22px); }
@keyframes cubeSpin { from { transform: rotateX(-20deg) rotateY(0); } to { transform: rotateX(-20deg) rotateY(360deg); } }

/* ---------- AR Dev: low-poly face mesh + scan line ----------
   The mesh geometry itself (the <path> data) lives in index.html,
   pulled from the user's own hand-made SVG. This just styles it. */
.face-mesh-scene { width: 54px; height: 82px; display: flex; align-items: center; justify-content: center; }
.face-line { stroke: var(--accent); fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 8; animation: facetGlow 3.6s ease-in-out infinite; }
@keyframes facetGlow { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
.face-scanline { stroke: var(--accent-bright); stroke-width: 14; animation: scanMove 2.8s ease-in-out infinite; filter: drop-shadow(0 0 6px var(--accent-bright)); }
@keyframes scanMove { 0% { transform: translateY(0); opacity: 0.9; } 50% { transform: translateY(760px); opacity: 0.9; } 100% { transform: translateY(0); opacity: 0.9; } }

/* ---------- Web Dev: browser window with a filling progress bar ---------- */
.web-icon { width: 52px; height: 36px; border: 1px solid var(--accent); border-radius: 7px; position: relative; overflow: hidden; }
.web-icon .top-bar { position: absolute; top: 0; left: 0; right: 0; height: 8px; border-bottom: 1px solid var(--accent); background: rgba(166,108,255,0.08); }
.web-icon .top-bar::before, .web-icon .top-bar::after { content: ''; position: absolute; top: 3px; width: 3px; height: 3px; border-radius: 50%; background: var(--accent); }
.web-icon .top-bar::before { left: 5px; }
.web-icon .top-bar::after { left: 11px; }
.web-icon .bar { position: absolute; bottom: 7px; left: 6px; height: 3px; background: var(--accent); border-radius: 2px; animation: barFill 2.8s ease-in-out infinite; }
@keyframes barFill { 0% { width: 0; } 50% { width: 32px; } 100% { width: 0; } }

/* ---------- Game Dev: controller mesh ----------
   Same idea as the face mesh — geometry lives in index.html.
   Kept deliberately dim (opacity caps below 1) since this mesh
   is dense enough that full brightness reads as a solid blob. */
.controller-scene { width: 64px; height: 42px; display: flex; align-items: center; justify-content: center; }
.ctrl-line {
  stroke: var(--accent); fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 10;
  animation: edgeGlow 3.4s ease-in-out infinite;
}
@keyframes edgeGlow { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.75; } }
@media (prefers-reduced-motion: reduce) { .ctrl-line { animation: none; opacity: 0.55; } }

/* ---------- small pulse dot (Lab / Hobbies cards) ---------- */
.simple-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); animation: pulse 2.4s ease-in-out infinite; flex-shrink: 0; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ---------- social chip pills (Find Me card) ---------- */
.social-row { display: flex; gap: 10px; margin-top: 14px; }
.social-chip { font-size: 12px; padding: 7px 12px; border: 1px solid var(--border-hover); border-radius: 999px; color: var(--text-muted); transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease; }
.social-chip:hover { border-color: var(--accent); color: var(--accent-bright); background: var(--accent-glow); }