/* Shared details: the same warm materials, restrained movement, and useful controls. */
.floating-skills { z-index: 1; }
.floating-skill {
  pointer-events: auto;
  animation: icon-orbit 30s linear infinite;
  border-radius: 23%;
  outline-offset: 8px;
}
.floating-tile { animation: skill-bob 6s var(--bob-delay, 0s) ease-in-out infinite; transition: box-shadow 250ms, filter 250ms; }
.float-python { --bob-delay: -.7s; }
.float-css { --bob-delay: -1.4s; }
.float-html { --bob-delay: -2.1s; }
.float-mysql { --bob-delay: -2.8s; }
.float-csharp { --bob-delay: -3.5s; }
.header.is-scrolled { box-shadow: 0 8px 28px #00000015; }
.floating-skill:is(:hover, :focus-visible) .floating-tile { animation-play-state: paused; filter: brightness(1.08); box-shadow: 1px 2px 0 #b1a48d, 2px 5px 0 #8d7e65, 3px 8px 0 #645744, 6px 20px 24px #2e100e88, inset 1px 2px 2px #ffffff; }
.floating-skill-label { position: absolute; top: calc(100% + 12px); left: 50%; min-width: max-content; padding: 4px 9px; border: 1px solid #fff5d778; border-radius: 20px; color: #fdf5e8; background: #442217ed; font-size: 9px; font-weight: 600; line-height: 1.6; opacity: 0; translate: -50% -4px; pointer-events: none; transition: opacity 180ms, translate 180ms; }
.floating-skill:is(:hover, :focus-visible) .floating-skill-label { opacity: 1; translate: -50% 0; }
.hero-actions .button .arrow { transition: transform 250ms var(--ease-out); }
.hero-actions .button:hover .arrow { transform: translate(2px, -2px); }

.interest-strip { display: block; overflow: hidden; padding-inline: 0; mask-image: linear-gradient(90deg, transparent, #000 6% 94%, transparent); }
.interest-strip__track { display: flex; width: max-content; animation: interest-travel 36s linear infinite; }
.interest-strip__group { display: flex; align-items: center; flex-shrink: 0; gap: clamp(30px, 4vw, 65px); padding-right: clamp(30px, 4vw, 65px); white-space: nowrap; }
.interest-strip:hover .interest-strip__track, .interest-strip.is-offscreen .interest-strip__track { animation-play-state: paused; }

.learning-loop { margin: 30px 0; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, var(--glass-fill), transparent 65%), var(--panel); box-shadow: 0 8px 30px #00000008; }
.learning-loop__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; color: var(--muted); font-size: 8px; font-weight: 600; letter-spacing: 1.3px; }
.learning-tabs { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.learning-tabs::after { position: absolute; bottom: -1px; left: 0; width: 33.333%; height: 2px; background: var(--accent); transform: translateX(calc(var(--learning-index, 0) * 100%)); transition: transform 350ms var(--ease-out); content: ''; }
.learning-tabs button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 7px 5px; border: 1px solid transparent; border-radius: 8px; color: var(--muted); background: transparent; font: 500 12px/1.4 'Inter', sans-serif; transition: color 180ms, background 180ms, border-color 180ms; }
.learning-tabs button small { font-size: 8px; color: var(--accent); }
.learning-tabs button[aria-selected='true'] { border-color: var(--line); color: var(--text); background: var(--soft); }
.learning-tabs button:hover { color: var(--text); background: var(--soft); }
.learning-panel { min-height: 186px; padding-top: 20px; }
.learning-panel h3 { margin: 0 0 9px; font: 600 18px/1.4 'Barlow Condensed', sans-serif; letter-spacing: .1px; }
.learning-panel p { color: var(--muted); font-size: 12px; line-height: 1.85; }
.learning-panel a { display: inline-flex; align-items: center; gap: 18px; min-height: 36px; margin-top: 10px; color: var(--accent); font-size: 11px; font-weight: 600; }
.learning-panel a span { transition: translate 200ms; }
.learning-panel a:hover span { translate: 3px -2px; }
.learning-panel.is-changing { animation: detail-arrive 300ms var(--ease-out); }
.about-details > div { padding-left: 12px; border-left: 2px solid var(--line); transition: border-color 250ms, translate 250ms; }
.about-details > div:hover { border-color: var(--accent); translate: 0 -3px; }

.skill-explorer { margin: 34px 0 0; }
.skill-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.skill-filters button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 42px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: transparent; font: 500 11px/1.5 'Inter', sans-serif; transition: background 220ms, color 220ms, border-color 220ms; }
.skill-filters button > span { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: var(--soft); color: var(--muted); font-size: 9px; }
.skill-filters button[aria-pressed='true'] { border-color: var(--accent); background: var(--soft); color: var(--text); }
.skill-filters button[aria-pressed='true'] > span { background: var(--accent-fill); color: var(--accent-ink); }
.skill-filters button:hover { border-color: var(--accent); color: var(--text); }
.skill-filter-status { margin-top: 13px; color: var(--muted); text-align: center; font-size: 10px; line-height: 1.7; }
.key { transition: opacity 250ms, filter 250ms; }
.key.is-filtered-out { opacity: .24; filter: grayscale(.8); cursor: default; }
.key.is-filtered-out .key-float { animation-play-state: paused; }
.keyboard-stage { margin-top: 6px; }
.skill-readout { position: relative; overflow: hidden; }
.skill-readout::after { position: absolute; left: 0; top: 20%; bottom: 20%; width: 3px; border-radius: 3px; background: var(--accent); content: ''; }

.contact-topics { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.contact-topics > p { margin-bottom: 12px; color: var(--muted); font-size: 8px; font-weight: 600; letter-spacing: 1.5px; }
.contact-topics > div { display: flex; flex-wrap: wrap; gap: 9px; }
.contact-topics button { display: flex; align-items: center; gap: 18px; min-height: 42px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--glass-fill); font: 500 11px/1.5 'Inter', sans-serif; transition: border-color 200ms, color 200ms, background 200ms, transform 200ms; }
.contact-topics button span { color: var(--accent); transition: translate 200ms; }
.contact-topics button[aria-pressed='true'] { color: var(--text); border-color: var(--accent); background: var(--soft); }
.contact-topics button:hover { color: var(--text); border-color: var(--accent); transform: translateY(-2px); }
.contact-topics button:hover span { translate: 2px -2px; }
.contact-topics__hint { display: block; min-height: 36px; margin-top: 11px; color: var(--muted); font-size: 10px; line-height: 1.8; }
.contact-period { transform-origin: 50% 55%; transition: transform 400ms var(--ease-out); }
.contact:hover .contact-period { transform: translate(4px, -4px) rotate(8deg); }
.email-group > a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 7px; transition: color 220ms, text-decoration-color 220ms; }
.email-group > a:hover { text-decoration-color: var(--accent); }
#copy-email.is-copied { color: var(--accent); border-color: var(--accent); }
#copy-email.is-copied svg { animation: copied-pop 300ms var(--ease-out); }
.profile-link:hover > span { translate: 2px -2px; }
.profile-link > span { transition: translate 200ms; }

.footer-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 25px; }
.footer-controls > a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--muted); font: 500 11px/1.6 'Inter', sans-serif; }
.footer-controls > a:hover { color: var(--accent); }

@keyframes skill-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes interest-travel { to { transform: translateX(-50%); } }
@keyframes detail-arrive { from { opacity: .35; translate: 0 7px; } to { opacity: 1; translate: 0 0; } }
@keyframes copied-pop { 50% { scale: 1.18; } }
.js-motion .about.in-view .learning-loop { animation: detail-arrive 650ms 120ms var(--ease-out) both; }
.js-motion .contact.in-view .contact-topics { animation: detail-arrive 650ms 150ms var(--ease-out) both; }
.motion-paused .interest-strip__track, .motion-paused .floating-tile, .hero.is-offscreen .floating-tile { animation-play-state: paused; }
@media (max-width: 760px) {
  .interest-strip { display: block; padding-block: 23px; font-size: 9px; }
  .learning-loop { padding: 17px; }
  .learning-panel { min-height: 175px; }
  .skill-explorer { margin-top: 27px; }
  .skill-filters { gap: 7px; }
  .skill-filters button { padding: 7px 11px; gap: 7px; font-size: 10px; }
  .contact-topics { margin-top: 23px; padding-top: 18px; }
  .contact-topics button { font-size: 10px; padding-inline: 11px; gap: 12px; }
}
@media (max-width: 380px) {
  .learning-loop { padding: 13px; }
  .learning-loop__heading { font-size: 6.5px; letter-spacing: .9px; }
  .learning-tabs button { gap: 5px; font-size: 11px; }
  .skill-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .skill-filters button { justify-content: space-between; padding-inline: 12px; }
  .contact-topics > div { gap: 7px; }
  .contact-topics button { gap: 9px; font-size: 9px; padding-inline: 10px; }
  .footer-controls { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .floating-tile, .interest-strip__track, .learning-panel, .learning-loop, .contact-topics { animation: none !important; }
  .interest-strip__group { gap: 24px; padding-right: 24px; }
}