/* =============================================================================
   01) SECTIONS (LEGACY PLACEHOLDERS)
============================================================================= */
section{padding:6rem 0;}
.section-music,.section-about{background-color:#f5f5f5;}
.section-projects,.section-contact{background-color:#eaeaea;}
section h2{font-size:2rem;font-weight:600;margin-bottom:1rem;}
section p{font-size:1.1rem;line-height:1.6;max-width:800px;margin-bottom:var(--spacing-md);}

/* =============================================================================
   02) FEATURED COLLECTIONS (HOMEPAGE)
============================================================================= */
.featured-section{padding:6rem 0;}
.featured-header{
  width: var(--site-rail-width);
  max-width: none;
  margin: 0 auto 2.6rem auto;
  display:grid;
  gap:0.85rem;
}
.featured-kicker{
  font-size:0.8rem;
  font-weight:400;
  letter-spacing:0.14em;
  text-transform:uppercase;
  opacity:0.75;
  color:var(--text-secondary-color);
  margin:0;
}
.featured-title{
  font-size:clamp(1.6rem,2.4vw,2.2rem);
  font-weight:500;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-color);
  margin:0;
}
.featured-sub{
  max-width:62ch;
  font-size:0.95rem;
  line-height:1.7;
  color:var(--text-secondary-color);
  margin:0;
}
.featured-grid{
  width: var(--site-rail-width);
  max-width: none;
  margin: 0 auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.25rem;
}
.featured-card{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background:
    radial-gradient(900px 420px at 80% 20%, color-mix(in srgb, var(--color-primary1) 16%, transparent) 0%, transparent 58%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg-color) 78%, transparent) 0%,
      color-mix(in srgb, var(--bg-color) 92%, transparent) 100%
    );
  border:1px solid color-mix(in srgb, var(--text-color) 14%, transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  transition:transform 0.55s cubic-bezier(0.22,1,0.36,1),opacity 0.35s ease;
}
.featured-card:hover{transform:translateY(-6px);}
.featured-card-inner{padding:1.35rem 1.35rem 1.2rem;display:grid;gap:0.9rem;}

.featured-media{
  width:100%;
  aspect-ratio:16/10;
  border-radius:14px;
  overflow:hidden;
  border:1px solid color-mix(in srgb, var(--text-color) 10%, transparent);
  background:color-mix(in srgb, var(--bg-color) 92%, transparent);
}
.featured-media img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.01);}

.featured-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:0.75rem;
  font-size:0.78rem;
  font-weight:400;
  letter-spacing:0.12em;
  text-transform:uppercase;
  opacity:0.78;
  color:var(--text-secondary-color);
}
.featured-name{
  font-size:1.05rem;
  font-weight:500;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-color);
  margin:0;
}
.featured-desc{
  font-size:0.95rem;
  line-height:1.7;
  color:var(--text-secondary-color);
  margin:0;
}
.featured-cta{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  font-size:0.8rem;
  font-weight:400;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--text-color);
  opacity:0.86;
  transition:transform 0.45s cubic-bezier(0.22,1,0.36,1),opacity 0.25s ease,color 0.25s ease;
}
.featured-cta:hover{transform:translateY(-3px);opacity:1;color:var(--color-primary1);}

@media (max-width:1024px){
  .featured-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .featured-section{padding:4.2rem 0;}
  .featured-grid{grid-template-columns:1fr;gap:1rem;}
  .featured-card-inner{padding:1.15rem 1.1rem 1.05rem;}
}

/* =============================================================================
   03) LEGACY POSTS & COMMENTS
============================================================================= */

/* Legacy featured posts/comments (kept) */
.section-posts{background-color:#f9f9f9;}
.post{border-bottom:1px solid #ddd;padding:2rem 0;}
.post:last-child{border-bottom:none;}
.post-title{font-size:1.5rem;font-weight:600;margin-bottom:0.5rem;}
.post-excerpt{font-size:1rem;color:#333;margin-bottom:0.5rem;}
.read-more{text-decoration:none;color:#0077cc;font-weight:500;transition:color 0.2s;}
.read-more:hover{text-decoration:underline;color:#005fa3;}

.section-comments{background-color:#f5f5f5;padding:2rem 0;}
.section-comments h2{font-size:1.8rem;font-weight:600;margin-bottom:1.5rem;}
.comment{border-bottom:1px solid #ddd;padding:1rem 0;}
.comment:last-child{border-bottom:none;}
.comment p{font-size:0.95rem;line-height:1.6;color:#222;margin-bottom:var(--spacing-md);}

/* Rail alignment for legacy content blocks (keeps visuals consistent with footer/header gutters) */
.section-posts .post,
.section-comments h2,
.section-comments .comment{
  width: var(--site-rail-width);
  margin-left: auto;
  margin-right: auto;
}

/* =============================================================================
   04) HOME HERO (POST-ENTER) — FULL-BLEED VIDEO + LUX GLASS OVERLAY
   Goal: video spans edge-to-edge, sits UNDER the header ribbon, and stays centered.
============================================================================= */

/* Full-bleed hero section container (tolerant selectors) */
#home-hero,
.home-hero,
.hero-home,
[data-hero="home"]{
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;

  /* Full viewport hero */
  min-height: 100vh;
  min-height: 100svh;
}

@supports (height: 100dvh){
  #home-hero,
  .home-hero,
  .hero-home,
  [data-hero="home"]{
    min-height: 100dvh;
  }
}

/* Video wrapper (covers under fixed header-controls) */
#home-hero .hero-video,
#home-hero .home-hero-video,
#home-hero video,
.home-hero .hero-video,
.home-hero .home-hero-video,
.home-hero video,
.hero-home .hero-video,
.hero-home .home-hero-video,
.hero-home video,
[data-hero="home"] .hero-video,
[data-hero="home"] .home-hero-video,
[data-hero="home"] video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* Ensure the media itself is truly centered and fills (no side black gaps) */
#home-hero video,
.home-hero video,
.hero-home video,
[data-hero="home"] video{
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: center center;
  transform: translateZ(0);
  z-index: 0;
}

/* Optional glass overlay element if present in HTML */
#home-hero .hero-glass,
#home-hero .home-hero-glass,
.home-hero .hero-glass,
.home-hero .home-hero-glass,
.hero-home .hero-glass,
.hero-home .home-hero-glass,
[data-hero="home"] .hero-glass,
[data-hero="home"] .home-hero-glass{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;

  /* Lux wash + subtle blur, theme-adaptable */
  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(0,0,0,0.22) 0%,
      rgba(0,0,0,0.48) 52%,
      rgba(0,0,0,0.68) 100%
    );

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.light-mode #home-hero .hero-glass,
body.light-mode #home-hero .home-hero-glass,
body.light-mode .home-hero .hero-glass,
body.light-mode .home-hero .home-hero-glass,
body.light-mode .hero-home .hero-glass,
body.light-mode .hero-home .home-hero-glass,
body.light-mode [data-hero="home"] .hero-glass,
body.light-mode [data-hero="home"] .home-hero-glass{
  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(255,255,255,0.10) 0%,
      rgba(0,0,0,0.12) 52%,
      rgba(0,0,0,0.22) 100%
    );
}

/* If no overlay element exists, paint the glass with a pseudo-element on the hero */
#home-hero::after,
.home-hero::after,
.hero-home::after,
[data-hero="home"]::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;

  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(0,0,0,0.22) 0%,
      rgba(0,0,0,0.48) 52%,
      rgba(0,0,0,0.68) 100%
    );

  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

body.light-mode #home-hero::after,
body.light-mode .home-hero::after,
body.light-mode .hero-home::after,
body.light-mode [data-hero="home"]::after{
  background:
    radial-gradient(
      circle at 50% 38%,
      rgba(255,255,255,0.10) 0%,
      rgba(0,0,0,0.12) 52%,
      rgba(0,0,0,0.22) 100%
    );
}

/* Hero content sits above glass */
#home-hero .hero-content,
.home-hero .hero-content,
.hero-home .hero-content,
[data-hero="home"] .hero-content{
  position: relative;
  z-index: 2;
}

/* Ensure hero logo sits above glass overlay */
#home-hero .hero-logo,
.home-hero .hero-logo,
.hero-home .hero-logo,
[data-hero="home"] .hero-logo {
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

/* Home Hero — Dedicated Logo Layer (always above glass) */
#home-hero .home-hero-logo-layer,
.home-hero .home-hero-logo-layer,
.hero-home .home-hero-logo-layer,
[data-hero="home"] .home-hero-logo-layer{
  position: relative;
  z-index: 3;
  pointer-events: auto;
}

/* Defensive: if an explicit overlay node exists, keep it under logo + content */
#home-hero .home-hero-overlay,
.home-hero .home-hero-overlay,
.hero-home .home-hero-overlay,
[data-hero="home"] .home-hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Mobile: use dynamic viewport units to avoid bottom gaps */
@media (max-width: 820px){
  #home-hero,
  .home-hero,
  .hero-home,
  [data-hero="home"]{
    min-height: 100svh;
  }

  @supports (height: 100dvh){
    #home-hero,
    .home-hero,
    .hero-home,
    [data-hero="home"]{
      min-height: 100dvh;
    }
  }
}

/* Mobile: vertically + horizontally center hero content */
@media (max-width: 820px){
  #home-hero .hero-content,
  .home-hero .hero-content,
  .hero-home .hero-content,
  [data-hero="home"] .hero-content{
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

/* =============================================================================
   05) HOME HERO LOGO — STICKY + SHRINK ON SCROLL
============================================================================= */

/* Base size (initial state, large but controlled) */
.home-hero-logo,
.hero-logo,
.home-hero-logo-layer img,
.home-hero-logo-layer svg {
  width: clamp(320px, 34vw, 560px);
  max-width: 78%;
  height: auto;
  transition:
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    width 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.6s ease;
  will-change: transform, width;
}

/* Sticky behavior after enter (same anchor for both states) */
.home-hero-logo-layer {
  position: sticky;
  top: 4.4rem; /* sit below the fixed header controls */
  z-index: 300; /* above video + glass, below menu */
  display: flex;
  justify-content: flex-start;
  padding-left: var(--site-gutter);
  pointer-events: auto;
}

/* Scrolled state (JS toggles .hero-logo-scrolled on body) */
body.hero-logo-scrolled .home-hero-logo,
body.hero-logo-scrolled .hero-logo,
body.hero-logo-scrolled .home-hero-logo-layer img,
body.hero-logo-scrolled .home-hero-logo-layer svg {
  width: clamp(260px, 24vw, 380px); /* ~50% of original, not tiny */
  transform: scale(1);
  opacity: 1;
}

/* Mobile tuning */
@media (max-width: 820px) {
  .home-hero-logo,
  .hero-logo,
  .home-hero-logo-layer img,
  .home-hero-logo-layer svg {
    width: clamp(240px, 72vw, 380px);
    max-width: 84%;
  }

  .home-hero-logo-layer {
    top: 4.1rem;
    padding-left: var(--site-gutter);
  }

  body.hero-logo-scrolled .home-hero-logo,
  body.hero-logo-scrolled .hero-logo,
  body.hero-logo-scrolled .home-hero-logo-layer img,
  body.hero-logo-scrolled .home-hero-logo-layer svg {
    width: 220px;
    transform: scale(1);
  }
}

/* =============================================================================
   06) HIDE HOME HERO LOGO DURING OVERLAYS (MENU / COUNTRY)
============================================================================= */

body.menu-open .home-hero-logo-layer,
body.menu-open .home-hero-logo,
body.menu-open .hero-logo,
body.menu-open .home-hero-logo-layer img,
body.menu-open .home-hero-logo-layer svg,
body.country-overlay-active .home-hero-logo-layer,
body.country-overlay-active .home-hero-logo-layer img,
body.country-overlay-active .home-hero-logo-layer svg {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* =============================================================================
   07) HOME SCROLL GRADIENT BACKDROP (EXPERIMENTAL / ADDITIVE)
   Reference: JescoJets — vertical chromatic fade driven by scroll (CSS-only)
============================================================================= */

.home-scroll-gradient{
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  /* Top = subtle color, Bottom = neutral */
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-primary1) 14%, var(--bg-color)) 0%,
      color-mix(in srgb, var(--bg-color) 92%, transparent) 55%,
      var(--bg-color) 100%
    );

  transition: background 0.9s cubic-bezier(0.22,1,0.36,1);
}

/* Mid-scroll: slightly richer top tone */
body.scroll-mid .home-scroll-gradient{
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-primary1) 22%, var(--bg-color)) 0%,
      color-mix(in srgb, var(--bg-color) 90%, transparent) 50%,
      var(--bg-color) 100%
    );
}

/* Deep-scroll: strongest presence, still neutralized at bottom */
body.scroll-deep .home-scroll-gradient{
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-primary2) 26%, var(--bg-color)) 0%,
      color-mix(in srgb, var(--bg-color) 88%, transparent) 45%,
      var(--bg-color) 100%
    );
}


/* =============================================================================
   08) HOME HERO HEADLINES (SCROLL FOCUS)
============================================================================= */

.home-hero-headlines{
  position: absolute;
  left: 0;
  top: 58%;
  z-index: 3;

  display: grid;
  gap: 0.65rem;

  width: 100%;
  max-width: none;
  padding: 0 var(--site-gutter);

  transform: translateY(-50%);
  text-align: left;

  opacity: 1;
  pointer-events: none;

  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 820px){
  .home-hero-headlines{
    padding: 0 var(--site-gutter);
    max-width: 92vw;
  }
}

.home-hero-headline{
  margin: 0;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-color);
  opacity: 0.22;
  transform: translateY(0px) scale(0.92);
  transition:
    opacity 0.6s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.8s ease;
  will-change: transform, opacity;
  filter: blur(0.6px);

  /* Size: huge, restrained. No clamp(). */
  font-size: 8.2vw;
  line-height: 0.92;
}

@media (min-width: 1200px){
  .home-hero-headline{font-size: 100px;}
}

@media (max-width: 820px){
  .home-hero-headline{font-size: 14vw;}
}


/* Active headline states (JS toggles these on <body>) */
body.hl-1 .home-hero-headline:nth-child(1),
body.hl-2 .home-hero-headline:nth-child(2),
body.hl-3 .home-hero-headline:nth-child(3),
body.hl-4 .home-hero-headline:nth-child(4){
  opacity: 0.92;
  transform: translateY(-2px) scale(1.06);
  filter: blur(0px);
}

body.hl-1 .home-hero-headline:not(:nth-child(1)),
body.hl-2 .home-hero-headline:not(:nth-child(2)),
body.hl-3 .home-hero-headline:not(:nth-child(3)),
body.hl-4 .home-hero-headline:not(:nth-child(4)){
  opacity: 0.14;
  transform: translateY(2px) scale(0.90);
  filter: blur(0.9px);
}

/* Exit motion after the 4th headline completes (JS toggles on <body>) */
body.hero-lock-released .home-hero-headlines{
  transform: translateY(calc(-50% - 140px));
}


/* Defensive: hide during overlays */
body.menu-open .home-hero-headlines,
body.country-overlay-active .home-hero-headlines{
  opacity: 0 !important;
  pointer-events: none !important;
}


/* =============================================================================
   09) HOME RAIL ALIGNMENT (GLOBAL HOME SECTIONS)
============================================================================= */

/* Unified rail for homepage content blocks (matches footer/header gutter) */
.home-rail{
  width: var(--site-rail-width);
  margin-left: auto;
  margin-right: auto;
}

/* Full-bleed homepage figures (edge-to-edge on all devices) */
.home-figure.home-rail{
  width: 100vw;
  max-width: none;
  margin-left: 50%;
  margin-right: 0;
  transform: translateX(-50%);
}

.home-figure.home-rail img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}


/* =============================================================================
   10) RTL HOME ALIGNMENT (TEXT-ONLY, KEEP LTR RAIL)
============================================================================= */

/* Keep the same left rail alignment in RTL languages (no centering, no layout flip) */
html.lang-rtl .home-hero-headlines,
html.lang-rtl .home-inner,
html.lang-rtl .home-rail,
html.lang-rtl .featured-header,
html.lang-rtl .featured-grid,
html.lang-rtl .section-posts .post,
html.lang-rtl .section-comments h2,
html.lang-rtl .section-comments .comment{
  text-align: left !important;
}

/* Force translated nodes to respect the left rail (overrides global [data-i18n-key] text-align) */
html.lang-rtl .home-inner [data-i18n-key],
html.lang-rtl .home-hero-headlines [data-i18n-key],
html.lang-rtl .featured-header [data-i18n-key],
html.lang-rtl .featured-grid [data-i18n-key],
html.lang-rtl .section-posts [data-i18n-key],
html.lang-rtl .section-comments [data-i18n-key]{
  text-align: left !important;
}