@import url("./tokens.css");
@import url("./theme.css");

/* =========================================================
   Neokitsch Core Palette — site.css
   (Default: dark theme; tuned for Bootstrap 5.3)
   ========================================================= */
:root {
    color-scheme: dark;
    --logo-size: 300px; /* your big centered logo */
    --mobile-logo-size: 80px;
    --navbar-h: 150px; /* your nav’s actual height (tweak if needed) */
    --logo-overshoot: calc((var(--logo-size) - var(--navbar-h)) / 2);
}

@media (min-width: 992px) {
    .navbar .navbar-brand.navbar-brand-center {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        pointer-events: auto;
        z-index: 2; /* keep it above the links */
        margin: 0 !important; /* neutralize Bootstrap margins if needed */
    }
}

html, body {
    height: 100%;
}

body {
    margin: 0;
}

/*.copy {*/
/*    max-width: 900px;*/
/*    margin-inline: auto;*/
/*}*/

/* Variant 2 */
/*Navbar Styling*/
.navbar.glass {
    overflow: visible; /* let the logo escape the bar */
    z-index: 20; /* above content */
}

.nav-crown {
    height: var(--logo-overshoot);
}

/* Brand styling */
/* Vertical stack (logo on top, name below) */
.brand-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
}

/* Name styling under the mark */
.brand-name-v2 {
    font-size: 1rem;
    line-height: 1;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    background: var(--grad-platinum);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-position: center;
}

/* Logo styling */
/* Square logo box */
.logo-mark {
    width: var(--logo-size, 300px);
    height: var(--logo-size, 300px);
    position: relative;
}

.logo-mark-mobile {
    width: var(--mobile-logo-size, 64px);
    height: var(--mobile-logo-size, 64px);
    position: relative;
}

/* the inner wrapper you’re animating */
.brand-drift{
    will-change: transform;
    transform: translateZ(0);   /* force GPU layer */
    backface-visibility: hidden;
    transition: none;           /* don't let CSS fight GSAP */
}

.logo-v2 {
    position: relative;
    display: inline-block;
    height: var(--logo-size);
    width: var(--logo-size);
    filter: drop-shadow(0px 0px 10px var(--glow-gold));
}

.mobile-logo-v2 {
    position: relative;
    display: inline-block;
    height: var(--mobile-logo-size);
    width: var(--mobile-logo-size);
    filter: drop-shadow(0px 0px 10px var(--glow-gold));
}

/* Keep the SVG hidden but present so the clipPath exists in DOM */
.logo-clip-v2 {
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* The actual visible element */
.logo-fill-v2 {
    height: 100%;
    width: 100%;
    clip-path: url(#logo-clip-v2);
    -webkit-clip-path: url(#logo-clip-v2); /* Safari */
    background: var(--grad-platinum);
    /*background-size: 150% 150%;*/
    /*background-position: center;*/
    background-size: 220% 220%; /* extra room to “move” */
    background-position: 0% 40%;
    animation: logoPlatinumDrift 18s ease-in-out infinite;
    position: relative;
    will-change: background-position;
}

.logo-fill-v2-mobile {
    height: 100%;
    width: 100%;
    clip-path: url(#logo-clip-v2-mobile);
    -webkit-clip-path: url(#logo-clip-v2-mobile); /* Safari */
    background: var(--grad-platinum);
    /*background-size: 150% 150%;*/
    /*background-position: center;*/
    background-size: 220% 220%; /* extra room to “move” */
    background-position: 0% 40%;
    animation: logoPlatinumDrift 18s ease-in-out infinite;
    position: relative;
    will-change: background-position;
}

@keyframes logoPlatinumDrift {
    0% {
        background-position: 0% 40%;
    }
    50% {
        background-position: 100% 60%;
    }
    100% {
        background-position: 0% 40%;
    }
}

.logo-fill-v2 {
    position: relative;
    overflow: hidden;
}

.logo-fill-v2::after {
    content: "";
    position: absolute;
    inset: -12%;
    pointer-events: none;
    mix-blend-mode: screen;
    background: linear-gradient(115deg,
    transparent 30%,
    rgba(255, 255, 255, .10) 46%,
    rgba(255, 255, 255, .28) 50%,
    rgba(255, 255, 255, .10) 54%,
    transparent 70%);
    transform: translateX(-110%);
    animation: logoSheenSweep 9s linear infinite;
}

@keyframes logoSheenSweep {
    to {
        transform: translateX(110%);
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .logo-fill-v2 {
        animation: none;
    }

    .logo-fill-v2::after {
        animation: none;
    }
}

/* -------- Hero base -------- */
.hero {
    position: relative;
    isolation: isolate;
}
.hero .container {
    padding-top: clamp(4rem, 8vw, 8rem);
    padding-bottom: clamp(3rem, 6vw, 6rem);
}

/* Ambient sweeps over marble */
.hero-ambient{
    position: absolute; inset: 0;
    background:
            radial-gradient(1100px 380px at 120% -20%, rgba(0,240,255,.12), transparent 60%),
            radial-gradient(900px 300px at -10% 120%, rgba(212,175,55,.10), transparent 60%);
    pointer-events: none;
    animation: heroAmbient 24s ease-in-out infinite;
}
@keyframes heroAmbient{
    0%   { transform: translate3d(0,0,0); opacity:.9; }
    50%  { transform: translate3d(-2%,1%,0); opacity:1; }
    100% { transform: translate3d(0,0,0); opacity:.9; }
}

/* Title treatment */
.hero-title { letter-spacing: .01em; }
.hero-title-sub { display: inline-block; }

/* Optional: subtle reflective shimmer on headline */
.hero-title-sub{
    background: var(--grad-platinum);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    background-size: 220% 220%; background-position: 0% 40%;
    animation: titleDrift 16s ease-in-out infinite;
}
@keyframes titleDrift{
    0%{background-position: 0% 40%;}
    50%{background-position: 100% 60%;}
    100%{background-position: 0% 40%;}
}

/* CTA spacing + small accent underlines on hover */
.hero-ctas .btn-ghost:hover{ box-shadow: var(--glow-cyan); }

/* Visual panel frame */
.hero-frame{
    padding: .5rem;
    border-radius: var(--r-medium);
}
.hero-art{
    aspect-ratio: 16 / 10;
    border-radius: var(--r-medium);
    background:
            linear-gradient(130deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%),
            var(--grad-iridescent);
    filter: saturate(.7) brightness(.8);
    box-shadow: var(--shadow-deep);
}

/* Edge sheen animation (very subtle) */
.edge-sheen{ position: relative; overflow: hidden; }
.edge-sheen::after{
    content:""; position:absolute; inset:-40%;
    background:
            conic-gradient(from 210deg at 50% 50%,
            transparent 0 20%, rgba(255,255,255,.08) 21% 22%, transparent 23% 100%);
    animation: sweep 7s linear infinite;
    mix-blend-mode: screen; pointer-events: none;
}
@keyframes sweep{ to{ transform: rotate(360deg); } }

/* Demo placeholder image style (you can remove later) */
.ph-img { aspect-ratio: 16 / 10; }

/* Motion accessibility */
@media (prefers-reduced-motion: reduce){
    .hero-ambient, .edge-sheen::after, .hero-title-sub{ animation: none !important; }
}

/* ===== Hero: full-width parallax ===== */
.hero-px{
    position: relative;
    /*min-height: clamp(72vh, 88vh, 96vh);*/
    isolation: isolate;
    /*min-height: clamp(64vh, 78vh, 88vh);*/
}

/* Media layer */
.hero-px__media{
    position: absolute; inset: 0;
    overflow: hidden;
    z-index: 0;
}
.hero-px__img{
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 100vw; height: 120vh;           /* taller than viewport for parallax travel */
    object-fit: cover;
    filter: saturate(.85) contrast(1.02) brightness(.9);
}

/* Readability overlay: vignette + ambient sweeps */
.hero-px__overlay{
    position: absolute; inset: 0;
    z-index: 1;
    background:
            radial-gradient(1200px 420px at 120% -20%, rgba(0,240,255,.10), transparent 60%),
            radial-gradient(900px 340px  at -10% 120%, rgba(212,175,55,.10), transparent 60%),
            linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 35%, rgba(0,0,0,.45) 100%),
            radial-gradient(60vw 50vh at 20% 40%, rgba(0,0,0,.35), transparent 60%);
    pointer-events: none;
}

/* Content container sits above overlays */
.hero-px__container{
    position: relative; z-index: 2;
    padding-top: clamp(4rem, 10vh, 10rem);
    padding-bottom: clamp(2rem, 8vh, 6rem);
}

/* Framed glass text panel */
.hero-px__panel{
    padding: clamp(1rem, 3vw, 2rem);
    border-radius: var(--r-medium);
    box-shadow: var(--shadow-deep);
    backdrop-filter: blur(var(--glass-blur));
}

/* Subtle platinum shimmer on the second line */
.hero-px__shine{
    background: var(--grad-platinum);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    background-size: 220% 220%;
    background-position: 0% 40%;
}

/* Architectural gold rules */
.hero-px__rule{
    position: absolute; left: 0; right: 0; height: 1px; z-index: 2;
    background: var(--line-gold); opacity: .85;
}
.hero-px__rule--top{    top: 0; }
.hero-px__rule--bottom{ bottom: 0; }

/* Parallax fallback (no JS / old browsers) */
@supports (background-attachment: fixed){
    .no-gsap .hero-px__media{ display: none; } /* avoid double image if you also apply a bg to header */
    .no-gsap #hero-parallax{
        background: url("assets/hero/atelier-wide.jpg") center / cover fixed no-repeat;
    }
}

/* Reduced motion: no parallax, keep static */
@media (prefers-reduced-motion: reduce){
    .hero-px__img{ height: 100vh; }
}

/* Section spacing tuned to ensure enough scroll after hero */
.section-ethos .container {
    padding-top: clamp(3rem, 6vw, 5rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

/* Manifesto card */
.ethos-card{
    padding: clamp(1rem, 3vw, 2rem);
    border-radius: var(--r-medium);
    min-height: 100%;
    box-shadow: var(--shadow-deep);
}

/* Feature tiles */
.feature-tile{
    display: grid;
    grid-template-columns: 72px 1fr;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: var(--r-medium);
    min-height: 96px;
}

/* Icon placeholder — replace with SVG later */
.feature-icon{
    width: 72px; height: 72px;
    border-radius: var(--r-soft);
    background:
            linear-gradient(130deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%),
            var(--grad-iridescent);
    filter: saturate(.7) brightness(.85);
    box-shadow: var(--shadow-deep);
}

/* Reveal baseline (will animate in with GSAP) */
.reveal{
    opacity: 0;
    transform: translateY(20px);
}

/* Reduced motion: show content statically */
@media (prefers-reduced-motion: reduce){
    .reveal{ opacity: 1; transform: none; }
}

/* keep the glass look but ensure the animated child is on its own layer */
.navbar.glass {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}
.navbar .container.position-relative {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* animate THIS inner wrapper, not the anchor with the centering transform */
.brand-drift{
    will-change: transform;
    transform: translate3d(0,0,0);
    backface-visibility: hidden;
    transition: none;
}