/* ===== Home Page (Raila) — hip-hop palette & motion =====
   - No design changes. Clarified tokens and responsive behaviors.
   - Keeps your video/photo hero switch and EQ bar motion.
================================================================= */

/* ---- Tokens ---- */
:root{
  --gold: var(--color-accent-500);
  --gold-deep: var(--color-accent-400);
  --ink-900: var(--color-surface-850);
  --ink-800: var(--color-surface-750);
  --ink-700: var(--color-surface-600);
  --text-100: var(--color-text-200);
  --text-300: var(--color-text-300);
  --text-500: var(--color-text-400);
  --ease: var(--ease-standard);

  /* Correct relative path from css/pages/ → assets/... */
  --hero-photo: url('../../assets/images/homepagecontent/homepageherosectionbg.avif');
}

/* ===== Hero wrapper ===== */
.hero{
  position:relative;
  padding:36px 0;
  border-bottom:1px solid var(--color-surface-700);
  background:var(--color-surface-900);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-image:var(--hero-img, none);
  background-size:cover;
  background-position:center;
  filter:saturate(1.08) contrast(1.04);
  opacity:.22;
  transition:opacity .8s ease;
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(180deg, rgba(11,11,12,.78) 8%, rgba(11,11,12,.4) 55%, rgba(11,11,12,.88) 100%);
}
.hero-bg{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  opacity:0;
  transition:opacity .8s ease;
}
.hero-video{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(1.06) contrast(1.05);
  pointer-events:none;
}
.hero.hero--video.is-video-ready .hero-bg{ opacity:1; }
.hero.hero--video.is-video-ready::before{ opacity:0; }
.hero.hero--photo{ --hero-img:var(--hero-photo); }
.hero.hero--photo .hero-bg{ display:none; }
.hero.hero--photo::before{
  opacity:.6;
  filter:blur(7px) saturate(1.03) contrast(1.02);
  background-image:var(--hero-photo);
  background-size:cover;
  background-position:center;
}

.hero-main{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
  gap:28px;
  align-items:stretch;
  position:relative;
  z-index:3;
}

.hero-content{ display:flex; flex-direction:column; gap:18px; }
.hero-content .hero-badge{
  font-size:.75rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
}
.hero-content h1{
  font-family:Poppins,system-ui,sans-serif;
  font-size:clamp(36px,5.6vw,74px);
  margin:4px 0 6px; color:var(--color-text-100);
}
.hero-content .hero-sub{
  margin:0; font-size:1.08rem; color:var(--color-text-300); max-width:520px;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; }
.hero-note{ font-size:.78rem; opacity:.78; color:#dadcea; }

.hero-meta{ display:flex; flex-wrap:wrap; gap:10px; margin:8px 0; }
.meta-chip{
  border:1px solid var(--color-border); border-radius:999px; padding:6px 12px;
  background:rgba(18,18,24,.6); color:#f0f0fb; font-size:.82rem;
}
.meta-chip[hidden]{ display:none !important; }

.hero-visual{ display:grid; gap:18px; align-content:flex-start; position:relative; z-index:2; }
.hero-visual::before{
  content:""; position:absolute; inset:-12px -12px -18px;
  background:radial-gradient(460px 260px at 50% 10%, rgba(245,209,90,.22), transparent 72%);
  filter:blur(32px); opacity:.35; z-index:-1;
}

.hero-cards{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.hero-card{
  position:relative; border-radius:18px; padding:20px 22px 24px;
  background:linear-gradient(165deg, rgba(24,24,32,.9), rgba(9,9,13,.96));
  border:1px solid rgba(245,209,90,.16); overflow:hidden; min-height:150px;
  display:grid; gap:10px; color:#f6f6ff;
}
.hero-card--wide{ grid-column:1 / -1; min-height:190px; }
.hero-card::before{
  content:""; position:absolute; inset:-12% -10%;
  background-image:var(--card-img, none); background-size:cover; background-position:center;
  filter:blur(16px); opacity:.28; z-index:0;
}
.hero-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(145deg, rgba(245,209,90,.22), transparent 60%);
  opacity:.35; z-index:0;
}
.hero-card span{
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); position:relative; z-index:1;
}
.hero-card strong{
  font-family:Poppins,system-ui,sans-serif; font-size:1.4rem; letter-spacing:.02em; position:relative; z-index:1;
}
.hero-card p{ margin:0; color:#dcdcf1; font-size:.95rem; position:relative; z-index:1; }

.hero-eq{
  display:flex; align-items:center; flex-wrap:wrap; gap:18px;
  background:linear-gradient(180deg, rgba(18,18,26,.88), rgba(10,10,14,.96));
  border:1px solid rgba(245,209,90,.16); border-radius:16px; padding:18px;
}
.hero-eq-copy{ display:flex; flex-direction:column; gap:6px; }
.hero-eq-copy span{
  font-size:.76rem; text-transform:uppercase; letter-spacing:.24em; color:var(--gold);
}
.hero-eq-copy p{ margin:0; font-size:.92rem; color:#dedded; max-width:220px; }
.hero-eq .eq-bars{ flex:1 1 auto; justify-content:flex-end; }
.hero-eq .sound-pill{ flex:0 0 auto; }

.eq-bars{ display:flex; align-items:flex-end; gap:6px; height:58px; }
.eq-bars span{
  display:block; width:6px; height:16%;
  background:linear-gradient(180deg, var(--gold) 0%, #F8E491 60%, var(--gold-deep) 100%);
  border-radius:3px; animation:level 1600ms ease-in-out infinite; transform-origin:bottom;
}
.eq-bars span:nth-child(1){animation-duration:1580ms}
.eq-bars span:nth-child(2){animation-duration:1750ms; animation-delay:100ms}
.eq-bars span:nth-child(3){animation-duration:1510ms; animation-delay:200ms}
.eq-bars span:nth-child(4){animation-duration:1900ms; animation-delay:300ms}
.eq-bars span:nth-child(5){animation-duration:1680ms; animation-delay:400ms}
.eq-bars span:nth-child(6){animation-duration:1570ms; animation-delay:500ms}
.eq-bars span:nth-child(7){animation-duration:1820ms; animation-delay:600ms}
.eq-bars span:nth-child(8){animation-duration:1610ms; animation-delay:700ms}
.eq-bars span:nth-child(9){animation-duration:1760ms; animation-delay:800ms}
.eq-bars span:nth-child(10){animation-duration:1560ms; animation-delay:900ms}
.eq-bars span:nth-child(11){animation-duration:1940ms; animation-delay:1000ms}
.eq-bars span:nth-child(12){animation-duration:1700ms; animation-delay:1100ms}

@keyframes level{
  0%,100%{ height:16% }
  20%{ height:40% }
  40%{ height:72% }
  60%{ height:36% }
  80%{ height:68% }
}

@media (prefers-reduced-motion: reduce){
  .eq-bars span{ animation-duration: 2400ms; }
}

/* Stage glow helper */
.hero .stage-glow { position: relative; }
.hero .stage-glow::after{
  content:""; position:absolute; inset:-10px -10px -14px -10px; pointer-events:none;
  background: radial-gradient(60% 40% at 50% 100%, rgba(127,164,255,.35), rgba(127,164,255,0) 60%);
  filter: blur(16px);
}

/* ===== Recent moments reel ===== */
.hero-reel-body{ padding:30px 0 18px; border-top:1px solid rgba(245,209,90,.1); }
.hero-reel-body-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px;
}
.hero-reel-body-head h2{
  margin:0; font-family:Poppins,system-ui,sans-serif; font-size:clamp(24px,3vw,34px); color:var(--gold);
}
.hero-reel-body-head .btn{
  border:1px solid var(--ink-700); background:#15151a; color:#eee; border-radius:12px; padding:8px 12px; text-decoration:none;
}
.hero-reel-body-head .btn:hover{ border-color: var(--gold); }

.hero-reel-body .reel-skeletons{ display:flex; gap:14px; padding:.6rem 0 1.1rem; }
.hero-reel-body .reel-skeletons .sk-card{
  flex:0 0 clamp(320px,60vw,860px); aspect-ratio:16/9; border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(120deg, rgba(22,22,28,.88), rgba(22,22,28,.5) 45%, rgba(22,22,28,.88));
  position:relative; overflow:hidden;
}
.hero-reel-body .reel-skeletons .sk-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  animation:homeSk 1.4s linear infinite; opacity:.32;
}
@keyframes homeSk{ from{ transform:translateX(-100%); } to{ transform:translateX(100%); } }

/* Showcases */
.home-showcases{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:18px; padding:18px 0 28px;
}
.showcase-card{
  position:relative; border-radius:18px; padding:22px; display:grid; gap:12px;
  background:linear-gradient(168deg, rgba(24,24,32,.92), rgba(10,10,14,.98));
  border:1px solid var(--color-border); overflow:hidden; color:#f5f5ff;
}
.showcase-card::before{
  content:""; position:absolute; inset:-12% -10%;
  background-image:var(--showcase-img, none); background-size:cover; background-position:center;
  filter:blur(22px); opacity:.26; z-index:0;
}
.showcase-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(245,209,90,.24), transparent 65%); opacity:.32; z-index:0;
}
.showcase-card > *{ position:relative; z-index:1; }
.showcase-card span.showcase-tag{ font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
.showcase-card h3{ margin:0; font-family:Poppins,system-ui,sans-serif; font-size:1.28rem; }
.showcase-card p{ margin:0; color:#dfe0f1; font-size:.95rem; }
.showcase-card .btn{ align-self:flex-start; margin-top:4px; }

/* Grid */
.home-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; padding:0 0 36px; }
.grid-card{
  background:linear-gradient(180deg, rgba(20,20,28,.9), rgba(9,9,13,.94));
  border:1px solid rgba(245,209,90,.16); border-radius:16px; padding:20px 22px; color:#f4f4ff; display:grid; gap:12px;
}
.grid-card h3{ margin:0; font-family:Poppins,system-ui,sans-serif; font-size:1.1rem; color:var(--gold); }
.grid-card ul{ margin:0; padding-left:18px; display:grid; gap:8px; color:#d6d6e6; font-size:.95rem; }
.grid-card li{ line-height:1.45; }
.grid-card li::marker{ color:var(--gold); }

/* Responsive adjustments */
@media(max-width:992px){
  .hero-main{ grid-template-columns:1fr; }
  .hero-cards{ grid-template-columns:1fr; }
  .hero-eq{ flex-direction:column; align-items:flex-start; gap:16px; }
  .hero-eq-copy p{ max-width:none; }
  .tiles{ grid-template-columns:1fr; }
  .hero::before{ opacity:.28; }
}
@media(max-width:768px){
  .hero{ padding:32px 0 30px; --hero-img:var(--hero-photo); background:#08080b; }
  .hero::before{
    opacity:.58; filter:blur(8px) saturate(1.02) contrast(1.02);
    background-image:var(--hero-photo); background-size:cover; background-position:center;
  }
  .hero::after{ background:linear-gradient(180deg, rgba(7,7,9,.88), rgba(7,7,9,.96)); }
  .hero-bg, .hero-video{ display:none; }
  .hero.hero--video.is-video-ready::before{ opacity:.58; }
}
@media(max-width:720px){
  .hero-actions{ flex-direction:column; align-items:flex-start; gap:16px; }
  .hero-eq{ flex-direction:column; align-items:flex-start; gap:14px; }
  .hero-eq .sound-pill{ margin-left:0; }
  .hero-video{ object-position:center 40%; }
}
@media(max-width:600px){
  .hero{ padding:28px 0 30px; }
  .hero-cards{ gap:12px; }
  .hero-note{ font-size:.75rem; }
  .hero-video{ object-position:center 45%; }
}

/* Smooth/fallback mode for iOS & reduced-motion */
@media (prefers-reduced-motion:reduce){
  .hero-video{ display:none; }
  .hero.hero--video.is-video-ready::before{ opacity:.36; }
  .hero-bg{ opacity:0; }
}
html.ios-smooth .hero{ --hero-img:var(--hero-photo); background:#060608; }
html.ios-smooth .hero::before{ opacity:.62; filter:blur(9px) saturate(1.02) contrast(1.02); }
html.ios-smooth .hero.hero--video.is-video-ready::before{ opacity:.62; }
html.ios-smooth .hero-bg, html.ios-smooth .hero-video, html.ios-smooth .light-sweep{ display:none !important; }
html.ios-smooth .reel{ scroll-snap-type:x proximity; }

/* Reel */
.reel{ display:flex; gap:14px; overflow:auto; padding:.6rem 0 1.1rem; scroll-snap-type:x mandatory; }
.reel::-webkit-scrollbar{ height:10px; }
.reel::-webkit-scrollbar-thumb{ background:#2a2a31; border-radius:999px; }

.cin-card{
  flex:0 0 clamp(320px,60vw,860px); aspect-ratio:16/9; position:relative; border-radius:16px; overflow:hidden;
  border:1px solid var(--color-surface-600); background:#0f0f12;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); scroll-snap-align:center;
}
.cin-card:hover{ transform:translateY(-2px); border-color:var(--gold); box-shadow:0 16px 40px var(--color-border); }
.cin-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.02); }
.cin-vignette{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.15) 20%, rgba(0,0,0,.4) 80%); }
.cin-cap{ position:absolute; left:0; right:0; bottom:0; padding:14px 16px; display:flex; flex-direction:column; gap:6px; }
.cin-title{ margin:0; color:#f0f0f4; font-weight:800; font-size:1.12rem; text-shadow:0 2px 16px rgba(0,0,0,.6); }
.cin-meta{ color:var(--color-text-400); font-size:.95rem; }

@media(min-width:1100px){
  .hero-reel-body{ padding:24px 0 14px; }
  .hero-reel-body .reel{ gap:18px; }
  .hero-reel-body .cin-card,
  .hero-reel-body .reel-skeletons .sk-card{
    flex:0 0 clamp(320px, 34vw, 620px); max-width:620px;
  }
}
@media(min-width:1440px){
  .hero-reel-body .cin-card,
  .hero-reel-body .reel-skeletons .sk-card{
    flex:0 0 560px; max-width:560px;
  }
}

/* Boost TTI: render below-the-fold lazily */
.home-showcases,
.home-grid,
.hero-reel-body,
.tiles,
.site-footer{
  content-visibility:auto;
  contain-intrinsic-size:600px;
}
/* === SEO Context Styling === */
.seo-context {
  max-width: 1100px;
  margin: var(--space-section,4rem) auto;
  padding: var(--space-lg,1.5rem) var(--space-md,1rem);
  font-size: 0.95rem;
  line-height: 1.65;
  color: rgba(245, 209, 90, 0.75);   /* soft gold tone */
  text-align: center;
  border-top: 1px solid rgba(245, 209, 90, 0.15);
  border-bottom: 1px solid rgba(245, 209, 90, 0.15);
}
.seo-context p {
  margin-bottom: 1rem;
}
.seo-context strong {
  color: var(--color-accent-500, #f5d15a);
  font-weight: 600;
}
.seo-context .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}