/* Spatial hero inspired by the depth, light and focus behaviour of nk.studio.
   Presentation only: a restrained violet-blue light field and one semantic focus phrase. */
.hero {
    --hero-depth-x: 0px;
    --hero-depth-y: 0px;
    --hero-tilt-x: 0deg;
    --hero-tilt-y: 0deg;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: #f8f8ff;
    background: #161d55 !important;
    perspective: 1100px;
    perspective-origin: 50% 45%;
}

.hero-eyebrow,
.hero-vector-title,
.hero-sub,
.hero-cta {
    position: relative;
    z-index: 4;
}

.hero-eyebrow {
    color: rgba(235, 237, 255, .66) !important;
    text-shadow: 0 1px 18px rgba(20, 22, 74, .42);
}

.hero-sub {
    color: rgba(244, 245, 255, .8) !important;
    text-shadow: 0 2px 24px rgba(18, 20, 68, .56);
}

.hero-vector-title {
    z-index: 5;
    transform:
        perspective(1100px)
        translate3d(var(--hero-depth-x), var(--hero-depth-y), 0)
        rotateX(var(--hero-tilt-x))
        rotateY(var(--hero-tilt-y));
    transform-style: preserve-3d;
    transform-origin: 50% 45%;
    will-change: transform;
    transition: transform 520ms cubic-bezier(.16, 1, .3, 1);
}

/* Keep the focused composition inside the hero's safe area. The focused
   words and project cards retain their own depth, while the full slogan
   settles back onto a stable plane instead of being clipped by pointer tilt. */
.hero-vector-title.is-word-focused {
    transform:
        perspective(1100px)
        translate3d(0, 0, 0)
        rotateX(0deg)
        rotateY(0deg);
}

.hero-vector-title .hero-vector-outline {
    stroke: rgba(176, 187, 255, .68) !important;
}

.hero-vector-title .hero-outline-layer {
    filter: drop-shadow(0 0 7px rgba(139, 143, 255, .26));
}

.hero-vector-title .hero-fill-layer > text[fill="#1d1d1f"] {
    fill: #f7fbf9 !important;
}

.hero-vector-title linearGradient stop:nth-of-type(1) { stop-color: #ee8fe7 !important; }
.hero-vector-title linearGradient stop:nth-of-type(2) { stop-color: #9b86ff !important; }
.hero-vector-title linearGradient stop:nth-of-type(3) { stop-color: #59b8ff !important; }

.hero-particle-canvas {
    mix-blend-mode: screen !important;
    filter: drop-shadow(0 0 5px rgba(132, 148, 255, .48));
}

.hero .btn-primary {
    color: #111847;
    border-color: #9eaaff;
    background: #9eaaff;
    box-shadow: 0 13px 36px rgba(91, 111, 255, .2);
}

.hero .btn-primary:hover {
    color: #101540;
    background: #c1c8ff;
    border-color: #c1c8ff;
}

.hero .btn-secondary {
    color: #f3f4ff;
    border-color: rgba(226, 229, 255, .5);
    background: rgba(27, 30, 91, .28);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .025);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.hero .btn-secondary:hover {
    color: #111747;
    border-color: #a8b2ff;
    background: #a8b2ff;
}

.hero .scroll-hint { z-index: 5; }
.hero .scroll-hint svg { stroke: rgba(216, 220, 255, .7); }

.hero-spatial-stage {
    --spatial-pointer-x: 50%;
    --spatial-pointer-y: 44%;
    --focus-plane-x: 50%;
    --focus-plane-y: 25%;
    --plane-rx: 0deg;
    --plane-ry: 0deg;
    position: absolute;
    inset: 48px 0 0;
    z-index: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 10% 4%, rgba(235, 107, 224, .42), transparent 35%),
        radial-gradient(circle at 86% 84%, rgba(69, 171, 255, .42), transparent 42%),
        linear-gradient(145deg, #24225f 0%, #3f3c9c 45%, #236fc0 100%);
    transform: translateZ(0);
    transition: opacity 1100ms cubic-bezier(.16, 1, .3, 1);
}

.hero-spatial-stage.is-visible { opacity: 1; }

.hero-spatial-stage::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(circle at var(--spatial-pointer-x) var(--spatial-pointer-y), rgba(203, 143, 255, .14), transparent 20%),
        radial-gradient(ellipse 62% 38% at 52% 96%, rgba(78, 177, 255, .17), transparent 72%);
    mix-blend-mode: screen;
    transition: opacity 360ms ease;
}

.hero-spatial-stage::after {
    content: '';
    position: absolute;
    inset: -50%;
    z-index: 3;
    pointer-events: none;
    opacity: .14;
    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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.52'/%3E%3C/svg%3E");
    transform: rotate(7deg);
    mix-blend-mode: soft-light;
}

.hero-spatial-stage.is-word-focused::before { opacity: 1.28; }

.hero-spatial-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 1;
}

.hero-spatial-plane {
    position: absolute;
    left: var(--focus-plane-x);
    top: var(--focus-plane-y);
    z-index: 4;
    width: clamp(270px, 31vw, 470px);
    aspect-ratio: 2 / 1;
    opacity: 0;
    overflow: visible;
    transform:
        translate3d(-50%, -78%, -70px)
        rotateX(calc(-5deg + var(--plane-rx)))
        rotateY(calc(7deg + var(--plane-ry)))
        scale(.84);
    transform-style: preserve-3d;
    transition: opacity 260ms ease-out, transform 620ms cubic-bezier(.16, 1, .3, 1);
}

.hero-spatial-plane::before {
    content: '';
    position: absolute;
    inset: 14% 4% -8%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(141, 131, 255, .2), transparent 70%);
    filter: blur(26px);
}

.hero-focus-project {
    position: absolute;
    width: 62%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border: 1px solid rgba(228, 230, 255, .2);
    border-radius: 12px;
    background: rgba(21, 24, 80, .34);
    box-shadow: 0 24px 64px rgba(10, 12, 48, .34);
    opacity: 0;
    transform-style: preserve-3d;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.92) 72%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.92) 72%, transparent 100%);
    transition: opacity 280ms ease-out, transform 620ms cubic-bezier(.16, 1, .3, 1), filter 360ms ease;
}

.hero-focus-project img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .78;
    filter: saturate(.84) contrast(.98) brightness(1.02);
}

.hero-focus-project::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(140deg, rgba(203, 132, 255, .16), transparent 44%, rgba(70, 171, 255, .18));
    mix-blend-mode: screen;
}

.hero-focus-project-pinocio {
    left: 0;
    top: 17%;
    transform: translate3d(-22px, 18px, -16px) rotate(-4deg) scale(.92);
}

.hero-focus-project-pamir {
    right: 0;
    top: 0;
    transform: translate3d(24px, 10px, 12px) rotate(4deg) scale(.92);
}

.hero-focus-project-pamir img {
    opacity: .94;
    filter: saturate(.9) contrast(1.02) brightness(1.06);
}

.hero-spatial-stage.is-word-focused .hero-spatial-plane {
    opacity: 1;
    transform:
        translate3d(-50%, -84%, 42px)
        rotateX(calc(-3deg + var(--plane-rx)))
        rotateY(calc(4deg + var(--plane-ry)))
        scale(1);
}

.hero-spatial-stage.is-word-focused .hero-focus-project { opacity: .72; }
.hero-spatial-stage.is-word-focused .hero-focus-project-pinocio {
    transform: translate3d(-9px, 4px, 8px) rotate(-3deg) scale(1);
}
.hero-spatial-stage.is-word-focused .hero-focus-project-pamir {
    opacity: .74;
    transform: translate3d(10px, -2px, 34px) rotate(3deg) scale(1);
    transition-delay: 55ms;
}

.hero-vector-fill,
.hero-eyebrow,
.hero-sub,
.hero-cta {
    transition: opacity 360ms ease, filter 480ms cubic-bezier(.16, 1, .3, 1);
}

.hero-vector-title.is-word-focused .hero-vector-fill {
    opacity: .14;
    filter: blur(5.2px) saturate(.42);
}

.hero-vector-title.is-word-focused .hero-outline-layer {
    opacity: .12;
    filter: blur(3px);
}

.hero.is-spatial-focus .hero-eyebrow,
.hero.is-spatial-focus .hero-sub,
.hero.is-spatial-focus .hero-cta {
    opacity: .2;
    filter: blur(5px);
}

.hero-focus-layer { pointer-events: none; }

.hero-focus-lens {
    opacity: 0;
    fill: rgba(145, 136, 255, .025);
    stroke: none;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(.9, .72);
    transition: opacity 220ms ease, transform 480ms cubic-bezier(.16, 1, .3, 1);
}

.hero-focus-text {
    opacity: 0;
    font-weight: 700;
    letter-spacing: -.045em;
    text-anchor: middle;
    paint-order: stroke fill;
    stroke: rgba(209, 255, 239, .22);
    stroke-width: .45;
    transform-box: fill-box;
    transform-origin: center;
    transform: translateZ(30px) scale(.985);
    transition: opacity 190ms ease, transform 480ms cubic-bezier(.16, 1, .3, 1), filter 420ms ease;
}

.hero-focus-tone-dark .hero-focus-text {
    fill: #f7fbf9 !important;
    filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .48));
}

.hero-focus-tone-accent .hero-focus-text {
    filter: drop-shadow(0 10px 28px rgba(127, 143, 255, .3));
}

.hero-focus-line {
    opacity: 0;
    fill: #aeb8ff;
    transform-box: fill-box;
    transform-origin: left center;
    transform: scaleX(1);
    filter: drop-shadow(0 0 5px rgba(132, 148, 255, .58));
    transition: opacity 180ms ease, transform 460ms cubic-bezier(.16, 1, .3, 1), filter 220ms ease;
    animation: heroFocusCueIn 560ms cubic-bezier(.16, 1, .3, 1) forwards 4.72s;
}

body:not(.hero-ready) .hero-focus-line { animation-play-state: paused; }

@keyframes heroFocusCueIn {
    from { opacity: 0; transform: scaleX(.72); }
    to { opacity: .66; transform: scaleX(1); }
}

.hero-focus-hit {
    fill: transparent;
    pointer-events: all;
    cursor: default;
}

.hero-vector-mobile .hero-focus-hit { pointer-events: none; }

.hero-focus-group.is-active .hero-focus-lens {
    opacity: 1;
    transform: scale(1.06, 1);
}

.hero-focus-group.is-active .hero-focus-text {
    opacity: 1;
    transform: translateZ(30px) scale(1.008);
}

.hero-focus-group.is-active .hero-focus-line {
    opacity: 1;
    transform: scaleX(1.035);
    filter: drop-shadow(0 0 8px rgba(170, 181, 255, .82));
    animation: none;
}

@media (min-width: 768px) and (max-width: 1100px),
       (min-width: 768px) and (max-height: 680px) {
    .hero-vector-title.is-word-focused {
        transform:
            perspective(1100px)
            translate3d(0, 0, 0)
            rotateX(0deg)
            rotateY(0deg)
            scale(.965);
    }

    .hero-spatial-plane {
        width: clamp(238px, 29vw, 330px);
    }

    .hero-spatial-stage.is-word-focused .hero-spatial-plane {
        transform:
            translate3d(-50%, -72%, 30px)
            rotateX(calc(-2deg + var(--plane-rx)))
            rotateY(calc(3deg + var(--plane-ry)))
            scale(.96);
    }
}

@media (max-width: 767px), (hover: none), (pointer: coarse) {
    .hero-spatial-stage::before { opacity: .62; }
    .hero-spatial-stage::after { opacity: .1; }
    .hero-vector-title { transform: none; will-change: auto; }
    .hero-focus-hit { pointer-events: none; }
    .hero-spatial-plane { display: none; }
    .hero-vector-title .hero-vector-outline { stroke: rgba(178, 187, 255, .58) !important; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-spatial-stage,
    .hero-spatial-stage.is-visible {
        opacity: 1 !important;
        transition: none !important;
    }
    .hero-vector-title {
        transform: none !important;
        will-change: auto;
    }
    .hero-focus-layer,
    .hero-spatial-plane { display: none; }
}