/* assets/css/style.css
   Lusaya Production — updated full stylesheet
   - Bigger logo
   - Sticky footer fix
   - Cinematic visuals & animations
   - Responsive rules & accessibility
*/

:root{
  --bg-900: #05060a;
  --bg-800: #0b1420;
  --panel: #0f1318;
  --accent: #bd9d37;
  --accent-2: #b08e51;
  --muted: #F7F6F3;
  --muted-2: rgba(247,246,243,0.78);
  --glass: rgba(255,255,255,0.04);
  --glass-2: rgba(255,255,255,0.06);
  --card-shadow: 0 20px 48px rgba(2,6,23,0.66);
  --soft-shadow: 0 12px 28px rgba(2,6,23,0.5);
  --radius-lg: 14px;
  --radius-md: 10px;
  --ease-spring: cubic-bezier(.2,.9,.25,1);
  --header-height: 104px; /* fallback - JS will update */
}

/* --------------------------------------------------
   Layout: sticky header + footer-at-bottom (flex)
   -------------------------------------------------- */
html, body { height: 100%; }

body, .site-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(1000px 400px at 10% 10%, rgba(189,157,55,0.04), transparent 6%),
    linear-gradient(180deg,var(--bg-900) 0%, var(--bg-800) 100%);
  color: var(--muted);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* main content area expands; padding-top kept in sync with header height */
main.site-main, main {
  flex: 1 0 auto;
  padding-top: var(--header-height, 104px);
  margin: 0; /* ensure no old margin-top interferes */
}

/* footer stays in document flow and sits at bottom on short pages */
.site-footer, footer {
  flex-shrink: 0;
  width: 100%;
  position: relative;
}

/* page transition overlay */
.page-transition{ position:fixed; inset:0; pointer-events:none; z-index:2000; transition: opacity .45s var(--ease-spring); opacity:0; background: linear-gradient(135deg, rgba(189,157,55,0.03), rgba(176,142,81,0.02)); }

/* --------------------------------------------------
   Header
   -------------------------------------------------- */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100;
  padding:18px 0;
  backdrop-filter: blur(8px) saturate(1.04);
  background: linear-gradient(180deg, rgba(8,12,16,0.26), rgba(8,12,16,0.06));
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: padding .28s var(--ease-spring), box-shadow .28s var(--ease-spring), background .28s ease;
}

/* compact header when scrolled */
.site-header.scrolled{ padding:10px 0; box-shadow: 0 6px 26px rgba(2,6,23,0.45); }

/* Brand / Logo - made bigger */
.navbar-brand {
  display:flex;
  align-items:center;
  gap:12px;
}
.navbar-brand img {
  width:100px;
  height:100px;
  border-radius:10px;
  object-fit:contain;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  transition: transform .28s var(--ease-spring), box-shadow .28s ease;
}
.navbar-brand img:hover { transform: translateY(-4px) scale(1.02); }
.brand-text { font-weight:700; letter-spacing:0.02em; color:var(--muted-2); font-size:1.05rem; line-height:1; }

/* small brand subtext */
.navbar-brand small { display:block; font-size:.72rem; color: rgba(247,246,243,0.6); margin-top: -4px; }

/* --------------------------------------------------
   Hero
   -------------------------------------------------- */
.hero-section{ padding:140px 0 56px; position:relative; z-index:1; }
@media (max-width:992px){ .hero-section{ padding-top:96px; } }

.hero-inner{ display:grid; grid-template-columns: 1fr 1fr; gap:34px; align-items:center; max-width:1320px; margin:0 auto; padding:0 24px; }
@media (max-width:992px){ .hero-inner{ grid-template-columns: 1fr; } }

.hero-title{
  font-family: 'Playfair Display', serif;
  font-weight:700; font-size: clamp(2.2rem, 5.2vw, 4rem);
  line-height:1.02; margin:0 0 12px; color:var(--muted);
  text-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.hero-sub{ color: rgba(247,246,243,0.85); font-size:1.05rem; margin-bottom:22px; }

.hero-cta{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.btn-cta{
  padding: .78rem 1.2rem; border-radius: 12px; font-weight:600;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color: #08121a; border:none; box-shadow: 0 28px 72px rgba(189,157,55,0.12);
  transition: transform .32s var(--ease-spring), box-shadow .32s ease;
}
.btn-cta:hover{ transform: translateY(-8px) scale(1.02); box-shadow: 0 40px 110px rgba(176,142,81,0.18); }
.btn-ghost{ padding:.7rem 1rem; border-radius:10px; border:1px solid rgba(255,255,255,0.06); background:transparent; color:var(--muted-2); }

/* small microcopy */
.hero-note{ margin-top:10px; font-size:.95rem; color:rgba(247,246,243,0.72) }

/* mosaic */
.mosaic-hero{ border-radius: var(--radius-lg); overflow:hidden; position:relative; min-height:380px; box-shadow: var(--card-shadow); }
.mosaic-grid{ display:grid; grid-template-columns: 1fr 1fr 1fr; grid-auto-rows: 1fr; gap:10px; padding:12px; height:100%; }
.mosaic-item{ position:relative; border-radius:10px; background-size:cover; background-position:center; transition: transform .6s var(--ease-spring), box-shadow .45s ease; will-change: transform; }
.mosaic-item.large{ grid-column: 3 / 4; grid-row: 1 / span 2; }
@media (max-width:1199px){ .mosaic-grid{ grid-template-columns: repeat(2, 1fr) } .mosaic-item.large{ grid-column:2 / 3 } }
@media (max-width:767px){ .mosaic-grid{ grid-template-columns: 1fr; } .mosaic-item.large{ grid-column:1 / -1; } .mosaic-hero{ min-height:260px } }

/* shimmer */
.mosaic-item::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: linear-gradient(90deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.00) 100%);
  mix-blend-mode: overlay; opacity:0.12;
  transform: translateX(-100%);
  transition: transform 2.6s linear;
}
.mosaic-item:hover::after{ transform: translateX(40%); }

/* hero accent */
.hero-accent { position:absolute; right:-6vw; top:-6vw; width:36vw; height:36vw; pointer-events:none; filter: blur(40px); opacity:.08; background: radial-gradient(circle at 30% 30%, rgba(189,157,55,0.18), rgba(176,142,81,0.08) 35%, transparent 60%); transform: rotate(14deg); }

/* --------------------------------------------------
   Work / Cards
   -------------------------------------------------- */
.card.work-card{
  border-radius:12px; overflow:hidden; border:none; background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  transition: transform .36s var(--ease-spring), box-shadow .36s ease;
  display:flex; flex-direction:column;
}
.card.work-card:hover{ transform: translateY(-12px); box-shadow: var(--soft-shadow); }
.card-img-container{ position:relative; aspect-ratio: 16/9; overflow:hidden; background:#060607; }
.card-img-container img{ width:100%; height:100%; object-fit:cover; display:block; transform: scale(1); transition: transform .6s var(--ease-spring); }
.card.work-card:hover .card-img-container img{ transform: scale(1.06) rotate(.2deg); }
.card-body{ padding:18px; display:flex; flex-direction:column; gap:10px; }

/* play button */
.play-btn{
  position:absolute; right:12px; bottom:12px; width:56px; height:56px; border-radius:50%;
  border:none; display:inline-flex; align-items:center; justify-content:center; color:var(--accent);
  background: linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.32));
  box-shadow: 0 10px 30px rgba(0,0,0,0.6); transition: transform .22s ease; z-index: 2;
}
.card.work-card:hover .play-btn{ transform: translateY(-6px) scale(1.06); }

/* badges */
.badge-glass{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); border:1px solid rgba(255,255,255,0.04); color:var(--muted-2); padding:.32rem .6rem; border-radius:8px; backdrop-filter: blur(4px); }

/* --------------------------------------------------
   Artists, Magazines, Stats
   -------------------------------------------------- */
.artist-card{ position:relative; border-radius:12px; overflow:hidden; transition: transform .28s var(--ease-spring); }
.artist-card:hover{ transform: translateY(-8px); }
.artist-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.artist-overlay{ position:absolute; inset:0; display:flex; align-items:flex-end; padding:14px; background: linear-gradient(180deg, rgba(0,0,0,0.22), rgba(0,0,0,0.72)); transform: translateY(100%); transition: transform .28s var(--ease-spring), opacity .28s ease; opacity:0; }
.artist-card:hover .artist-overlay, .artist-card:focus-within .artist-overlay{ transform: translateY(0); opacity:1; }

.mag-card img { width:100%; height:100%; object-fit:cover; display:block; }

/* counters & helpers */
.stat-value{ font-weight:700; font-size:1.35rem; color:var(--muted); }
.stat-label{ color:rgba(247,246,243,0.7); font-size:.92rem }

/* reveal & stagger */
.reveal{ opacity:0; transform: translateY(18px) scale(.997); transition: opacity .7s var(--ease-spring), transform .7s var(--ease-spring); will-change: transform, opacity; }
.reveal.is-visible{ opacity:1; transform:none; }
.stagger > *{ transition-delay: calc(var(--index,0) * 80ms); }
.stagger > *.is-visible{ transition-delay: calc(var(--index,0) * 40ms); }

/* tilt */
.tilt{ transform-style: preserve-3d; will-change: transform; backface-visibility: hidden; perspective: 800px; }
.tilt .tilt-shadow{ position:absolute; inset:0; pointer-events:none; border-radius:inherit; box-shadow: 0 26px 90px rgba(2,6,23,0.62); opacity:0; transition: opacity .22s ease; }
.tilt:hover .tilt-shadow{ opacity:1; }

/* --------------------------------------------------
   Footer
   -------------------------------------------------- */
.site-footer{
  background: linear-gradient(180deg, rgba(6,8,10,0.9), rgba(6,8,10,0.95));
  border-top:1px solid rgba(255,255,255,0.02);
  padding:40px 0;
  color:rgba(247,246,243,0.78);
  width:100%;
}

/* --------------------------------------------------
   Accessibility & focus
   -------------------------------------------------- */
a:focus, button:focus, .yt-card:focus, .artist-card:focus, .mag-card:focus {
  outline: 3px solid rgba(189,157,55,0.16);
  outline-offset:4px;
  border-radius:10px;
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .reveal, .mosaic-item, .card-img-container img, .tilt, .hero-accent { transition: none !important; transform:none !important; animation: none !important; }
  .mosaic-item::after{ display:none; }
}

/* responsive helpers */
.container{ max-width:1320px; margin:0 auto; padding:0 20px; }
@media (max-width:991px){ .hero-inner{ padding:0 14px } }

/* Ensure Bootstrap grid children equal-height */
.row.g-3 > [class*="col-"] { display:flex; }