/* The camera move between the places of the CornerSeen world (fly.js): the sea (index.html), the
   island's lagoon (work/index.html), the jetty (contact.html). A place is a picture (.loc), or on
   the home page the live WebGL sea. There is no solid colour anywhere in a move: the next place
   grows in over the one you leave (.fly-poster) and the next page opens on that same frame. The
   logo stays put; the rest of the controls step aside and come back. Loaded in <head>, so a
   page arriving mid-move paints its hand-off frame first. */
.loc { position: fixed; inset: 0 auto 0 0; width: 100vw; z-index: -2; overflow: hidden; background: #d9dbe2; pointer-events: none; }
.loc picture { display: contents; }
.loc img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; transform-origin: 50% 55%; }
.fly-poster { position: fixed; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.fly-poster img { width: 100%; height: 100%; max-width: none; object-fit: cover; display: block; transform-origin: 50% 55%; }

/* arriving: the place opens at the hand-off frame (a touch close and soft); fly.js settles it */
html.fly-in .loc img, html.fly-in .fly-poster img { transform: scale(1.08); filter: blur(4px); }
html.fly-in .nav, html.fly-in main, html.fly-in .foot, html.fly-in .hud { opacity: 0; }
html.fly-go .nav, html.fly-go main, html.fly-go .foot, html.fly-go .hud { opacity: 1; transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1) 0.35s; }   /* an even fade: a front-loaded ease read as a pop */

/* leaving: the controls step aside first */
html.fly-out .nav, html.fly-out main, html.fly-out .foot, html.fly-out .hud { opacity: 0; transition: opacity 0.32s cubic-bezier(0.45, 0, 0.55, 1); pointer-events: none; }   /* even, and done before the page changes at 380ms: an ease-in left half of it to vanish in one frame */

/* a swoop (fly.js) ends on the place's own frame: it opens on it at rest, not close and soft */
html.fly-in.fly-still .loc img, html.fly-in.fly-still .fly-poster img { transform: none; filter: none; }

/* A place's page is its picture. The html element carries the picture's own average colour, and the
   body is transparent ALWAYS: once the html element has a background of its own, the body's
   background paints above negative z-index children, so a light body ground covered the picture
   1.7s after landing (caught on video, 2026-10-11) and the page turned white. */
html[data-place="work"] { background: #636847; scrollbar-width: none; }   /* the record corner must sit where the home's last frame put it */
html[data-place="work"]::-webkit-scrollbar { display: none; }
html[data-place="about"], html[data-place="seo"] { scrollbar-width: none; }   /* the other corners of the studio, the same way */
html[data-place="about"]::-webkit-scrollbar, html[data-place="seo"]::-webkit-scrollbar { display: none; }
html[data-place="contact"] { background: #c3b6bb; }
html[data-place="work"] body, html[data-place="contact"] body, html[data-place="about"] body, html[data-place="seo"] body { background: transparent !important; }

/* Work's place moves: the wind film sits over its first frame (the still) and fades in once it plays */
.loc .loc-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.4s ease; }
.loc .loc-film.is-on { opacity: 1; }

/* CS3, the illustration style (owner, 2026-10-21; launched as CornerSeen 2026-10-29): the renders are flat colour,
   and the page lays ONE paper-grain layer over everything, so the room's layers, the close-ups and the films all
   share the same grain. Neutral grey noise in overlay: texture without darkening; it never takes a click. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 240px 240px; mix-blend-mode: overlay; opacity: 0.32;
}