/* Page four: white contours, irises and pine, in her original coordinates. */
#skills { background: var(--pine); color: var(--white); }
.skills-banner { background: var(--black); }
.skills-banner-frame { height: calc(402.75 * var(--u)); }
.skills-outline { position: relative; z-index: 2; font: 400 calc(84.06538 * var(--u))/1 var(--font-display); text-transform: uppercase; color: var(--black); -webkit-text-stroke: calc(6 * var(--u)) var(--white); paint-order: normal; letter-spacing: calc(-4.20327 * var(--u)); }
.skills-outline-line { position: absolute; top: calc((var(--baseline) - 68.512) * var(--u)); left: calc(82.004 * var(--u)); white-space: nowrap; }
.skills-irises { position: absolute; left: calc(389.886 * var(--u)); top: calc(-5.333 * var(--u)); width: calc(634.5 * var(--u)); height: calc(355.5 * var(--u)); opacity: .68; --dur: 1200ms; }
.skills-irises-sway { width: 100%; height: 100%; transform-origin: 90% 50%; animation: skills-flower-sway 8s 1800ms ease-in-out infinite alternate; }
.skills-irises img { position: absolute; width: calc(355.5 * var(--u)); height: calc(634.5 * var(--u)); max-width: none; left: calc(139.5 * var(--u)); top: calc(-139.5 * var(--u)); transform: rotate(-90deg); }
.skills-panel { position: relative; }
.skills-content { height: auto; padding: calc(32.45476 * var(--u)) calc(35 * var(--u)) calc(92 * var(--u)) calc(79.72339 * var(--u)); }
.skills-group { position: relative; scroll-margin-top: calc(var(--nav-h) + 24px); font-size: max(15px, calc(24.9975 * var(--u))); line-height: calc(29.25 * var(--u)); }
.skills-group-title { font: 400 calc(49.29 * var(--u))/1 var(--font-display); text-transform: uppercase; letter-spacing: -.05em; margin-bottom: calc(3.6 * var(--u)); }
.skills-group + .skills-group { margin-top: calc(45 * var(--u)); }
.skills-category { margin-bottom: calc(24 * var(--u)); }
.skills-category:last-child { margin-bottom: 0; }
.skills-category h4 { font-weight: 700; font-size: inherit; line-height: inherit; }
.skills-underline { display: inline; --ul-y: calc(1.4 * var(--u)); background-image: linear-gradient(to top, transparent var(--ul-y), var(--white) var(--ul-y) calc(var(--ul-y) + 2.25 * var(--u)), transparent 0); background-repeat: no-repeat; background-position: left bottom; background-size: 100% 100%; }
.skills-group strong { font-weight: 700; }
.skills-disco { position: absolute; z-index: 0; width: calc(411 * var(--u)); height: calc(441.75 * var(--u)); right: calc(-56.51 * var(--u)); bottom: calc(160.97546 * var(--u)); }
.skills-disco-sway { position: absolute; width: 100%; height: calc(730.5 * var(--u)); top: calc(-155.43567 * var(--u)); opacity: .56; transform-origin: 50% 25%; animation: skills-disco-sway 7s 1200ms ease-in-out infinite alternate; }
.skills-disco img { width: 100%; height: 100%; }
.skills-light { position: absolute; inset: 0; overflow: clip; pointer-events: none; }
.skills-speck { position: absolute; width: var(--size); height: var(--size); border-radius: 50%; background: radial-gradient(circle, var(--white), transparent 70%); mix-blend-mode: screen; opacity: 0; animation: skills-light-drift var(--speed) var(--wait) ease-in-out infinite alternate; }
.skills-sparkle { position: absolute; width: calc(13 * var(--u)); aspect-ratio: 1; background: var(--white); clip-path: polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%); opacity: 0; animation: skills-twinkle 6s var(--wait) ease-in-out infinite; }
@keyframes skills-flower-sway { from { rotate: -.45deg; } to { rotate: .45deg; } }
@keyframes skills-disco-sway { from { rotate: -.65deg; } to { rotate: .65deg; } }
@keyframes skills-light-drift { from { opacity: .015; translate: -10px 12px; } to { opacity: .065; translate: 16px -14px; } }
@keyframes skills-twinkle { 0%, 38%, 65%, 100% { opacity: 0; scale: .94; } 48% { opacity: .65; scale: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .js .skills-outline-line[data-reveal]:not(.is-in) { translate: calc(-45 * var(--u)) 0; }
  .js .skills-irises[data-reveal]:not(.is-in) { scale: .94; }
}
@media (max-width: 699px) {
  .skills-banner-frame { height: calc(334 * var(--m)); }
  .skills-outline { font-size: calc(68 * var(--m)); letter-spacing: calc(-3.4 * var(--m)); -webkit-text-stroke-width: calc(4.9 * var(--m)); }
  .skills-outline-line { left: max(20px, env(safe-area-inset-left, 0px)); top: calc((var(--baseline) * .79 + 23 - 55.42) * var(--m)); }
  .skills-outline-line:last-child { font-size: calc(47 * var(--m)); letter-spacing: calc(-2.35 * var(--m)); -webkit-text-stroke-width: calc(3.4 * var(--m)); top: calc(252 * var(--m)); }
  .skills-irises { width: calc(395 * var(--m)); height: calc(221 * var(--m)); left: calc(144 * var(--m)); top: calc(18 * var(--m)); }
  .skills-irises img { width: calc(221 * var(--m)); height: calc(395 * var(--m)); left: calc(87 * var(--m)); top: calc(-87 * var(--m)); }
  .skills-content { height: auto; padding: calc(32 * var(--m)) max(20px, env(safe-area-inset-right, 0px)) calc(46 * var(--m)) max(20px, env(safe-area-inset-left, 0px)); }
  .skills-group { position: relative; left: auto; right: auto; top: auto; font-size: max(16px, calc(18 * var(--m))); line-height: 1.48; }
  .skills-group + .skills-group { margin-top: calc(46 * var(--m)); }
  .skills-group-title { font-size: calc(44 * var(--m)); line-height: 1.06; margin-bottom: calc(20 * var(--m)); }
  .skills-category { margin-bottom: calc(24 * var(--m)); }
  .skills-category:last-child { margin-bottom: 0; }
  .skills-category h4 { margin-bottom: calc(5 * var(--m)); }
  .skills-underline { padding-bottom: 3px; background-size: 100% 100%; background-image: linear-gradient(to top, var(--white) 0 2px, transparent 2px); }
  
  .skills-clubs li + li { margin-top: calc(10 * var(--m)); }
  .skills-clubs { padding-bottom: calc(193 * var(--m)); }
  .skills-certifications .skills-group-title { font-size: calc(35 * var(--m)); letter-spacing: calc(-.3 * var(--m)); }
  .skills-certifications li + li { margin-top: calc(20 * var(--m)); }
  .skills-disco { top: auto; bottom: calc(216 * var(--m)); width: calc(235 * var(--m)); height: calc(253 * var(--m)); right: calc(-46 * var(--m)); }
  .skills-disco-sway { height: calc(418 * var(--m)); top: calc(-89 * var(--m)); }
  .skills-sparkle { width: calc(10 * var(--m)); }
}

/* Scroll rotation and light drift have their own transform-free layers. */
.skills-disco-turn { position: relative; width: 100%; height: 100%; transform-origin: 50% 25%; }
.skills-light-drift { position: absolute; inset: 0; }

/* Party mode darkens only the pine, keeping her white copy crisp. All additional
   reflections are transparent and paused until the visitor finds the disco ball. */
.skills-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--black); opacity: 0; transition: opacity 600ms var(--ease-out); }
.skills-panel.is-party::before { opacity: .15; }
.skills-party-light { position: absolute; inset: 0; opacity: 0; transition: opacity 600ms var(--ease-out); }
.skills-panel.is-party .skills-party-light { opacity: 1; }
.skills-party-speck { position: absolute; left: 0; top: 0; width: var(--size); height: calc(var(--size) * .65); border-radius: 50%; background: radial-gradient(ellipse, rgb(255 255 255 / .65), rgb(255 255 255 / .18) 35%, transparent 72%); mix-blend-mode: screen; offset-rotate: auto; opacity: 0; animation: skills-party-arc var(--speed) var(--wait) linear infinite; animation-play-state: paused; }
#skills.is-visible .is-party-travelling .skills-party-speck { animation-play-state: running; }
.skills-panel.is-party .skills-sparkle { animation-duration: 1800ms; }
@keyframes skills-party-arc {
  0% { offset-distance: 0%; opacity: 0; }
  14% { opacity: .48; }
  50% { opacity: .78; }
  86% { opacity: .38; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* The index keeps her letter-by-letter outline; a second paint layer fills it. */
.skills-index-link { position: relative; display: inline-block; min-width: 24px; min-height: 24px; text-decoration: none; }
.skills-index-fill { position: absolute; inset: 0; color: var(--white); pointer-events: none; clip-path: inset(0 100% 0 0); transition: clip-path 300ms ease-out; }
.skills-index-link:focus-visible { outline: 3px solid var(--white); outline-offset: 7px; }
.skills-index-link:focus-visible .skills-index-fill { clip-path: inset(0); }
@media (hover: hover) and (pointer: fine) {
  .skills-index-link:hover .skills-index-fill { clip-path: inset(0); }
}

/* Quiet labels, roomy enough to read as individual skills rather than controls. */
.skills-tags { display: flex; flex-wrap: wrap; gap: calc(7 * var(--u)); margin-top: calc(9 * var(--u)); }
.skills-tags li { position: relative; max-width: 100%; padding: calc(4 * var(--u)) calc(11 * var(--u)); border: 1px solid rgb(255 255 255 / .25); border-radius: 999px; background: rgb(255 255 255 / .07); color: var(--white); font-size: max(15px, calc(21 * var(--u))); line-height: 1.35; cursor: default; --rise: 8px; --dur: 260ms; --ease: var(--spring); }
.skills-category .skills-underline { --dur: 180ms; }
@media (prefers-reduced-motion: no-preference) {
  .js .skills-tags li[data-reveal]:not(.is-in) { scale: .96; }
}

/* One feathered reflection crosses all the labels together, from the ball's side. */
.skills-beam { position: absolute; z-index: 3; inset: 0; overflow: clip; pointer-events: none; mix-blend-mode: screen; opacity: .75; }
.skills-beam::before { content: ""; position: absolute; inset: -12% -110%; background: linear-gradient(125deg, transparent 43%, rgb(255 255 255 / .025) 47%, rgb(255 255 255 / .16) 50%, rgb(255 255 255 / .025) 53%, transparent 57%); opacity: 0; animation: skills-beam-sweep 7.2s 1.2s linear infinite; animation-play-state: paused; }
#skills.is-visible .skills-panel.is-panel-visible .skills-beam::before { animation-play-state: running; }
.skills-panel.is-party .skills-beam { opacity: 1; }
@keyframes skills-beam-sweep {
  0% { transform: translateX(38%); opacity: 0; }
  2% { opacity: 1; }
  22% { transform: translateX(-38%); opacity: 1; }
  24%, 100% { transform: translateX(-38%); opacity: 0; }
}

.skills-tag-glint { position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; }
.skills-tag-glint::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 40%, rgb(255 255 255 / .12) 50%, transparent 60%); background-size: 250% 100%; opacity: 0; }
.skills-tag-glint i { position: absolute; top: -5px; right: 8px; width: 12px; aspect-ratio: 1; background: var(--white); clip-path: polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%); opacity: 0; }
.skills-tag-glint i + i { top: 7px; right: -4px; width: 7px; }
.skills-panel.is-panel-visible .is-glinting::before { animation: skills-tag-sheen 350ms ease-out; }
.skills-panel.is-panel-visible .is-glinting i { animation: skills-tag-star 420ms var(--spring); }
.skills-panel.is-panel-visible .is-glinting i + i { animation-delay: 50ms; }
@keyframes skills-tag-sheen {
  0% { background-position: 100% 0; opacity: 0; }
  15%, 75% { opacity: 1; }
  100% { background-position: 0 0; opacity: 0; }
}
@keyframes skills-tag-star {
  0% { opacity: 0; scale: .45; translate: -2px 3px; }
  35% { opacity: .9; scale: 1; translate: 0 0; }
  100% { opacity: 0; scale: .65; translate: 1px -2px; }
}

/* Faceted silver foil, with a small rainbow reflection that follows the scroll. */
#skills { --skills-silver: #c5ccd1; --skills-seal-shadow: #737d85; }
.skills-certifications li { position: relative; padding-left: 1.5em; }
.skills-foil { position: absolute; left: 0; top: .09em; width: 1.1em; height: 1.1em; background: linear-gradient(115deg, transparent 20%, rgb(255 169 209 / .35) 32%, rgb(255 244 147 / .35) 42%, rgb(120 255 224 / .35) 50%, rgb(135 171 255 / .35) 60%, transparent 75%), repeating-conic-gradient(from 15deg, var(--white) 0deg, var(--skills-silver) 15deg, var(--skills-seal-shadow) 30deg, var(--white) 45deg); background-size: 220% 100%, 100% 100%; background-position: var(--foil-x, 50%) 50%, center; clip-path: polygon(50% 0%,59% 9%,69% 4%,74% 16%,85% 15%,86% 28%,97% 31%,92% 43%,100% 50%,91% 59%,96% 69%,84% 74%,85% 85%,72% 86%,69% 97%,57% 92%,50% 100%,41% 91%,31% 96%,26% 84%,15% 85%,14% 72%,3% 69%,8% 57%,0% 50%,9% 41%,4% 31%,16% 26%,15% 15%,28% 14%,31% 3%,43% 8%); }
.skills-foil::before { content: ""; position: absolute; inset: 22%; border: 1px solid rgb(255 255 255 / .8); border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgb(255 255 255 / .6), transparent 70%); }
.skills-foil::after { content: ""; position: absolute; inset: 35%; background: var(--white); clip-path: polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%); }

@media (max-width: 699px) {
  .skills-tags { gap: 4px 6px; margin-top: 8px; }
  .skills-tags li { font-size: 16px; padding: 4px 10px; line-height: 1.35; }
  .skills-category { margin-bottom: calc(16 * var(--m)); }
  .skills-group-title { margin-bottom: calc(16 * var(--m)); }
  .skills-group + .skills-group { margin-top: calc(38 * var(--m)); }
}
@media (prefers-reduced-motion: reduce) {
  .skills-index-fill { transition: none; }
  .js #skills .skills-tags li[data-reveal] { opacity: 1; }
  .skills-beam, .skills-tag-glint { display: none; }
}