/* ============ KALAYO — Fire & Flow Collective ============ */
:root{
  --bg:#070404; --bg2:#0d0705; --panel:#140a06;
  --ink:#f2e9dd; --ink-dim:#b8a998; --ink-faint:#7d6f60;
  --fire1:#ffd08a; --fire2:#ff9e3d; --fire3:#e8541f; --fire4:#a81e12;
  --led:#8b7bff; --led2:#5a4fcf;
  --line:rgba(255,158,61,.16);
  --font-d:"Cinzel",serif; --font-b:"Manrope",system-ui,sans-serif;
  --wrap:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink); font-family:var(--font-b);
  font-weight:400; line-height:1.65; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--fire3); color:#fff}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}

/* particles + noise */
#embers{position:fixed; inset:0; z-index:3; pointer-events:none}
.noise{position:fixed; inset:0; z-index:4; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E")}

/* ---------- header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:40;
  display:flex; align-items:center; gap:32px;
  padding:18px 32px; transition:background .4s,padding .4s,box-shadow .4s;
}
.site-header.scrolled{background:rgba(7,4,4,.82); backdrop-filter:blur(14px);
  padding:10px 32px; box-shadow:0 1px 0 var(--line)}
.brand{display:flex; align-items:center; gap:12px; margin-right:auto}
.brand-mark{width:44px; height:auto; filter:drop-shadow(0 0 12px rgba(232,84,31,.55))}
.brand-word{font-family:var(--font-d); font-weight:700; font-size:1.15rem; letter-spacing:.34em;
  background:linear-gradient(100deg,var(--fire1),var(--fire2) 55%,var(--fire3));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.site-nav{display:flex; gap:28px}
.site-nav a{font-size:.82rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-dim); position:relative; padding:4px 0; transition:color .25s}
.site-nav a::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:linear-gradient(90deg,var(--fire2),var(--fire3)); transition:width .3s}
.site-nav a:hover{color:var(--ink)}
.site-nav a:hover::after{width:100%}
.nav-toggle{display:none}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-b); font-weight:700; font-size:.85rem; letter-spacing:.12em;
  text-transform:uppercase; padding:14px 28px; border-radius:999px; border:1px solid transparent;
  cursor:pointer; transition:transform .25s,box-shadow .25s,background .25s,border-color .25s}
.btn-fire{background:linear-gradient(115deg,var(--fire2),var(--fire3) 60%,var(--fire4));
  color:#fff; box-shadow:0 6px 26px -8px rgba(232,84,31,.65)}
.btn-fire:hover{transform:translateY(-2px); box-shadow:0 12px 34px -8px rgba(232,84,31,.85)}
.btn-ghost{border-color:var(--line); color:var(--ink)}
.btn-ghost:hover{border-color:var(--fire2); background:rgba(255,158,61,.07); transform:translateY(-2px)}
.btn-lg{padding:18px 36px; font-size:.95rem; letter-spacing:.1em; text-transform:none}
.header-cta{padding:11px 22px; font-size:.75rem}

/* ---------- hero ---------- */
.hero{position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden}
.hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.hero-video-intro{z-index:1; transition:opacity 1.4s ease}
.hero.intro-done .hero-video-intro{opacity:0}
/* scrim: anchors the copy in shadow while the fire keeps burning to the right */
.hero-shade{position:absolute; inset:0; z-index:2;
  background:linear-gradient(180deg,rgba(7,4,4,.5) 0%,rgba(7,4,4,.2) 30%,rgba(7,4,4,.72) 72%,var(--bg) 100%)}
@media (min-width:821px){
  .hero-shade{background:
    linear-gradient(90deg,rgba(7,4,4,.9) 0%,rgba(7,4,4,.72) 30%,rgba(7,4,4,.2) 62%,transparent 88%),
    linear-gradient(180deg,rgba(7,4,4,.42) 0%,rgba(7,4,4,.06) 40%,rgba(7,4,4,.5) 80%,var(--bg) 100%)}
}
.hero-content{position:relative; z-index:5; padding:0 32px 11vh; max-width:900px}
.eyebrow{font-size:.78rem; font-weight:700; letter-spacing:.3em; text-transform:uppercase;
  color:var(--fire2); margin-bottom:18px}
.hero h1{font-family:var(--font-d); font-weight:800; font-size:clamp(2.6rem,6.4vw,5.2rem);
  line-height:1.06; letter-spacing:.01em; text-wrap:balance;
  text-shadow:0 2px 26px rgba(7,4,4,.85),0 1px 6px rgba(7,4,4,.9)}
.hero-sub,.hero .eyebrow{text-shadow:0 1px 12px rgba(7,4,4,.9)}
/* gradient text: text-shadow would paint OVER the clipped gradient — use drop-shadow */
.hero h1 em{font-style:normal;
  background:linear-gradient(100deg,var(--fire1) 10%,var(--fire2) 45%,var(--fire3) 80%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:none;
  filter:drop-shadow(0 2px 16px rgba(7,4,4,.95)) drop-shadow(0 0 30px rgba(255,158,61,.45))}
.hero-sub{max-width:520px; color:var(--ink-dim); font-size:1.08rem; margin-top:22px}
.hero-actions{display:flex; gap:16px; flex-wrap:wrap; margin-top:34px}
.scroll-cue{position:absolute; z-index:5; right:38px; bottom:34px; width:26px; height:46px;
  border:1px solid var(--line); border-radius:14px; display:flex; justify-content:center}
.scroll-cue span{width:3px; height:9px; margin-top:8px; border-radius:2px; background:var(--fire2);
  animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{transform:translateY(0);opacity:1}55%{transform:translateY(16px);opacity:.15}}

/* ---------- sections base ---------- */
section{position:relative}
.section-head{margin-bottom:56px}
.section-head h2{font-family:var(--font-d); font-weight:700; font-size:clamp(2rem,4.4vw,3.4rem);
  line-height:1.1; margin-top:10px; text-wrap:balance}
.section-sub{max-width:640px; color:var(--ink-dim); margin-top:18px}

/* manifesto */
.manifesto{padding:130px 0 110px; text-align:center;
  background:radial-gradient(60% 90% at 50% 0%,rgba(232,84,31,.09),transparent 70%)}
.manifesto-symbol{width:64px; margin:0 auto 30px; mix-blend-mode:screen; opacity:.9;
  animation:slowspin 40s linear infinite}
@keyframes slowspin{to{transform:rotate(360deg)}}
.manifesto-text{font-family:var(--font-d); font-size:clamp(1.25rem,2.5vw,1.9rem); line-height:1.5;
  max-width:880px; margin:0 auto; color:var(--ink); text-wrap:balance}
.fire-word{background:linear-gradient(100deg,var(--fire1),var(--fire3));
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:flicker 3.2s infinite}
@keyframes flicker{0%,100%{filter:drop-shadow(0 0 8px rgba(255,158,61,.6))}
  8%{filter:drop-shadow(0 0 16px rgba(255,158,61,.9))}12%{filter:drop-shadow(0 0 5px rgba(255,158,61,.4))}
  42%{filter:drop-shadow(0 0 14px rgba(255,158,61,.8))}70%{filter:drop-shadow(0 0 7px rgba(255,158,61,.5))}}

/* ---------- collective ---------- */
.collective{padding:90px 0}
.collective-grid{display:grid; grid-template-columns:minmax(300px,460px) 1fr; gap:60px; align-items:center}
.collective-photo{position:relative; border-radius:18px; overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(232,84,31,.35)}
.collective-photo img{transition:transform .8s ease}
.collective-photo:hover img{transform:scale(1.04)}
.collective-photo figcaption{position:absolute; left:0; right:0; bottom:0; padding:40px 22px 16px;
  font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim);
  background:linear-gradient(180deg,transparent,rgba(7,4,4,.85))}
.artists{list-style:none; display:grid; gap:8px}
.artist{display:flex; align-items:center; gap:22px; padding:20px 22px; border-radius:14px;
  border:1px solid transparent; transition:border-color .3s,background .3s,transform .3s}
.artist:hover{border-color:var(--line); background:rgba(255,158,61,.045); transform:translateX(6px)}
.artist img{width:64px; height:64px; object-fit:cover; border-radius:50%; mix-blend-mode:screen;
  filter:saturate(1.15)}
.artist h3{font-family:var(--font-d); font-size:1.35rem; font-weight:700; letter-spacing:.06em}
.artist-origin{font-size:.74rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fire2); margin:2px 0 3px}
.artist p:last-child{color:var(--ink-dim); font-size:.95rem}

/* ---------- performances ---------- */
.performances{padding:110px 0;
  background:radial-gradient(70% 60% at 80% 10%,rgba(90,79,207,.10),transparent 60%),
             radial-gradient(60% 60% at 10% 90%,rgba(232,84,31,.10),transparent 60%)}
.perf-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.perf-card{position:relative; border-radius:18px; overflow:hidden; background:var(--panel);
  border:1px solid var(--line); display:flex; flex-direction:column;
  transition:transform .35s,box-shadow .35s,border-color .35s}
.perf-card:hover{transform:translateY(-8px)}
.perf-fire:hover{box-shadow:0 24px 60px -18px rgba(232,84,31,.5); border-color:rgba(255,158,61,.5)}
.perf-led:hover{box-shadow:0 24px 60px -18px rgba(139,123,255,.45); border-color:rgba(139,123,255,.55)}
.perf-circus:hover{box-shadow:0 24px 60px -18px rgba(255,208,138,.35); border-color:rgba(255,208,138,.45)}
.perf-media{aspect-ratio:4/4.6; overflow:hidden}
.perf-media img{width:100%; height:100%; object-fit:cover; transition:transform .8s ease}
.perf-card:hover .perf-media img{transform:scale(1.06)}
.perf-body{padding:26px 26px 30px}
.perf-body h3{font-family:var(--font-d); font-size:1.45rem; font-weight:700; margin-bottom:12px}
.perf-led .perf-body h3{color:var(--led)}
.perf-fire .perf-body h3{color:var(--fire2)}
.perf-circus .perf-body h3{color:var(--fire1)}
.perf-body p{color:var(--ink-dim); font-size:.97rem}
.perf-tag{display:inline-block; margin-top:18px; font-size:.72rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint)}

/* ---------- semillas ---------- */
.semillas{padding:110px 0; overflow:hidden}
.semillas-grid{display:grid; grid-template-columns:1fr minmax(240px,320px); gap:70px; align-items:center}
.semillas blockquote{font-family:var(--font-d); font-size:clamp(1.15rem,2vw,1.5rem); line-height:1.55;
  border-left:2px solid var(--fire3); padding-left:26px; color:var(--ink); text-wrap:balance}
.semillas-photos{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:38px}
.semillas-photos img{border-radius:14px; aspect-ratio:4/3.4; object-fit:cover}
.phone-frame{position:relative; border-radius:34px; padding:10px; background:#191009;
  border:1px solid var(--line); box-shadow:0 40px 90px -30px rgba(232,84,31,.45)}
.phone-frame video{width:100%; border-radius:26px; display:block}

/* ---------- gallery ---------- */
.gallery{padding:90px 0}
.masonry{columns:3 300px; column-gap:20px}
.masonry img{width:100%; height:auto; border-radius:14px; margin-bottom:20px; cursor:zoom-in;
  transition:transform .35s,box-shadow .35s}
.masonry img:hover{transform:scale(1.015); box-shadow:0 16px 44px -14px rgba(232,84,31,.5)}

/* ---------- watch ---------- */
.watch{padding:100px 0;
  background:radial-gradient(55% 70% at 50% 100%,rgba(232,84,31,.08),transparent 65%)}
.watch-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px}
.yt{position:relative; border-radius:18px; overflow:hidden; aspect-ratio:16/9; background:#000;
  border:1px solid var(--line)}
.yt img{width:100%; height:100%; object-fit:cover; opacity:.8; transition:opacity .3s,transform .6s}
.yt:hover img{opacity:1; transform:scale(1.03)}
.yt iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.yt-play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:78px; height:78px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(115deg,var(--fire2),var(--fire4));
  box-shadow:0 10px 40px -6px rgba(232,84,31,.8); transition:transform .3s}
.yt-play::after{content:""; position:absolute; top:50%; left:53%; transform:translate(-50%,-50%);
  border-left:20px solid #fff; border-top:12px solid transparent; border-bottom:12px solid transparent}
.yt:hover .yt-play{transform:translate(-50%,-50%) scale(1.12)}
.yt-title{position:absolute; left:0; right:0; bottom:0; padding:44px 20px 14px; font-size:.85rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.88)); pointer-events:none}

/* ---------- contact ---------- */
.contact{padding:130px 0 110px; text-align:center;
  background:radial-gradient(50% 70% at 50% 40%,rgba(232,84,31,.14),transparent 70%)}
.contact-logo{width:130px; margin:0 auto 34px; filter:drop-shadow(0 0 30px rgba(232,84,31,.6));
  animation:breathe 5s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.contact h2{font-family:var(--font-d); font-size:clamp(2.2rem,5vw,3.8rem); line-height:1.12}
.contact p{color:var(--ink-dim); max-width:560px; margin:22px auto 0}
.contact-actions{display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-top:40px}
.contact-base{font-size:.8rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint);
  margin-top:36px}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line); padding:38px 0}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.footer-symbols{display:flex; gap:14px}
.footer-symbols img{width:34px; height:34px; object-fit:cover; border-radius:50%;
  mix-blend-mode:screen; opacity:.75}
.site-footer p{font-size:.82rem; color:var(--ink-faint)}

/* ---------- lightbox ---------- */
.lightbox{position:fixed; inset:0; z-index:60; background:rgba(4,2,2,.94);
  display:flex; align-items:center; justify-content:center; padding:4vmin}
.lightbox[hidden]{display:none}
.lightbox img{max-width:92vw; max-height:90vh; border-radius:10px;
  box-shadow:0 30px 120px -20px rgba(232,84,31,.5)}
.lightbox-close{position:absolute; top:18px; right:26px; font-size:2.4rem; background:none;
  border:none; color:var(--ink); cursor:pointer; line-height:1}

/* ---------- reveal ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s ease,transform .8s ease}
.reveal.in{opacity:1; transform:none}
.d1{transition-delay:.12s}.d2{transition-delay:.24s}.d3{transition-delay:.36s}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .collective-grid{grid-template-columns:1fr; gap:40px}
  .perf-grid{grid-template-columns:1fr; max-width:520px; margin:0 auto}
  .semillas-grid{grid-template-columns:1fr; gap:50px}
  .phone-frame{max-width:300px; margin:0 auto}
  .watch-grid{grid-template-columns:1fr}
}
@media (max-width:820px){
  .site-nav{position:fixed; inset:0; z-index:39; background:rgba(7,4,4,.96);
    backdrop-filter:blur(18px); flex-direction:column; align-items:center; justify-content:center;
    gap:34px; opacity:0; pointer-events:none; transition:opacity .35s}
  .site-nav.open{opacity:1; pointer-events:auto}
  .site-nav a{font-size:1.05rem}
  .header-cta{display:none}
  .nav-toggle{display:flex; flex-direction:column; gap:6px; z-index:41; background:none;
    border:none; cursor:pointer; padding:8px}
  .nav-toggle span{width:26px; height:2px; background:var(--fire2); transition:transform .3s,opacity .3s}
  .nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(8px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-2px) rotate(-45deg)}
  .hero-content{padding-bottom:14vh}
  .scroll-cue{display:none}
  .section-head{margin-bottom:38px}
  .manifesto,.performances,.semillas,.watch,.contact{padding:80px 0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  .reveal{opacity:1; transform:none}
  #embers{display:none}
}