/* Hero previews for the secondary project list. */
.earlier-grid article { position:relative;isolation:isolate;overflow:hidden;min-height:9rem; }
.earlier-grid h3 { position:relative;z-index:2; }
.earlier-grid h3 a { text-decoration:none; }
.earlier-grid h3 a::after { content:'';position:absolute;inset:-1.5rem -1rem; }
.earlier-grid article > :is(span,p) { position:relative;z-index:1;transition:opacity .2s; }
.beyond-preview { position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;overflow:hidden;transition:opacity .3s; background:var(--paper); }
.earlier-grid article:has(h3 a:hover) > .beyond-preview,.earlier-grid article:focus-within > .beyond-preview { opacity:1; }
.earlier-grid article:has(h3 a:hover) > :is(span,p),.earlier-grid article:focus-within > :is(span,p) { opacity:0; }
.beyond-preview::after { content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--paper) 0%,var(--paper) 44%,transparent 70%);z-index:1; }
.beyond-preview-luca { background:radial-gradient(ellipse at 85% 70%,#ef91e580,transparent 60%),var(--paper); }
.beyond-phone { position:absolute;width:7rem;right:13%;top:-1rem;transform:rotate(10deg);border:2px solid #282828;border-radius:1rem; }
.beyond-logo { position:absolute;width:16rem;right:3%;top:50%;transform:translateY(-50%) rotate(-6deg); }
.beyond-plugin-text { position:absolute;right:4%;top:50%;transform:translateY(-50%) rotate(-4deg);border:1px solid #9664df;padding:.7rem 1rem;font-size:2rem;font-weight:750;line-height:1.1;letter-spacing:-.04em; }
.beyond-plugin-text > span { background:linear-gradient(110deg,#4f86ff,#ef91e5,#f7358b,#ff665d,#f4c84b);background-clip:text;-webkit-background-clip:text;color:transparent; }
.beyond-preview-yubl .yubl-hero-art { position:absolute; right:6%; top:50%; width:39%; max-width:36rem; transform:translateY(-43%) rotate(-7deg); }
.beyond-preview-yubl .yubl-canvas { position:relative; aspect-ratio:1; border:1px solid #ad99c7; border-radius:.3rem; background:linear-gradient(140deg,#e7e6fb77,#f3def155); }
.beyond-preview-yubl .yubl-canvas-type { position:absolute; left:8%; top:4%; font-size:clamp(6rem,16vw,16rem); font-weight:750; letter-spacing:-.09em; line-height:1.2; background:linear-gradient(110deg,#4f86ff,#ef91e5,#f7358b,#ff665d,#ff8a21,#f4c84b,#4f86ff); background-size:250% 100%; background-clip:text;-webkit-background-clip:text;color:transparent;animation:yubl-colour 6s ease-in-out infinite alternate; }
.beyond-preview-yubl .yubl-play-button { position:absolute; display:grid; place-items:center; width:43%; aspect-ratio:1; border:5px solid var(--paper); border-radius:50%; box-shadow:0 8px 0 #11111111; transition:transform .25s,box-shadow .25s; }
.beyond-preview-yubl .yubl-play-button svg { width:60%;fill:none;stroke:white;stroke-width:6;stroke-linejoin:round; }
.beyond-preview-yubl .yubl-heart { left:2%;bottom:5%;background:linear-gradient(135deg,#ef91e5,#f7358b);transform:rotate(-8deg);animation:yubl-press 4s ease-in-out infinite; }
.beyond-preview-yubl .yubl-heart svg { fill:white;stroke:none; }
.beyond-preview-yubl .yubl-pin { right:-5%;top:35%;background:linear-gradient(135deg,#4f86ff,#7540b0);transform:rotate(12deg);animation:yubl-press 4s ease-in-out 2s infinite; }
.beyond-preview-yubl .yubl-canvas-dot { position:absolute;right:14%;bottom:8%;width:11%;aspect-ratio:1;border-radius:50%;background:#f4c84b;border:4px solid var(--paper); }
.beyond-preview-yubl .yubl-selection-corner { position:absolute;inset:-4px;pointer-events:none;background:linear-gradient(#9664df,#9664df) left top/7px 7px no-repeat,linear-gradient(#9664df,#9664df) right top/7px 7px no-repeat,linear-gradient(#9664df,#9664df) left bottom/7px 7px no-repeat,linear-gradient(#9664df,#9664df) right bottom/7px 7px no-repeat; }
@keyframes yubl-colour { to { background-position:100% 50%; } }
@keyframes yubl-press { 0%,35%,65%,100% { translate:0 0;scale:1; } 45%,55% { translate:0 5px;scale:.94;box-shadow:0 2px 0 #11111111; } }
.beyond-preview-yubl .yubl-canvas:hover .yubl-play-button { animation-play-state:paused; }
.beyond-preview-yubl .yubl-play-button:hover { transform:translateY(-6px) rotate(0deg);box-shadow:0 12px 0 #11111111; }

/* A warm, bright canvas with a quick stream of reactions. */
.beyond-preview-yubl .yubl-canvas { background:#f5e6ab; }
.beyond-preview-yubl .yubl-heart-stream { position:absolute; left:23.5%; bottom:26.5%; width:0; height:0; z-index:3; pointer-events:none; }
.beyond-preview-yubl .yubl-heart-stream > span { position:absolute; left:0; bottom:0; color:#f7358b; font-family:Arial,sans-serif; font-size:var(--size); line-height:1; opacity:0; will-change:transform,opacity; animation:yubl-heart-rise var(--flight) linear var(--delay) infinite; }
.beyond-preview-yubl .yubl-heart-stream > span:nth-child(3n) { color:#b43e94; }
.beyond-preview-yubl .yubl-heart-stream > span:nth-child(4n) { color:#ff665d; }
@keyframes yubl-heart-rise {
 0% { transform:translate(-50%,0) scale(.3) rotate(0deg);opacity:0; }
 10% { opacity:.95; }
 75% { opacity:.85; }
 100% { transform:translate(calc(-50% + var(--drift)),calc(clamp(28rem,50vw,44rem) * -1)) scale(1.1) rotate(var(--sway));opacity:0; }
}
@media(prefers-reduced-motion:reduce) { .beyond-preview-yubl .yubl-heart-stream { display:none; } }

/* Let reactions clear the canvas; keep the source button pressed. */
.beyond-preview-yubl .yubl-canvas,.yubl-hero-art { overflow:visible; }
.beyond-preview-yubl .yubl-canvas-type { background:none; color:#ff665d; animation:none; }
.beyond-preview-yubl .yubl-heart,.yubl-heart:hover { animation:none; translate:0 5px; scale:.94; transform:rotate(-8deg); box-shadow:0 2px 0 #11111111; }

.beyond-preview-yubl .yubl-hero-art { width:16rem;right:2%;top:50%;transform:translateY(-50%) rotate(-7deg); }
.beyond-preview-yubl .yubl-canvas-type { font-size:7.5rem; }
.beyond-preview-yubl .yubl-heart-stream { display:none; }
@media(max-width:760px) { .earlier-grid article { min-height:10rem; }.beyond-preview::after { background:linear-gradient(90deg,var(--paper) 0%,var(--paper) 25%,transparent 80%); }.earlier-grid h3 { width:max-content;max-width:100%; }.beyond-plugin-text { font-size:1.7rem;right:1%; }.beyond-preview-yubl .yubl-hero-art { right:-3rem; }.beyond-logo { right:-3rem; }.beyond-phone { right:5%; } }
@media(prefers-reduced-motion:reduce) { .beyond-preview,.earlier-grid article > :is(span,p) { transition:none; }.beyond-preview * { animation:none !important; } }

.beyond-preview span { text-transform:none; }
.beyond-plugin-text > span { font:inherit;letter-spacing:inherit; }

.beyond-preview-arthouse .beyond-logo { aspect-ratio:16/10;object-fit:cover;border:6px solid #242027;border-radius:.3rem;box-shadow:0 8px 0 #1111110d; }

.ll-pendant { display:block;width:100%;height:100%;overflow:visible; }
.ll-pendant-sway { transform-origin:200px 0;animation:ll-pendant-sway 4s ease-in-out infinite alternate; }
.ll-bulb-colour { color:#ffbd38;animation:ll-bulb-colour 7.5s steps(1,end) infinite; }
.ll-bulb-aura { opacity:.18;filter:blur(28px); }
.ll-bulb-halo { opacity:.25;filter:blur(14px); }
@keyframes ll-pendant-sway { from { transform:rotate(-4deg); } to { transform:rotate(4deg); } }
@keyframes ll-bulb-colour { 0%,100% { color:#ffbd38; } 20% { color:#ff527b; } 40% { color:#bd65ea; } 60% { color:#4f86ff; } 80% { color:#64d4aa; } }
@media(prefers-reduced-motion:reduce) { .ll-pendant-sway,.ll-bulb-colour { animation:none; } }

.beyond-preview-luca { background:var(--paper); }
.beyond-preview-luca .ll-pendant { position:absolute;right:4%;top:-5rem;width:15rem;height:25rem; }

/* Give the secondary work previews a clearer presence on hover. */
.earlier-work .earlier-grid article { --preview-bg:#e8def4;min-height:13rem;transition:background-color .3s ease; }
.earlier-grid article:has(.beyond-preview-luca) { --preview-bg:#f3e4ac; }
.earlier-grid article:has(.beyond-preview-yubl) { --preview-bg:#f6d8c8; }
.earlier-grid article:has(.beyond-preview-arthouse) { --preview-bg:#efd5db; }
.earlier-grid article:hover,.earlier-grid article:focus-within { background-color:var(--preview-bg); }
.earlier-grid .beyond-preview { background:var(--preview-bg); }
.earlier-grid article:hover > .beyond-preview,.earlier-grid article:focus-within > .beyond-preview { opacity:1; }
.earlier-grid article:hover > :is(span,p),.earlier-grid article:focus-within > :is(span,p) { opacity:0; }
.earlier-grid .beyond-preview::after { background:linear-gradient(90deg,var(--preview-bg) 0%,var(--preview-bg) 38%,transparent 62%); }
.earlier-grid .beyond-preview-yubl .yubl-hero-art { width:min(43%,25rem);right:3%; }
.earlier-grid .beyond-preview-yubl .yubl-canvas-type { font-size:11rem; }
.earlier-grid .beyond-preview-arthouse .beyond-logo { width:min(45%,28rem);right:2%; }
.earlier-grid .beyond-plugin-text { font-size:clamp(2rem,3.3vw,3rem);right:3%;padding:1rem 1.4rem; }
.earlier-grid .beyond-preview-luca .ll-pendant { width:21rem;height:34rem;top:-10rem;right:4%; }
@media(max-width:760px) {
 .earlier-work .earlier-grid article { min-height:14rem; }
 .earlier-grid .beyond-preview::after { background:linear-gradient(90deg,var(--preview-bg) 0%,var(--preview-bg) 15%,transparent 75%); }
 .earlier-grid .beyond-preview-yubl .yubl-hero-art { width:19rem;right:-5rem; }
 .earlier-grid .beyond-preview-arthouse .beyond-logo { width:22rem;right:-7rem; }
 .earlier-grid .beyond-plugin-text { right:-3rem;font-size:2.1rem; }
 .earlier-grid .beyond-preview-luca .ll-pendant { right:-3rem; }
}
@media(prefers-reduced-motion:reduce) { .earlier-grid article { transition:none; } }