/* ============================================================================
   home.css: the homepage, and nothing else.

   Two layers, in this order:

     1. this file's own layer: the three blocks, the seams, the flight canvas,
        the white veil, the corner frame and the control room
     2. the ORIGINAL rules, lifted from
        baseline/css/toaihome.webflow.shared.403d32296.css with the Webflow
        design variables resolved to literals, for every class the page uses.
        Generated by .build/original-rules.css so nothing was retyped and
        nothing drifted. Do not reorder: the original layer is last on purpose,
        so the room looks exactly like the room.

   The corner frame is reproduced here rather than linked from pages.css: it is
   site-wide chrome that today lives in a page-scoped stylesheet, and the
   homepage should not pull in 46 KB of the room pages' layout to draw four
   bars. The class names are identical, so site.js's homeText() finds the top
   plate exactly as it does everywhere else. Promoting .frame into site.css
   would let both drop this copy; that is a site.css change and site.css is not
   this task's to edit.
   ========================================================================== */

/* ===========================================================================
   0. The page ground
   ========================================================================= */

body.home-page {
  background-color: #070707;
  font-family: 'Azeret Mono', monospace;
  color: #333;
  font-size: 14px;
  line-height: 20px;
  overscroll-behavior-y: none;
}

body.home-page a { text-decoration: none; }

/* ===========================================================================
   8. The section padding, as a variable again
   Webflow declares --_sizes---section--padding-section on body and redefines
   it at each breakpoint: 60px, 60px at 991, 50px at 767, 40px at 479. The
   extractor that lifted the original rules resolved every variable against the
   base :root block, so the room shipped 60px everywhere and the room container
   measured 40px narrower than the live one on a 390 wide phone. Same variable,
   same four values, same breakpoints.
   ========================================================================= */

body.home-page { --toai-section-pad: 60px; }
@media screen and (max-width: 991px) { body.home-page { --toai-section-pad: 60px; } }
@media screen and (max-width: 767px) { body.home-page { --toai-section-pad: 50px; } }
@media screen and (max-width: 479px) { body.home-page { --toai-section-pad: 40px; } }

/* ===========================================================================
   1a. THE OLD FRAME, PARKED FOR ONE ROUND
   The black bars, the 200x50 plates and their rotated cheeks, exactly as
   they shipped. Amir has not seen the slim frame yet; if he prefers this,
   delete section 1 and uncomment this. Otherwise this block goes next round.
   ========================================================================= */
/*
(* ===========================================================================
   1. The letterboxing frame
   Same markup and the same class names the room pages use.
   ========================================================================= *)

.frame {
  position: fixed;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  overflow: hidden;
  transition: opacity .45s ease;
}

.frame::before,
.frame::after {
  content: '';
  position: absolute;
  top: 0;
  width: 30px;
  height: 100%;
  background: #070707;
}
.frame::before { left: 0; }
.frame::after { right: 0; }

.frame-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 30px;
  background: #070707;
  display: flex;
  justify-content: center;
}
.frame-bar--top { top: 0; }
.frame-bar--bottom { bottom: 0; }

.frame-tab {
  position: absolute;
  width: 200px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #070707;
  color: #fff;
  font-family: 'Azeret Mono', monospace;
  font-size: 20px;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  pointer-events: auto;
}
.frame-bar--top .frame-tab { top: 6px; }
.frame-bar--bottom .frame-tab { bottom: 6px; }

.frame-tab::before,
.frame-tab::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  background: #070707;
  z-index: -1;
}
.frame-bar--top .frame-tab::before { left: -27px; top: 10px; transform: rotate(-40deg); }
.frame-bar--top .frame-tab::after { right: -27px; top: 10px; transform: rotate(40deg); }
.frame-bar--bottom .frame-tab::before { left: -27px; bottom: 10px; transform: rotate(40deg); }
.frame-bar--bottom .frame-tab::after { right: -27px; bottom: 10px; transform: rotate(-40deg); }

.frame-tab--quiet {
  font-family: 'DM Mono', monospace;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
}
.frame-tab[role='link']:hover { color: #23bae7; }

.frame-tick { position: absolute; width: 28px; height: 28px; }
.frame-tick::before,
.frame-tick::after { content: ''; position: absolute; background: rgba(255, 255, 255, .5); }
.frame-tick::before { width: 28px; height: 1px; }
.frame-tick::after { width: 1px; height: 28px; }
.frame-tick--tl { top: 15px; left: 15px; }
.frame-tick--tr { top: 15px; right: 15px; }
.frame-tick--bl { bottom: 15px; left: 15px; }
.frame-tick--br { bottom: 15px; right: 15px; }
.frame-tick--tl::before, .frame-tick--tr::before { top: 0; }
.frame-tick--bl::before, .frame-tick--br::before { bottom: 0; }
.frame-tick--tl::before, .frame-tick--bl::before { left: 0; }
.frame-tick--tr::before, .frame-tick--br::before { right: 0; }
.frame-tick--tl::after, .frame-tick--tr::after { top: 0; }
.frame-tick--bl::after, .frame-tick--br::after { bottom: 0; }
.frame-tick--tl::after, .frame-tick--bl::after { left: 0; }
.frame-tick--tr::after, .frame-tick--br::after { right: 0; }

(* toaibordergate-1.0.0.js: on a landscape phone the frame is hidden until the
   visitor has scrolled past 0.8 of the viewport. Same media query, same
   threshold, same transition; home.js sets the class. *)
@media (orientation: landscape) and (max-height: 600px) and (max-width: 1024px) {
  .frame { opacity: 0; }
  .frame.frame-on { opacity: 1; }
}

(* toailandscapenav-1.0.0.js: and on a landscape phone it goes away entirely,
   replaced by the fixed HOME link the affordances partial already carries. *)
@media (orientation: landscape) and (max-height: 600px) {
  .frame { display: none; }
}

*/

/* ===========================================================================
   1. The frame
   The mark on the top line, and the sound, the proposal link and the menu at
   the top right. Until 2026-09-25 it also drew a cyan hairline inset from
   every edge, with corner brackets; Amir: "remove the thin blue line border
   from the site, don't think we need a border". The type keeps its place,
   measured from the same inset, so nothing on the top line moves.
   ========================================================================= */

.frame {
  position: fixed;
  inset: 0;
  z-index: 25;
  pointer-events: none;
  transition: opacity .45s ease;
  --frame-inset: 14px;
  font-family: var(--font-ui);
}

/* the two pieces of type: the brand and the contact link. The readout at the
   bottom of the frame is gone: Amir, 2026-09-21, "people get lost about what
   to do, I have seen it live", so the one word that named the scene is now
   the sitewide cue, which says what to DO rather than where you are. */
.frame-brand,
.frame-contact,
.frame-scene {
  position: absolute;
  font-family: var(--font-ui);
  color: rgba(255, 255, 255, .92);
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .8);
  white-space: nowrap;
}

.frame-brand {
  top: calc(var(--frame-inset) + 12px);
  left: calc(var(--frame-inset) + 16px);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: .18em;
  pointer-events: auto;
}
.frame-mark {
  width: 18px;
  height: 18px;
  display: block;
  filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .8));
}
.frame-brand:hover { color: #23bae7; }

/* the top right group: the contact link and the menu button site.js mounts
   into the slot, on one baseline with a real gap between the two targets */
.frame-tools {
  position: absolute;
  top: calc(var(--frame-inset) + 12px);
  right: calc(var(--frame-inset) + 16px);
  display: flex;
  align-items: center;
  gap: 18px;
  pointer-events: auto;
}
.frame-contact {
  position: static;
  font-size: 11px;
  letter-spacing: .18em;
  pointer-events: auto;
}
.frame-contact:hover { color: #23bae7; }

/* the slot is empty until site.js fills it, and holds no space until it does,
   so the corner does not reflow when the script lands */
.frame-menu-slot { display: inline-flex; align-items: center; }
.frame-menu-slot:empty { display: none; }
/* the frame's button borrows the frame's own hairline language rather than
   the top bar's pill: same face, same tracking, a 44px target */
.frame .toai-menu-btn {
  position: static;
  min-width: 44px;
  min-height: 44px;
  margin: -12px -6px;
  padding: 12px 6px;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, .92);
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .8);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.frame .toai-menu-btn:hover { color: #23bae7; }
/* held inert while the gate is up, like everything else on the page */
html.is-loading .frame .toai-menu-btn { pointer-events: none; opacity: .45; }

/* The sound switch (2026-09-25, CINEMATIC-PLAN item 2): the canonical
   toggle, which sound.js binds and styles everywhere else. In the frame it
   speaks the frame's language, as the menu button does: no plate, the frame's
   face at 11px and .18em, a 44px target, four hairline bars that stand up
   like a level meter when the sound is on. Before the rest of the tools, so
   the proposal and the menu stay the pair in the corner. */
.frame .frame-tools .sound-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  margin: -12px -6px;
  padding: 12px 6px;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: rgba(255, 255, 255, .92);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .8);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.frame .frame-tools .sound-toggle:hover,
.frame .frame-tools .sound-toggle[aria-pressed='true'] { color: #23bae7; }
.frame .frame-tools .sound-toggle:focus-visible { outline: 2px solid #23bae7; outline-offset: -6px; }
/* an equalizer, not an ellipsis: four bars of four heights, dimmer while the
   sound is off; sound.js moves them while it is on */
.frame .sound-bars {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
  opacity: .72;
  transition: opacity .3s ease;
}
.frame .sound-bars i {
  display: block;
  width: 2px;
  height: 40%;
  background: currentColor;
  box-shadow: 0 0 6px rgba(0, 0, 0, .7);
}
.frame .sound-bars i:nth-child(2) { height: 75%; }
.frame .sound-bars i:nth-child(3) { height: 100%; }
.frame .sound-bars i:nth-child(4) { height: 55%; }
.frame .sound-toggle:hover .sound-bars,
.frame .sound-toggle[aria-pressed='true'] .sound-bars { opacity: 1; }
html.is-loading .frame .sound-toggle { pointer-events: none; opacity: .45; }

.frame-scene {
  bottom: calc(var(--frame-inset) + 12px);
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  letter-spacing: .28em;
  color: rgba(255, 255, 255, .7);
  transition: opacity .3s ease;
}
.frame-scene.is-swapping { opacity: 0; }

@media (max-width: 479px) {
  .frame { --frame-inset: 10px; }
  .frame-brand { top: calc(var(--frame-inset) + 10px); font-size: 10px; letter-spacing: .14em; left: calc(var(--frame-inset) + 10px); gap: 6px; }
  .frame-tools { top: calc(var(--frame-inset) + 10px); right: calc(var(--frame-inset) + 10px); gap: 12px; }
  .frame-contact { font-size: 10px; letter-spacing: .14em; }
  .frame .toai-menu-btn { font-size: 10px; letter-spacing: .14em; }
  .frame-scene { bottom: calc(var(--frame-inset) + 10px); font-size: 9px; }
  /* On a phone the top line is full: at 360 wide there are 31px between
     TOAI MEDIA and REQUEST A PROPOSAL. So the switch is the bars alone, the
     word kept for assistive tech, standing under the menu button's icon as
     the second tool in the corner. */
  .frame .frame-tools .sound-toggle {
    position: absolute;
    top: 100%;
    right: -6px;
    margin: 4px 0 0;
    justify-content: center;
  }
  .frame .frame-tools .sound-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* ---- the picture breathes (2026-09-25, home.js section 8b) ---------------
   CINEMATIC-PLAN item 7: while the visitor scrolls the flight and the film
   the frame falls to a ghost in 240ms and comes back in 400ms when they stop
   (the scroll cue did too, until 2026-09-26: see below). Opacity only; while it is a ghost the frame's links
   do not take clicks, and focus inside it brings it straight back. */
#siteFrame { transition: opacity .4s ease; }
html.frame-quiet #siteFrame {
  opacity: .06;
  transition-duration: .24s;
}
/* the links set their own pointer-events: auto, so the ghost has to say it
   to them, not only to their boxes */
html.frame-quiet #siteFrame .frame-brand,
html.frame-quiet #siteFrame .frame-tools,
html.frame-quiet #siteFrame .frame-tools * { pointer-events: none; }
/* focus inside brings it back in home.js at once; this is the belt */
html.frame-quiet #siteFrame:focus-within { opacity: 1; }
/* The scroll cue used to ghost with the frame. It never goes out now (Amir,
   2026-09-26, after a tester lost the thread where it vanished): site.js dims
   it while the visitor scrolls and brings it back a quarter second after. */

/* toaibordergate-1.0.0.js: on a landscape phone the frame is hidden until the
   visitor has scrolled past 0.8 of the viewport. */
@media (orientation: landscape) and (max-height: 600px) and (max-width: 1024px) {
  .frame { opacity: 0; }
  .frame.frame-on { opacity: 1; }
}

/* toailandscapenav-1.0.0.js: and on a short landscape phone it goes entirely,
   replaced by the fixed HOME link the affordances partial carries. */
@media (orientation: landscape) and (max-height: 600px) {
  .frame { display: none; }
}

/* ===========================================================================
   2. Block P: the portal
   One sticky scene carrying the Mux loop, the flight, the captions, the
   heading, the veil and the film. 1800vh of block, 1700vh of travel.
   ========================================================================= */

.portal-block {
  position: relative;
  width: 100%;
  height: 1800vh;
  background: #070707;
}

.portal-scene {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  padding: 60px var(--toai-section-pad);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  overflow: hidden;
  background: #000;
}

/* The loop is the bed and the fallback. The flight canvas draws frame 0 over
   it from the first paint, so the swap is invisible; if the frames never
   arrive the loop is what the visitor keeps. */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  background: #000;
}

/* A portrait phone (3:4 or narrower, as home.js PORTRAIT reads it: an iPhone
   with Safari's bars showing is about 0.6, which the old 9:16 cut sent to the
   desktop cover fit) fits the
   loop to its RING, as the flight that follows is fitted (home.js, fitBox):
   contained, then scaled so the ring at its widest (980 master pixels of its
   breathing 870 to 980) spans 0.86 of the screen, 0.86 x 1920 / 980.
   The whole portal is on screen, which is what Amir asked for twice ("make
   sure the whole portal fits in the screen on intro"; "the portal is now too
   large on mobile and goes off the screen again", of the cover fit), and the
   flight opens up from it to the full screen as the ring recedes. The loop's
   own picture runs off the sides, which is its black margin. */
@media (orientation: portrait) and (max-width: 767px) and (max-aspect-ratio: 3/4) {
  .hero-video {
    object-fit: contain;
    transform: scale(1.685);
  }
}

/* No transition: the dissolve over the loop is scroll driven, and a CSS
   transition on top of it would lag the scrub and read as a lurch. It never
   takes a click: it is a picture, and during the hand off it lies over the
   film. */
#flightCanvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  opacity: 0;
  pointer-events: none;
}
/* The hand off to the film (2026-09-24, home.js section 8): while the film
   has any opacity under the flood, the canvas lies OVER it and is screened,
   so the light can only ever add to the film. Where the flood is white the
   picture stays white while the film comes up; as the light warms and thins
   the film comes up out of it, and it never passes through a flat grey
   sheet. The whole frame is blended: this is not a mask. */
.portal-scene.lifting #flightCanvas {
  z-index: 4;
  mix-blend-mode: screen;
}

/* ---- the film -----------------------------------------------------------
   The four rules the engine needs, taken from toai-concept/embed.css. The
   stylesheet itself is not linked: its .toai-film / .toai-film-track rules
   describe a standalone track, and this page drives the film from the portal
   block's own scroll. */
#toai-film {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #070707;
  opacity: 0;
  pointer-events: none;
}
#toai-film.film-on { pointer-events: auto; }

.toai-film-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 2;
}

.toai-film-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  opacity: 1;
  transition: opacity 600ms ease;
}
#toai-film.is-live .toai-film-poster { opacity: 0; }

/* The ten cards as real anchors, clipped rather than display:none so a
   screen reader still reaches them. */
.toai-film-links {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* reader.css is injected by the engine the first time a card is opened, which
   puts it after this file in the cascade; the id is doubled to win. */
#reader#reader { z-index: 2147483000; }

/* ---- the caption scene ---------------------------------------------------
   Amir: bigger, dead centre, no box. The plate, the corner ticks and the
   backdrop blur the original had are off: four lines of white type on the
   footage with a soft shadow under them, nothing else. The per character
   rhythm from the ix3 timeline is unchanged. */
.about-content-block {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(22ch, calc(100% - 96px));
  height: auto;
  padding: 0;
  bottom: auto;
  background: none;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
}
.portal-scene.captions-on .about-content-block { opacity: 1; }

/* the original's eight corner ticks belong to the plate that is gone */
.about-content-block .about-horizontal-line,
.about-content-block .about-vertical-line { display: none; }

.about-text-wrapper { width: 100%; }

.about-text,
.about-text._1,
.about-text._2,
.about-text._3,
.about-text._4 {
  width: 100%;
  font-family: var(--font-ui);
  font-size: clamp(18px, 2.4vw, 36px);
  line-height: 1.12;
  letter-spacing: .01em;
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .6);
  overflow: visible;
}
.about-text._1,
.about-text._2,
.about-text._4 { position: absolute; }
.about-text._3 { position: static; }

.about-text .w { display: inline-block; }
.about-text .ch {
  display: inline-block;
  opacity: 0;
  will-change: opacity;
}

.hero-container { z-index: 6; pointer-events: none; }
.hero-heading { pointer-events: auto; }

/* ---- the seam ------------------------------------------------------------
   The doorway's last frames are already white; this carries that white on to
   void and then lets the film ignite out of it. home.js writes the colour, so
   a test reads back exactly what the page paints. */
.portal-veil {
  position: absolute;
  inset: 0;
  z-index: 8;
  background-color: rgba(255, 255, 255, 0);
  pointer-events: none;
}

/* ---- the scroll prompt ---------------------------------------------------
   Amir, 2026-09-22: one indicator. The hero embed's own prompt (the flashing
   Orbitron "Scroll" and its arrow, #toaiScrollHint, phones only) printed
   under the sitewide cue on the first screen, so it is switched off here and
   its markup can go from index.html. The cue says it now. */
.toai-scroll-hint { display: none !important; }

/* ---- the cue on this page ------------------------------------------------
   The same instrument as every other page (site.css section 21), centred and
   low, under the portal. Measured, not guessed (qa/home/cuecheck.mjs): on a
   16:10 desktop the hero loop is cover fitted to the height and the ring's
   lowest lit pixel on the centre line is 0.923 of the viewport down at any
   point of the loop, with the frame's hairline 15px off the bottom. That
   leaves 7.7vh, so here the icon drops its chevron (the stepping wheel
   already says down) and sits 20px up: 45px tall, clear of both. A portrait
   phone has room to spare below the ring (it ends at 64 percent of 844), so
   it keeps the whole stack. */
body.home-page .toai-cue { --cue-bottom: 20px; }
body.home-page .toai-cue:not(.toai-cue--dock) .toai-cue-chev { display: none; }
@media (orientation: portrait) and (max-width: 767px) {
  body.home-page .toai-cue { --cue-bottom: 34px; }
  body.home-page .toai-cue:not(.toai-cue--dock) .toai-cue-chev { display: flex; }
}
/* the film's title card on a phone: the low icon sits at the edge (home.js,
   2026-09-26; the lockup is lifted to make the room) */
body.home-page .toai-cue.toai-cue--low { --cue-bottom: 6px; }

/* ===========================================================================
   3. Block A: the control room
   Black scene, the travelling logo inside it at 75px for the whole block, the
   room fading up then the hotspots, then the scene dips to black for the seam.
   ========================================================================= */

.rooma-block {
  position: relative;
  width: 100%;
  height: 400vh;
  background: #070707;
}

.rooma-scene {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: #070707;
}

.toai-outer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
}

.toai-inner { position: relative; width: 100%; height: 100%; }

.toai-video-bg { position: absolute; inset: 0; }

.toai-video-bg img.toai-poster,
.toai-video-bg video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: top center;
  transform-origin: top center;
}
.toai-video-bg video { z-index: 1; }
.toai-video-bg img.toai-poster {
  z-index: 2;
  opacity: 1;
  transition: opacity .45s ease;
  pointer-events: none;
}
.toai-video-bg img.toai-poster.toai-poster-hide { opacity: 0; }

.toai-hotspot-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
}

/* toaiguidestylea-1.0.0.js, now static CSS. Same colours, same ping, same
   plate: the dots are cyan and the labels are always on. */
.toai-hotspot {
  overflow: visible;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: all;
  cursor: pointer;
  text-decoration: none;
  transform: translate(-50%, -50%);
}

.toai-hotspot-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #00f5ff;
  box-shadow: 0 0 16px 4px rgba(0, 245, 255, .85);
  position: relative;
  z-index: 2;
  animation: toaiPing 2.2s ease-out infinite;
}

@keyframes toaiPing {
  0%   { box-shadow: 0 0 0 0 rgba(0, 245, 255, .6), 0 0 16px 4px rgba(0, 245, 255, .85); }
  70%  { box-shadow: 0 0 0 18px rgba(0, 245, 255, 0), 0 0 16px 4px rgba(0, 245, 255, .85); }
  100% { box-shadow: 0 0 0 0 rgba(0, 245, 255, 0), 0 0 16px 4px rgba(0, 245, 255, .85); }
}

.toai-hotspot-label {
  position: absolute;
  top: 28px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 1;
  width: auto;
  max-width: none;
  height: auto;
  white-space: nowrap;
  font-family: 'Azeret Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  background: rgba(5, 6, 11, .8);
  border: 1px solid rgba(0, 245, 255, .55);
  padding: 6px 10px;
  border-radius: 3px;
  pointer-events: none;
}
@media (max-width: 767px) {
  .toai-hotspot-label { font-size: 9px; padding: 4px 7px; top: 24px; }
}
.toai-hotspot:hover .toai-hotspot-label,
.toai-hotspot:focus-visible .toai-hotspot-label {
  color: #00f5ff;
  box-shadow: 0 0 22px rgba(0, 245, 255, .35);
}

/* The portrait control room is three viewports wide and swipes sideways,
   exactly as the live entry overlay does. */
@media (orientation: portrait) and (max-width: 767px) {
  .toai-outer { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .toai-inner { width: 300vw; }
  .toai-video-bg { width: 300vw; }
  .toai-video-bg video,
  .toai-video-bg img.toai-poster { width: 300vw; height: 100vh; object-fit: fill; transform: none; }
  .toai-hotspot-wrap { width: 300vw; }
  .toai-hotspot-1 { left: 12.8% !important; top: 35% !important; }
  .toai-hotspot-2 { left: 68% !important; top: 51% !important; }
  .toai-hotspot-3 { left: 88% !important; top: 35% !important; }
}

/* ===========================================================================
   4. Block B: what the original stylesheet does not carry
   The room's own rules are in the original layer. These are the two things the
   Webflow page did in an embed rather than in the stylesheet: the contact form
   and the room's grab cursor while the row is moving.
   ========================================================================= */

.main-room-row { transition: transform 600ms cubic-bezier(.645, .045, .355, 1); }
.main-room-section { cursor: grab; }
.main-room-section:active { cursor: grabbing; }

/* The buttons rest closed and open on hover, which is what a-11 and a-12 do
   to .button-primary.main inside .main-room-image-wrapper. */
/* The closed state is the live one: width 0%, padding kept, overflow hidden.
   max-width:0 collapsed the label's line box too, which made the button 12px
   shorter than the live one and pushed everything under it up by 8px inside
   the centred wrapper. */
.main-room-image-wrapper .button-primary.main {
  width: 0%;
  opacity: 0;
  overflow: hidden;
  transition: width .4s cubic-bezier(.645, .045, .355, 1), opacity .3s ease, background-color .3s ease;
}
.main-room-image-wrapper:hover .button-primary.main,
.main-room-image-wrapper:focus-within .button-primary.main {
  width: 100%;
  opacity: 1;
}

.main-room-image-item { transition: filter .4s ease; }
.main-room-image-wrapper:hover .main-room-image-item { filter: none !important; }

/* a-13 and a-14: the radio's label and invite card open on click. */
.main-radio-block { opacity: 0; transition: opacity .4s ease; }
.main-radio-block.radio-open { opacity: 1; }

/* ---- the contact form, lifted from the page's own embed ----------------- */
.toai-form-root * { box-sizing: border-box; margin: 0; padding: 0; }
.toai-form-root {
  font-family: 'Share Tech Mono', monospace;
  width: 100%;
  padding: 40px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
}
.toai-form-wrapper { position: relative; width: 100%; max-width: 640px; }
.toai-form-header { margin-bottom: 40px; position: relative; }
.toai-form-header::before {
  content: '// INITIATE_CONTACT.exe';
  display: block;
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  color: rgba(0, 245, 255, .4);
  letter-spacing: 3px;
  margin-bottom: 12px;
  animation: toai-blink 2s infinite;
}
@keyframes toai-blink { 0%, 90%, 100% { opacity: 1; } 95% { opacity: 0; } }
.toai-form-header h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(24px, 5vw, 42px);
  font-weight: 900;
  color: #fff;
  letter-spacing: 2px;
  line-height: 1.1;
  text-transform: uppercase;
}
.toai-form-header h2 span { color: #00f5ff; text-shadow: 0 0 20px rgba(0, 245, 255, .5); }
.toai-form-header p { margin-top: 14px; font-size: 13px; color: rgba(255, 255, 255, .4); letter-spacing: 1px; line-height: 1.7; }
.toai-corner { position: absolute; width: 16px; height: 16px; border-color: #00f5ff; border-style: solid; opacity: .6; }
.toai-corner-tl { top: -8px; left: -8px; border-width: 2px 0 0 2px; }
.toai-corner-tr { top: -8px; right: -8px; border-width: 2px 2px 0 0; }
.toai-corner-bl { bottom: -8px; left: -8px; border-width: 0 0 2px 2px; }
.toai-corner-br { bottom: -8px; right: -8px; border-width: 0 2px 2px 0; }
.toai-form-panel {
  background: #0c0c1a;
  border: 1px solid rgba(0, 245, 255, .2);
  padding: 40px;
  position: relative;
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
  box-shadow: 0 0 40px rgba(0, 245, 255, .05), inset 0 0 40px rgba(0, 0, 0, .3);
}
.toai-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.toai-field-group { margin-bottom: 24px; position: relative; }
.toai-field-group label {
  display: block;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #00f5ff;
  margin-bottom: 8px;
  opacity: .8;
}
.toai-field-group label::before { content: '> '; opacity: .5; }
.toai-field-group input,
.toai-field-group select,
.toai-field-group textarea {
  width: 100%;
  background: rgba(0, 245, 255, .03);
  border: 1px solid rgba(0, 245, 255, .15);
  border-bottom: 1px solid rgba(0, 245, 255, .4);
  color: #fff;
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  padding: 12px 16px;
  outline: none;
  transition: all .3s;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  -webkit-appearance: none;
  appearance: none;
}
.toai-field-group select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300f5ff' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
.toai-field-group select option { background: #0c0c1a; color: #fff; }
.toai-field-group textarea { resize: none; height: 120px; line-height: 1.6; }
.toai-field-group input::placeholder,
.toai-field-group textarea::placeholder { color: rgba(255, 255, 255, .2); font-size: 13px; }
.toai-field-group input:focus,
.toai-field-group select:focus,
.toai-field-group textarea:focus {
  border-color: #00f5ff;
  background: rgba(0, 245, 255, .06);
  box-shadow: 0 0 20px rgba(0, 245, 255, .08);
}
.toai-divider { height: 1px; margin: 4px 0 18px; background: linear-gradient(90deg, rgba(0, 245, 255, .35), rgba(0, 245, 255, 0)); }
.toai-submit-wrap { margin-top: 8px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.toai-submit-btn {
  font-family: 'Orbitron', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #07070f;
  background: #00f5ff;
  border: none;
  padding: 16px 36px;
  cursor: pointer;
  clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
}
.toai-submit-btn:disabled { background: rgba(0, 245, 255, .3); color: #00f5ff; cursor: default; }
.toai-status-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 10px;
  letter-spacing: 2px;
  color: rgba(255, 255, 255, .35);
}
.toai-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #00f5ff; box-shadow: 0 0 8px #00f5ff; }

@media (max-width: 767px) {
  .toai-form-root { padding: 20px 8px; }
  .toai-form-panel { padding: 20px; }
  .toai-field-row { grid-template-columns: 1fr; gap: 0; }
  .toai-form-header { margin-bottom: 20px; }
}

/* ===========================================================================
   5. Reduced motion
   A still hero, the four lines listed, the film as its poster and its links,
   the rooms as flat sections. Nothing fetches a sequence or compiles a shader.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .portal-block { height: auto; }
  .portal-scene { position: relative; height: auto; min-height: 100vh; padding-bottom: 40px; }
  #flightCanvas { display: none; }
  .hero-video { position: relative; height: 100vh; }
  #toai-film { position: relative; height: 100vh; opacity: 1 !important; }
  .about-content-block { position: relative; bottom: auto; opacity: 1 !important; margin-top: 24px; }
  .about-text._1, .about-text._2, .about-text._4 { position: relative; }
  .about-text .ch { opacity: 1 !important; }
  .portal-veil, .toai-scroll-hint { display: none; }

  .rooma-block { height: 100vh; }
  .rooma-scene { position: relative; }
  .toai-outer, .toai-hotspot-wrap { opacity: 1 !important; }
  .main-room-row { transition: none; }
  .toai-hotspot-dot { animation: none; }
  .main-room-scroll-block { height: 100vh; }
  .image-2 { animation: none; }
}

/* ---- original rules, variables resolved ------------------------------ */
.w-inline-block { max-width: 100%; display: inline-block; }
.w-clearfix:before, .w-clearfix:after { content: " "; grid-area: 1 / 1 / 2 / 2; display: table; }
.w-clearfix:after { clear: both; }
.w-embed:before, .w-embed:after { content: " "; grid-area: 1 / 1 / 2 / 2; display: table; }
.w-embed:after { clear: both; }
.w-container { max-width: 940px; margin-left: auto; margin-right: auto; }
.w-container:before, .w-container:after { content: " "; grid-area: 1 / 1 / 2 / 2; display: table; }
.w-container:after { clear: both; }
.w-layout-blockcontainer { max-width: 940px; margin-left: auto; margin-right: auto; display: block; }
.hero-section { width: 100%; height: 100vh; padding: 60px var(--toai-section-pad); flex-flow: column; justify-content: center; align-items: center; display: flex; position: sticky; top: 0; overflow: hidden; }
.hero-container { z-index: 20; width: 100%; height: 100%; max-width: 1400px; position: relative; }
.hero-block { flex-flow: column; justify-content: flex-start; align-items: center; width: 100%; height: 100%; padding-top: 40px; display: flex; }
.hero-background-image { object-fit: cover; width: 100%; height: 100%; position: absolute; overflow: visible; }
.hero-heading { max-width: 600px; font-family: 'Azeret Mono', monospace; color: #fff; font-size: 32px; line-height: 1em; font-weight: 500; text-align: right; text-transform: uppercase; cursor: pointer; flex: 0 auto; align-self: flex-end; margin-top: 0; margin-bottom: 0; margin-right: 0; padding-left: 0; text-decoration: none; position: absolute; inset: 0% auto auto; }
.hero-background-shadow { background-image: linear-gradient(0deg, #0a0a0acc, #fff0); width: 100%; height: 100%; display: none; position: absolute; inset: 0% auto auto 0%; }
.preload-section { z-index: 30; width: 100%; height: 100vh; padding: 60px var(--toai-section-pad); background-color: #fff; opacity: 0; pointer-events: none; flex-flow: column; justify-content: center; align-items: center; display: flex; position: fixed; overflow: hidden; }
.preload-container { width: 100%; height: 100%; max-width: 1400px; position: relative; }
.preload-block { grid-column-gap: 16px; grid-row-gap: 16px; flex-flow: column; justify-content: center; align-items: center; width: 100%; height: 100%; display: flex; }
.preload-text-1 { font-family: 'Azeret Mono', monospace; color: #070707; font-size: 32px; line-height: 1em; text-transform: uppercase; }
.preload-text-2 { font-family: 'DM Mono', monospace; color: #070707; font-size: 14px; line-height: 1em; text-transform: uppercase; }
.preload-inner-block { grid-column-gap: 2px; grid-row-gap: 2px; flex-flow: column; justify-content: center; align-items: center; width: 158px; height: 46px; display: flex; position: relative; }
.preload-flex-1 { grid-column-gap: 10px; grid-row-gap: 10px; justify-content: center; align-items: center; display: flex; }
.preload-text-3 { font-family: 'DM Mono', monospace; color: #23bae7; font-size: 16px; line-height: 1em; text-transform: uppercase; }
.preload-flex-2 { grid-column-gap: 0px; grid-row-gap: 0px; border-top: 1px solid #23bae7; background-color: #0000; justify-content: space-between; align-items: flex-start; width: 116px; padding-top: 5px; display: flex; }
.preload-line { background-color: #23bae7; width: 1px; height: 8px; }
.preload-line._2 { height: 12px; }
.preload-horizontal-line { background-color: #070707; width: 8px; height: 1px; position: absolute; inset: 0% auto auto 0%; }
.preload-horizontal-line._2 { inset: 0% 0% auto auto; }
.preload-horizontal-line._3 { inset: auto 0% 0% auto; }
.preload-horizontal-line._4 { inset: auto auto 0% 0%; }
.preload-vertical-line { background-color: #070707; width: 1px; height: 8px; position: absolute; inset: 0% auto auto 0%; }
.preload-vertical-line._2 { inset: 0% 0% auto auto; }
.preload-vertical-line._3 { inset: auto 0% 0% auto; }
.preload-vertical-line._4 { inset: auto auto 0% 0%; }
.preload-count-block { justify-content: flex-end; align-items: center; width: 40px; display: flex; position: relative; }
.about-section { width: 100%; height: 100vh; padding: 60px var(--toai-section-pad); flex-flow: column; justify-content: center; align-items: center; display: flex; position: sticky; top: 0; overflow: hidden; }
.about-container { width: 100%; height: 100%; max-width: 1400px; }
.about-block { flex-flow: column; justify-content: center; align-items: center; width: 100%; height: 100%; display: flex; position: relative; }
.about-background-image { aspect-ratio: auto; opacity: 1; object-fit: cover; align-self: auto; width: 100%; height: 100%; position: absolute; inset: auto 0% 0%; }
.about-image { opacity: 1; mix-blend-mode: normal; object-fit: cover; width: 400px; height: 300px; }
.about-image-block { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); background-color: #ffffff0a; border: 1px solid #ffffff1c; padding: 30px; position: absolute; }
.about-image-block._1 { opacity: 1; -webkit-backdrop-filter: none; backdrop-filter: none; mix-blend-mode: normal; }
.about-image-block._2, .about-image-block._3, .about-image-block._4 { opacity: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.about-content-block { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); background-color: #0707070a; border: 1px solid #ffffff1c; flex-flow: column; justify-content: center; align-items: center; width: 100%; height: auto; padding: 24px 40px; display: flex; position: absolute; bottom: 20px; }
.about-horizontal-line { background-color: #fff; width: 12px; height: 1px; position: absolute; inset: 0% auto auto 0%; }
.about-horizontal-line._2 { inset: 0% 0% auto auto; }
.about-horizontal-line._3 { inset: auto 0% 0% auto; }
.about-horizontal-line._4 { inset: auto auto 0% 0%; }
.about-vertical-line { background-color: #fff; width: 1px; height: 12px; position: absolute; inset: 0% auto auto 0%; }
.about-vertical-line._2 { inset: 0% 0% auto auto; }
.about-vertical-line._3 { inset: auto 0% 0% auto; }
.about-vertical-line._4 { inset: auto auto 0% 0%; }
.about-text { width: auto; font-family: 'DM Mono', monospace; color: #fff; font-size: 14px; text-align: center; white-space: normal; line-height: 1.4em; overflow: hidden; }
.about-text._1, .about-text._2 { font-size: 16px; line-height: 1.4em; position: absolute; }
.about-text._3 { font-size: 16px; line-height: 1.4em; position: static; }
.about-text._4 { font-size: 16px; line-height: 1.4em; position: absolute; }
.about-text-wrapper { flex-flow: column; order: 0; justify-content: center; align-self: auto; align-items: center; width: 100%; margin-bottom: 0; padding-bottom: 0; display: flex; position: relative; }
.main-room-section { width: 100%; height: 100vh; padding: 60px var(--toai-section-pad); cursor: grab; flex-flow: column; flex: none; justify-content: center; align-items: center; display: flex; position: relative; overflow: hidden; }
.main-room-image { object-fit: cover; width: 100%; height: 100%; }
.main-room-background { flex-flow: column; justify-content: center; align-items: center; width: auto; max-width: 1360px; height: 100%; display: flex; position: absolute; }
.main-room-shadow { background-image: linear-gradient(90deg, #0a0a0a, #fff0); width: 40%; height: 100%; position: absolute; left: 0; }
.main-room-shadow._2nd { background-image: linear-gradient(270deg, #0a0a0a, #fff0); left: auto; right: 0; }
.main-room-container { width: 100%; height: 100%; max-width: 1400px; position: relative; }
.main-room-block { cursor: ew-resize; flex-flow: column; justify-content: center; align-items: center; width: 100%; height: 100%; display: flex; }
.main-room-row { flex: none; justify-content: flex-start; align-items: flex-start; width: 100%; height: 100vh; display: flex; transform: translate(-100%); }
.main-room-image-item { object-fit: contain; width: 200px; height: auto; margin-right: 0; position: static; inset: 0% auto auto 0%; transform: translate(0, 26px); }
.main-room-image-item._2 { box-sizing: border-box; aspect-ratio: auto; object-fit: fill; width: 180px; position: static; }
.main-room-image-item._3 { flex-flow: column; justify-content: flex-start; align-items: center; width: auto; display: flex; position: relative; transform: translate(0); }
.main-room-image-item._4 { width: 220px; transform: translate(0); }
.main-room-image-item._5 { width: 250px; }
.main-room-image-wrapper { grid-column-gap: 12px; grid-row-gap: 12px; cursor: pointer; flex-flow: column; justify-content: center; align-items: center; width: auto; height: auto; display: flex; position: absolute; top: 26.4vh; right: 17.6vw; }
.main-room-image-wrapper._2 { grid-column-gap: 0px; grid-row-gap: 0px; object-fit: fill; justify-content: flex-start; align-items: center; width: 300px; height: 250px; top: 30%; left: 19%; right: auto; }
.main-room-image-wrapper._2.left { top: 38%; left: auto; right: 38%; }
.main-room-image-wrapper._3 { width: 400px; top: 5%; left: auto; right: auto; }
.main-room-image-wrapper._3.left { right: 7%; }
.main-room-image-wrapper._3.right { top: 3.5%; left: 8%; }
.main-room-image-wrapper._4 { width: 220px; inset: auto auto -4% 10.3%; }
.main-room-image-wrapper._1 { width: 200px; top: 33%; right: 17.6%; }
.main-room-image-wrapper._1.right { top: 33%; left: 30%; right: auto; }
.main-room-image-wrapper._5 { cursor: auto; inset: auto 8vw 30% auto; }
.main-point-1 { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); background-color: #ffffff1f; border: 1px solid #ffffff21; border-radius: 100%; flex-flow: column; justify-content: center; align-self: auto; align-items: center; width: auto; height: auto; padding: 7px; display: flex; position: static; inset: auto 0% 0% auto; }
.main-inner-point { background-color: #fff; border-radius: 100%; width: 8px; height: 8px; }
.button-primary { border-right: 1.5px solid #fff; border-left: 1.5px solid #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); width: auto; font-family: 'DM Mono', monospace; color: #fff; font-size: 14px; text-transform: uppercase; background-color: #e2282829; padding: 10px 0; font-weight: 500; line-height: 1em; text-decoration: none; transition: all .3s cubic-bezier(.645, .045, .355, 1); overflow: hidden; }
.button-primary:hover { background-color: #e2282866; }
.button-primary:focus { color: #e218bd; }
.button-primary.main { background-color: #00c8ff66; justify-content: center; align-items: center; display: block; position: relative; bottom: 0; }
.button-primary.main.w--current { line-height: 1em; font-weight: 500; background-color: #28bae229; position: static; }
.button-primary.main._2 { z-index: 2; background-color: #00c8ff66; width: auto; position: relative; top: 0; bottom: auto; transform: translate(0); }
.button-primary.main._2.w--current { background-color: #00c8ff91; }
.button-primary.shoot, .button-primary.menu-mobile.w--current { line-height: 1em; font-weight: 500; }
.button-primary-text { white-space: nowrap; margin-left: 20px; margin-right: 20px; }
.button-primary-text._2 { opacity: 0; object-fit: contain; position: absolute; inset: 10px 0% 0% 15px; }
.main-room-wrapper { flex-flow: row; justify-content: flex-start; align-items: flex-start; width: 100%; height: 100vh; display: flex; position: sticky; top: 0; overflow: hidden; }
.main-room-scroll-block { flex-flow: column; flex: none; width: 100%; height: 1000vh; display: flex; position: relative; }
.project-image { object-fit: cover; width: 60px; height: 80px; }
.project-image-block { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); background-color: #ffffff0a; border: 1px solid #ffffff1c; flex-flow: column; justify-content: center; align-items: center; padding: 10px; display: flex; }
.project-image-block._2 { z-index: 4; position: absolute; top: -51%; left: -82%; transform: rotate(-2deg); }
.project-image-block._3 { z-index: 6; position: absolute; top: -42%; left: auto; right: -84%; transform: rotate(2deg); }
.project-image-block._4 { z-index: 5; position: absolute; top: 40%; left: auto; right: -164%; transform: rotate(-2deg); }
.project-image-block._5 { position: absolute; top: 40%; left: -74%; right: auto; transform: rotate(0); }
.project-image-block._6 { position: absolute; top: 53%; left: auto; right: -79%; transform: rotate(0); }
.project-image-block._7 { position: absolute; top: 26%; left: -155%; right: auto; transform: rotate(-4deg); }
.project-image-block._1 { z-index: 7; position: relative; }
.button-secondary { z-index: auto; color: #dddfdf; font-size: 16px; justify-content: center; align-items: center; padding: 0; font-weight: 500; line-height: 1em; text-decoration: none; transition: all .4s cubic-bezier(.645, .045, .355, 1); display: flex; position: relative; }
.button-secondary:hover { padding: 2px; }
.button-secondary:focus { padding: 6px; }
.button-secondary.main { line-height: 1em; font-weight: 500; text-transform: uppercase; transition: all .3s cubic-bezier(.645, .045, .355, 1); position: absolute; inset: 20px 10px auto auto; }
.button-secondary.main-mobile.w--current { line-height: 1em; font-weight: 500; }
.button-secondary-block { justify-content: center; align-items: center; padding: 10px 20px; display: flex; position: relative; }
.button-secondary-text-block { z-index: 1; position: relative; }
.button-background-1 { opacity: 0; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background-color: #e2282829; width: 100%; height: 100%; position: absolute; }
.button-background-2 { background-color: #e2282829; width: 100%; height: 100%; position: absolute; box-shadow: inset 0 0 15px 6px #e228284f; }
.button-horizontal-line { background-color: #fff; width: 12px; height: 1px; position: absolute; inset: 0% auto auto 0%; }
.button-horizontal-line._2 { inset: 0% 0% auto auto; }
.button-horizontal-line._3 { inset: auto 0% 0% auto; }
.button-horizontal-line._4 { inset: auto auto 0% 0%; }
.button-vertical-line { background-color: #fff; width: 1px; height: 12px; position: absolute; inset: 0% auto auto 0%; }
.button-vertical-line._2 { inset: 0% 0% auto auto; }
.button-vertical-line._3 { inset: auto 0% 0% auto; }
.button-vertical-line._4 { inset: auto auto 0% 0%; }
.main-icon-block { justify-content: space-between; align-items: center; width: 100%; display: flex; position: absolute; bottom: 0; }
.main-icon-block.left { justify-content: flex-end; align-items: center; }
.main-icon-block.right { justify-content: flex-start; align-items: center; }
.main-arrow-icon { cursor: pointer; width: 125px; }
.project-section { width: 100%; height: 100vh; padding: 60px var(--toai-section-pad); flex-flow: column; flex: none; justify-content: center; align-items: center; display: flex; position: relative; }
.project-container { width: 100%; height: 100%; max-width: 1400px; position: relative; }
.project-block { grid-column-gap: 50px; grid-row-gap: 50px; flex-flow: column; justify-content: center; align-items: center; width: 100%; height: auto; padding-left: 40px; padding-right: 40px; display: flex; position: relative; }
.project-background-image { object-fit: cover; width: 100%; height: 100%; position: absolute; }
.project-background-image._2, .project-background-image._3, .project-background-image._4, .project-background-image._5, .project-background-image._6, .project-background-image._7 { opacity: 0; }
.project-icon-block { justify-content: center; align-items: center; width: 56px; height: 48px; display: flex; position: relative; overflow: hidden; }
.project-lottie-animation { width: 100px; height: 100px; position: absolute; }
.project-icon-horizontal-line { background-color: #fff; width: 12px; height: 1px; position: absolute; inset: 0% auto auto 0%; }
.project-icon-horizontal-line._2 { inset: 0% 0% auto auto; }
.project-icon-horizontal-line._3 { inset: auto 0% 0% auto; }
.project-icon-horizontal-line._4 { inset: auto auto 0% 0%; }
.project-icon-vertical-line { background-color: #fff; width: 1px; height: 12px; position: absolute; inset: 0% auto auto 0%; }
.project-icon-vertical-line._2 { inset: 0% 0% auto auto; }
.project-icon-vertical-line._3 { inset: auto 0% 0% auto; }
.project-icon-vertical-line._4 { inset: auto auto 0% 0%; }
.project-flex-1 { grid-column-gap: 40px; grid-row-gap: 40px; justify-content: center; align-items: center; display: flex; }
.project-text-1 { width: 84px; font-family: 'DM Mono', monospace; color: #fff; font-size: 14px; line-height: 1em; font-weight: 500; text-transform: uppercase; }
.project-text-2 { width: auto; font-family: 'DM Mono', monospace; color: #fff; font-size: 14px; line-height: 1em; font-weight: 500; text-transform: uppercase; }
.project-item-block { justify-content: space-between; align-items: center; width: 100%; display: flex; }
.project-item-block._1 { opacity: 1; }
.project-item-block._2, .project-item-block._3, .project-item-block._4, .project-item-block._5, .project-item-block._6, .project-item-block._7 { position: absolute; }
.project-item-image { object-fit: cover; width: 300px; height: 400px; }
.project-item-image-block { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); background-color: #ffffff0a; border: 1px solid #ffffff1c; justify-content: center; align-items: center; padding: 30px; text-decoration: none; display: flex; }
.project-item-text-3 { width: 288px; font-family: 'DM Mono', monospace; color: #fff; font-size: 16px; text-align: right; line-height: 1.3em; }
.project-item-inner-block { grid-column-gap: 20px; grid-row-gap: 20px; flex-flow: column; justify-content: center; align-items: flex-start; width: 288px; display: flex; }
.project-item-text-1 { font-family: 'DM Mono', monospace; color: #fff; font-size: 14px; text-transform: uppercase; font-weight: 500; line-height: 1em; }
.project-item-text-2 { font-family: 'Azeret Mono', monospace; color: #fff; font-size: 20px; text-transform: uppercase; font-weight: 400; line-height: 1em; }
.project-item-line { background-color: #bdc0c0; width: 60px; height: 1px; }
.project-inner-block { flex-flow: column; justify-content: center; align-items: center; width: 100%; display: flex; position: relative; }
.bts-section { width: 100%; height: 100vh; padding: 60px var(--toai-section-pad); flex-flow: column; flex: none; justify-content: center; align-items: center; display: flex; position: relative; overflow: hidden; }
.bts-container { width: 100%; height: 100%; max-width: 1400px; position: relative; }
.bts-block { flex-flow: column; justify-content: center; align-items: center; width: 100%; height: 100%; display: flex; }
.bts-background-image { filter: brightness(60%) blur(50px); object-fit: cover; width: 100%; height: 150%; position: absolute; }
.button-tertiary { font-family: 'DM Mono', monospace; color: #070707; text-transform: uppercase; background-color: #fff; justify-content: center; align-items: center; padding: 10px 20px; font-weight: 500; line-height: 1em; text-decoration: none; transition: all .4s cubic-bezier(.645, .045, .355, 1); display: flex; }
.button-tertiary:hover { background-color: #fff; }
.button-tertiary:focus { color: #23bae7; background-color: #fff; }
.button-tertiary.shoot { line-height: 1em; font-weight: 500; }
.button-tertiary.exit { color: #fff; line-height: 1em; font-weight: 500; background-color: #fff0; position: relative; }
.button-tertiary.exit:hover { color: #070707; background-color: #fff; }
.button-tertiary.exit:active { color: #23bae7; }
.highlight-section { width: 100%; height: 100vh; padding: 40px var(--toai-section-pad); flex-flow: column; flex: none; justify-content: center; align-items: center; display: flex; position: relative; overflow: hidden; }
.highlight-background-image { filter: brightness(75%) blur(50px); object-fit: cover; width: 100%; height: 100%; position: absolute; }
.highlight-container { width: 100%; height: 100%; max-width: 1400px; position: relative; }
.highlight-block { flex-flow: column; justify-content: center; align-items: center; width: 100%; height: 100%; display: flex; position: relative; }
.highlight-background-icon { object-fit: contain; width: auto; height: 94vh; position: absolute; left: 0; transform: translate(-34%); }
.highlight-inner-block { border-radius: 100%; flex-flow: column; justify-content: center; align-items: center; width: 3000px; height: 3000px; display: flex; position: absolute; right: 0; transform: rotate(0); }
.highlight-item { justify-content: flex-end; align-items: center; width: 100%; height: 100px; display: flex; position: absolute; right: 0; transform: rotate(0); }
.highlight-item._3 { transform: rotate(-12deg); }
.highlight-item._5 { transform: rotate(12deg); }
.highlight-item._2 { transform: rotate(-24deg); }
.highlight-item._1 { transform: rotate(-36deg); }
.highlight-item._6 { transform: rotate(24deg); }
.highlight-item._7 { transform: rotate(36deg); }
.highlight-item-block { justify-content: space-between; align-items: center; width: 24%; height: 100%; display: flex; }
.highlight-background-shadow { background-image: linear-gradient(#090909, #fff0); width: 100vw; height: 50%; display: block; position: absolute; top: -40px; }
.highlight-background-shadow._2 { top: auto; bottom: -40px; transform: rotate(180deg); }
.highlight-item-text { max-width: 438px; color: #fff; font-size: 32px; line-height: 1.4em; text-transform: uppercase; }
.highlight-item-image { object-fit: cover; width: 80px; height: 80px; }
.highlight-item-image-block { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); background-color: #ffffff0a; border: 1px solid #ffffff1c; justify-content: center; align-items: center; padding: 14px; display: flex; }
.shoot-section { width: 100%; height: 100vh; padding: 60px var(--toai-section-pad); flex-flow: column; flex: none; justify-content: center; align-items: center; display: flex; position: relative; overflow: hidden; }
.shoot-container { width: 100%; height: 100%; max-width: 1400px; position: relative; }
.shoot-block { flex-flow: column; justify-content: space-between; align-items: center; width: 100%; height: 100%; padding-bottom: 20px; display: flex; }
.shoot-background-image { object-fit: cover; width: 100%; height: 100%; position: absolute; }
.shoot-background-image._2, .shoot-background-image._3, .shoot-background-image._4, .shoot-background-image._5 { opacity: 0; }
.shoot-shadow { background-color: #0a0a0a80; width: 100%; height: 100%; position: absolute; }
.shoot-image { object-fit: cover; width: 68%; height: 100%; position: absolute; bottom: 0; overflow: clip; }
.shoot-inner-block { flex-flow: column; justify-content: flex-start; align-items: center; width: 100%; display: flex; }
.shoot-flex-1 { justify-content: space-between; align-items: center; width: 100%; display: flex; }
.shoot-text-1 { width: 570px; color: #fff; font-size: 64px; line-height: 1.2em; text-align: center; }
.shoot-flex-2 { grid-column-gap: 36px; grid-row-gap: 36px; justify-content: center; align-items: center; display: flex; }
.shoot-item-image { object-fit: cover; width: 80px; height: 80px; }
.shoot-image-block { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); cursor: pointer; background-color: #ffffff0a; border: 1px solid #ffffff1c; flex-flow: column; justify-content: center; align-items: center; padding: 16px; display: flex; position: relative; }
.shoot-image-horizontal-line { background-color: #fff; opacity: 0; width: 12px; height: 1px; position: absolute; inset: 0% auto auto 0%; }
.shoot-image-horizontal-line._2 { inset: 0% 0% auto auto; }
.shoot-image-horizontal-line._3 { inset: auto 0% 0% auto; }
.shoot-image-horizontal-line._4 { inset: auto auto 0% 0%; }
.shoot-image-vertical-line { background-color: #fff; opacity: 0; width: 1px; height: 12px; position: absolute; inset: 0% auto auto 0%; }
.shoot-image-vertical-line._2 { inset: 0% 0% auto auto; }
.shoot-image-vertical-line._3 { inset: auto 0% 0% auto; }
.shoot-image-vertical-line._4 { inset: auto auto 0% 0%; }
.shoot-blur { background-image: linear-gradient(0deg, #000, #fff0); width: 100%; height: 30%; position: absolute; bottom: 0; }
.main-trigger { pointer-events: none; width: 100%; height: 100vh; position: absolute; inset: auto auto 0% 0%; }
.main-radio-block { grid-column-gap: 38px; grid-row-gap: 38px; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); background-color: #ffffff0a; border: 1px solid #ffffff1c; flex-flow: column; justify-content: center; align-items: center; width: 250px; height: 250px; padding-left: 10px; padding-right: 10px; display: flex; position: absolute; top: 0; overflow: hidden; transform: translate(0, -94%); }
.main-radio-text-1 { color: #fff; font-size: 16px; text-align: center; text-transform: uppercase; align-self: center; margin-top: 20px; line-height: 1em; }
.main-radio-flex-1 { flex-flow: column; justify-content: center; align-items: center; width: 100%; margin-bottom: 20px; display: flex; position: relative; }
.main-radio-flex-2 { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); background-color: #28b4e280; flex-flow: row; justify-content: center; align-items: center; width: 70px; height: 70px; display: flex; position: relative; }
.main-radio-icon { cursor: pointer; object-fit: contain; width: 54px; }
.main-radio-blur-block { -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); background-color: #ed675a33; width: 100%; height: 100%; position: absolute; bottom: 0; }
.exit-section { width: 100%; height: 100vh; padding: 60px var(--toai-section-pad); flex-flow: column; flex: none; justify-content: center; align-items: center; display: flex; position: relative; overflow: hidden; }
.exit-container { width: 100%; height: 100%; max-width: 1400px; position: relative; }
.exit-block { flex-flow: column; justify-content: center; align-items: center; width: 100%; height: 100%; display: flex; position: relative; }
.exit-background-image { object-fit: cover; width: 100%; height: 100%; position: absolute; }
.exit-inner-block { grid-column-gap: 50px; grid-row-gap: 50px; -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); background-color: #07070780; flex-flow: column; justify-content: center; align-items: center; width: 100%; max-width: 1000px; height: 500px; padding-left: var(--toai-section-pad); padding-right: var(--toai-section-pad); display: flex; }
.exit-text-1 { color: #fff; font-size: 48px; line-height: 1em; text-align: center; text-transform: uppercase; }
.exit-image-block { flex-flow: column; justify-content: center; align-items: center; width: 100px; height: 100px; display: flex; position: relative; transform: rotate(0); }
.exit-text-2 { color: #bdc0c0; font-size: 14px; line-height: 1.4em; text-align: center; }
.exit-flex-1 { grid-column-gap: 56px; grid-row-gap: 56px; justify-content: center; align-items: center; display: flex; }
.exit-image { opacity: .4; object-fit: cover; width: 100%; height: 100%; position: absolute; }
.exit-image._4 { opacity: .7; width: 85%; height: 85%; transform-style: preserve-3d; transform: translate3d(0, 0, 12px); }
.exit-image._5 { opacity: 1; width: 70%; height: 70%; transform-style: preserve-3d; transform: translate3d(0, 0, 24px); }
.exit-image._2 { opacity: .7; width: 85%; height: 85%; transform-style: preserve-3d; transform: translate3d(0, 0, -12px); }
.exit-image._1 { opacity: 100; width: 70%; height: 70%; transform-style: preserve-3d; transform: translate3d(0, 0, -24px); }
.exit-menu-block { grid-column-gap: 120px; grid-row-gap: 120px; justify-content: center; align-items: center; display: flex; position: absolute; bottom: 30px; }
.button-tertiary-text { position: absolute; }
.button-tertiary-text.exit { opacity: 0; }
.main-menu-mobile-block { display: none; }
.body { color: #333; font-size: var(--_typography---style-section--w-block); line-height: var(--_typography---style-section--h-block); font-weight: 400; }
.image-2 { float: left; clear: both; opacity: 1; mix-blend-mode: lighten; flex: 0 auto; align-self: center; width: 100px; height: auto; position: absolute; inset: 75px auto auto; }
.code-embed-2 { height: 200%; position: relative; }
.toai-seofooter { z-index: 50; background-color: #070707; border-top: 1px solid #2d2f3a; padding: 28px 24px 40px; position: relative; }
.toai-seofooter-label { color: #a0a2af; letter-spacing: 2px; margin-bottom: 14px; font-size: 11px; }
.toai-seofooter-links { grid-column-gap: 28px; grid-row-gap: 10px; flex-wrap: wrap; display: flex; }
.toai-seofooter-link { color: #d2d4dc; font-size: 13px; text-decoration: none; }

@media screen and (max-width: 991px) {
  .w-container { max-width: 728px; }
  .w-layout-blockcontainer { max-width: 728px; }
  .hero-section { padding-top: 140px; padding-bottom: 140px; }
  .hero-container { top: 0; right: 0; }
  .hero-block { padding-top: 0; }
  .hero-heading { max-width: 300px; font-size: 16px; text-align: right; align-self: flex-end; inset: 0% auto auto; }
  .preload-section { padding-top: 140px; padding-bottom: 140px; }
  .preload-block { padding-top: 0; }
  .about-container { overflow: hidden; }
  .about-image { height: 300px; overflow: hidden; }
  .about-content-block { padding-left: 20px; padding-right: 20px; bottom: 40px; }
  .main-room-section { overflow: hidden; }
  .main-room-image { object-fit: contain; }
  .main-room-image-item._1 { width: 110px; }
  .main-room-image-item._2 { width: 120px; }
  .main-room-image-item._4 { width: 125px; }
  .main-room-image-item._5 { width: 126px; }
  .main-room-image-wrapper { top: 33vh; right: 3.2vw; }
  .main-room-image-wrapper._2 { grid-column-gap: 12px; grid-row-gap: 12px; justify-content: center; align-items: center; width: 164.406px; height: auto; inset: 0% auto 0% 8%; }
  .main-room-image-wrapper._2.left { width: 150px; top: 23%; bottom: auto; right: 33%; }
  .main-room-image-wrapper._3 { grid-column-gap: 0px; grid-row-gap: 0px; justify-content: center; align-items: center; width: 200px; height: 25%; top: 0%; bottom: auto; }
  .main-room-image-wrapper._3.left { top: 0%; bottom: auto; right: 5%; }
  .main-room-image-wrapper._3.right { top: 0%; bottom: auto; left: 2%; }
  .main-room-image-wrapper._4 { width: 136px; min-height: 100%; inset: auto auto -15% 5%; }
  .main-room-image-wrapper._1 { width: 164.406px; inset: 0% 10% 0% auto; }
  .main-room-image-wrapper._1.right { top: auto; bottom: 24%; left: 32%; }
  .main-room-image-wrapper._5 { grid-column-gap: 4px; grid-row-gap: 4px; width: 250px; height: 250px; inset: 15% 5% 0% auto; overflow: visible; }
  .button-primary.main { font-size: 12px; }
  .button-primary.main._2.w--current { height: auto; top: auto; overflow: visible; }
  .project-image { width: 40px; height: 54px; }
  .main-icon-block.right { bottom: 0; }
  .project-container { height: 100%; }
  .project-block { grid-column-gap: 80px; grid-row-gap: 80px; height: 100%; padding-left: 0; padding-right: 0; }
  .project-text-1 { font-size: 14px; }
  .project-item-image { width: 170px; height: 208px; }
  .project-item-image-block { padding: 20px; }
  .project-item-text-3 { width: 200px; font-size: 14px; }
  .project-item-inner-block { grid-column-gap: 16px; grid-row-gap: 16px; width: 200px; }
  .project-item-text-1 { font-size: 12px; }
  .project-item-text-2 { font-size: 14px; }
  .bts-background-image { position: fixed; top: auto; right: auto; overflow: clip; }
  .highlight-background-icon { transform: translate(-59%); }
  .highlight-inner-block { width: 2500px; height: 2500px; transform: none; }
  .highlight-item-block { width: 18%; }
  .highlight-item-text { max-width: 280px; font-size: 20px; }
  .shoot-text-1 { width: 397px; font-size: 48px; }
  .shoot-flex-2 { grid-column-gap: 20px; grid-row-gap: 20px; }
  .shoot-item-image { width: 70px; height: 70px; }
  .main-radio-block { grid-column-gap: 2px; grid-row-gap: 2px; object-fit: fill; width: 150px; height: 150px; position: absolute; inset: 50px 0% 0%; overflow: visible; }
  .main-radio-text-1 { font-size: 14px; }
  .main-radio-flex-2 { top: 0; }
  .exit-flex-1 { grid-column-gap: 30px; grid-row-gap: 30px; }
  .exit-menu-block { grid-column-gap: 38px; grid-row-gap: 38px; bottom: 20px; }
  .body { height: 100px; }
  .code-embed-2 { object-fit: fill; width: 100%; height: auto; margin-bottom: 0; position: relative; overflow: auto; }
}

@media screen and (max-width: 479px) {
  .w-container { max-width: none; }
  .hero-section { padding-top: 180px; padding-bottom: 180px; }
  .hero-background-image { object-position: 50% 50%; width: 280%; }
  .hero-heading { max-width: 258px; font-size: 20px; line-height: 1.2em; text-align: center; align-self: center; margin-left: auto; margin-right: auto; inset: 0% 0% auto; }
  .preload-section { z-index: 30; padding-top: 180px; padding-bottom: 180px; }
  .about-image-block, .about-content-block { padding: 20px; }
  .main-room-image { object-fit: cover; }
  .main-room-image-wrapper._2, .main-room-image-wrapper._3, .main-room-image-wrapper._4, .main-room-image-wrapper._1, .main-room-image-wrapper._5 { display: none; }
  .button-primary.main { line-height: 1em; font-weight: 500; }
  .button-primary.menu-mobile { justify-content: center; align-items: center; width: 100%; display: flex; }
  .button-primary-text { line-height: 1em; font-weight: 500; }
  .button-secondary.main.w--current { display: none; }
  .button-secondary.main-mobile { width: 100%; font-size: 14px; position: absolute; bottom: -18px; transform: translate(0, 100%); }
  .button-secondary-block { width: 100%; }
  .button-secondary-text-block { line-height: 1em; font-weight: 500; }
  .main-icon-block { display: none; }
  .project-icon-block { width: 40px; height: 30px; }
  .project-lottie-animation { width: 80px; height: 80px; }
  .project-flex-1 { grid-column-gap: 14px; grid-row-gap: 14px; flex-flow: column; }
  .project-text-1 { width: auto; font-size: 12px; }
  .project-text-2 { font-size: 12px; }
  .project-item-image { width: 150px; }
  .project-item-text-3 { width: 240px; }
  .project-item-inner-block { grid-column-gap: 12px; grid-row-gap: 12px; }
  .highlight-background-icon { height: 42vh; transform: translate(-58%); }
  .highlight-inner-block { width: 1500px; height: 1500px; }
  .highlight-item { height: 80px; }
  .highlight-item-block { width: 14%; }
  .highlight-item-text { max-width: 154px; font-size: 14px; }
  .highlight-item-image { width: 50px; height: 50px; }
  .highlight-item-image-block { flex: none; }
  .shoot-image { width: 650px; max-width: none; }
  .shoot-text-1 { width: 100%; font-size: 32px; }
  .shoot-flex-2 { flex-flow: wrap; }
  .main-radio-text-1 { line-height: 1em; }
  .exit-block { grid-column-gap: 28px; grid-row-gap: 28px; }
  .exit-inner-block { grid-column-gap: 32px; grid-row-gap: 32px; height: auto; padding: 20px; }
  .exit-text-1 { font-size: 20px; line-height: 1.3em; }
  .exit-menu-block { grid-column-gap: 4px; grid-row-gap: 4px; flex-flow: column; position: static; bottom: 0; }
  .main-menu-mobile-block { grid-column-gap: 18px; grid-row-gap: 18px; flex-flow: column; justify-content: flex-start; align-items: center; width: 100%; display: flex; position: relative; transform: translate(0, -20%); }
  .main-menu-mobile-text { font-family: 'DM Mono', monospace; color: #fff; font-size: 20px; line-height: 1em; text-transform: uppercase; margin-bottom: 20px; }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer { max-width: none; }
  .hero-heading { max-width: 260px; font-size: 20px; }
  .about-image { width: 250px; height: 300px; }
  .about-image-block { padding: 24px; }
  .main-room-image-item._1 { width: 78px; transform: translate(0, 22px); }
  .main-room-image-item._2 { width: 68px; transform: translate(0, 22px); }
  .main-room-image-item._4 { width: 96px; }
  .main-room-image-item._5 { width: 108px; }
  .main-room-image-wrapper { top: 35.7vh; right: -.6vw; }
  .main-room-image-wrapper._2 { width: 144.406px; top: 0%; left: 7%; }
  .main-room-image-wrapper._2.left { top: 30%; right: 32%; }
  .main-room-image-wrapper._3 { width: 254px; top: 5%; bottom: auto; }
  .main-room-image-wrapper._3.left { top: 2%; right: -2%; }
  .main-room-image-wrapper._3.right { top: 5%; left: 0%; }
  .main-room-image-wrapper._4 { width: 116px; bottom: 0%; left: 5%; }
  .main-room-image-wrapper._1 { width: 144.406px; right: 10%; }
  .main-room-image-wrapper._1.right { bottom: 32%; }
  .main-room-image-wrapper._5 { bottom: 20%; right: 8%; }
  .main-point-1 { padding: 5px; }
  .main-inner-point { width: 6px; height: 6px; }
  .button-primary-text { margin-left: 10px; margin-right: 10px; }
  .project-image-block { padding: 6px; }
  .button-secondary.main { font-size: 14px; }
  .main-arrow-icon { width: 90px; }
  .project-icon-block { width: 50px; height: 40px; }
  .project-lottie-animation { width: 90px; height: 90px; }
  .project-flex-1 { grid-column-gap: 26px; grid-row-gap: 26px; }
  .project-item-block { grid-column-gap: 26px; grid-row-gap: 26px; flex-flow: column; }
  .project-item-image { width: 240px; height: 190px; }
  .project-item-text-3 { text-align: center; width: 250px; }
  .project-item-inner-block { justify-content: center; align-items: center; }
  .highlight-background-icon { transform: translate(-53%); }
  .highlight-inner-block { width: 2000px; height: 2000px; }
  .highlight-item-block { justify-content: space-between; align-items: center; width: 17%; display: flex; }
  .highlight-item-text { max-width: 222px; font-size: 16px; }
  .highlight-item-image { width: 60px; height: 60px; }
  .highlight-item-image-block { padding: 10px; }
  .shoot-inner-block { grid-column-gap: 36px; grid-row-gap: 36px; }
  .shoot-text-1 { width: 390px; }
  .shoot-flex-2 { grid-column-gap: 12px; grid-row-gap: 12px; }
  .shoot-item-image { width: 60px; height: 60px; }
  .shoot-image-block { padding: 10px; }
  .main-radio-block { right: 0; }
  .exit-inner-block { grid-column-gap: 44px; grid-row-gap: 44px; height: 530px; padding-left: 40px; padding-right: 40px; }
  .exit-text-1 { font-size: 32px; }
  .exit-flex-1 { grid-column-gap: 16px; grid-row-gap: 16px; flex-flow: column; }
  .exit-menu-block { grid-column-gap: 0px; grid-row-gap: 0px; justify-content: space-between; width: 100%; }
}

/* ===========================================================================
   6. Resting states and the frame wipe
   Appended after the original layer on purpose: these are the values IX2 wrote
   into the live DOM as inline styles at load, which the fragment generator
   stripped because they are runtime state rather than design. home.js drives
   them from here on; this is only what they must be before it runs, so nothing
   flashes.
   ========================================================================= */

.main-room-container { opacity: 0; }
.main-room-background { transform: translate3d(0, -80vh, 0) scale(.3); will-change: transform; }

.project-background-image._2,
.project-background-image._3,
.project-background-image._4,
.project-background-image._5,
.project-background-image._6,
.project-background-image._7 { opacity: 0; }

.project-item-block._2,
.project-item-block._3,
.project-item-block._4,
.project-item-block._5,
.project-item-block._6,
.project-item-block._7 { transform: translate3d(0, 100vh, 0); }

.highlight-item-image-block._2,
.highlight-item-image-block._3,
.highlight-item-image-block._4,
.highlight-item-image-block._5,
.highlight-item-image-block._6,
.highlight-item-image-block._7 { opacity: 0; }

.highlight-inner-block { transform: rotate(36deg); }

/* The travelling logo. Nothing animates it: it is at 75px from the top of the
   thing it belongs to, and the page scrolling is what carries it up. */
.image-2 { z-index: 26; pointer-events: none; }
.rooma-scene .image-2 { z-index: 4; }

/* The load flash is gone, so the frame has no hidden state to hold and no
   wipe to run: those belonged to the sequence that used to cover it. */

/* toaiviewportfit-1.0.0.js: real viewport units on a landscape phone. */
html.dvh-fit .portal-scene,
html.dvh-fit .rooma-scene,
html.dvh-fit .main-room-wrapper,
html.dvh-fit .main-room-row,
html.dvh-fit .main-room-section { height: 100dvh; min-height: 100dvh; }

/* ===========================================================================
   7. The new ending, 2026-09-18
   Amir: the page stops at the control room. The office room is an overlay the
   centre hotspot opens, the three words are the navigation, and the push in
   clip plays on the way to all three destinations.
   ========================================================================= */

/* Block A is the last block: 100vh for it to rise in carrying the logo, then
   66vh of sticky travel for the reveal (video 0 to 33, hotspots 33 to 66).
   Nothing is below it, so the document bottoms out with the room fully in. */
.rooma-block { height: 166vh; }

/* ---- the office overlay ------------------------------------------------- */
.office-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 400000;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: #070707;
}
.office-overlay.is-open { display: block; }
/* the original's lockScroll: the page underneath does not move while the
   office is up, and the scroll position is restored on close */
html.office-open, html.office-open body { overflow: hidden; }
/* The office is a full screen overlay at z 400000, so it covers the frame and
   with it the menu button. Amir wants the menu everywhere, so the frame goes
   over the office while it is open. It has to be the frame itself and not the
   tools inside it: .frame carries a z-index, so it is a stacking context and
   nothing inside it can climb out. The original put its border frame over the
   main room too, so this is also what the live page does. */
html.office-open .frame { z-index: 400001; }

/* ---- the push in clip --------------------------------------------------- */
.toai-transition {
  display: none;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 500000;
  background: #07070f;
}
.toai-transition video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;   /* match the room video's crop anchor */
}

/* ---- the words are the navigation --------------------------------------- */
/* Always on, never hover only: most visitors will not go hunting for a dot.
   Same plate, same type, same colours as the original label. */
.toai-hotspot-label {
  pointer-events: auto !important;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.toai-hotspot:hover .toai-hotspot-label,
.toai-hotspot:focus-visible .toai-hotspot-label,
.toai-hotspot-label:hover {
  color: #00f5ff !important;
  border-color: #00f5ff !important;
  box-shadow: 0 0 22px rgba(0, 245, 255, .35);
}
.toai-hotspot:focus-visible {
  outline: 2px solid #00f5ff;
  outline-offset: 6px;
}
/* The centre one is the primary action, so it reads a shade louder. */
.toai-hotspot-2 .toai-hotspot-label {
  font-size: 11px !important;
  padding: 7px 12px !important;
  border-color: rgba(0, 245, 255, .85) !important;
  background: rgba(0, 20, 26, .85) !important;
}

/* ---- the "?" help button is gone ---------------------------------------- */
/* It belonged to the old splash. Navigation is the three words now. The
   button and its panel are no longer created by site.js; this is the belt to
   that braces for any page that still has one in the DOM. */
.toai-help-btn,
.toai-help-panel { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .rooma-block { height: 100vh; }
  .office-overlay.is-open { position: fixed; }
}

/* ===========================================================================
   9. The prop buttons' resting state, last word
   .button-primary.main._2 in the original layer sets width:auto at the same
   specificity, and the original layer is spliced above this file's own, so the
   closed state has to be stated after it. Closed is the live resting state:
   width 0%, the vertical padding kept, overflow hidden. Collapsing it with
   max-width instead cost the label its line box, which made the button 12px
   shorter than the live one and lifted everything under it by 8px inside the
   centred wrapper.
   ========================================================================= */

.main-room-image-wrapper .button-primary.main,
.main-room-image-wrapper .button-primary.main._2 {
  width: 0%;
  /* The label's line box stops counting toward the height once the button is
     zero wide, so the closed button measured 12px shorter than the live one
     and lifted the prop under it by 8px inside the centred wrapper. This is
     that line box, stated: the 10px padding top and bottom plus one line. */
  min-height: calc(1em + 20px);
  opacity: 0;
  overflow: hidden;
  transition: width .4s cubic-bezier(.645, .045, .355, 1), opacity .3s ease, background-color .3s ease;
}
.main-room-image-wrapper:hover .button-primary.main,
.main-room-image-wrapper:hover .button-primary.main._2,
.main-room-image-wrapper:focus-within .button-primary.main,
.main-room-image-wrapper:focus-within .button-primary.main._2 {
  width: 100%;
  opacity: 1;
}

/* ===========================================================================
   10. The captions, last word
   Amir: bigger, dead centre, no blurry box. The original layer is spliced
   above this file's own, so .about-content-block's plate and .about-text._N's
   16px both have to be answered after it.
   ========================================================================= */

.about-content-block {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: min(22ch, calc(100% - 96px));
  height: auto;
  padding: 0;
  background: none;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
}
.portal-scene.captions-on .about-content-block { opacity: 1; }

/* the eight corner ticks belonged to the plate that is gone */
.about-content-block .about-horizontal-line,
.about-content-block .about-vertical-line { display: none; }

.about-text-wrapper { width: 100%; margin: 0; padding: 0; }

.about-content-block .about-text,
.about-content-block .about-text._1,
.about-content-block .about-text._2,
.about-content-block .about-text._3,
.about-content-block .about-text._4 {
  width: 100%;
  font-family: var(--font-ui);
  font-size: clamp(18px, 2.4vw, 36px);
  line-height: 1.12;
  letter-spacing: .01em;
  font-weight: 500;
  text-transform: uppercase;
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .6);
  overflow: visible;
}
.about-content-block .about-text._1,
.about-content-block .about-text._2,
.about-content-block .about-text._4 { position: absolute; }
.about-content-block .about-text._3 { position: static; }

.about-text .w { display: inline-block; }
.about-text .ch { display: inline-block; opacity: 0; will-change: opacity; }

@media (max-width: 479px) {
  .about-content-block { width: calc(100% - 56px); }
}

/* ---------------------------------------------------------------------------
   The four lines share one cell.
   `ch` resolves against the element's OWN font size, and the block inherits
   14px from the body, so a 22ch width on it came out 185px and every line
   broke into one word per row. The measure belongs on the type. The four lines
   are stacked in a single grid cell and each one centres itself in it, so a
   two line caption and a four line caption are both centred on the same point
   and the block's height is whichever is tallest.
--------------------------------------------------------------------------- */

.about-content-block {
  width: calc(100% - 96px);
  max-width: 1200px;
}

.about-text-wrapper {
  display: grid;
  place-items: center;
  width: 100%;
}

.about-content-block .about-text,
.about-content-block .about-text._1,
.about-content-block .about-text._2,
.about-content-block .about-text._3,
.about-content-block .about-text._4 {
  grid-area: 1 / 1;
  position: relative;
  width: auto;
  max-width: 22ch;
  margin: 0 auto;
}

@media (max-width: 479px) {
  .about-content-block { width: calc(100% - 56px); }
  .about-content-block .about-text { max-width: 16ch; }
}

/* ===========================================================================
   11. The arrival
   Amir, 2026-09-18: nothing black and no logo between the film's arrival and
   the control room. The room is the portal scene's top layer now, and the
   document ends when its three words are up.

   Amir, 2026-09-24: the footage after the doorway plays at ten times the
   pace, so the flight to the door is 102vh instead of 130 and the whole block
   moves up with it. Nothing after the door changed: the film to p 1.0 at
   1362vh (its origin still sits 60vh early, see FILM_OFFSET), 33vh for the
   words, 7vh of rest. 1402vh of sticky travel, so a 1502vh block. Asserted
   by qa/home/arrival.mjs and qa/home/verify.mjs.
   ========================================================================= */

.portal-block { height: 1502vh; }

.rooma-layer {
  position: absolute;
  inset: 0;
  z-index: 21;          /* over the film (3), the veil (8) and the H1's box (20) */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.rooma-layer.is-on { visibility: visible; }
.rooma-layer.is-live { pointer-events: auto; }
.rooma-layer .toai-outer { opacity: 1; }

/* The film's plane is a CENTRED cover of this same frame with three per mille
   of overscan (room.js, OVER = 1.003). The original framed the room from the
   top; centred and scaled the same way, the dissolve has nothing to shift. */
.rooma-layer .toai-video-bg img.toai-poster,
.rooma-layer .toai-video-bg video {
  object-position: 50% 50%;
  transform: scale(1.003);
  transform-origin: 50% 50%;
}

/* On a portrait phone the original squashed the room into a 300vw box
   (object-fit: fill), which no aspect correct plane can land on. The box is a
   true 16:9 at the scene's height instead, the picture fills it exactly, and
   the hotspots, placed in percent of the box, stay on the same screens. */
@media (orientation: portrait) and (max-width: 767px) {
  .rooma-layer .toai-inner { width: auto; height: 100%; aspect-ratio: 16 / 9; }
  .rooma-layer .toai-video-bg,
  .rooma-layer .toai-hotspot-wrap { width: 100%; }
  .rooma-layer .toai-video-bg video,
  .rooma-layer .toai-video-bg img.toai-poster { width: 100%; height: 100%; object-fit: cover; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-block { height: auto; }
  .rooma-layer { position: relative; height: 100vh; opacity: 1 !important; visibility: visible; pointer-events: auto; }
}

/* ===========================================================================
   12. The office prop labels
   Amir, 2026-09-18: "the labels on the widgets are way too long and they are
   not placed properly". The original opened each label on hover to the full
   width of its wrapper (400px of bar over the photo collage, 300px over the
   folder) and put the collage's above it. Now: one word, a plate the size of
   the word, always on so the room reads as navigable before anyone hovers,
   and anchored centred under the picture it names. home.js measures each
   prop's visible pictures (the collage's box is 82x102 while its photos cover
   more than 300px) and writes the anchor into --lab-x and --lab-y.
   ========================================================================= */

.main-room-image-wrapper .button-primary.main,
.main-room-image-wrapper .button-primary.main._2 {
  position: absolute;
  left: var(--lab-x, 50%);
  top: var(--lab-y, 100%);
  bottom: auto;
  transform: translateX(-50%);
  width: auto;
  min-height: 0;
  opacity: 1;
  overflow: visible;
  white-space: nowrap;
  z-index: 3;
  transition: background-color .3s ease, box-shadow .3s ease;
}
.main-room-image-wrapper:hover .button-primary.main,
.main-room-image-wrapper:hover .button-primary.main._2,
.main-room-image-wrapper:focus-within .button-primary.main,
.main-room-image-wrapper:focus-within .button-primary.main._2 {
  width: auto;
  opacity: 1;
  background-color: rgba(0, 200, 255, .66);
  box-shadow: 0 0 18px rgba(0, 200, 255, .35);
}

/* ===========================================================================
   13. The in-room contact form, retired
   Amir, 2026-09-18: "the contact us page from the widgets is ugly now, just
   use our main one". Every Contact control in the office now goes to /welcome.
   The form stays in the document, hidden, because its header carries the
   page's one H2 (START A NEW MISSION), which the SEO gate holds to the
   baseline; the behind the scenes wall around it is unchanged.
   ========================================================================= */
.bts-section #contact { display: none; }

/* ===========================================================================
   14. The office's transport
   Amir, 2026-09-18: "when the buttons are clicked in discover more section the
   rooms need to transport like the current site". On the original every room
   button closes the frame's black bars to the middle of the screen, moves the
   room behind them and opens them again (lists a-23 to a-44, timed live). The
   slim frame has no bars, so the office carries its own pair: black halves
   that meet in the middle on the frame's cyan hairline, off screen at rest.
   ========================================================================= */
.office-shutter {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  overflow: hidden;
}
.office-shutter-half {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.5%;          /* a hair of overlap, so the seam never lets light through */
  background: #070707;
  transition: transform 1000ms cubic-bezier(.645, .045, .355, 1);
  will-change: transform;
}
.office-shutter-top { top: 0; transform: translateY(-101%); border-bottom: 1px solid rgba(35, 186, 231, .55); }
.office-shutter-bottom { bottom: 0; transform: translateY(101%); border-top: 1px solid rgba(35, 186, 231, .55); }
.office-shutter.is-shut .office-shutter-half { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .office-shutter { display: none; } }

/* ===========================================================================
   15. The shoot panel is the blue screen studio
   Amir, 2026-09-18: "Dare to shoot needs to become the scene on the current
   site with the 4 anime girls in the blue screen room, add the current
   content into that concept". Amir, 2026-09-22: "how can we make the shoot
   page with the blue screen and anime girls cooler".

   The room is the original about scene's background (SNewMainPageBGTOAI4k, a
   studio whose middle is a blue screen stage with a neon frame around it and
   a lit grid floor in front of it). Three things changed in the second pass:

     the key is real    the cast lost the original's frosted card, stopped
                        being cropped, and now stands INSIDE the volume, feet
                        on the grid floor, with the picked backdrop's own
                        colour washing over them and over the floor
     four on the stage  they still walk on a second apart, but all four hold
                        at the end at four depths, and one of them coming
                        forward raises her own line in the plate
     the shutter        a trigger that flashes the room, composes the frame
                        with a TOAI MEDIA slate and pins the take to the wall

   Every place on the picture is a percentage of the stage, measured off the
   painting at 1376x768: the blue wall is x 39.2 to 61.0, y 34.6 to 58.0; the
   grid floor runs from the foot of the wall to y 66 and widens toward the
   viewer; the neon frame's inner edge is never tighter than x 37.8 at the
   heights the cast occupies.
   ========================================================================= */
.shoot-studio { background: #070707; }

/* the stage covers the panel at the picture's own aspect, so a place on the
   picture (the blue screen) is a fixed percentage of the stage */
.studio-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, calc(100vh * 1376 / 768));
  aspect-ratio: 1376 / 768;
  transform: translate(-50%, -50%);
  z-index: 0;
}
.studio-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* The blue wall, found by colour rather than by eye: the flat cyan runs
   x 541 to 835 and y 265 to 446 of the 1376x768 painting, and the row below
   446 is where the floor's grid lines start. The old box was pulled in a
   little and left a blue rim around the keyed plate; a real feed fills the
   wall it is playing on. */
.studio-screen {
  position: absolute;
  left: 39.32%;
  top: 34.51%;
  width: 21.44%;
  height: 23.69%;
  overflow: hidden;
}
/* A pick is a feed change, not a crossfade: the new plate arrives soft and
   hot and resolves over the same 600ms the scan bar takes to travel the wall.
   The few pixels of drift against the pointer are on the backdrop only, so
   the wall moves and the people standing in front of it do not. */
.studio-screen .shoot-background-image,
.studio-screen .shoot-background-image._1 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: blur(7px) brightness(1.45);
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.06);
  transition: opacity .6s linear, filter .6s cubic-bezier(.22, 1, .36, 1), transform .45s ease-out;
}
.studio-screen .shoot-background-image.is-on { opacity: 1; filter: none; }

/* the scan: one bright bar down the wall while the feed resolves */
.studio-scan {
  position: absolute;
  inset: -20% 0 auto 0;
  height: 42%;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(180, 240, 255, 0) 0%,
    rgba(180, 240, 255, .40) 42%,
    rgba(240, 253, 255, .92) 50%,
    rgba(180, 240, 255, .40) 58%,
    rgba(180, 240, 255, 0) 100%);
}
.studio-screen.is-keying .studio-scan { animation: studioScan 600ms cubic-bezier(.33, 0, .2, 1); }
@keyframes studioScan {
  0% { opacity: 0; transform: translateY(0); }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { opacity: 0; transform: translateY(290%); }
}

/* ---- the bounce -----------------------------------------------------------
   The chosen backdrop is sampled down to one pixel and that colour is washed
   back over the people in front of it and over the floor they stand on. It is
   light, so it screens rather than paints, and it is kept low: this is the
   thing that sells the key, and it stops selling it the moment it is seen. */
.studio-spill {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity .6s ease, background-color .6s ease;
  background-color: rgb(var(--spill, 120 140 170));
}
.studio-spill._floor {
  left: 35.5%;
  top: 56.5%;
  width: 29%;
  height: 11%;
  -webkit-mask-image: radial-gradient(ellipse 72% 130% at 50% 0%, #000 0%, rgba(0, 0, 0, .5) 46%, transparent 80%);
  mask-image: radial-gradient(ellipse 72% 130% at 50% 0%, #000 0%, rgba(0, 0, 0, .5) 46%, transparent 80%);
}
.studio-cast.is-spilling .studio-spill._cast { opacity: .22; }
.studio-stage.is-spilling .studio-spill._floor { opacity: .34; }

/* ---- the cast -------------------------------------------------------------
   The layer carries the stage's own box, so a percentage inside it is the
   same place on the picture. It is NOT inside .studio-stage, because the
   stage is aria-hidden scenery and these four are reachable controls. */
.studio-cast {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, calc(100vh * 1376 / 768));
  aspect-ratio: 1376 / 768;
  transform: translate(-50%, -50%);
  z-index: 2;
  pointer-events: none;
}
/* the volume: the wall's width opened out to the floor's, from just under the
   wall's top edge down to the floor's front edge */
.studio-volume {
  position: absolute;
  left: 37.8%;
  top: 35.8%;
  width: 24.4%;
  height: 29.9%;
}
.studio-spill._cast {
  left: 37.8%;
  top: 35.8%;
  width: 24.4%;
  height: 29.9%;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .72) 46%, transparent 94%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .72) 46%, transparent 94%);
}

/* the mark: where she stands and how big she is there. --gx is her place
   across the volume, --gy how far her feet are up the floor (further up is
   further back), --gh her picture's height, --cx the middle of HER inside a
   1024 wide picture, --foot the empty share of the picture below her feet,
   both read off the alpha of the masters. */
.studio-mark {
  position: absolute;
  left: var(--gx);
  bottom: calc(var(--gy) - var(--foot) * var(--gh));
  height: var(--gh);
  width: auto;
  aspect-ratio: 1024 / 768;
  z-index: var(--gz, 1);
  transform: translateX(calc(-1 * var(--cx)));
  pointer-events: auto;
}
/* the cut out, with the original's frosted card gone: no border, no
   background, no blur, no padding, and contained rather than cropped */
.studio-volume .about-image-block,
.studio-volume .about-image-block._1,
.studio-volume .about-image-block._2,
.studio-volume .about-image-block._3,
.studio-volume .about-image-block._4 {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  opacity: 0;
  cursor: pointer;
  transform-origin: 50% calc((1 - var(--foot)) * 100%);
  transition: transform .45s cubic-bezier(.215, .61, .355, 1), filter .45s ease, opacity .3s ease;
  will-change: transform, opacity;
}
.studio-volume .about-image-block.is-in { opacity: 1; transform: none; }
/* the masters are cut off with a straight edge at the thigh, which is the one
   thing left that reads as a sticker once the card is gone: the last few per
   cent of her own height fades into the floor she is standing on, and the
   composed frame fades it the same way */
.studio-volume .about-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  -webkit-mask-image: linear-gradient(180deg, #000 calc((0.94 - var(--foot)) * 100%), transparent calc((1 - var(--foot)) * 100%));
  mask-image: linear-gradient(180deg, #000 calc((0.94 - var(--foot)) * 100%), transparent calc((1 - var(--foot)) * 100%));
  animation: studioDrift 5.4s ease-in-out infinite alternate;
  animation-delay: var(--drift, 0s);
}
@keyframes studioDrift {
  from { transform: translate3d(0, -3px, 0); }
  to { transform: translate3d(0, 3px, 0); }
}

/* one forward, the rest back: hers is the only line in the plate while she
   holds it, and leaving puts the group back with the fourth line */
.studio-volume .about-image-block.is-in.is-lead {
  transform: scale(1.085);
  filter: brightness(1.16) saturate(1.06) drop-shadow(0 6px 18px rgba(0, 0, 0, .45));
  z-index: 9;
}
.studio-volume .about-image-block.is-in.is-back {
  transform: scale(.955);
  filter: brightness(.52) saturate(.72) blur(.4px);
}
.studio-volume .about-image-block:focus { outline: none; }
.studio-volume .about-image-block:focus-visible {
  outline: 1px solid rgba(35, 186, 231, .95);
  outline-offset: 4px;
}

.shoot-studio .shoot-blur { z-index: 1; height: 38%; }

/* the flash: the room's own lights going off, and the bloom they leave */
.studio-flash {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  background: #fff;
}
.studio-bloom {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 34% 40% at 50% 46%, rgba(190, 245, 255, .95) 0%, rgba(255, 255, 255, .5) 40%, rgba(255, 255, 255, 0) 72%);
}
.shoot-studio.is-flashing .studio-flash { animation: studioFlash 900ms cubic-bezier(.16, 1, .3, 1); }
@keyframes studioFlash {
  0% { opacity: 0; }
  7% { opacity: .94; }
  26% { opacity: .30; }
  100% { opacity: 0; }
}

/* the plate and its four lines, in the original about styling */
.studio-plate {
  position: absolute;
  left: var(--toai-section-pad);
  right: var(--toai-section-pad);
  bottom: 20px;
  z-index: 3;
  padding: 24px 40px;
  background-color: #0707070a;
  border: 1px solid #ffffff1c;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.studio-caption-wrap { display: grid; place-items: center; width: 100%; }
.studio-caption {
  grid-area: 1 / 1;
  font-family: 'DM Mono', monospace;
  color: #fff;
  font-size: 16px;
  line-height: 1.4em;
  text-align: center;
  text-transform: uppercase;
}
.studio-caption .ch { opacity: 0; }

/* the shoot's own controls, around the cast rather than over it */
.shoot-studio .shoot-container { z-index: 4; pointer-events: none; }
.shoot-studio .shoot-block { justify-content: flex-start; padding-bottom: 0; pointer-events: none; }
.shoot-studio .shoot-inner-block,
.shoot-studio .shoot-flex-1 { pointer-events: none; }
.shoot-studio .shoot-flex-1 a,
.shoot-studio .shoot-flex-1 button,
.shoot-studio .shoot-flex-2,
.shoot-studio .studio-takes,
.shoot-studio .studio-trigger { pointer-events: auto; }
.shoot-studio button.button-primary.shoot {
  border-top: 0;
  border-bottom: 0;
  cursor: pointer;
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  line-height: 1em;
  text-transform: uppercase;
}
.shoot-studio button.button-primary.shoot:focus { outline: none; }
.shoot-studio button.button-primary.shoot:focus-visible { outline: 1px solid rgba(35, 186, 231, .95); outline-offset: 3px; }
.shoot-studio .shoot-text-1 { width: auto; font-size: 40px; margin-top: 8px; text-shadow: 0 2px 18px rgba(0, 0, 0, .7); }
.shoot-studio .shoot-flex-2 {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
  grid-row-gap: 14px;
}
.shoot-studio .shoot-image-block { padding: 10px 10px 8px; flex: 0 0 auto; }
.shoot-studio .shoot-item-image { width: 64px; height: 64px; }
/* picking one is no longer a guess: each thumbnail carries the name of what
   it actually shows, and that name is what the slate prints */
.shoot-item-name {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .12em;
  line-height: 1.2;
  color: #ffffffb8;
  text-align: center;
  margin-top: 6px;
  white-space: nowrap;
}
.shoot-studio .shoot-image-block.is-picked .shoot-item-name { color: #fff; }
.shoot-studio .shoot-image-block.is-picked .shoot-image-horizontal-line,
.shoot-studio .shoot-image-block.is-picked .shoot-image-vertical-line { opacity: 1; }
.shoot-studio .shoot-image-block:focus { outline: none; }
.shoot-studio .shoot-image-block:focus-visible { outline: 1px solid rgba(35, 186, 231, .95); outline-offset: 3px; }

/* ---- the trigger ----------------------------------------------------------
   The heading says CREATE YOUR OWN SHOOT, so there is something to press. */
.studio-trigger {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  display: flex;
  flex-flow: column;
  align-items: center;
  grid-row-gap: 8px;
}
.studio-shutter {
  width: 58px;
  height: 58px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(7, 7, 7, .35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  position: relative;
  cursor: pointer;
  display: block;
  transition: transform .2s ease;
}
.studio-shutter-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid #ffffffd9;
}
.studio-shutter-dot {
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: #fff;
  transition: background-color .2s ease, transform .2s ease;
}
.studio-shutter:hover .studio-shutter-dot,
.studio-shutter:focus-visible .studio-shutter-dot { background: #23bae7; }
.studio-shutter:active { transform: scale(.94); }
.studio-shutter:focus { outline: none; }
.studio-shutter:focus-visible { outline: 1px solid rgba(35, 186, 231, .95); outline-offset: 4px; }
.studio-shutter[disabled] { opacity: .45; cursor: default; }
/* if the browser cannot give us a canvas the trigger and the save take
   themselves off, and the panel is what it was without them */
.studio-trigger[hidden],
.shoot-studio button.button-primary.shoot[hidden] { display: none; }
.studio-shutter-label {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .28em;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
}

/* ---- the wall of takes ----------------------------------------------------
   Every saved frame carries the TOAI MEDIA slate, so the takes read as the
   studio's own output. Four are pinned, newest first, and the way on from a
   frame you like is the form. */
.studio-takes {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  grid-row-gap: 8px;
  max-width: 152px;
}
.studio-takes-head,
.studio-takes-link {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .24em;
  color: #ffffffb8;
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
}
.studio-takes-link { color: #23bae7; text-decoration: none; border-bottom: 1px solid rgba(35, 186, 231, .5); padding-bottom: 2px; }
.studio-takes-link:hover, .studio-takes-link:focus-visible { color: #fff; border-bottom-color: #fff; }
.studio-takes-list { display: flex; flex-flow: column; grid-row-gap: 8px; }
.studio-takes-list:empty { display: none; }
.studio-take {
  display: block;
  width: 140px;
  border: 1px solid #ffffff2e;
  background: #0707074d;
  padding: 3px;
  animation: studioPin 420ms cubic-bezier(.215, .61, .355, 1);
}
.studio-take img { display: block; width: 100%; height: auto; }
@keyframes studioPin {
  from { opacity: 0; transform: translateY(-8px) scale(.94); }
  to { opacity: 1; transform: none; }
}

@media screen and (max-width: 991px) {
  .studio-plate { bottom: 40px; padding: 20px; }
  .studio-trigger { bottom: 46px; }
}
@media screen and (max-width: 767px) {
  /* four across a 390 phone: the same four depths, spread wider and pushed
     further apart front to back so the heads never collide */
  .shoot-studio .shoot-text-1 { font-size: 24px; }
  /* the wall of takes travels to the top of the panel, above the volume: the
     name and the way on share one line and the strip sits under them, which
     is 60px of height instead of 100 and keeps the cast's heads clear */
  .studio-takes {
    position: static;
    transform: none;
    align-self: center;
    justify-content: center;
    justify-items: center;
    display: grid;
    grid-template-columns: auto auto;
    grid-column-gap: 16px;
    grid-row-gap: 6px;
    margin-top: 10px;
    max-width: none;
  }
  .studio-takes-head { grid-area: 1 / 1; }
  .studio-takes-link { grid-area: 1 / 2; font-size: 9px; }
  .studio-takes-list { grid-area: 2 / 1 / 3 / 3; flex-flow: row nowrap; grid-column-gap: 5px; }
  .studio-take { width: 64px; padding: 2px; }
  .studio-trigger { bottom: 168px; }
  .studio-shutter { width: 48px; height: 48px; }
  .shoot-studio .shoot-flex-2 {
    top: auto;
    bottom: 108px;
    right: 50%;
    transform: translateX(50%);
    flex-flow: row nowrap;
    grid-column-gap: 8px;
  }
  .shoot-studio .shoot-image-block { padding: 5px 5px 4px; }
  .shoot-studio .shoot-item-image { width: 40px; height: 40px; flex: none; max-width: none; }
  .shoot-item-name { font-size: 8px; letter-spacing: .06em; margin-top: 4px; }
}
@media screen and (max-width: 479px) {
  .studio-plate { padding: 16px 12px; }
  .studio-caption { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-volume .about-image-block { opacity: 1; transform: none; }
  .studio-volume .about-image { animation: none; }
  .studio-caption._4 .ch { opacity: 1; }
  .studio-take { animation: none; }
  .shoot-studio.is-flashing .studio-flash { animation: none; }
}

/* ===========================================================================
   16. The captions, legible
   Amir, 2026-09-18: "the text on the first scroll animation is not visible".
   Measured on the draft: every line was painted, on top, fully opaque; it was
   white type at 500 weight sitting dead centre on the brightest thing in the
   flight, the portal, behind a single soft shadow. No box and no blur: a
   tight dark edge for the letterforms and a wide one for the glow behind
   them, and the heavier cut of the same face.
   ========================================================================= */
.about-content-block .about-text,
.about-content-block .about-text._1,
.about-content-block .about-text._2,
.about-content-block .about-text._3,
.about-content-block .about-text._4 {
  font-weight: 700;
  text-shadow: 0 0 2px rgba(0, 0, 0, .9), 0 0 6px rgba(0, 0, 0, .6), 0 2px 18px rgba(0, 0, 0, .75);
}

/* ===========================================================================
   17. Touch targets
   Amir, 2026-09-18: "optimize mobile". The room's words, the frame's two
   links and the office's buttons were 16 to 34px tall, under the 44px a thumb
   needs. The plates grow, not the type: padding and a minimum height, with
   the negative margins that keep the frame's links where they were drawn.
   ========================================================================= */
@media (pointer: coarse), (max-width: 767px) {
  .toai-hotspot { padding: 12px; }
  .toai-hotspot-label {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .frame-brand,
  .frame-contact { padding: 12px 10px; margin: -12px -10px; }

  .main-room-image-wrapper .button-primary.main,
  .main-room-image-wrapper .button-primary.main._2,
  .button-primary.menu-mobile,
  .button-secondary.main,
  .button-secondary.main-mobile,
  .button-tertiary.exit,
  .button-tertiary.shoot,
  .button-primary.shoot {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* ===========================================================================
   18. The portal on a portrait phone
   2026-09-24: the flight covers a portrait phone now instead of sitting in
   a band across the middle of it (home.js, PORTRAIT), so the captions are
   where Amir put them everywhere else, dead centre on the footage (section
   3), and the rule that anchored them under the band is gone.
   ========================================================================= */

/* ===========================================================================
   19. The opening shot
   2026-09-25, CINEMATIC-PLAN item 8 (opening.js): the gate's wait is the
   first scene. The moment the shot starts, #bootCanvas takes the whole
   screen behind the gate's type, Phase A's ring and stroke mark hand over to
   it (the canvas draws the same ring at the same 75px and opens it out to
   hold the mark), and the name, the percent and the word step down under the
   ring by as much as it grew (--open-shift, set by opening.js) over the same
   900ms. Phase A is untouched until then, so a phone that never runs the
   script keeps exactly the gate it had.
   ========================================================================= */
.boot.is-opening .boot-3d {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 1;
  transition: none;
}
.boot.is-opening .boot-ring { opacity: 0; transition: none; }
/* QUIRKS 99: "the cue is held hidden while the boot gate is up and named the
   moment the gate opens". It had come back over the gate (its layer is above
   the gate's), saying SCROLL over a page that cannot be scrolled yet; held
   again here, in the one stylesheet the first paint waits for. */
html.is-loading body.home-page .toai-cue { visibility: hidden !important; }
.boot.is-opening .boot-mark { opacity: 0; transition: opacity .5s ease; }
.boot.is-opening .boot-name,
.boot.is-opening .boot-pct,
.boot.is-opening .boot-word {
  position: relative;
  transform: translateY(var(--open-shift, 0px));
  transition: transform .9s cubic-bezier(.645, .045, .355, 1);
}

/* ===========================================================================
   20. The control room comes alive
   2026-09-25, CINEMATIC-PLAN item 9. Nothing here touches Amir's pictures:
   no overlay, no tint, no grade. The room moves and the words glow.

   The three words breathe: a soft cyan glow behind each dot swells and
   settles over 4.2s, each a third of a breath from the next so the room never
   pulses in step. The original's ping is kept on top of it. Hover or focus
   draws a ring round the dot, which is also the keyboard's focus mark in
   place of the square outline, and lights the word as before; the words stay
   on at all times (QUIRKS 45), so a touch screen loses nothing.
   ========================================================================= */
.toai-hotspot::before,
.toai-hotspot::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  pointer-events: none;
}
.toai-hotspot::before {
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  z-index: 0;
  background: radial-gradient(closest-side, rgba(0, 245, 255, .38), rgba(0, 245, 255, .12) 55%, rgba(0, 245, 255, 0));
  opacity: .7;
}
.toai-hotspot::after {
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  z-index: 3;
  border: 1px solid rgba(0, 245, 255, .95);
  box-shadow: 0 0 14px rgba(0, 245, 255, .45), inset 0 0 10px rgba(0, 245, 255, .22);
  opacity: 0;
  transform: scale(.5);
  transition: opacity .22s ease, transform .38s cubic-bezier(.2, .8, .2, 1);
}
.toai-hotspot:hover::after,
.toai-hotspot:focus-visible::after {
  opacity: 1;
  transform: scale(1);
}
.toai-hotspot:focus-visible { outline: none; }
.toai-hotspot:focus-visible::after { border-width: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .toai-hotspot::before { animation: toaiBreath 4.2s ease-in-out infinite; }
  .toai-hotspot-2::before { animation-delay: -1.4s; }
  .toai-hotspot-3::before { animation-delay: -2.8s; }
}
@keyframes toaiBreath {
  0%, 100% { transform: scale(.7); opacity: .45; }
  50% { transform: scale(1.12); opacity: 1; }
}

/* Room A's depth is home.js's (section 8c): a transform on the room's inner
   box, which the outer box already clips. Nothing to state here but where it
   turns: the middle. */
.rooma-layer .toai-inner { transform-origin: 50% 50%; }

/* Room B's stills push in, slowly, on the view that is showing (home.js
   markShown): 1.0 to 1.06 over 32s, easing out so it settles rather than
   stops, and it starts again each time a view comes back. The still is clipped
   to its own box, so the push stays inside the fade the room's two shadows
   put on its edges. Everywhere, phones included; not under reduced motion. */
.main-room-background { overflow: hidden; }
.main-room-background .main-room-image { transform-origin: 50% 56%; }
@media (prefers-reduced-motion: no-preference) {
  .office-overlay.is-open .main-room-section.is-shown .main-room-background .main-room-image {
    animation: roomPush 32s cubic-bezier(.22, .55, .3, 1) both;
  }
}
@keyframes roomPush {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

/* The radio's card (home.js toggleRadio, the original's a-41 and a-42):
   INVITE opens it and reads CLOSE, the card fades in over 500ms and the vinyl
   rises out of its sleeve. Shut, it is out of the tab order as well as out of
   sight. The vinyl itself is the sound switch now, a button that has to look
   exactly like the picture it wraps. */
.main-radio-block {
  visibility: hidden;
  transition: opacity .5s cubic-bezier(.645, .045, .355, 1), visibility 0s linear .5s;
}
.main-radio-block.radio-open {
  visibility: visible;
  transition: opacity .5s cubic-bezier(.645, .045, .355, 1), visibility 0s;
}
.main-radio-block .main-radio-icon { transition: transform .5s cubic-bezier(.645, .045, .355, 1); }
.main-radio-block.radio-open .main-radio-icon { transform: translateY(-42%); }
.main-room-image-wrapper .button-primary.main .button-primary-text { transition: opacity .5s cubic-bezier(.645, .045, .355, 1); }
.main-room-image-wrapper .button-primary.main.is-open .button-primary-text._1 { opacity: 0; }
.main-room-image-wrapper .button-primary.main.is-open .button-primary-text._2 { opacity: 1; }
/* the sleeve's glass lies over the record; it is a picture, so a click on
   the record is the record's */
.main-radio-blur-block { pointer-events: none; }

/* The control room's credit line (2026-09-25): who the studio is, in words,
   at the foot of the room like a closing credit. It shows with the room and
   takes no clicks. */
.rooma-credit {
  position: absolute;
  left: 50%;
  bottom: calc(46px + env(safe-area-inset-bottom, 0px));
  z-index: 3;
  width: min(760px, calc(100% - 64px));
  margin: 0;
  transform: translateX(-50%);
  color: rgba(242, 242, 245, 0.78);
  font: 400 11px/1.7 'Share Tech Mono', ui-monospace, monospace;
  letter-spacing: 0.14em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.9);
  pointer-events: none;
}

@media (max-width: 767px) {
  .rooma-credit {
    bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    width: calc(100% - 48px);
    font-size: 10px;
    letter-spacing: 0.1em;
  }
}

/* The phone room's edges (2026-09-26, home.js roomEdges): the name of the
   screen off to that side and a chevron leaning toward it, in the words'
   own dress, on the room's edge below the band the three words sit in. They
   take the tap; the room behind them still swipes. */
.room-edge {
  position: absolute;
  top: 64%;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 10px 10px;
  transform: translateY(-50%);
  color: #00f5ff;
  background: rgba(5, 6, 11, 0.8);
  border: 1px solid rgba(0, 245, 255, 0.55);
  font-family: 'Azeret Mono', monospace;
  font-size: 9px;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.room-edge[hidden] {
  display: none;
}

.room-edge--prev {
  left: 0;
  padding-left: calc(8px + env(safe-area-inset-left, 0px));
  border-left: 0;
  border-radius: 0 3px 3px 0;
}

.room-edge--next {
  right: 0;
  flex-direction: row-reverse;
  padding-right: calc(8px + env(safe-area-inset-right, 0px));
  border-right: 0;
  border-radius: 3px 0 0 3px;
}

.room-edge-chev {
  flex: none;
  width: 8px;
  height: 8px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
}

.room-edge--next .room-edge-chev {
  transform: rotate(45deg);
  animation: roomEdgeNext 1.6s ease-in-out infinite;
}

.room-edge--prev .room-edge-chev {
  transform: rotate(-135deg);
  animation: roomEdgePrev 1.6s ease-in-out infinite;
}

.room-edge-name {
  color: #fff;
}

@keyframes roomEdgeNext {
  0%, 100% { translate: 0 0; }
  50% { translate: 4px 0; }
}

@keyframes roomEdgePrev {
  0%, 100% { translate: 0 0; }
  50% { translate: -4px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .room-edge-chev {
    animation: none !important;
  }
}

/* BACK TO THE SCREENS (Amir, 2026-10-01; home.js glides the page up to card
   01). Under the brand mark, top left, where the three words, the edges, the
   credit, the cue and the menu never reach, in the words' own dress, with a
   chevron that points the way it goes. It comes up with the words. */
.room-back {
  position: absolute;
  top: calc(64px + env(safe-area-inset-top, 0px));
  left: calc(30px + env(safe-area-inset-left, 0px));
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 7px 12px;
  color: #fff;
  background: rgba(5, 6, 11, 0.8);
  border: 1px solid rgba(0, 245, 255, 0.55);
  border-radius: 3px;
  font-family: 'Azeret Mono', monospace;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.rooma-layer.is-live .room-back {
  opacity: 1;
  pointer-events: auto;
}
.room-back-chev {
  flex: none;
  width: 7px;
  height: 7px;
  border-top: 1.5px solid #00f5ff;
  border-left: 1.5px solid #00f5ff;
  transform: translateY(2px) rotate(45deg);
}
.room-back:hover,
.room-back:focus-visible {
  color: #00f5ff;
  border-color: #00f5ff;
  box-shadow: 0 0 22px rgba(0, 245, 255, .35);
}
.room-back:focus-visible {
  outline: 2px solid #00f5ff;
  outline-offset: 4px;
}
/* the tap is taken while a landed room's film finishes loading (home.js) */
.room-back[aria-busy="true"] {
  color: #00f5ff;
  border-color: #00f5ff;
}
.room-back[aria-busy="true"] .room-back-chev {
  animation: toaiRoomBackWait .7s ease-in-out infinite alternate;
}
@keyframes toaiRoomBackWait {
  to { transform: translateY(-2px) rotate(45deg); }
}
@media (max-width: 767px) {
  .room-back {
    top: calc(58px + env(safe-area-inset-top, 0px));
    left: calc(16px + env(safe-area-inset-left, 0px));
    padding: 6px 10px;
    font-size: 9px;
  }
}
@media (pointer: coarse), (max-width: 767px) {
  .room-back { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .room-back { opacity: 1; pointer-events: auto; transition: none; }
}

/* on a phone the credit line sits above the cue's words, not under them */
@media (max-width: 767px) {
  .rooma-credit {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---- the picture as film (2026-09-26) ------------------------------------
   Amir, on my list for "more cinematic and smoother": grain and a vignette
   over the portal and the film, a rack focus as the control room arrives,
   and on a phone a room that keeps breathing.

   The grain went the same day (Amir: "get rid of the grain it ruins the
   high end tech look"). What stays is the vignette, a soft darkening at the
   edges, which comes in with the portal and leaves as the control room
   arrives (html.grain-on, home.js) and takes no click. */
.film-grain {
  position: fixed;
  inset: 0;
  z-index: 22;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.7s ease;
  contain: strict;
}

html.grain-on .film-grain {
  opacity: 1;
}

.film-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.38) 100%);
}

/* The rack focus: until the room is fully up it sits a touch soft and a touch
   close, and the moment it lands the lens pulls it sharp (home.js adds
   .is-focused). */
.rooma-layer .toai-video-bg {
  transition: filter 0.8s cubic-bezier(0.2, 0.7, 0, 1), transform 1.1s cubic-bezier(0.2, 0.7, 0, 1);
}

.rooma-layer:not(.is-focused) .toai-video-bg {
  filter: blur(6px);
  transform: scale(1.025);
}

/* A phone or a tablet gets the settle without the blur (2026-10-03, Amir:
   "phone site is still a bit slow when scrolling"). Its room picture is up to
   three screens wide with a stream playing in it, and blurring that on every
   frame of the arrival, with the film still running underneath, was the most
   its GPU was asked for on the whole page. */
@media (max-width: 767px), (hover: none) and (pointer: coarse) {
  .rooma-layer:not(.is-focused) .toai-video-bg {
    filter: none;
  }
}

/* A phone's room keeps breathing once the look around is done: a slow drift
   of a few pixels and a hair of scale, like a camera held on a shoulder,
   the three words riding with the screens they name. Desktop has the
   pointer's depth instead. */
@media (orientation: portrait) and (max-width: 767px) {
  .rooma-layer.is-drifting .toai-inner {
    animation: toaiRoomDrift 16s ease-in-out infinite alternate;
  }
}

@keyframes toaiRoomDrift {
  0% { transform: translate3d(0, 0, 0) scale(1.02); }
  35% { transform: translate3d(-5px, 3px, 0) scale(1.03); }
  70% { transform: translate3d(4px, -2px, 0) scale(1.025); }
  100% { transform: translate3d(-2px, -4px, 0) scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  .rooma-layer.is-drifting .toai-inner {
    animation: none;
  }

  .rooma-layer:not(.is-focused) .toai-video-bg {
    filter: none;
    transform: none;
  }
}

/* Low power (home.js, section 1): no focus pull blur (the room still
   settles in from a touch close). */
html.low-power .rooma-layer:not(.is-focused) .toai-video-bg {
  filter: none;
}