/* Wish clover field: the footer under the Work and About panels (Figma: portfolio › wish clover field).
   Built by assets/wish.js. Clover positions are % of the field, so they spread out or squeeze in
   with its width (the field is 383px tall). The make-a-wish panel opens beside the field on wide
   screens and over it on narrow ones. */
.main-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:var(--space-4);container-type:inline-size}
.main-col > .panel{flex:none;width:100%}

.wish{position:relative;display:flex;width:100%;height:383px;font-family:var(--inter);letter-spacing:0}
.wish-field{position:relative;flex:1 1 0;min-width:0;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md)}

/* clovers */
.wc{position:absolute;width:var(--s,34px);height:var(--s,34px);margin:calc(var(--s,34px) / -2) 0 0 calc(var(--s,34px) / -2);padding:0;border:0;background:none;color:var(--text-strong);transform:rotate(var(--r,0deg))}
.wc svg{display:block;width:100%;height:100%;overflow:visible;transform-origin:50% 88%}
.wc path{fill:currentColor}
.wc:focus-visible{outline:2px solid var(--accent-text);outline-offset:4px;border-radius:var(--radius-sm)}
/* your own clovers are green and draw themselves in (the pen is a mask over the green drawing) */
.wc.mine{color:#00702a}
.wc .pen{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:wish-draw 1.6s cubic-bezier(.45,0,.25,1) forwards}
@keyframes wish-draw{to{stroke-dashoffset:0}}
@keyframes wish-fade{to{opacity:0}}

/* brackets around the picked clover */
.wish-brackets{position:absolute;left:0;top:0;width:46px;height:46px;margin:-23px 0 0 -23px;pointer-events:none;opacity:0;transition:opacity .2s ease}
.wish-brackets.on{opacity:1}
.wish-brackets.slide{transition:opacity .2s ease,left .35s cubic-bezier(.22,1,.36,1),top .35s cubic-bezier(.22,1,.36,1)}
.wish-brackets svg{display:block;width:100%;height:100%}

/* the wish itself */
.wish-pop{position:absolute;left:0;top:0;z-index:2;max-width:min(320px,calc(100% - 32px));padding:8px 14px;background:#343434;color:#fff;font-size:12px;line-height:1.5;pointer-events:none;opacity:0;transform:translateY(-50%) translateX(-4px);transition:opacity .2s ease,transform .2s ease}
.wish-pop.on{opacity:1;transform:translateY(-50%)}
/* public wishes in white, secret ones in gray */
.wish-pop.secret{color:rgba(255,255,255,.6)}

/* "Your wish has been planted": writes in left to right, then fades */
.wish-toast{position:absolute;left:50%;top:16px;z-index:2;transform:translateX(-50%);padding:8px 16px;background:#343434;color:#fff;font-size:14px;line-height:1.5;white-space:nowrap;pointer-events:none;visibility:hidden;clip-path:inset(0 100% 0 0)}
.wish-toast.on{visibility:visible;animation:wish-reveal .7s cubic-bezier(.45,0,.25,1) forwards,wish-fade .5s ease 3.7s forwards}
@keyframes wish-reveal{to{clip-path:inset(0 0 0 0)}}

.wish-count{position:absolute;left:16px;bottom:16px;font-size:12px;line-height:1.2;color:var(--text-muted)}
.wish-eyebrow{font-weight:500;font-size:11px;line-height:1.2;letter-spacing:.44px;text-transform:uppercase;color:var(--text-muted);white-space:nowrap}

/* make-a-wish button: the logo stamp */
.wish-open{position:absolute;right:16px;bottom:16px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0;border:0;background:none;font-family:inherit;transition:opacity .25s ease}
/* the stamp, cropped above the stray ink line at the bottom of the scan (rows 152+ of 158) */
.wish-open .stamp{display:block;width:38px;height:36px;overflow:hidden;transform:rotate(-3.25deg);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.wish-open img{display:block;width:38px;height:auto}
.wish-open:hover .stamp{transform:rotate(-8deg) scale(1.06)}
.wish-open:focus-visible{outline:2px solid var(--accent-text);outline-offset:4px;border-radius:var(--radius-sm)}
.wish.open .wish-open{opacity:0;pointer-events:none}

/* make-a-wish panel */
.wish-panel{flex:none;width:0;margin-left:0;overflow:hidden;opacity:0;visibility:hidden;transition:width .45s cubic-bezier(.22,1,.36,1),margin-left .45s cubic-bezier(.22,1,.36,1),opacity .3s ease,visibility 0s .45s}
.wish.open .wish-panel{width:360px;margin-left:12px;opacity:1;visibility:visible;transition:width .45s cubic-bezier(.22,1,.36,1),margin-left .45s cubic-bezier(.22,1,.36,1),opacity .3s ease .1s,visibility 0s}
.wish-card{position:relative;width:360px;height:100%;display:flex;flex-direction:column;gap:16px;padding:56px 24px 20px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md)}
.wish-card > .wish-eyebrow{position:absolute;left:24px;top:24px}
.wish-close{position:absolute;right:12px;top:10px;display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:999px;background:none;transition:background .2s ease}
.wish-close:hover{background:var(--surface-sunken)}
.wish-close svg{display:block}

/* picker: preview on the left, the five styles in a row beside it, so the panel fits the 383px footer */
.wish-picker{position:relative;display:flex;align-items:center;gap:12px;width:100%}
.wish-styles{display:flex;gap:6px}
.wish-style{display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;background:var(--surface-glass);border:1px solid var(--line);border-radius:4px;color:var(--text-strong);transition:border-color .2s ease}
.wish-style.on{border-color:transparent}
.wish-style svg{display:block;width:26px;height:26px}
.wish-style path{fill:currentColor}
.wish-style:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
/* brackets slide side to side to the chosen style */
.wish-picker-brackets{position:absolute;left:100px;top:26px;width:36px;height:36px;pointer-events:none;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.wish-picker-brackets svg{display:block;width:100%;height:100%}
.wish-preview{order:-1;flex:none;width:88px;height:88px;display:flex;align-items:center;justify-content:center;background:var(--surface-glass);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--text-strong)}
.wish-preview svg{display:block;width:64px;height:64px}
.wish-preview path{fill:currentColor}
.wish-preview svg.swap{animation:wish-swap .3s ease}
@keyframes wish-swap{from{opacity:0;transform:scale(.92)}}

.wish-write{display:flex;flex-direction:column;gap:8px;width:100%}
.wish-input{display:block;width:100%;height:96px;margin:0;padding:12px 14px;resize:none;background:var(--surface);border:1px solid var(--line);border-radius:4px;font-family:var(--inter);font-size:14px;line-height:1.5;letter-spacing:0;color:var(--text-strong);outline:none;transition:border-color .2s ease}
.wish-input::placeholder{color:var(--text-label)}
.wish-input:focus{border-color:#c9c9c9}
.wish-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-left:4px}
.wish-who{font-size:12px;line-height:1.2;color:var(--text-muted)}
/* who-can-read toggle: the white knob slides between eye and lock */
.wish-toggle{position:relative;display:flex;gap:2px;padding:2px;border-radius:8px;background:var(--surface-sunken)}
.wish-toggle-knob{position:absolute;left:2px;top:2px;width:32px;height:28px;border-radius:6px;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.06);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.wish-toggle.secret .wish-toggle-knob{transform:translateX(34px)}
.wish-toggle button{position:relative;display:flex;align-items:center;justify-content:center;width:32px;height:28px;padding:0;border:0;background:none;border-radius:6px;opacity:.45;transition:opacity .2s ease}
.wish-toggle button[aria-pressed="true"]{opacity:1}
.wish-toggle button:focus-visible{outline:2px solid var(--accent-text);outline-offset:1px}
.wish-toggle svg{display:block}

.wish-send{display:flex;align-items:center;justify-content:center;width:100%;height:48px;padding:0;border:0;background:#343434;color:#fff;font-family:var(--inter);font-weight:500;font-size:14px;letter-spacing:0;transition:opacity .2s ease,background .2s ease}
.wish-send:hover:not(:disabled){background:#1f1f1f}
.wish-send:disabled{opacity:.35}
.wish-send:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}

/* narrow screens: the panel opens over the field */
@media (max-width: 900px){
  .wish-panel,.wish.open .wish-panel{position:absolute;inset:0;z-index:5;width:auto;margin:0;transition:opacity .3s ease,visibility 0s .3s}
  .wish.open .wish-panel{transition:opacity .3s ease,visibility 0s}
  .wish-card{width:auto;max-width:420px;margin:0 auto}
}
@media (max-width: 640px){
  .main-col{flex:none;width:100%}
  .wish-card{max-width:none}
}

@media (prefers-reduced-motion: reduce){
  .wish-toast.on{animation:wish-fade .3s ease 3s forwards;clip-path:none}
  .wish-panel,.wish.open .wish-panel,.wish-brackets.slide,.wish-picker-brackets,.wish-toggle-knob{transition:none}
}