.cn-home [data-cn-scene] { isolation: isolate; }
.cn-work, .cn-story, .cn-create-band, .cn-qatar { position: relative; }
.cn-ambient-stage { position: fixed; inset: 92px 0 0; overflow: hidden; clip-path: inset(0 calc(100% - 34px) 0 0); pointer-events: none; z-index: 25; visibility: hidden; }
.cn-motion-ready[data-cn-motion="full"] .cn-ambient-stage { visibility: visible; }
.cn-ambient-artifact { position: absolute; left: -12px; top: 12%; width: 38px; color: var(--cn-blue, #2622e9); }
.cn-ambient-artifact > * { display: block; }
[data-cn-artifact="star"] { color: #c7e833; font: 75px/.8 'CN Display', sans-serif; }
[data-cn-artifact="stamp"] { width: 38px; text-align: center; font: 20px/1 'CN Display', sans-serif; }
[data-cn-artifact="stamp"] span { border: 2px solid; border-radius: 50%; padding: 9px 2px; }
[data-cn-artifact="stamp"] small { display: block; font: 6px/1.5 'CN Sans', sans-serif; }
[data-cn-artifact="brush"] { width: 44px; }
.cn-ambient-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.cn-ambient-hero { z-index: 0; }
.cn-ambient-annotation { position: absolute; right: 4%; top: 18px; font: 700 13px/1.4 'CN Sans', sans-serif; border-bottom: 3px solid currentColor; padding: 7px 10px; color: #2622e9; background: #e3ff53; }
.cn-ambient-hero .cn-ambient-annotation { top: 25%; color: #e3ff53; background: #2622e9; }
.cn-ambient-stitch { position: absolute; width: 220px; height: 85px; right: 5%; bottom: 12px; stroke: #2622e9; stroke-width: 3; }
.cn-ambient-hero .cn-ambient-stitch { bottom: 23%; stroke: #e3ff53; }
.cn-ambient-flecks { position: absolute; width: 55px; height: 65px; top: 42%; left: 30%; color: #e3ff53; }
.cn-ambient-orbit { position: absolute; right: 45px; top: 110px; width: 230px; height: 230px; color: #2622e9; }
.cn-ambient-pattern-window { position: absolute; inset: 0; overflow: hidden; }
.cn-ambient-pattern { position: absolute; left: -180px; top: -150px; width: calc(100% + 180px); height: calc(100% + 150px); color: #2622e9; opacity: .25; }
.cn-ambient-type { position: absolute; top: 28px; left: -50px; white-space: nowrap; font: 100px/1 'CN Display', sans-serif; color: transparent; -webkit-text-stroke: 2px #2622e9; opacity: .28; }
.cn-ambient-story .cn-ambient-type { top: auto; bottom: 0; }
.cn-ambient-swatches { position: absolute; right: 24px; bottom: 70px; display: flex; gap: 3px; }
.cn-ambient-swatches i { display: block; width: 19px; height: 34px; background: #2622e9; }
.cn-ambient-swatches i:nth-child(2) { background: #e3ff53; transform: rotate(8deg); }
.cn-ambient-swatches i:nth-child(3) { background: #e94e77; transform: rotate(-7deg); }
.cn-ambient-photo { width: 100%; height: 100%; }
.cn-ambient-product { width: 100%; height: 100%; position: absolute; inset: 0; }
.cn-ambient-product > img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s cubic-bezier(.2,.7,.2,1); }
.cn-product:hover .cn-ambient-product > img { transform: scale(1.045); }
.cn-home .cn-product-image, .cn-home .cn-story-image, .cn-home .cn-qatar-image { overflow: hidden; }
.cn-qatar > .cn-ambient-layer { z-index: 3; }
.cn-ambient-qatar .cn-ambient-pattern-window { right: 50%; }
.cn-ambient-qatar .cn-ambient-pattern { opacity: .18; }
.cn-motion-ready .cn-product-image img { transition: none; }
.cn-ambient-qatar .cn-ambient-annotation { color: #2622e9; top: auto; bottom: 15px; }
.cn-ambient-qatar .cn-ambient-stitch { right: 50%; }
.cn-create-band > .cn-ambient-layer { display: block; }
.cn-home .cn-create-band { overflow: hidden; }
.cn-home .cn-create-band .cn-line-mask { overflow: visible; }
.cn-home .cn-create-arrow { position: relative; }
.cn-home .cn-create-arrow::after { content: ''; position: absolute; inset: 8px; border: 1px dashed currentColor; border-radius: 50%; opacity: .5; pointer-events: none; }
.cn-home[data-cn-motion="full"] .cn-create-arrow::after { animation: cn-ring 4s linear infinite; animation-play-state: paused; }
.cn-home[data-cn-motion="full"] .cn-create-band[data-cn-ambient-active="true"] .cn-create-arrow::after { animation-play-state: running; }
@keyframes cn-ring { to { transform: rotate(360deg); } }

/* First-paint motion works even when Blazor or the GSAP download is unavailable.
   The native controller takes ownership once it has successfully initialized. */
.cn-home:not([data-cn-ambient-engine="native"]) :is([data-cn-ambient-loop="photo"], [data-cn-ambient-loop="product"], .cn-qatar-image img, .cn-story-image img) { animation: cn-loud-photo 5s ease-in-out infinite alternate; }
.cn-home:not([data-cn-ambient-engine="native"]) .cn-hero-panel:nth-child(2) .cn-ambient-photo { animation-duration: 6.3s; animation-delay: -2s; }
.cn-home:not([data-cn-ambient-engine="native"]) .cn-hero-panel:nth-child(3) .cn-ambient-photo { animation-duration: 4.6s; animation-delay: -3s; }
.cn-home:not([data-cn-ambient-engine="native"]) .cn-product:nth-child(even) [data-cn-ambient-loop="product"] { animation-duration: 6.1s; animation-delay: -2.5s; }
.cn-home:not([data-cn-ambient-engine="native"]) :is([data-cn-ambient-loop="spin"], .cn-hero-star) { animation: cn-loud-spin 6s linear infinite; }
.cn-home:not([data-cn-ambient-engine="native"]) [data-cn-ambient-loop="pattern"] { animation: cn-loud-pattern 6s linear infinite; }
.cn-home:not([data-cn-ambient-engine="native"]) [data-cn-ambient-loop="rail"] { animation: cn-loud-rail 7s ease-in-out infinite alternate; }
.cn-home:not([data-cn-ambient-engine="native"]) :is([data-cn-ambient-loop="label"], [data-cn-ambient-loop="swatch"], [data-cn-ambient-loop="flecks"]) { animation: cn-loud-rock 3.6s ease-in-out infinite alternate; }
.cn-home:not([data-cn-ambient-engine="native"]) [data-cn-ambient-loop="draw"] { stroke-dasharray: 65 35; animation: cn-loud-draw 3.2s linear infinite; }
.cn-home:not([data-cn-ambient-engine="native"]) :is(.cn-button svg, .cn-text-link svg, .cn-create-arrow svg) { animation: cn-loud-arrow 1.3s ease-in-out infinite alternate; }
.cn-home:not([data-cn-ambient-engine="native"]) .cn-ticker-track { animation: cn-loud-ticker 18s linear infinite; }
.cn-home:not([data-cn-ambient-engine="native"]) .cn-create-arrow::after { animation: cn-ring 4s linear infinite; }
.cn-home[data-cn-fallback-ready="true"]:not([data-cn-ambient-engine="native"]) [data-cn-fallback-active="false"] * { animation-play-state: paused !important; }
.cn-home:not([data-cn-ambient-engine="native"]) a:is(:hover,:focus-visible) * { animation-play-state: paused !important; }
.cn-home .cn-create-arrow:is(:hover,:focus-visible)::after { animation-play-state: paused !important; }
html[data-cn-tab-hidden="true"] .cn-home *, html[data-cn-tab-hidden="true"] .cn-home *::after { animation-play-state: paused !important; }
@keyframes cn-loud-photo { from { translate: -18px 16px; scale: 1.2; rotate: -1.4deg; } to { translate: 24px -24px; scale: 1.3; rotate: 1.2deg; } }
@keyframes cn-loud-spin { to { rotate: 360deg; } }
@keyframes cn-loud-pattern { to { translate: 180px 150px; } }
@keyframes cn-loud-rail { to { translate: -360px; } }
@keyframes cn-loud-rock { from { translate: -10px -9px; rotate: -9deg; } to { translate: 10px 16px; rotate: 9deg; } }
@keyframes cn-loud-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: -100; } }
@keyframes cn-loud-arrow { from { translate: -3px; scale: 1; } to { translate: 10px; scale: 1.16; } }
@keyframes cn-loud-ticker { to { transform: translateX(-50%); } }
@media(max-width: 1100px) {
 .cn-ambient-stage { inset-block-start: 80px; }
 [data-cn-artifact="brush"], [data-cn-artifact="stamp"] { display: none; }
 [data-cn-artifact="star"] { font-size: 65px; width: 35px; }
 .cn-ambient-type { font-size: 64px; }
 .cn-ambient-stitch { width: 100px; }
 .cn-ambient-annotation { font-size: 9px; }
}
@media(max-width: 700px) {
 .cn-ambient-stage { inset-block-start: 74px; clip-path: inset(0 calc(100% - 16px) 0 0); }
 .cn-ambient-layer .cn-ambient-stitch, .cn-ambient-swatches { display: none; }
 .cn-ambient-flecks, .cn-ambient-orbit { display: none; }
 .cn-ambient-hero .cn-ambient-annotation { top: 44%; right: 20px; }
 .cn-home:not([data-cn-ambient-engine="native"]) :is([data-cn-ambient-loop="photo"], [data-cn-ambient-loop="product"], .cn-qatar-image img, .cn-story-image img) { animation-name: cn-loud-photo-mobile; }
}
@keyframes cn-loud-photo-mobile { from { translate: -9px 8px; scale: 1.2; rotate: -.7deg; } to { translate: 12px -12px; scale: 1.3; rotate: .6deg; } }
@supports not (translate: 1px) {
 .cn-home:not([data-cn-ambient-engine="native"]) :is([data-cn-ambient-loop="photo"], [data-cn-ambient-loop="product"], .cn-qatar-image img, .cn-story-image img) { animation-name: cn-loud-photo-legacy; }
 .cn-home:not([data-cn-ambient-engine="native"]) :is([data-cn-ambient-loop="spin"], .cn-hero-star) { animation-name: cn-loud-spin-legacy; }
 .cn-home:not([data-cn-ambient-engine="native"]) [data-cn-ambient-loop="pattern"] { animation-name: cn-loud-pattern-legacy; }
 .cn-home:not([data-cn-ambient-engine="native"]) [data-cn-ambient-loop="rail"] { animation-name: cn-loud-rail-legacy; }
 .cn-home:not([data-cn-ambient-engine="native"]) :is([data-cn-ambient-loop="label"], [data-cn-ambient-loop="swatch"], [data-cn-ambient-loop="flecks"]) { animation-name: cn-loud-rock-legacy; }
 .cn-home:not([data-cn-ambient-engine="native"]) :is(.cn-button svg, .cn-text-link svg, .cn-create-arrow svg) { animation-name: cn-loud-arrow-legacy; }
}
@keyframes cn-loud-photo-legacy { from { transform: translate(-12px, 12px) rotate(-1deg) scale(1.18); } to { transform: translate(18px, -18px) rotate(1deg) scale(1.3); } }
@keyframes cn-loud-spin-legacy { to { transform: rotate(360deg); } }
@keyframes cn-loud-pattern-legacy { to { transform: translate(180px, 150px); } }
@keyframes cn-loud-rail-legacy { to { transform: translateX(-300px); } }
@keyframes cn-loud-rock-legacy { from { transform: translate(-8px, -7px) rotate(-7deg); } to { transform: translate(8px, 12px) rotate(7deg); } }
@keyframes cn-loud-arrow-legacy { from { transform: translateX(-3px) scale(1); } to { transform: translateX(10px) scale(1.16); } }
@media(prefers-reduced-motion: reduce) {
 .cn-home *, .cn-home *::after { animation: none !important; }
 .cn-ambient-stage { display: none !important; }
 .cn-home .cn-create-arrow::after { animation: none !important; }
}