/* Approved hero and six-project Playground presentation. */
.bubble-story-overlay{position:fixed;inset:0;z-index:12;pointer-events:none;overflow:hidden;contain:strict}
.story-bubble{position:absolute;left:0;top:0;width:200px;height:200px;border-radius:50%;opacity:0;transform-origin:50% 50%;background:radial-gradient(ellipse at 35% 27%,#ffffff0a 0%,#ffffff00 48%,#6e8bd31a 81%,#c6dcfc55 94%,#ffffff88 98%,#ffffff0a 100%);box-shadow:inset 1px 2px 3px #ffffff9c,inset -1px -2px 4px #587ac466,0 0 1px 1px #aec7f780;backdrop-filter:blur(.6px) saturate(1.12)}
.story-bubble:before,.story-bubble:after{content:'';position:absolute;pointer-events:none}
.story-bubble:before{inset:0;border-radius:inherit;padding:1.4px;background:conic-gradient(from 30deg,#b1e0ff99,#e5c0ff88,#ffe1a9b3,#b5ffed80,#e5baffb3,#b1e0ff99);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;-webkit-mask-composite:xor}
.story-bubble:after{left:22%;top:13%;width:11%;height:24%;border-radius:50%;background:#ffffffeb;transform:rotate(35deg);filter:blur(.7px)}
.story-bubble>span{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse at 73% 19%,#fff9 0%,#fff0 6%),radial-gradient(ellipse at 34% 111%,#dfb6ff66 0%,#ffffff00 52%);animation:story-bubble-breathe 7s var(--bubble-delay,0s) ease-in-out infinite alternate}
.home-bubble-experience .glass-selected-work{padding-bottom:0;margin-bottom:0}
.home-bubble-experience .glass-work-meta p{font-size:16px;line-height:1.6;max-width:300px}
.home-bubble-experience .glass-selected-work>h2{margin-bottom:clamp(60px,7vw,112px)}
.bubble-playground{position:relative;min-height:0;margin-top:40px;margin-bottom:-40px;isolation:isolate;background:#fff;color:#30333a}
.bubble-playground__sticky{position:relative;padding:0;text-align:center;height:max(590px,calc(100vh - 104px));container-type:inline-size}
.bubble-playground header{position:absolute;z-index:2;top:49%;left:50%;transform:translate(-50%,-50%);width:39%;pointer-events:none}
.bubble-playground header a{pointer-events:auto}
.bubble-playground header p{font-size:12px;color:#9298a8;margin:0 0 10px;letter-spacing:.05em}
.bubble-playground h2{font-family:'PS Times Regular',Georgia,serif;font-size:clamp(28px,3.2vw,52px);font-weight:400;line-height:1.05;letter-spacing:-.03em;margin:0}
.bubble-portals{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;margin:0;pointer-events:none}
.bubble-portal-card{position:absolute;left:var(--portal-x);top:var(--portal-y);width:clamp(100px,var(--portal-size),360px);aspect-ratio:1;min-width:0;opacity:var(--portal-opacity,0);transform:translate(-50%,-50%) translateY(var(--portal-rise,20px));transition:opacity .16s linear;pointer-events:none}
.bubble-playground[data-portals-open] .bubble-portal-card{pointer-events:auto}
.bubble-portal-link{display:flex;flex-direction:column;align-items:center;text-decoration:none;color:inherit;border-radius:30px;outline-offset:6px}
.bubble-portal-link:focus-visible{outline:2px solid #3265ed}
.bubble-portal-float{position:relative;width:100%;aspect-ratio:1;animation:none}
.bubble-portal-window{position:absolute;inset:0;border-radius:50%;overflow:hidden;isolation:isolate;background:#dbe5f5;box-shadow:inset 1px 2px 5px #fff,0 0 0 1.5px #ffffff,0 0 0 3px #cbd9f3a6,0 12px 24px #8095c212;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.bubble-portal-world{position:absolute;inset:3px;border-radius:50%;overflow:hidden;background:#fff;transform:scale(1.04);transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.bubble-portal-world img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 40%;transform:scale(1.10);transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.bubble-portal-gloss{position:absolute;inset:0;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse at 28% 16%,#fff8 0%,#fff0 25%),radial-gradient(ellipse at 55% 50%,#ffffff00 47%,#d1dcf633 76%,#d7b5fc4d 89%,#fff8 96%,#fff0 99%);box-shadow:inset 2px 3px 5px #ffffffe6,inset -2px -4px 7px #a6b8e099}
.bubble-portal-gloss:before{content:'';position:absolute;left:19%;top:10%;width:11%;height:22%;border-radius:50%;background:#ffffffd1;transform:rotate(34deg);filter:blur(.8px)}
.bubble-portal-link:hover .bubble-portal-window,.bubble-portal-link:focus-visible .bubble-portal-window{transform:scale(1.065)}
.bubble-portal-link:hover img{transform:scale(1.02)}
.bubble-portal-link h3{margin:10px 0 5px;font:400 13px/1.3 Arial,Helvetica,sans-serif;letter-spacing:-.02em}
.bubble-portal-cta{font-size:11px;color:#788197;border:1px solid #b6c5e455;border-radius:999px;padding:5px 12px;background:#ffffff99;display:inline-flex;gap:12px;align-items:center}
.bubble-playground__all{gap:16px;min-width:220px;min-height:54px;margin-top:28px;padding:16px 24px;font:400 16px/20px -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
/* The discovery and menu CTAs share one raised graphite surface. */
body.home-bubble-experience .bubble-playground__all{position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;white-space:nowrap;border:1px solid #ffffff2e;border-radius:999px;background:linear-gradient(180deg,#505050,#292929);box-shadow:0 7px 14px #2626261a,0 2px 3px #0000000f,inset 0 1px 1px #ffffff42,inset 0 -2px 2px #00000033;text-shadow:0 1px 1px #0000001f;backdrop-filter:none;-webkit-backdrop-filter:none;filter:brightness(1);transition:transform 180ms cubic-bezier(.23,1,.32,1),filter 180ms ease;-webkit-tap-highlight-color:transparent}
@media(hover:hover) and (pointer:fine){body.home-bubble-experience .bubble-playground__all:hover{transform:translateY(-2px);filter:brightness(1.14)}}
body.home-bubble-experience .bubble-playground__all:active{transform:translateY(1px) scale(.99)}
body.home-bubble-experience .bubble-playground__all:focus-visible{outline:2px solid #3265ed;outline-offset:5px;transform:none;filter:brightness(1.14)}
@media(prefers-reduced-motion:reduce){body.home-bubble-experience .bubble-playground__all{transition:none}body.home-bubble-experience .bubble-playground__all:is(:hover,:active){transform:none}}
.story-lab-tools{position:fixed;z-index:100;bottom:16px;left:16px;max-width:300px;padding:12px 15px;border:1px solid #dce1edb3;border-radius:14px;background:#fffffff2;box-shadow:0 6px 22px #2835550a;font:12px/1.45 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:#464e5f}
.story-lab-tools summary{cursor:pointer;list-style:none;font-weight:600}.story-lab-tools summary span{margin-left:16px;color:#959dad;font-size:10px;font-weight:400;text-transform:uppercase;letter-spacing:.06em}.story-lab-tools p{max-width:260px;color:#8991a1;margin:10px 0}.story-lab-tools button{font:inherit;color:#506078;border:0;background:#f0f3fa;border-radius:7px;padding:7px 9px;cursor:pointer}.story-lab-tools details>div{display:flex;gap:5px}.story-lab-tools :is(button,summary):focus-visible{outline:2px solid #3265ed;outline-offset:3px}
@keyframes story-bubble-breathe{to{transform:scale(1.015,.99) rotate(3deg)}}
@media(max-width:809px){.bubble-story-overlay{display:none}.bubble-playground{min-height:auto}.bubble-playground__sticky{position:static;padding:70px 20px;height:auto}.bubble-playground header{position:relative;inset:auto;transform:none;width:100%;margin-bottom:48px}.bubble-portals{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:36px 12px}.bubble-portal-card{position:relative;inset:auto;width:auto;aspect-ratio:auto;opacity:1;transform:none;pointer-events:auto}.bubble-portal-float{width:min(34vw,190px)}.bubble-portal-link h3{font-size:14px}.home-bubble-experience .glass-work-meta p{font-size:16px}}
@media(prefers-reduced-motion:reduce){.bubble-story-overlay{display:none}.bubble-playground{min-height:100vh}.bubble-playground__sticky{position:relative}.bubble-portal-card{opacity:1;pointer-events:auto}.bubble-portal-float,.story-bubble>span{animation:none}.bubble-portal-window,.bubble-portal-world,.bubble-portal-world img{transition:none}}
/* Reuse the original thin-film texture at every later stage too. */
.story-bubble,.bubble-portal-gloss{background-color:transparent;background-size:100% 100%;background-repeat:no-repeat;box-shadow:none}
.story-bubble:before,.story-bubble:after,.bubble-portal-gloss:before{display:none}
.story-bubble>span{background:none}
.story-lab-tools details>div{flex-wrap:wrap}
body.home-bubble-experience .glass-selected-work .glass-work-rule{display:none!important}
.bubble-portal-window{background:transparent;border:0;outline:0;box-shadow:none}
.bubble-portal-world{inset:0;border-radius:inherit;transform:none;background:transparent}
.bubble-portal-world :is(img,video){position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 50%;transform:none}
.bubble-portal-link:hover .bubble-portal-window,.bubble-portal-link:focus-visible .bubble-portal-window,.bubble-portal-link:hover img{transform:none}
.bubble-portal-gloss{inset:0;background:radial-gradient(ellipse at 25% 17%,#ffffff9c 0%,#ffffff00 17%),radial-gradient(ellipse at 75% 22%,#ffffff52 0%,#ffffff00 8%);box-shadow:none;opacity:.7}
.bubble-portal-name{position:absolute;left:50%;top:calc(100% + 12px);white-space:nowrap;font:400 13px/1.3 Arial,Helvetica,sans-serif;color:#525967;opacity:0;transform:translate(-50%,4px);transition:opacity .2s,transform .2s;pointer-events:none}
.bubble-portal-link:hover .bubble-portal-name,.bubble-portal-link:focus-visible .bubble-portal-name{opacity:1;transform:translate(-50%,0)}
.bubble-portals{z-index:2}
.portal-world-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
[data-gpu-ready] .bubble-portal-world,[data-gpu-ready] .bubble-portal-gloss{opacity:0}
.bubble-portal-card{opacity:var(--portal-card-opacity,0);transform:translate(-50%,-50%) translate3d(var(--portal-enter-x,0px),var(--portal-enter-y,0px),0) scale(var(--portal-enter-scale,1));transition:none}
.story-lab-index{display:block;font-size:11px;color:#687b9b;margin-top:10px;text-decoration:underline;text-underline-offset:3px}
@media(max-width:809px),(prefers-reduced-motion:reduce){.bubble-portal-name{opacity:1;position:relative;inset:auto;margin-top:10px;transform:none}.bubble-portal-link:hover .bubble-portal-name{transform:none}.bubble-portal-card{opacity:1;transform:translate(-50%,-50%)}.bubble-playground header{opacity:1!important}}
@media(max-width:809px){.bubble-portal-card{transform:none}}

/* Rounded landscape portals keep the media readable beneath the soap-film sheen. */
.bubble-portal-card,.bubble-portal-float{aspect-ratio:3 / 2}
.bubble-portal-window{border-radius:6% / 9%}
.bubble-portal-link{border-radius:16px}
.bubble-portal-gloss{border-radius:inherit;opacity:1;background:linear-gradient(155deg,#ffffff26 0%,#ffffff00 32%,#ffffff00 75%,#d6bfff12 100%);box-shadow:inset 0 1px 2px #ffffff4d}
@media(max-width:809px){.bubble-portal-card{aspect-ratio:auto}}

/* Pillowlike glass shares the media surface; only its perimeter is frosted. */
body.home-bubble-experience .bubble-portal-window{left:var(--portal-window-left,0%);right:auto;width:var(--portal-window-width,100%);border-radius:var(--portal-radius-x,11.333%) / var(--portal-radius-y,17%);border:0;box-shadow:none}
body.home-bubble-experience .bubble-portal-gloss{background:linear-gradient(160deg,#ffffff42 0%,#ffffff00 24%,#ffffff00 70%,#dfd5ff26 100%);box-shadow:inset 0 3px 8px #ffffff80,inset 0 -3px 9px #e4d8ff40;opacity:1}
body.home-bubble-experience [data-gpu-ready] .bubble-portal-gloss{opacity:0}

/* Optional blue/pink frost is confined to the same soft perimeter. */
body.home-bubble-experience .bubble-playground[data-portal-tint="blue-pink"] .bubble-portal-gloss{background:linear-gradient(145deg,#57cfff33 0%,#ffffff00 30%,#ffffff00 68%,#ff8fda2e 100%);box-shadow:inset 3px 4px 11px #57cfff65,inset -3px -4px 11px #ff8fda65}

/* Static/mobile presentations retain the final, readable landscape cards. */
@media(max-width:809px),(prefers-reduced-motion:reduce){body.home-bubble-experience .bubble-portal-window{left:0;width:100%;border-radius:11.333% / 17%}}

/* Without WebGL, the same hover/focus interaction clears the film overlay. */
body.home-bubble-experience .bubble-portal-window:not([data-gpu-ready]) .bubble-portal-gloss{transition:opacity .2s ease}
body.home-bubble-experience .bubble-portal-card[data-portal-clear] .bubble-portal-window:not([data-gpu-ready]) .bubble-portal-gloss{opacity:0}
@media(prefers-reduced-motion:reduce){body.home-bubble-experience .bubble-portal-window:not([data-gpu-ready]) .bubble-portal-gloss{transition:none}}

/* On a small screen, the work becomes a clear, simple vertical media stack. */
@media(max-width:809px){
 body.home-bubble-experience .bubble-playground{min-height:0}
 body.home-bubble-experience .bubble-playground__sticky{position:relative;top:auto;height:auto;padding:64px 16px}
 body.home-bubble-experience .bubble-playground header{margin-bottom:36px}
 body.home-bubble-experience .bubble-playground__all{font-size:15px;line-height:1.3;padding:14px 22px;margin-top:24px}
 body.home-bubble-experience .bubble-portals{display:flex;flex-direction:column;gap:28px}
 body.home-bubble-experience .bubble-portal-card{position:relative;inset:auto;width:100%;aspect-ratio:auto;opacity:1;transform:none;pointer-events:auto}
 body.home-bubble-experience .bubble-portal-link{display:block;border-radius:16px}
 body.home-bubble-experience .bubble-portal-float{width:100%;aspect-ratio:3 / 2;animation:none}
 body.home-bubble-experience .bubble-portal-window{inset:0;width:100%;border-radius:16px}
 body.home-bubble-experience .bubble-portal-world{opacity:1;border-radius:inherit}
 body.home-bubble-experience .bubble-portal-gloss,body.home-bubble-experience .portal-world-canvas{display:none}
 body.home-bubble-experience .bubble-portal-name{display:block;position:static;white-space:normal;margin:14px 0 0;font:500 20px/1.3 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:-.015em;text-align:left;opacity:1;transform:none}
}
/* Mobile-only scale adjustment for the experiment's decorative name loop. */
@media(max-width:809px){
 body.home-bubble-experience .lily-hero .hero-name-loop{top:auto;bottom:0}
 body.home-bubble-experience .hero-name-loop__track span{font-size:19.2vw;transform:none}
}
@media(max-width:700px){
 body.home-bubble-experience .hero-name-loop__track span{font-size:34.8vw}
}


/* Videos use native compositing; the on-demand canvas only draws their film. */
body.home-bubble-experience .portal-world-canvas{z-index:3}
body.home-bubble-experience [data-gpu-ready] .bubble-portal-world{opacity:1}