/* Isolated F0–F3 prototype. The original compiled styles remain untouched. */
html, body { height: auto; min-height: 100%; overflow-x: clip; overflow-y: visible; }
body { overscroll-behavior-y: none; }
#stage { pointer-events: none; }
#f0-f3 { position: relative; z-index: 50; height: 400dvh; }
.f0-f3-sticky { position: sticky; top: 0; width: 100%; height: 100dvh; overflow: hidden; background: #06121f; }
#f0-f3-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.f0-f3-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; pointer-events: none; }
.at-f0 .f0-still, .at-f3 .f3-still { opacity: 1; }
.f0-f3-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,9,18,.48), transparent 25%, transparent 56%, rgba(2,9,18,.68)); pointer-events: none; }
.video-desk-brand { position: absolute; z-index: 1; display: grid; place-items: center; width: 85px; height: 70px; background: radial-gradient(ellipse at center, #050913fb 0%, #050913f0 42%, transparent 78%); transform-origin: center; pointer-events: none; }
.video-desk-brand { display: none; }
.f0-f3-ui { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: max(24px, env(safe-area-inset-top)) clamp(20px, 4vw, 64px) max(24px, env(safe-area-inset-bottom)); color: #f5f9ff; text-shadow: 0 2px 18px rgba(0,0,0,.45); pointer-events: none; }
.f0-f3-top, .f0-f3-bottom { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.f0-f3-top > span:last-child, .f0-f3-eyebrow, .f0-f3-step { font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.f0-f3-top > span:last-child { text-align: right; opacity: .8; }
.official-brand { display: flex; align-items: center; gap: 8px; width: 210px; height: 50px; flex: 0 0 auto; }
.official-symbol, .official-wordmark { display: block; flex: 0 0 auto; background-image: url('./armont-official-logo.jpeg'); background-repeat: no-repeat; mix-blend-mode: screen; }
.official-symbol { width: 52px; height: 46px; background-size: 91px 91px; background-position: -20.8px -19.1px; }
.official-wordmark { width: 150px; height: 14px; background-size: 360px 360px; background-position: -104px -277px; }
#chrome .stage-brand { grid-column: 2; justify-self: center; transform: scale(.72); transform-origin: top center; }
.f0-f3-eyebrow { display: block; margin-bottom: 12px; opacity: .75; }
.f0-f3-bottom { align-items: end; justify-content: flex-end; margin-top: auto; margin-bottom: 22px; }
.f0-f3-bottom h1 { margin: 0; font-size: clamp(30px, 5vw, 76px); line-height: 1.02; font-weight: 500; letter-spacing: -.045em; }
.f0-f3-bottom h1 em { font-style: normal; font-weight: 300; }
.f0-f3-step { white-space: nowrap; opacity: .85; }
.f0-f3-progress { width: 100%; height: 1px; background: rgba(255,255,255,.34); }
.f0-f3-progress span { display: block; height: 100%; width: 0; background: #fff; }
.f3-choices[hidden] { display: none; }
.f3-choices { position: absolute; z-index: 2; pointer-events: none; container-type: inline-size; }
.f3-choices button { position: absolute; top: 5%; width: 25%; height: 67%; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; pointer-events: auto; }
.f3-choices button:nth-child(1) { left: 9%; }
.f3-choices button:nth-child(2) { left: 37.5%; }
.f3-choices button:nth-child(3) { left: 66%; }
.f3-label { position: absolute; left: 5%; right: 5%; top: 22%; height: 29%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2cqw; color: #f5f9ff; font-weight: 400; text-align: center; text-shadow: 0 1px 6px #000, 0 0 13px #8db9fa88; }
.f3-label { display: none; }
.f3-label::before { content: ""; position: absolute; z-index: -1; inset: -4% -3%; background: radial-gradient(ellipse at 50% 50%, #020914 50%, #020914e8 68%, transparent 93%); filter: blur(4px); }
.f3-label::after { content: ""; position: absolute; z-index: -1; left: 5%; right: 5%; bottom: -14%; height: 26%; background: linear-gradient(180deg, transparent, #020914df 35%, transparent); filter: blur(5px); }
.f3-label b { font-size: clamp(10px, 1.65cqw, 25px); font-weight: 300; line-height: 1; }
.f3-label strong { font-size: clamp(9px, 1.25cqw, 20px); font-weight: 500; letter-spacing: .12em; line-height: 1.1; }
.f3-label small { font-size: clamp(8px, .9cqw, 13px); line-height: 1.15; }
.f3-services { margin-top: .5cqw; font-size: clamp(7px, .73cqw, 11px); line-height: 1.3; letter-spacing: .08em; text-transform: uppercase; }
.f3-choices button::before { content: ""; position: absolute; inset: -5% -10%; pointer-events: none; opacity: 0; filter: blur(14px); mix-blend-mode: screen; background: radial-gradient(ellipse 30% 13% at 50% 14%, rgba(255,246,204,.82), transparent 100%), radial-gradient(ellipse 56% 48% at 50% 40%, rgba(255,206,123,.5), transparent 85%), radial-gradient(ellipse 72% 40% at 50% 80%, rgba(255,171,91,.25), transparent 90%); transition: opacity .3s ease; }
.f3-choices button:hover::before, .f3-choices button:focus-visible::before { opacity: 1; }
.f3-choices button[aria-pressed="true"]::before { opacity: .85; }
.f3-choices button:focus-visible { outline: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.at-f3 .f0-f3-bottom { opacity: 0; }
@media (max-width: 600px) { .f0-f3-top span:last-child { max-width: 130px; line-height: 1.35; } .f0-f3-bottom h1 { font-size: clamp(27px, 8vw, 46px); } }
.branch-view[hidden] { display: none; }
.branch-view { position: absolute; inset: 0; z-index: 3; background: #06121f; pointer-events: auto; }
.branch-view.is-leaving { pointer-events: none; }
.branch-view.is-entering .branch-pan { animation: showroom-arrive 1s .5s cubic-bezier(.2, .8, .2, 1) both; pointer-events: none; }
.branch-view.is-leaving .branch-pan { animation: showroom-depart .75s .35s ease-in both; }
.entering-branch #f0-f3-video { animation: camera-in 1.5s ease-out both; transform-origin: var(--target-x) var(--target-y); }
.returning-f3 #f0-f3-video { animation: camera-out 1.1s ease-in-out both; transform-origin: var(--target-x) var(--target-y); }
.portal-logo { position: absolute; z-index: 6; left: 0; top: 0; width: min(78vmin, 640px); aspect-ratio: 52 / 46; transform: translate3d(50vw, 50vh, 0) translate(-50%, -50%) scale(var(--logo-small-scale, .1)); visibility: hidden; pointer-events: none; mix-blend-mode: screen; will-change: transform; }
.portal-filter-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.portal-emblem { display: block; width: 100%; height: 100%; background: url('./armont-official-logo.jpeg') 53.3% 42.4% / 175% 198% no-repeat; mask-image: url('./armont-official-logo.jpeg'); mask-size: 175% 198%; mask-position: 53.3% 42.4%; mask-repeat: no-repeat; mask-mode: luminance; filter: url('#armont-water') drop-shadow(0 0 28px #81aaff99) drop-shadow(0 0 50px #ffc18a88); }
.portal-logo::before { content: ""; position: absolute; inset: 6%; border-radius: 46% 54% 57% 43% / 53% 42% 58% 47%; background: radial-gradient(ellipse at 42% 35%, #dcf3ff48, #7ebaff1c 46%, transparent 73%); filter: blur(25px); }
.entering-branch .portal-logo, .returning-f3 .portal-logo { visibility: visible; }
.entering-branch .f0-f3-top .official-symbol, .returning-f3 .f0-f3-top .official-symbol { opacity: 0; }
.f0-f3-sticky::after { content: ""; position: absolute; z-index: 5; top: 50%; left: 50%; width: min(130vmin, 1100px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fffefaeb 0%, #b4d9ffe0 9%, #8d9dff88 26%, #ffae7160 38%, transparent 68%); mix-blend-mode: screen; filter: blur(24px); transform: translate(-50%, -50%) scale(.2); opacity: 0; pointer-events: none; }
.entering-branch .f0-f3-sticky::after { animation: portal-flash 1.5s both; }
.returning-f3 .f0-f3-sticky::after { animation: portal-return-flash 1.1s both; }
@keyframes showroom-arrive { 0% { scale: 1.23; filter: blur(16px) brightness(1.5); } 60% { filter: blur(3px) brightness(1.18); } 100% { scale: 1; filter: none; } }
@keyframes showroom-depart { from { scale: 1; filter: none; } to { scale: 1.14; filter: blur(11px) brightness(1.4); } }
@keyframes camera-in { from { scale: 1; } to { scale: 1.28; } }
@keyframes camera-out { from { scale: 1.28; } to { scale: 1; } }
@keyframes portal-flash { 0%, 32%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 54% { opacity: .72; transform: translate(-50%, -50%) scale(.85); } 72% { opacity: .94; transform: translate(-50%, -50%) scale(1.5); } }
@keyframes portal-return-flash { 0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 48% { opacity: .85; transform: translate(-50%, -50%) scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .branch-view.is-entering .branch-pan, .branch-view.is-leaving .branch-pan, .entering-branch #f0-f3-video, .returning-f3 #f0-f3-video, .entering-branch .f0-f3-sticky::after, .returning-f3 .f0-f3-sticky::after { animation-duration: .01ms; animation-delay: 0ms; } }
.branch-view::before { content: ""; position: absolute; inset: -30px; background: var(--branch-bg) center / cover no-repeat; filter: blur(24px) brightness(.28); }
.branch-pan { position: absolute; inset: 0; overflow: hidden; }
.branch-image { position: absolute; top: 50%; left: 50%; width: min(100vw, 150dvh); height: min(100dvh, 66.6667vw); transform: translate(-50%, -50%); }
#branch-frame { display: block; width: 100%; height: 100%; }
/* The scene stays registered to its hotspots; depth lives inside each screen. */
.branch-motion { position: absolute; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; }
.branch-proof { position: absolute; z-index: 2; display: none; align-items: center; justify-content: space-around; gap: 4%; padding: 1.5%; background: #07131f; color: #d5eaff; font-size: clamp(7px, .9vw, 15px); letter-spacing: .1em; text-align: center; pointer-events: none; }
[data-scene="websites"] .branch-proof-websites { display: flex; left: 44%; top: 63%; width: 55%; height: 10%; }
[data-scene="automation"] .branch-proof-automation, [data-scene="marketing"] .branch-proof-marketing { display: flex; left: 84%; top: 27%; width: 14%; height: 25%; flex-direction: column; font-size: clamp(7px, .8vw, 13px); }
@media (max-width: 700px) { .branch-proof { font-size: 12px; } [data-scene="automation"] .branch-proof-automation, [data-scene="marketing"] .branch-proof-marketing { font-size: 11px; } }
.motion-window { position: absolute; overflow: hidden; border-radius: 4px; isolation: isolate; mask-image: linear-gradient(180deg, transparent, #000 4%, #000 89%, transparent); transition: filter .7s ease; }
.motion-crop { position: absolute; display: block; max-width: none; max-height: none; object-fit: fill; animation: card-depth 15s ease-in-out var(--motion-delay) infinite alternate; }
.motion-window::after { content: ""; position: absolute; inset: -20% -80%; background: linear-gradient(112deg, transparent 42%, #b8e1ff18 49%, #e3efff38 50%, transparent 57%); mix-blend-mode: screen; animation: card-reflection 14s ease-in-out var(--motion-delay) infinite; }
[data-scene="marketing"] .motion-crop { animation-duration: 19s; }
[data-hover-card="0"] [data-card="0"], [data-hover-card="1"] [data-card="1"], [data-hover-card="2"] [data-card="2"] { filter: brightness(1.16) saturate(1.08); }
.lamp-halo { position: absolute; left: 13%; top: 3%; width: 28%; height: 78%; background: radial-gradient(ellipse 42% 7% at 47% 7%, #ffe4b28a, transparent), radial-gradient(ellipse 42% 53% at 47% 48%, #ffc48022, transparent), radial-gradient(ellipse 48% 7% at 47% 96%, #ffd1a371, transparent); mix-blend-mode: screen; animation: lamp-breathe 8.5s ease-in-out infinite alternate; }
.desk-reflection { position: absolute; left: 9%; top: 74%; width: 50%; height: 23%; background: radial-gradient(ellipse at 40% 10%, #efbd8545, transparent 57%), radial-gradient(ellipse at 65% 5%, #69bfff3d, transparent 46%); mix-blend-mode: screen; filter: blur(6px); animation: reflection-breathe 11s ease-in-out -4s infinite alternate; }
.robot-core { position: absolute; left: 22%; top: 39%; width: 7%; height: 19%; background: radial-gradient(ellipse at 50% 64%, #77caff55, transparent 24%), radial-gradient(ellipse at 50% 8%, #8ad5ff38, transparent 27%); mix-blend-mode: screen; animation: core-breathe 5.8s ease-in-out infinite alternate; }
.live-hologram { position: absolute; overflow: hidden; clip-path: polygon(0 0, 100% 3%, 90% 100%, 9% 96%); mix-blend-mode: screen; background: repeating-linear-gradient(180deg, transparent 0 8px, #a0dcff0b 9px 10px); }
.live-hologram::before { content: ""; position: absolute; inset: -100% 0; background: linear-gradient(180deg, transparent 40%, #88cfff15 48%, #d8f6ff6b 50%, #88cfff15 52%, transparent 60%); animation: hologram-scan 8s linear var(--screen-delay) infinite; }
.live-hologram::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, #7fcfff38, transparent 75%); animation: lamp-breathe 6s ease-in-out var(--screen-delay) infinite alternate; }
.hologram-data { position: absolute; left: 18%; right: 16%; top: 53%; bottom: 17%; display: flex; align-items: end; gap: 7%; opacity: .58; }
.hologram-data i { display: block; flex: 1; height: var(--bar-height); background: linear-gradient(0deg, #478bcc00, #aadfff); box-shadow: 0 0 5px #88cfff88; transform-origin: bottom; animation: hologram-data-flow 4.6s ease-in-out var(--bar-delay) infinite alternate; }
.live-network { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.network-packet { fill: none; stroke: #d2f2ff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 9 91; filter: drop-shadow(0 0 4px #4ab9ff); animation: connection-flow 4.8s linear infinite; }
.network-orbit { fill: none; stroke: #81ceff; stroke-width: 1.2; stroke-dasharray: 19 44; opacity: .65; transform-origin: 975px 363px; animation: network-orbit 18s linear infinite; }
@keyframes card-depth { from { transform: scale(1.025) translate3d(-2px, 1px, 0); } to { transform: scale(1.08) translate3d(2px, -2px, 0); } }
@keyframes card-reflection { 0%, 18% { transform: translateX(-35%); opacity: 0; } 30%, 65% { opacity: .8; } 80%, 100% { transform: translateX(35%); opacity: 0; } }
@keyframes lamp-breathe { from { opacity: .35; } to { opacity: .92; } }
@keyframes reflection-breathe { from { opacity: .35; transform: scaleX(.96); } to { opacity: .8; transform: scaleX(1.04); } }
@keyframes core-breathe { from { opacity: .35; } to { opacity: .9; } }
@keyframes hologram-scan { from { transform: translateY(-34%); } to { transform: translateY(34%); } }
@keyframes hologram-data-flow { from { transform: scaleY(.35); opacity: .35; } to { transform: scaleY(1); opacity: .85; } }
@keyframes connection-flow { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes network-orbit { to { transform: rotate(360deg); } }
.branch-view.motion-paused .branch-motion *, .branch-view.motion-paused .branch-motion *::before, .branch-view.motion-paused .branch-motion *::after { animation-play-state: paused; }
@media (max-width: 700px) { .network-packet { filter: none; } }
.branch-brand { position: absolute; z-index: 2; left: 2.3%; top: 1.2%; padding-left: 12px; width: 235px; background: linear-gradient(90deg, #050912f5 0%, #050912ea 83%, transparent 100%); }
.branch-desk-brand { position: absolute; z-index: 2; left: 22.4%; top: 65%; display: grid; place-items: center; width: 85px; height: 70px; background: radial-gradient(ellipse at center, #050913fb 0%, #050913f0 42%, transparent 78%); pointer-events: none; }
#branch-hotspots { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.branch-hotspot { position: absolute; display: block; padding: 0; border: 0; border-radius: 5px; background: transparent; color: transparent; cursor: pointer; pointer-events: auto; transition: background .18s ease, box-shadow .18s ease; }
.branch-hotspot:hover, .branch-hotspot:focus-visible { background: #ffcf9130; box-shadow: inset 0 0 0 1px #fbd09ba8, 0 0 18px #efad5555; outline: none; }
.branch-nav-hotspot { border-radius: 0; }
.branch-nav-hotspot:hover, .branch-nav-hotspot:focus-visible { background: #ffcf9118; box-shadow: inset 0 -1px #fbd09b; }
#branch-cta { position: absolute; z-index: 3; left: 44.5%; top: 53%; width: 29%; height: 9%; border-radius: 4px; }
#branch-cta:focus-visible { outline: 2px solid #e8bd8b; outline-offset: 3px; }
.branch-dialog { position: fixed; width: min(460px, calc(100vw - 32px)); max-height: min(620px, calc(100dvh - 32px)); overflow-y: auto; padding: 34px; border: 1px solid #d7af7c80; border-radius: 4px; background: linear-gradient(145deg, #102537, #07131e); box-shadow: 0 25px 90px #000c, 0 0 30px #b9874830; color: #f3f7fc; }
.branch-dialog::backdrop { background: #02070dcc; backdrop-filter: blur(5px); }
.branch-dialog #branch-dialog-close { position: absolute; top: 14px; right: 16px; border: 0; background: transparent; color: #f3f7fc; font-size: 30px; cursor: pointer; }
.dialog-brand { margin: -5px 0 20px; transform: scale(.7); transform-origin: left center; height: 35px; }
.branch-dialog #branch-dialog-kicker { display: block; margin-bottom: 14px; color: #d8b98d; font-size: 10px; letter-spacing: .18em; }
.branch-dialog h2 { margin: 0 0 18px; font-size: clamp(28px, 4vw, 42px); font-weight: 500; letter-spacing: -.03em; }
.branch-dialog p { margin: 0; color: #d2dce7; font-size: 15px; line-height: 1.65; }
.branch-dialog ul { margin: 22px 0; padding: 0; list-style: none; }
.branch-dialog li { padding: 9px 0; border-top: 1px solid #ffffff24; font-size: 12px; letter-spacing: .06em; }
.branch-dialog a { display: inline-block; margin-top: 4px; padding: 11px 0; border-bottom: 1px solid #d8b98d; color: #f3f7fc; font-size: 11px; letter-spacing: .12em; text-decoration: none; }
.branch-dialog a:hover, .branch-dialog a:focus-visible { color: #ffd6a0; }
.branch-mobile-hint { display: none; }
@media (max-width: 700px) { .f0-f3-top .official-brand { width: 152px; height: 36px; transform: scale(.72); transform-origin: left top; } .branch-pan { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; } .branch-image { position: relative; left: 0; top: 0; width: 150dvh; height: 100dvh; transform: none; } .branch-mobile-hint { display: block; position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); left: 16px; padding: 7px 10px; background: #06121fbb; color: #fff; font-size: 9px; letter-spacing: .1em; pointer-events: none; } }
@media (prefers-reduced-motion: reduce) { .branch-motion *, .branch-motion *::before, .branch-motion *::after { animation: none !important; transition: none !important; } .motion-crop { transform: none; } .network-packet, .network-orbit, .hologram-data, .live-hologram::before, .motion-window::after { display: none; } .lamp-halo, .robot-core, .desk-reflection { opacity: .3; } }

@media (max-width: 700px) { #f0-f3-video, .f0-f3-still { object-fit: contain; } }
@media (max-width: 700px) {
  .f3-label { top: 11%; height: 39%; gap: 0; }
  .f3-label b { font-size: 9px; }
  .f3-label strong { font-size: 8px; letter-spacing: 0; }
  .f3-label small, .f3-services { display: none; }
}