/* Heart home page in the studio frame (tools/home2.py). The page is the studio's home page file with its own content
   hidden: what stays is the studio frame (left rail, menu, logo, Start a project, Let's connect, the switch).
   The whole heart page runs inside it (full.html in an iframe driven by this page's scroll, see home2.js). */

/* 1. the studio home page's own content is not shown here (it lives on as the "About us" page at /) */
main > div[class*="styles_homeModule__"], main > .pin-spacer, main > .pin-spacer-horizontalScrollTween,
main > article, main > footer, main > div[class*="styles_prefixBg__"],
div[class*="styles_pageLoader__"], .page-transition { display: none !important; }
html, body { background: #000 !important; }

/* 2. the heart page: as tall as the heart page itself, pinned while this page scrolls through it */
main { min-height: var(--hx-h, 300vh); }
#hx-open { position: absolute; top: 0; left: 0; right: 0; z-index: 5; box-sizing: border-box; background: #000;
  height: var(--hx-h, 300vh); padding-top: var(--hx-top, 0px); }
#hx-open .hx-stick { position: sticky; top: var(--hx-top, 0px); overflow: hidden; background: #000;
  height: 100vh; height: calc(100svh - var(--hx-top, 0px)); }
#hx-open iframe { display: block; width: 100%; height: 100%; border: 0; background: #000; }
html.hx-touch:not(.hx-modal) #hx-open iframe { pointer-events: none; }      /* touch: the page scrolls, taps are forwarded (home2.js) */
@media (min-width: 1200px) {           /* desktop: the studio's side rail keeps its column, the heart page starts beside it */
  #hx-open { left: var(--header-width, 60px); }
}
/* the studio logo stays in its usual place, as on every other page (the heart page hides its own logo inside the frame) */
div[class*="styles_cursor__"] { display: none !important; }
/* the rail's section list belongs to the old home page */
/* the side bar's list: the studio's own (old home page sections) gives way to the copy that follows the heart page (home2.js) */
header[class*="styles_header__"] div[class*="styles_header_scrollToList__"]:not(.hx-rail) > * { visibility: hidden; }
header[class*="styles_header__"] div[class*="styles_header_scrollToList__"]:not(.hx-rail):has(+ .hx-rail) { display: none !important; }
header[class*="styles_header__"] div.hx-rail > * { visibility: visible; }

/* intro: the studio frame (rail, logo, corner button, switch) stays back until the heart has locked together: home2.js
   holds it hidden with a <style id="hx-intro"> and removes that when the heart page calls __hxSlam() */
/* the bar, logo, corner button and switch all arrive in the same half second as the heading, not one after another */
header[class*="styles_header__"] { transition: transform .5s cubic-bezier(.22, 1, .36, 1) !important; }
a[class*="styles_mmLogo__"], .mm-sticky.mm-home, nav.mmsw { transition: opacity .5s ease !important; transition-delay: 0s !important; }
.mm-sticky.mm-home { transform: none !important; visibility: visible !important; }
/* the studio page reveals its bar, logo and switch on its own slower timers; here they are simply there once the intro lets go
   (the intro's own <style id="hx-intro">, added later in the page, still holds them back until then) */
header[class*="styles_header__"] { transform: none !important; opacity: 1 !important; visibility: visible !important; }
a[class*="styles_mmLogo__"], a[class*="styles_mmLogo__"] * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
.mm-sticky.mm-home, nav.mmsw { opacity: 1 !important; }
main { background: #000 !important; }
/* the Standard / Interactive switch keeps its corner on this page (it lifted near the bottom, where there is no studio footer to clear) */
nav.mmsw { bottom: 20px !important; top: auto !important; translate: none !important; }

/* Start a project and the switch were held back for about seven seconds: the studio page keeps its scroll "stopped" while it
   finishes loading, and the site-wide rule that hides them behind an open panel uses that same state. Here they only hide
   when the Let's connect panel is really open. */
html.lenis-stopped:not(:has([class*="styles_isOpen__"])) .mm-sticky.mm-home:not(#_):not(#_), html.lenis-stopped:not(:has([class*="styles_isOpen__"])) nav.mmsw:not(#_):not(#_) { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; }

/* the Full Video player (home2.js): the whole screen, above the top bar and the switch */
#hx-reel { position: fixed; inset: 0; z-index: 2147483000; background: #000; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s ease; touch-action: none; }
#hx-reel.is-on { opacity: 1; }
#hx-reel video { display: block; width: 100%; max-width: min(100%, calc(100vh * 16 / 9)); max-height: 100%; background: #000; }
#hx-reel button { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(20, 20, 20, .72); cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; }
#hx-reel button span { position: absolute; left: 13px; right: 13px; top: 50%; height: 2px; margin-top: -1px; background: #fff; border-radius: 2px; transform: rotate(45deg); }
#hx-reel button span + span { transform: rotate(-45deg); }
html.hx-reel-on { overflow: hidden !important; }

/* phones: the switch steps aside while reading down (home2.js) */
nav.mmsw { transition: opacity .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1) !important; }
html.hx-sw-hide nav.mmsw:not(#_):not(#_):not(#_) { opacity: 0 !important; transform: translateY(24px) !important; pointer-events: none !important; }