/* ============================================================
   KOSOVA MODELS - "MAISON" design system
   Editorial couture aesthetic · ink / bone / bronze
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;0,6..96,800;0,6..96,900;1,6..96,400;1,6..96,500&family=Archivo:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Archivo+Expanded:wght@500;600;700;800;900&display=swap');

:root{
  --ink:#0d0c0b;
  --coal:#16130f;
  --slate:#1d1a15;
  --bone:#f4efe7;
  --sand:#e7dbc9;
  --champagne:#ddccb4;
  --bronze:#c8763e;
  --bronze-lt:#dd9a5e;
  --gold:#d9a441;
  --mute:#8c8378;
  --line:rgba(13,12,11,.12);
  --line-d:rgba(244,239,231,.14);
  --shadow:0 30px 80px -30px rgba(0,0,0,.55);
  --ease:cubic-bezier(.16,1,.3,1);
}

*{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Archivo',sans-serif;
  background:var(--bone);
  color:var(--ink);
  overflow-x:hidden;
}

::selection{ background:var(--bronze); color:#fff; }

/* ---- Typography helpers ---- */
.font-display{ font-family:'Bodoni Moda',serif; }
.font-expanded{ font-family:'Archivo Expanded','Archivo',sans-serif; }
.u-label{ font-family:'Archivo',sans-serif; text-transform:uppercase; letter-spacing:.28em; font-weight:600; font-size:.68rem; }
.u-kicker{ font-family:'Archivo',sans-serif; text-transform:uppercase; letter-spacing:.42em; font-weight:600; font-size:.62rem; }
.display-hero{ font-family:'Bodoni Moda',serif; line-height:.92; letter-spacing:-.01em; }
.italic-quote{ font-style:italic; font-family:'Bodoni Moda',serif; }

/* fluid display sizes */
.fs-mega{ font-size:clamp(3.4rem,11vw,11rem); }
.fs-xl{ font-size:clamp(2.6rem,7vw,6rem); }
.fs-lg{ font-size:clamp(2rem,4.6vw,3.6rem); }

/* ---- Film grain overlay ---- */
.grain::after{
  content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ---- Duotone / editorial photo treatments ---- */
.duo{ filter:grayscale(1) contrast(1.04) brightness(.96); transition:filter .9s var(--ease), transform 1.2s var(--ease); }
.group:hover .duo, .duo:hover{ filter:grayscale(0) contrast(1) brightness(1); }
.warmtone{ filter:sepia(.25) contrast(1.03) saturate(1.05); }
.img-cover{ width:100%; height:100%; object-fit:cover; object-position:center top; }

/* ---- Buttons ---- */
.btn{ display:inline-flex; align-items:center; gap:.6rem; font-weight:600; letter-spacing:.02em;
  padding:.95rem 1.7rem; border-radius:999px; transition:all .5s var(--ease); position:relative; overflow:hidden; font-size:.9rem; }
.btn-bronze{ background:var(--bronze); color:#fff; }
.btn-bronze:hover{ background:var(--ink); color:var(--bone); transform:translateY(-2px); }
.btn-ink{ background:var(--ink); color:var(--bone); }
.btn-ink:hover{ background:var(--bronze); transform:translateY(-2px); }
.btn-ghost{ border:1px solid currentColor; }
.btn-ghost:hover{ background:var(--ink); color:var(--bone); border-color:var(--ink); }
.btn-line{ position:relative; padding-bottom:.35rem; }
.btn-line::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:currentColor; transform:scaleX(.18); transform-origin:left; transition:transform .55s var(--ease); }
.btn-line:hover::after{ transform:scaleX(1); }

/* arrow chip */
.chip{ width:46px; height:46px; border-radius:999px; display:grid; place-items:center; border:1px solid var(--line); transition:all .45s var(--ease); }
.chip:hover{ background:var(--ink); color:var(--bone); border-color:var(--ink); }

/* ---- Marquee ---- */
.marquee{ display:flex; gap:3rem; width:max-content; animation:marq 32s linear infinite; }
.marquee.rev{ animation-direction:reverse; }
@keyframes marq{ to{ transform:translateX(-50%); } }
.marquee-wrap:hover .marquee{ animation-play-state:paused; }

/* ---- Reveal on scroll ---- */
.reveal{ opacity:0; transform:translateY(34px); transition:opacity 1s var(--ease), transform 1.1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal-clip{ clip-path:inset(0 0 100% 0); transition:clip-path 1.2s var(--ease); }
.reveal-clip.in{ clip-path:inset(0 0 0 0); }
[data-delay="1"]{ transition-delay:.08s; } [data-delay="2"]{ transition-delay:.16s; }
[data-delay="3"]{ transition-delay:.24s; } [data-delay="4"]{ transition-delay:.32s; }
[data-delay="5"]{ transition-delay:.4s; } [data-delay="6"]{ transition-delay:.48s; }

/* hero load animation */
@keyframes riseIn{ from{ opacity:0; transform:translateY(40px); } to{ opacity:1; transform:none; } }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.rise{ opacity:0; animation:riseIn 1.1s var(--ease) forwards; }
.line-mask{ overflow:hidden; display:block; }
.line-mask > *{ display:block; transform:translateY(105%); animation:lineUp 1.1s var(--ease) forwards; }
@keyframes lineUp{ to{ transform:none; } }

/* ---- Header ---- */
.nav-link{ position:relative; font-size:.82rem; letter-spacing:.04em; font-weight:500; padding:.4rem 0; transition:color .4s; }
.nav-link::after{ content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .45s var(--ease); }
.nav-link:hover::after, .nav-link.active::after{ transform:scaleX(1); transform-origin:left; }
.site-header{ transition:background .5s var(--ease), backdrop-filter .5s, border-color .5s, color .5s; }
.header-scrolled{ background:rgba(13,12,11,.82); backdrop-filter:blur(14px) saturate(1.2); border-color:var(--line-d)!important; }

.has-menu .submenu{ opacity:0; visibility:hidden; transform:translateY(14px); transition:all .45s var(--ease); }
.has-menu:hover .submenu{ opacity:1; visibility:visible; transform:none; }

/* ---- Mega menu ---- */
.mega-chev{ transition:transform .4s var(--ease); opacity:.6; }
.has-menu:hover .mega-chev{ transform:rotate(180deg); opacity:1; }
.mega-wrap{ position:absolute; top:100%; padding-top:20px; z-index:60; }
.has-menu .mega-wrap{ left:50%; transform:translate(-50%,14px); }
.has-menu:hover .mega-wrap{ transform:translate(-50%,0); }
.mega-panel{ width:min(740px,90vw); background:#100e0c; color:var(--bone); border:1px solid var(--line-d);
  border-radius:26px; box-shadow:0 50px 110px -34px rgba(0,0,0,.78); padding:28px; overflow:hidden;
  background-image:radial-gradient(circle at 0% 0%, rgba(200,118,62,.13), transparent 46%); }
.mega-grid{ display:grid; grid-template-columns:1.25fr .9fr; gap:28px; }
.mega-kicker{ font-family:'Archivo',sans-serif; text-transform:uppercase; letter-spacing:.28em; font-size:.6rem; font-weight:600; color:var(--bronze-lt); }
.mega-blurb{ font-family:'Bodoni Moda',serif; font-style:italic; font-size:1.15rem; line-height:1.35; color:rgba(244,239,231,.82); margin:12px 0 18px; max-width:32ch; }
.mega-links{ display:flex; flex-direction:column; }
.mega-link{ display:flex; align-items:baseline; gap:.6rem; padding:.72rem .8rem; border-radius:14px; border-bottom:1px solid var(--line-d); transition:all .35s var(--ease); }
.mega-link:last-child{ border-bottom:0; }
.mega-link:hover{ background:rgba(255,255,255,.05); padding-left:1.2rem; }
.mega-link-label{ font-family:'Bodoni Moda',serif; font-size:1.55rem; line-height:1; }
.mega-link-desc{ font-size:.72rem; letter-spacing:.04em; color:rgba(244,239,231,.45); margin-left:auto; white-space:nowrap; }
.mega-link .mega-arrow{ color:var(--bronze-lt); opacity:0; transform:translateX(-6px); transition:all .35s var(--ease); }
.mega-link:hover .mega-arrow{ opacity:1; transform:none; }
.mega-cta{ display:inline-block; margin-top:18px; font-size:.8rem; font-weight:600; letter-spacing:.04em; color:var(--bronze-lt); position:relative; }
.mega-cta::after{ content:""; position:absolute; left:0; bottom:-3px; height:1px; width:100%; background:currentColor; transform:scaleX(.18); transform-origin:left; transition:transform .45s var(--ease); }
.mega-cta:hover::after{ transform:scaleX(1); }
.mega-feature{ position:relative; border-radius:18px; overflow:hidden; min-height:268px; display:block; }
.mega-feature img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.03); transition:transform 1.1s var(--ease), filter .8s var(--ease); }
.mega-feature:hover img{ filter:grayscale(0); transform:scale(1.06); }
.mega-feature-ov{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:18px;
  background:linear-gradient(to top, rgba(13,12,11,.94), rgba(13,12,11,.12) 60%, transparent); }
.mega-tag{ align-self:flex-start; font-family:'Archivo',sans-serif; text-transform:uppercase; letter-spacing:.22em; font-size:.5rem; font-weight:600;
  padding:4px 11px; border-radius:999px; background:rgba(255,255,255,.15); backdrop-filter:blur(6px); margin-bottom:9px; }
.mega-feature h4{ font-family:'Bodoni Moda',serif; font-size:1.45rem; line-height:1.05; }
.mega-feature p{ font-size:.75rem; color:rgba(244,239,231,.62); margin-top:3px; }
@media (max-width:1023px){ .mega-wrap{ display:none; } }

/* ---- Cards ---- */
.talent-card .meta{ transform:translateY(8px); opacity:0; transition:all .55s var(--ease); }
.talent-card:hover .meta{ transform:none; opacity:1; }
.talent-card .frame{ overflow:hidden; }
.talent-card:hover .frame img{ transform:scale(1.05); }
.talent-card .frame img{ transition:transform 1.3s var(--ease), filter .9s var(--ease); }

/* index number tag */
.idx{ font-family:'Bodoni Moda',serif; font-size:.85rem; }

/* ---- Filter pills ---- */
.pill{ font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; font-weight:600; padding:.6rem 1.15rem; border-radius:999px; border:1px solid var(--line); transition:all .4s var(--ease); color:var(--mute); }
.pill:hover{ color:var(--ink); border-color:var(--ink); }
.pill.active{ background:var(--ink); color:var(--bone); border-color:var(--ink); }

/* ---- Forms ---- */
.field{ width:100%; background:transparent; border:1px solid var(--line); border-radius:14px; padding:1rem 1.15rem; font-size:.95rem; color:var(--ink); transition:border-color .4s, box-shadow .4s; }
.field::placeholder{ color:#a89f93; }
.field:focus{ outline:none; border-color:var(--bronze); box-shadow:0 0 0 4px rgba(200,118,62,.12); }
.field-dark{ border-color:var(--line-d); color:var(--bone); }
.field-dark::placeholder{ color:#7d756a; }

/* ---- Glass panel (portal) ---- */
.glass{ background:rgba(255,255,255,.55); backdrop-filter:blur(20px) saturate(1.3); border:1px solid rgba(255,255,255,.6); }
.glass-d{ background:rgba(28,25,20,.55); backdrop-filter:blur(20px) saturate(1.3); border:1px solid var(--line-d); }
.card-soft{ background:#fff; border:1px solid var(--line); border-radius:22px; }
.ring-bronze{ box-shadow:0 0 0 1px rgba(200,118,62,.4), 0 24px 60px -30px rgba(200,118,62,.45); }

/* progress ring helper */
.statbar{ height:6px; border-radius:999px; background:var(--sand); overflow:hidden; }
.statbar > span{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--bronze),var(--gold)); }

/* ---- Decorative ---- */
.hairline{ height:1px; background:var(--line); }
.hairline-d{ height:1px; background:var(--line-d); }
.dot-grid{ background-image:radial-gradient(var(--line) 1px,transparent 1px); background-size:22px 22px; }
.noise-bg{ background-color:var(--ink);
  background-image:radial-gradient(circle at 20% 10%,rgba(200,118,62,.16),transparent 45%),radial-gradient(circle at 85% 80%,rgba(217,164,65,.1),transparent 40%); }

.vline{ writing-mode:vertical-rl; text-orientation:mixed; }

/* logo monogram */
.km-logo{ display:inline-block; }
.km-logo svg, .km-mono{ width:100%; height:100%; display:block; }

/* ============================================================
   MOTION - parallax, tilt, magnetic, scroll progress, reveals
   ============================================================ */
/* scroll progress bar */
#scroll-progress{ position:fixed; top:0; left:0; height:3px; width:0; z-index:70; pointer-events:none;
  background:linear-gradient(90deg,var(--bronze),var(--gold)); box-shadow:0 0 14px rgba(200,118,62,.55); }

/* parallax host must clip; JS oversizes & translates the image */
[data-parallax]{ will-change:transform; backface-visibility:hidden; }
.px-host{ overflow:hidden; }

/* 3D tilt cards */
[data-tilt]{ transition:transform .5s var(--ease); transform-style:preserve-3d; will-change:transform; }
[data-tilt] .tilt-pop{ transform:translateZ(40px); transition:transform .5s var(--ease); }

/* magnetic targets get a snappier transition than the default .btn */
[data-magnetic], .magnetic{ transition:transform .35s var(--ease); }

/* ken burns - slow drift/zoom for non-scrolling hero images (auth, etc.) */
.kenburns{ animation:kenburns 20s ease-in-out infinite alternate; transform-origin:center; }
@keyframes kenburns{ 0%{ transform:scale(1.06) translate(0,0); } 100%{ transform:scale(1.2) translate(-1.5%,1.5%); } }

/* extra reveal variants */
.reveal-scale{ opacity:0; transform:scale(.9); transition:opacity 1s var(--ease), transform 1.1s var(--ease); }
.reveal-scale.in{ opacity:1; transform:none; }
.reveal-blur{ opacity:0; filter:blur(16px); transform:translateY(20px); transition:opacity 1s var(--ease), filter 1.2s var(--ease), transform 1.1s var(--ease); }
.reveal-blur.in{ opacity:1; filter:none; transform:none; }

/* float drift for decorative bits */
.drift{ animation:drift 7s ease-in-out infinite alternate; }
@keyframes drift{ from{ transform:translateY(-6px); } to{ transform:translateY(6px); } }

@media (prefers-reduced-motion:reduce){
  .kenburns,.drift{ animation:none!important; }
  [data-parallax]{ transform:none!important; }
  .reveal-scale,.reveal-blur{ opacity:1; transform:none; filter:none; }
}

/* custom scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bone); }
::-webkit-scrollbar-thumb{ background:#c9bca8; border-radius:99px; border:2px solid var(--bone); }
::-webkit-scrollbar-thumb:hover{ background:var(--bronze); }

/* utility */
.no-scrollbar::-webkit-scrollbar{ display:none; }
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }
@media (prefers-reduced-motion:reduce){ *{ animation:none!important; transition:none!important; } .reveal{ opacity:1; transform:none; } }