/* The cloud trial lives at /home-cloud. /home keeps the original composition. */
@view-transition { navigation: auto; }
.rawx-landing { background:#ccc!important; height:100dvh!important; }
.rawx-logo-img, .cloud-logo img { view-transition-name:rawx-brand; }
html[data-rawx-entry] .rawx-projects-page .logo-img,
html[data-rawx-entry] .mobile-projects-topbar .mobile-logo-img { view-transition-name:rawx-brand; }
::view-transition-group(rawx-brand) { animation-duration:850ms; animation-timing-function:cubic-bezier(.22,1,.36,1); }
::view-transition-old(rawx-brand),::view-transition-new(rawx-brand) { height:100%; mix-blend-mode:normal; }
::view-transition-old(root) { animation:rawx-out 180ms ease both; }
::view-transition-new(root) { animation:rawx-in 700ms 120ms cubic-bezier(.22,1,.36,1) both; }
@keyframes rawx-out { to { opacity:0; } }
@keyframes rawx-in { from { opacity:0; } to { opacity:1; } }
@keyframes rawx-project-arrive { from { opacity:0; translate:0 14px; } to { opacity:1; translate:0 0; } }
/* A soft arrival also works when cross-document view transitions are unavailable. */
html[data-rawx-entry]:not([data-rawx-native]):not([data-rawx-grid-entry]) .rawx-projects-shell,
html[data-rawx-entry]:not([data-rawx-native]) #mobileProjectsList { animation:rawx-project-arrive 850ms cubic-bezier(.22,1,.36,1) both; }
html[data-rawx-entry]:not([data-rawx-native]) .topbar__center,
html[data-rawx-entry]:not([data-rawx-native]) .topbar__right,
html[data-rawx-entry]:not([data-rawx-native]) .mobile-top-link,
html[data-rawx-entry]:not([data-rawx-native]) .mobile-project-cats { animation:rawx-in 550ms ease both; }

.rawx-cloud { position:fixed; z-index:100; inset:0; height:100dvh; min-height:280px; overflow:hidden; isolation:isolate; background:#ccc; }
.rawx-cloud[hidden] { display:none; }
.cloud-destination { position:fixed; inset:0; visibility:hidden; pointer-events:none; background:#ccc; }
.cloud-destination > .rawx-mobile-projects-page { display:none; }
.cloud-destination.is-entering,.cloud-destination.is-active { visibility:visible; }
.cloud-destination.is-active { position:relative; pointer-events:auto; }
.cloud-destination[data-cloud-await-pointer] #rawxProjectsPage .rawx-projects-card { transform:translateX(0)!important; }
.cloud-destination[data-cloud-await-pointer] #rawxProjectsPage .rawx-projects-card .rawx-projects-link { width:var(--rawx-square)!important; height:var(--rawx-square)!important; }
.cloud-destination[data-cloud-await-pointer] #rawxProjectsPage .rawx-projects-card .rawx-projects-media { filter:none; }
.cloud-destination[data-cloud-await-pointer] .rawx-projects-cursor { visibility:hidden; }
.cloud-destination.is-entering .rawx-projects-media,
.cloud-destination.is-entering .logo-img,
.cloud-destination.is-entering .mobile-logo-img { visibility:hidden; }
.cloud-destination.is-entering .topbar__center,
.cloud-destination.is-entering .topbar__right,
.cloud-destination.is-entering .project-view-switch,
.cloud-destination.is-entering .rawx-instagram,
.cloud-destination.is-entering .mobile-top-link,
.cloud-destination.is-entering .mobile-project-cats,
.cloud-destination.is-entering #mobileProjectsList { animation:rawx-in 600ms 350ms ease both; }
.rawx-cloud.is-leaving { background:transparent; }
.rawx-cloud.is-leaving .cloud-card img { border-radius:0; box-shadow:none; filter:none; transition:filter 300ms ease,box-shadow 600ms ease,border-radius 600ms ease; }
.cloud-field { position:absolute; inset:0; z-index:3; pointer-events:none; }
/* Keep overlap order stable; opacity changes smoothly as each image revolves. */
.cloud-card { position:absolute; z-index:1; left:50%; top:50%; width:clamp(58px,7vw,118px); aspect-ratio:var(--ratio,1.6); opacity:0; pointer-events:auto; cursor:pointer; will-change:transform,opacity; transform:translate(-50%,-50%); }
.cloud-card img { display:block; width:100%; height:100%; object-fit:cover; border-radius:2px; box-shadow:0 5px 16px #00000010; user-select:none; transition:filter 220ms ease,box-shadow 220ms ease; }
.cloud-card.is-hovered img { filter:saturate(1.15) contrast(1.06); box-shadow:0 10px 28px #00000030; }
.rawx-cloud.has-project-cursor,.rawx-cloud.has-project-cursor * { cursor:none; }
.cloud-enter { position:absolute; inset:0; z-index:2; display:block; color:#080808; -webkit-tap-highlight-color:transparent; touch-action:none; }
.cloud-logo { position:absolute; left:50%; top:50%; width:clamp(210px,min(29vw,44vh),450px); transform:translate(-50%,-50%); display:block; will-change:transform,opacity; }
.cloud-logo img { width:100%; height:auto; display:block; user-select:none; }
.cloud-invitation { position:absolute; bottom:max(38px,env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); font-size:12px; font-weight:800; letter-spacing:.075em; text-transform:uppercase; white-space:nowrap; }
.cloud-invitation > span { display:inline-block; padding-left:5px; transition:transform .35s cubic-bezier(.22,1,.36,1); }
.cloud-enter:hover .cloud-invitation > span { transform:translate(3px,-3px); }
.cloud-enter:focus-visible { outline:2px solid #f00; outline-offset:-12px; }
.cloud-pause { position:absolute; z-index:60; right:24px; bottom:max(22px,env(safe-area-inset-bottom)); padding:12px 0 12px 16px; min-height:44px; border:0; background:none; color:#333; font-size:12px; text-decoration:underline; text-underline-offset:3px; }
.rawx-cloud.is-leaving .cloud-enter { cursor:progress; }
.rawx-cloud.is-leaving .cloud-card { pointer-events:none!important; }
.rawx-cloud.is-leaving .cloud-pause { pointer-events:none; }
@media(max-width:900px) {
  .cloud-destination > .rawx-projects-page { display:none!important; }
  .cloud-destination > .rawx-mobile-projects-page { display:block; }
  .cloud-destination.is-entering .mobile-top-link,
  .cloud-destination.is-entering .mobile-project-cats,
  .cloud-destination.is-entering #mobileProjectsList { animation-duration:500ms; animation-delay:200ms; }
  .cloud-card { width:clamp(38px,11vw,68px); }
  .cloud-logo { width:clamp(166px,48vw,300px); }
  .cloud-invitation { bottom:max(68px,env(safe-area-inset-bottom)); }
  .cloud-pause { right:18px; bottom:max(12px,env(safe-area-inset-bottom)); }
}
@media(max-height:500px) {
  .cloud-logo { width:min(30vw,48vh); }
  .cloud-card { width:clamp(40px,5.8vw,80px); }
  .cloud-invitation { bottom:22px; }
}
@media(prefers-reduced-motion:reduce) {
  @view-transition { navigation:none; }
  .cloud-card { will-change:auto; }
  .cloud-invitation > span { transition:none; }
  .cloud-pause { display:none; }
  ::view-transition-group(*) { animation:none!important; }
}