/* An open, moving field of skills, extending beyond the viewport. */
.skills-in-how{padding-top:84px}
.skills-intro{text-align:center;margin-bottom:28px}
.skills-intro h3{font-size:clamp(44px,8vw,86px);line-height:1.05;margin-block:13px 14px}
.skills-intro>span{font-size:17px;color:#d4cbe9}
.skill-deck-layout{display:block}
.skills-flow{--disc:164px;--space:18px;position:relative;isolation:isolate;width:100vw;margin-inline:calc(50% - 50vw);padding:12px 0 20px;overflow:hidden;direction:ltr}
.skill-lane{position:relative;overflow:hidden;padding:22px 0;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);touch-action:pan-y;cursor:grab;transform:rotate(-2deg);user-select:none}
.skill-lane:nth-child(2){transform:rotate(2deg);margin-top:-13px}
.skill-track{position:relative;display:flex;align-items:center;width:max-content;will-change:transform}
.skill-group{display:flex;align-items:center;gap:var(--space);padding-right:var(--space);flex:none;direction:ltr}
.skills-flow .skill-tile{--glow:#d7c5ff;position:relative;flex:0 0 var(--disc);width:var(--disc);height:var(--disc);min-height:0;aspect-ratio:1;border-radius:50%;border:1px solid #b8a6e047;background:radial-gradient(ellipse at 35% 20%,#49405e80,transparent 75%),#24223c;color:#fffdfb;padding:15px 16px 21px;gap:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;direction:rtl;overflow:visible;scroll-snap-align:none;transform:none;transition:background .35s,border-color .35s,box-shadow .35s,scale .5s cubic-bezier(.2,1.7,.4,1);animation:skillDrift 4.8s ease-in-out infinite;animation-delay:var(--delay,0s);-webkit-tap-highlight-color:transparent;cursor:pointer}
.skills-flow .skill-tile:nth-child(2n){--delay:-2s}.skills-flow .skill-tile:nth-child(3n){--delay:-3.4s}
.skills-flow .skill-tile img{width:92px;height:92px;object-fit:contain;pointer-events:none;filter:drop-shadow(0 7px 10px #0002);transition:transform .6s cubic-bezier(.2,1.7,.4,1)}
.skills-flow .skill-tile>span:last-child{font-size:15px;line-height:1.15;font-weight:500;max-width:130px}
.skills-flow .tile-check{top:10px;right:9px;width:24px;height:24px}
.skills-flow .skill-tile[data-skill=plants],.skills-flow .skill-tile[data-skill=organize]{--glow:#c7fc77}
.skills-flow .skill-tile[data-skill=dogs],.skills-flow .skill-tile[data-skill=teach]{--glow:#ef9fec}
.skills-flow .skill-tile[data-skill=handy],.skills-flow .skill-tile[data-skill=errands]{--glow:#ffcb9e}
.skills-flow .skill-tile[data-skill=digital],.skills-flow .skill-tile[data-skill=creative]{--glow:#9de5fd}
.skills-flow .skill-tile.is-active{background:var(--glow);border-color:var(--glow);color:var(--ink);box-shadow:0 0 0 6px color-mix(in srgb,var(--glow) 13%,transparent),0 12px 40px #0002;scale:1.04;transform:none}
.skills-flow .skill-tile.is-active img{transform:rotate(-9deg) scale(1.1)}
.skills-flow.is-selected .skill-tile{animation-play-state:paused}
.skills-flow .skill-tile:focus-visible{outline:3px solid #fff;outline-offset:5px}
.skill-lane.is-dragging,.skill-lane.is-dragging .skill-tile{cursor:grabbing}
.skill-lane.is-dragging .skill-tile{animation-play-state:paused}
.skills-flow-note{text-align:center;font-size:18px;font-weight:500;line-height:1.4;color:#e8dff5;margin:13px 0 28px}
.skills-in-how .skill-showcase{position:relative;max-width:720px;min-height:0;margin:0 auto;border:1px solid #ffffff26;background:#25233e;color:#fff;border-radius:26px;display:block;transition:background .4s,color .4s}
.skills-in-how .skill-showcase[data-selected=plants],.skills-in-how .skill-showcase[data-selected=organize]{background:#c7fc77;color:var(--ink)}
.skills-in-how .skill-showcase[data-selected=dogs],.skills-in-how .skill-showcase[data-selected=teach]{background:#ef9fec;color:var(--ink)}
.skills-in-how .skill-showcase[data-selected=handy],.skills-in-how .skill-showcase[data-selected=errands]{background:#ffcb9e;color:var(--ink)}
.skills-in-how .skill-showcase[data-selected=digital],.skills-in-how .skill-showcase[data-selected=creative]{background:#9de5fd;color:var(--ink)}
/* The label's 120px left gutter exists only to clear .skills-resume ("Keep
   exploring", absolutely positioned top-left) once a skill IS selected —
   scoped the same way line 29's per-skill background colors are (":not
   intro"), so it no longer reserves dead space in the intro state, before
   any skill is picked and .skills-resume is still [hidden]. Unscoped, this
   was invisible in Hebrew (right-aligned text never reaches the empty
   left-side gutter) but showed as a visible dead gap before English's
   left-aligned label text — reported live on tadam.co/en, fixed here. */
.skills-in-how .example{padding:26px}.skills-in-how .example-label{font-size:14px;margin-bottom:17px;line-height:1.4}.skills-in-how .skill-showcase[data-selected]:not([data-selected="intro"]) .example-label{padding-left:120px}
.skills-in-how .example p{font-size:clamp(21px,2.4vw,28px);line-height:1.35;min-height:3.9em}
.skills-in-how .text-link{font-size:16px;border-color:currentColor;margin-top:17px;padding-top:17px}
.skills-resume{position:absolute;left:24px;top:24px;border:0;background:none;color:inherit;font:inherit;font-size:14px;font-weight:600;padding:4px 0;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.skills-resume[hidden]{display:none}.skills-resume span{display:inline-block;margin-right:5px}
.skills-flow:not(.is-ready) .skill-lane,.skills-flow.is-reduced .skill-lane{overflow-x:auto;transform:none;scrollbar-width:thin;scrollbar-color:#706784 transparent;touch-action:auto}
.skills-flow:not(.is-ready) .skill-track,.skills-flow.is-reduced .skill-track{transform:none!important}
.skills-flow.is-reduced .skill-tile{animation:none;transition:none}
@keyframes skillDrift{0%,100%{translate:0 3px;rotate:-2deg}50%{translate:0 -5px;rotate:2deg}}
@media(hover:hover) and (pointer:fine){.skills-flow .skill-tile:hover{background:var(--glow);color:var(--ink);border-color:var(--glow);scale:1.07;transform:none;box-shadow:0 0 35px color-mix(in srgb,var(--glow) 13%,transparent)}.skills-flow .skill-tile:hover img{transform:translateY(-5px) rotate(9deg) scale(1.12)}}
@media(min-width:761px){.skills-flow{--disc:210px;--space:28px;padding-block:22px}.skill-lane{padding-block:30px}.skill-lane:nth-child(2){margin-top:-17px}.skills-flow .skill-tile img{width:122px;height:122px}.skills-flow .skill-tile>span:last-child{font-size:17px;max-width:160px}.skills-flow-note{font-size:22px;margin:26px 0 35px}.skills-in-how .example{padding:32px}.skills-in-how .example p{min-height:2.7em}.skills-resume{top:29px;left:32px}}
@media(max-width:370px){.skills-flow{--disc:148px;--space:16px}.skills-flow .skill-tile img{width:82px;height:82px}.skills-flow .skill-tile>span:last-child{font-size:14px}.skills-in-how .example-label{max-width:165px}.skills-in-how .skill-showcase[data-selected]:not([data-selected="intro"]) .example-label{padding-left:0}.skills-resume{font-size:13px;left:17px}}
@media(prefers-reduced-motion:reduce){.skills-flow .skill-tile{animation:none!important}}

/* Compact lanes leave the selected example within easy reach. */
.skills-in-how{padding-top:60px}.skills-intro{margin-bottom:12px}
.skills-flow{--disc:126px;--space:14px;padding:4px 0 8px}
.skill-lane{padding:13px 0;transform:rotate(-1deg)}.skill-lane:nth-child(2){transform:rotate(1deg);margin-top:-6px}
.skills-flow .skill-tile{padding:10px 9px 13px;gap:3px}.skills-flow .skill-tile img{width:67px;height:67px}
.skills-flow .skill-tile>span:last-child{font-size:14px;max-width:105px;line-height:1.12}
.skills-flow .tile-check{width:21px;height:21px;top:3px;right:3px;font-size:12px}
.skills-flow-note{font-size:16px;margin:8px 0 15px}
.skills-in-how .example{padding:20px}.skills-in-how .example p{font-size:21px;min-height:0}
.skills-in-how .example-label{font-size:13px;margin-bottom:12px}.skills-resume{top:19px;left:20px;font-size:13px}
@media(min-width:761px){.skills-flow{--disc:156px;--space:22px}.skills-flow .skill-tile img{width:87px;height:87px}.skills-flow .skill-tile>span:last-child{font-size:15px;max-width:130px}.skills-flow-note{font-size:18px}.skills-in-how .example p{font-size:24px}.skills-in-how .example{padding:25px}.skills-resume{top:24px;left:25px}}

/* Every choice carries its own color into the detail card. */
.skills-in-how .skill-showcase[data-selected]:not([data-selected="intro"]){background:var(--selected-color,#d7c5ff);color:var(--ink)}
.skill-lane,.skill-lane:nth-child(2){transform:none;margin-top:0;padding-block:18px}
.skills-flow .skill-tile:not(.is-active):hover{background:radial-gradient(ellipse at 35% 20%,#49405e80,transparent 75%),#24223c;color:#fffdfb;border-color:#b8a6e080}