/* The work (2026-10-09, he: "now we should do the work showcase", then "Work should be: Some of my Projects: then
   merheb jennn ..."). One heading in his words, then the projects; each row has its own colour (--gc). Each project is a big name with its clip playing inside the line like a letter (gsap.com's
   pictures in the type, his "use them as letters also"); pointing at a row grows the clip and the name hops in its
   word's colour. m-work.js drives it. */
/* bottom was 34vh while the work ended the page; the contact centres itself under it now, so that left a ~480 px hole
   (launch sweep, 2026-10-10) */
.work { position: relative; z-index: 2; padding: 2vh 32px 6vh; overflow-x: clip; color: var(--white); }
/* the heading, in his words ("Some of my Projects:"), typing in gsap.com's way (m-work.js) */
.w-title { margin: 14vh 0 .4em; max-width: 14em; font-size: clamp(44px, 7.4vw, 136px); line-height: .98; font-weight: 800; letter-spacing: -.035em; font-variation-settings: 'opsz' 96; font-kerning: none; }
.w-title .tw { display: inline-block; white-space: nowrap; }
.w-title .lc { display: inline-block; position: relative; }
.w-title .lt { display: inline-block; transform-origin: 50% 80%; }
.w-title .stand { position: absolute; left: 50%; top: 50%; width: .62em; height: .62em; margin: -.36em 0 0 -.31em; pointer-events: none; visibility: hidden; }
.w-title .stand svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* one colour for the whole title (he: "color the text of the title", then of one colour a word: "I dont like the
   colors", then of green: "Yellow"): the landing's yellow */
.w-title { color: #ffd23f; }

/* the last row, the call to action (he: "yes build it"): "got an idea?" in the landing's green Saira, "let's build
   it" as the other names, the eyes emoji where a screenshot would be (he: "I want the EYEs emoji to pop and animate
   instead of the green card box"), and "message me" in the site's "let's talk" pink */
.w-yours .w-in { font-size: clamp(30px, 4.4vw, 80px); }
/* not a pill any more (he: "are these necessary to be like that ? I dont like them"): plain pink words, as "let's
   talk" on the landing; the row lighting up turns them dark and its arrow pokes (he picked "poke" on /arrows), and
   in the turns it pokes once */
.w-cta { display: inline-flex; align-items: center; color: #f633a4; font: 600 22px/1.25 'Bricolage Grotesque', sans-serif; letter-spacing: -.015em; white-space: nowrap; transition: color .3s .1s; }
.w-row.on .w-cta { color: #090b0c; }
.w-nx { font-family: 'Saira', sans-serif; font-stretch: 108%; letter-spacing: -.01em; color: #9bc53d; transition: color .35s .08s; }
.w-row.on .w-nx { color: #090b0c; }
.w-media.w-eyes { width: 1.2em; height: 1.05em; background: none; border-radius: 0; overflow: visible; }
.w-eyes svg { display: block; width: 100%; height: 100%; overflow: visible; }
.w-yours .w-meta { color: #9bc53d; }
.w-row.w-yours.on .w-media { opacity: 1; }

.w-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(244, 241, 234, .12); }
.w-row { position: relative; border-bottom: 1px solid rgba(244, 241, 234, .12); transition: opacity .35s; }
@media (hover: hover) and (min-width: 761px) { .w-list:hover .w-row:not(:hover) { opacity: .4; } }   /* fenced: a tap left the others dim on touch */
.w-in { position: relative; isolation: isolate; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; column-gap: .26em;
  padding: .16em 0 .13em; font-size: clamp(34px, 5.5vw, 100px); color: inherit; text-decoration: none; outline: none; }
/* highlighted: a band of the row's colour sweeps across behind it */
.w-in::before { content: ''; position: absolute; inset: 2px -16px; z-index: -1; border-radius: 16px; background: var(--gc);
  clip-path: inset(0 100% 0 0 round 16px); transition: clip-path .6s cubic-bezier(.76, 0, .24, 1); }
.w-row.on .w-in::before { clip-path: inset(0 0 0 0 round 16px); }
.w-name { display: inline-block; overflow: hidden; padding: .02em 0 .1em; margin-bottom: -.08em; font-weight: 800; letter-spacing: -.035em; line-height: 1.02; font-variation-settings: 'opsz' 96; white-space: nowrap; transition: color .35s .08s; }
.w-name .nc { display: inline-block; }
.w-name .nw { display: inline-block; white-space: nowrap; }   /* a word holds together; the line breaks between words */
.w-row.on .w-name, .w-row.on .w-meta { color: #090b0c; }
/* going dark, the words keep their dark ink until the band has mostly wiped away (a transition is the one of the state
   it goes to: these rules are the way out, the .on ones above the way in). Otherwise "got an idea?" went back to green
   on the still-green band for a moment (his iPhone, 2026-10-12: "when it becomes green its glitching a bit") */
.w-row:not(.on) .w-name, .w-row:not(.on) .w-meta, .w-row:not(.on) .w-nx, .w-row:not(.on) .w-cta { transition: color .3s .32s; }
.w-in:focus-visible::after { content: ''; position: absolute; inset: -4px -20px; border: 2px solid var(--gc); border-radius: 18px; }

/* the screenshot, a letter's height, inside the line: never scaled up, so it stays sharp */
.w-media { position: relative; z-index: 1; display: block; width: 1.3em; height: .8em; border-radius: .13em; overflow: hidden; background: #141a1c; transition: opacity .35s; }
.w-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.w-row.on .w-media { opacity: 0; }
/* and highlighted, the landing page at its own size beside the name, sliding up into view; a flat card, no shadow
   (he: "I dont want shadows to show"), over the rows below it (m-work.js raises the lit row) */
.w-peek { position: absolute; z-index: 4; left: 46%; top: 50%; width: min(30vw, 460px); aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; pointer-events: none;
  transform: translate(0, -24%) rotate(-3deg); clip-path: inset(100% 0 0 0 round 12px);
  transition: clip-path .55s cubic-bezier(.76, 0, .24, 1), transform .7s cubic-bezier(.22, 1, .36, 1); }
.w-peek img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.w-row.on .w-peek { clip-path: inset(0 0 0 0 round 12px); transform: translate(0, -32%) rotate(-2deg); }

.w-meta { justify-self: end; display: inline-flex; align-items: center; gap: .7em; font: 500 15px/1.35 'Azeret Mono', monospace; letter-spacing: .02em; color: rgba(244, 241, 234, .62); text-align: right; }
.w-ico { flex: none; width: 1.5em; height: 1.5em; }
.w-ico svg { display: block; width: 100%; height: 100%; overflow: visible; }
.w-go { margin-left: .5em; font: 400 22px/1 'Bricolage Grotesque', sans-serif; color: rgba(244, 241, 234, .45); transition: transform .35s, color .3s; }
/* drawn, not typed (he, 2026-10-10: "the arrows emojis on phone are bad, they dont look like the PC"): an iPhone draws
   the ↗ character as a blue emoji key */
.w-go svg { display: block; width: .74em; height: .74em; overflow: visible; }
.w-go path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.w-row.on .w-go { color: #090b0c; transform: translate(3px, -3px); }

@media (max-width: 760px) {
  .work { padding: 0 18px 4vh; }
  .w-title { margin-top: 10vh; }
  .w-in { grid-template-columns: 1fr auto; grid-template-areas: "name go" "media media" "meta meta"; font-size: 34px; padding: .35em 0 .45em; }
  .w-name { grid-area: name; white-space: normal; }
  .w-go { grid-area: go; align-self: start; }
  .w-media { grid-area: media; width: 100%; height: auto; aspect-ratio: 16 / 10; margin: .3em 0 .25em; border-radius: 12px; }
  .w-row.on .w-media { opacity: 1; }
  .w-in::before { inset: 0 -10px; }
  .w-media.w-icon svg { width: 22%; height: 34%; }
  /* the eyes on the line with "got an idea? let's build it" (he, 2026-10-10: "I want the eyes emoji on the same
     line"), the words sized so the two fit one line down to 320 wide */
  .w-yours .w-in { grid-template-columns: auto 1fr; grid-template-areas: "name media" "meta meta"; font-size: min(30px, calc((100vw - 36px) / 12.4)); }
  .w-yours .w-name { white-space: nowrap; }
  .w-media.w-eyes { width: 1.2em; height: 1.05em; aspect-ratio: auto; margin: 0; }
  .w-meta { grid-area: meta; justify-self: start; text-align: left; font-size: 13px; }
  .w-cta { margin-top: 4px; font-size: 18px; }
}