.aau-cinematic-hero { --pointer-x: 0; --pointer-y: 0; position: relative; isolation: isolate; width: 100vw; max-width: none !important; min-height: min(900px, calc(100svh - 69px)); margin-inline: calc(50% - 50vw); overflow: clip; color: #f7f5ef; background: #080909; }
.aau-cinematic-hero::before { position: absolute; z-index: -2; inset: 0; background: radial-gradient(circle at 70% 42%, rgb(229 219 148 / .11), transparent 33%), linear-gradient(115deg, #080909 0 42%, #101111 72%, #050505); content: ""; }
.aau-cinematic-hero::after { position: absolute; z-index: 4; inset: 0; opacity: .11; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; content: ""; }
.aau-cinematic-hero__stage { position: relative; display: grid; min-height: inherit; grid-template-columns: minmax(0, .86fr) minmax(440px, 1.14fr); align-items: center; gap: clamp(2rem, 4vw, 5rem); padding-block: clamp(4rem, 9vh, 7rem); }
.aau-cinematic-hero__copy { position: relative; z-index: 3; align-self: center; }
.aau-cinematic-hero__eyebrow { display: flex; align-items: center; gap: .75rem; margin: 0 0 clamp(1.25rem, 3vh, 2.5rem); color: var(--aau-color-accent, #e5db94); font-size: clamp(.68rem, .6rem + .2vw, .82rem); font-weight: 750; letter-spacing: .2em; text-transform: uppercase; }
.aau-cinematic-hero__eyebrow::before { width: clamp(2rem, 4vw, 4.5rem); height: 1px; background: currentColor; content: ""; }
.aau-cinematic-hero h1 { margin: 0; color: inherit; font-family: var(--aau-font-heading, 'Arca Majora', Inter, sans-serif); font-size: clamp(3.9rem, 7.5vw, 8.5rem); font-weight: 700; letter-spacing: -.075em; line-height: .76; text-transform: uppercase; }
.aau-cinematic-hero h1 span { display: block; }
.aau-cinematic-hero h1 span:last-child { margin-inline-start: clamp(1rem, 6vw, 6.5rem); color: transparent; -webkit-text-stroke: clamp(1px, .085vw, 2px) #f7f5ef; }
.aau-cinematic-hero__body { max-width: 40rem; margin: clamp(2rem, 4vh, 3.5rem) 0 0; color: rgb(247 245 239 / .68); font-size: clamp(.95rem, .87rem + .3vw, 1.15rem); line-height: 1.65; }
.aau-cinematic-hero__body strong { display: block; margin-top: .3em; color: #f7f5ef; font-weight: 750; }
.aau-cinematic-hero__cta { display: inline-flex; min-height: 54px; align-items: center; gap: 1.25rem; margin-top: clamp(1.5rem, 3vh, 2.5rem); color: #f7f5ef; font-size: .78rem; font-weight: 750; letter-spacing: .13em; text-decoration: none; text-transform: uppercase; }
.aau-cinematic-hero__cta span { padding-block: .35rem; background: linear-gradient(var(--aau-color-accent, #e5db94), var(--aau-color-accent, #e5db94)) 0 100% / 0 1px no-repeat; transition: background-size 300ms cubic-bezier(.22, 1, .36, 1); }
.aau-cinematic-hero__cta svg { width: 32px; fill: none; stroke: var(--aau-color-accent, #e5db94); stroke-width: 1.2; transition: transform 300ms cubic-bezier(.22, 1, .36, 1); }
.aau-cinematic-hero__cta:is(:hover, :focus-visible) span { background-size: 100% 1px; }
.aau-cinematic-hero__cta:is(:hover, :focus-visible) svg { transform: translateX(.45rem); }
.aau-cinematic-hero__gallery { position: relative; min-height: clamp(34rem, 72vh, 48rem); perspective: 1300px; transform: translate3d(calc(var(--pointer-x) * -5px), calc(var(--pointer-y) * -5px), 0); transition: transform 700ms cubic-bezier(.22, 1, .36, 1); }
.aau-cinematic-hero__product { position: absolute; z-index: 1; display: block; overflow: hidden; color: #fff; text-decoration: none; box-shadow: 0 35px 80px rgb(0 0 0 / .48); transform-style: preserve-3d; transition: filter 350ms ease, box-shadow 350ms ease, transform 700ms cubic-bezier(.22, 1, .36, 1); }
.aau-cinematic-hero__product figure { position: relative; height: 100%; margin: 0; overflow: hidden; background: #111; }
.woocommerce .aau-cinematic-hero__image { display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.08); transition: filter 500ms ease, scale 900ms cubic-bezier(.22, 1, .36, 1); }
.aau-cinematic-hero__product figure::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 56%, rgb(0 0 0 / .72)); content: ""; }
.aau-cinematic-hero__product figcaption { position: absolute; z-index: 2; inset: auto 1.2rem 1.1rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-family: var(--aau-font-heading, 'Arca Majora', Inter, sans-serif); letter-spacing: .1em; text-transform: uppercase; }
.aau-cinematic-hero__product figcaption span { font-size: .78rem; }
.aau-cinematic-hero__product figcaption small { color: var(--aau-color-accent, #e5db94); font-family: var(--aau-font-body, Inter, sans-serif); font-size: .58rem; letter-spacing: .18em; }
.aau-cinematic-hero__product--berlin { z-index: 3; top: 9%; left: 12%; width: min(68%, 520px); aspect-ratio: 1 / 1.08; clip-path: polygon(4% 0, 100% 5%, 96% 100%, 0 94%); transform: rotateY(calc(-7deg + var(--pointer-x) * 2deg)) rotateX(calc(var(--pointer-y) * -2deg)) translate3d(calc(var(--pointer-x) * 8px), calc(var(--pointer-y) * 8px), 55px); }
.aau-cinematic-hero__product--lisbon { z-index: 1; top: 0; right: -3%; width: min(39%, 290px); aspect-ratio: .82 / 1; clip-path: polygon(7% 4%, 100% 0, 94% 96%, 0 100%); transform: rotate(4deg) rotateY(calc(-12deg + var(--pointer-x) * 2deg)) translate3d(calc(var(--pointer-x) * 14px), calc(var(--pointer-y) * 10px), -45px); filter: brightness(.66); }
.aau-cinematic-hero__product--milano { z-index: 2; right: 0; bottom: 2%; width: min(42%, 315px); aspect-ratio: 1 / .9; clip-path: polygon(0 7%, 94% 0, 100% 93%, 6% 100%); transform: rotate(-5deg) rotateY(calc(10deg + var(--pointer-x) * 2deg)) translate3d(calc(var(--pointer-x) * -12px), calc(var(--pointer-y) * -8px), 0); filter: brightness(.8); }
.aau-cinematic-hero__product:is(:hover, :focus-visible) { z-index: 5; filter: brightness(1); box-shadow: 0 42px 100px rgb(0 0 0 / .64); }
.aau-cinematic-hero__product:is(:hover, :focus-visible) img { filter: saturate(1) contrast(1.04); scale: 1.035; }
.aau-cinematic-hero__orbit { position: absolute; z-index: 0; top: 45%; left: 44%; width: 92%; aspect-ratio: 1; border: 1px solid rgb(229 219 148 / .19); border-radius: 50%; transform: translate(-50%, -50%) rotateX(69deg); }
.aau-cinematic-hero__orbit::after { position: absolute; top: 49%; left: -4px; width: 7px; aspect-ratio: 1; border-radius: 50%; background: var(--aau-color-accent, #e5db94); box-shadow: 0 0 22px rgb(229 219 148 / .8); content: ""; }
.aau-cinematic-hero__ambient i { position: absolute; border-radius: 50%; background: rgb(229 219 148 / .5); filter: blur(1px); }
.aau-cinematic-hero__ambient i:nth-child(1) { top: 19%; right: 7%; width: 3px; height: 3px; }
.aau-cinematic-hero__ambient i:nth-child(2) { right: 43%; bottom: 14%; width: 2px; height: 2px; }
.aau-cinematic-hero__ambient i:nth-child(3) { top: 13%; left: 45%; width: 1px; height: 1px; }
.aau-cinematic-hero__scroll { position: absolute; z-index: 3; right: var(--aau-page-gutter, 1rem); bottom: 1.75rem; display: flex; align-items: center; gap: .8rem; margin: 0; color: rgb(247 245 239 / .48); font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; writing-mode: vertical-rl; }
.aau-cinematic-hero__scroll i { display: block; width: 1px; height: 48px; overflow: hidden; background: rgb(255 255 255 / .16); }
.aau-cinematic-hero__scroll i::after { display: block; width: 100%; height: 45%; background: var(--aau-color-accent, #e5db94); animation: aau-cinematic-scroll 2.2s ease-in-out infinite; content: ""; }
.aau-cinematic-hero__anchor { position: relative; top: -5rem; display: block; visibility: hidden; }
@keyframes aau-cinematic-scroll { 0% { transform: translateY(-120%); } 55%, 100% { transform: translateY(250%); } }
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.aau-cinematic-hero { view-timeline: --aau-cinematic-hero block; }
		.aau-cinematic-hero__copy { animation: aau-cinematic-copy-out 1ms linear both; animation-timeline: --aau-cinematic-hero; animation-range: exit 0% exit 85%; }
		.aau-cinematic-hero__product--berlin { animation: aau-cinematic-berlin-out 1ms linear both; animation-timeline: --aau-cinematic-hero; animation-range: exit 0% exit 100%; }
		.aau-cinematic-hero__product--lisbon { animation: aau-cinematic-lisbon-out 1ms linear both; animation-timeline: --aau-cinematic-hero; animation-range: exit 0% exit 100%; }
		.aau-cinematic-hero__product--milano { animation: aau-cinematic-milano-out 1ms linear both; animation-timeline: --aau-cinematic-hero; animation-range: exit 0% exit 100%; }
	}
}
@keyframes aau-cinematic-copy-out { to { opacity: .18; transform: translateY(-4rem); } }
@keyframes aau-cinematic-berlin-out { to { transform: rotate(-1deg) scale(.88) translate3d(-18%, 20%, 0); } }
@keyframes aau-cinematic-lisbon-out { to { opacity: .2; transform: rotate(12deg) translate3d(25%, -20%, 0); } }
@keyframes aau-cinematic-milano-out { to { opacity: .25; transform: rotate(-12deg) translate3d(30%, 30%, 0); } }
@media (max-width: 900px) {
	.aau-cinematic-hero { min-height: auto; }
	.aau-cinematic-hero__stage { grid-template-columns: 1fr; gap: .5rem; padding-block: clamp(3.5rem, 8vh, 5rem) 2.5rem; }
	.aau-cinematic-hero__copy { max-width: 44rem; }
	.aau-cinematic-hero h1 { font-size: clamp(3.7rem, 13vw, 7rem); }
	.aau-cinematic-hero__gallery { width: min(100%, 680px); min-height: clamp(28rem, 72vw, 38rem); margin-inline: auto; }
	.aau-cinematic-hero__scroll { display: none; }
}
@media (max-width: 600px) {
	.aau-cinematic-hero h1 { line-height: .82; }
	.aau-cinematic-hero h1 span:last-child { margin-inline-start: .55rem; }
	.aau-cinematic-hero__body { max-width: 32rem; }
	.aau-cinematic-hero__gallery { min-height: 25rem; }
	.aau-cinematic-hero__product figcaption { inset: auto .7rem .65rem; }
	.aau-cinematic-hero__product--berlin { left: 7%; width: 72%; }
	.aau-cinematic-hero__product--lisbon { right: -2%; width: 42%; }
	.aau-cinematic-hero__product--milano { right: 1%; width: 45%; }
}
@media (prefers-reduced-motion: reduce) {
	.aau-cinematic-hero *, .aau-cinematic-hero *::before, .aau-cinematic-hero *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
}