Abstract Isometric Header code

@props([
    'eyebrow' => null,
    'title' => null,
    'description' => null,
    'as' => 'h2',
])

@php
    /*
    | Isometric stack header. Three solid faces are arranged into a static
    | isometric block using CSS skew transforms — no animation, no media. The
    | amber accent caps the top face so the stack reads as lit from above.
    */
@endphp

<section
    {{ $attributes->merge(['class' => 'abstract-isometric-field relative isolate min-h-[100dvh] overflow-hidden bg-gray-950 text-white']) }}
>
    <div class="pointer-events-none absolute left-6 top-6 font-mono text-[0.68rem] uppercase tracking-[0.32em] text-white/38 sm:left-8 lg:left-10" aria-hidden="true">BG-06 / isometric</div>
    <div class="pointer-events-none absolute bottom-8 left-6 hidden font-mono text-[8rem] font-semibold leading-none text-white/[0.035] lg:block" aria-hidden="true">06</div>

    <div class="mx-auto grid w-full max-w-7xl gap-12 px-6 py-24 sm:px-8 lg:min-h-[100dvh] lg:grid-cols-[1.1fr_0.9fr] lg:items-center lg:px-10">
        <div class="max-w-2xl">
            @if ($eyebrow)
                <p class="font-mono text-xs uppercase tracking-[0.34em] text-amber-200/78">{{ $eyebrow }}</p>
            @endif

            @if ($title)
                <{{ $as }} class="mt-6 font-serif text-4xl font-medium leading-[0.92] tracking-[-0.035em] text-white text-balance sm:text-6xl lg:text-7xl">{{ $title }}</{{ $as }}>
            @endif

            @if ($description)
                <p class="mt-6 max-w-xl text-base leading-7 text-white/66 text-pretty sm:text-lg">{{ $description }}</p>
            @endif

            @isset($actions)
                <div class="mt-8 flex flex-col gap-3 sm:flex-row">{{ $actions }}</div>
            @endisset
        </div>

        <div class="relative">
            <div class="mb-10 flex items-center gap-4 font-mono text-xs uppercase tracking-[0.22em] text-white/45">
                <span class="h-px flex-1 bg-white/18"></span>
                <span>stack / 3 layers</span>
            </div>

            {{-- Static isometric tower: each layer is a skewed solid face.
                 Class strings are kept whole so Tailwind can detect them. --}}
            <div class="mx-auto flex max-w-sm flex-col items-center gap-3">
                <div class="relative h-20 w-full border border-amber-200/60 bg-amber-300/85 text-gray-950 [transform:rotateX(8deg)_skewX(-22deg)]" aria-hidden="true">
                    <span class="absolute left-4 top-1/2 -translate-y-1/2 font-mono text-[0.7rem] uppercase tracking-[0.24em] [transform:skewX(22deg)]">surface</span>
                </div>
                <div class="relative h-20 w-full border border-white/22 bg-white/10 text-white [transform:rotateX(8deg)_skewX(-22deg)]" aria-hidden="true">
                    <span class="absolute left-4 top-1/2 -translate-y-1/2 font-mono text-[0.7rem] uppercase tracking-[0.24em] [transform:skewX(22deg)]">register</span>
                </div>
                <div class="relative h-20 w-full border border-white/16 bg-white/[0.04] text-white/70 [transform:rotateX(8deg)_skewX(-22deg)]" aria-hidden="true">
                    <span class="absolute left-4 top-1/2 -translate-y-1/2 font-mono text-[0.7rem] uppercase tracking-[0.24em] [transform:skewX(22deg)]">base</span>
                </div>
            </div>

            {{-- Layer legend (accessible, not skewed). --}}
            <div class="mt-12 grid gap-px bg-white/12 text-sm">
                @foreach ([
                    ['01', 'surface', 'lit cap face'],
                    ['02', 'register', 'mid content plane'],
                    ['03', 'base', 'grounded shadow face'],
                ] as [$num, $label, $copy])
                    <div class="grid grid-cols-[3.5rem_1fr] bg-gray-950/92 sm:grid-cols-[3.5rem_0.5fr_1fr]">
                        <span class="px-4 py-3 font-mono text-white/42">{{ $num }}</span>
                        <span class="px-4 py-3 font-semibold text-white">{{ $label }}</span>
                        <span class="px-4 pb-3 pt-0 text-white/56 sm:py-3">{{ $copy }}</span>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</section>