/* =========================================================
   TEKMALL DESIGN SYSTEM — Tokens em 3 camadas
   ---------------------------------------------------------
   Camada 1 · PRIMITIVOS   valores brutos (nunca usar direto nos componentes)
   Camada 2 · SEMÂNTICOS   o papel de cada valor (fundo, texto, destaque…)
   Camada 3 · COMPONENTES  cada componente lê só tokens semânticos
   Para mudar a identidade inteira, edite as camadas 1 e 2.
   Documentação visual: design-system.html
   ========================================================= */

:root {
  /* ===== CAMADA 1 · PRIMITIVOS ===== */
  /* Pretos (noite) */
  --tk-night-1000: #050506;
  --tk-night-950: #08080a;
  --tk-night-900: #0f0f12;
  --tk-night-850: #16161a;
  --tk-night-800: #1e1e23;
  /* Osso (luz) */
  --tk-bone-50: #f4f0e8;
  --tk-bone-100: #e9e4da;
  --tk-bone-400: #a7a197;
  --tk-bone-500: #8b867c;
  --tk-bone-700: #4a4740;
  /* Bronze (assinatura Tekmall / Padang) */
  --tk-bronze-200: #ead2ab;
  --tk-bronze-300: #e0bd8a;
  --tk-bronze-500: #c39256;
  --tk-bronze-700: #7a5530;
  /* Fumaça (frio, apoio) */
  --tk-smoke-400: #7d8b91;
  --tk-smoke-600: #5d6a70;

  --tk-font-tight: "Inter Tight", "Inter", system-ui, sans-serif;
  --tk-font-sans: "Inter", system-ui, sans-serif;
  --tk-font-mono: "JetBrains Mono", ui-monospace, monospace;

  --tk-space-1: 4px;  --tk-space-2: 8px;   --tk-space-3: 12px;  --tk-space-4: 16px;
  --tk-space-5: 24px; --tk-space-6: 32px;  --tk-space-7: 48px;  --tk-space-8: 64px;
  --tk-space-9: 96px; --tk-space-10: 144px;

  --tk-radius-1: 2px; --tk-radius-2: 6px; --tk-radius-3: 12px; --tk-radius-pill: 999px;

  --tk-dur-1: 200ms; --tk-dur-2: 450ms; --tk-dur-3: 900ms; --tk-dur-4: 1400ms;
  --tk-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --tk-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --tk-bpm: 140; /* o pulso da música — usado nas animações vivas */

  /* ===== CAMADA 2 · SEMÂNTICOS ===== */
  --color-bg: var(--tk-night-950);
  --color-bg-raised: var(--tk-night-900);
  --color-bg-overlay: var(--tk-night-850);
  --color-bg-deep: var(--tk-night-1000);
  --color-text: var(--tk-bone-100);
  --color-text-strong: var(--tk-bone-50);
  --color-text-muted: var(--tk-bone-500);
  --color-text-faint: var(--tk-bone-700);
  --color-accent: var(--tk-bronze-500);
  --color-accent-light: var(--tk-bronze-300);
  --color-accent-deep: var(--tk-bronze-700);
  --color-accent-soft: rgba(195, 146, 86, 0.14);
  --color-cool: var(--tk-smoke-600);
  --color-border: rgba(233, 228, 218, 0.09);
  --color-border-strong: rgba(233, 228, 218, 0.22);
  --color-border-accent: rgba(195, 146, 86, 0.45);

  --font-display: var(--tk-font-tight);
  --font-body: var(--tk-font-sans);
  --font-mono: var(--tk-font-mono);

  --text-hero: clamp(3rem, 9vw, 8rem);
  --text-h1: clamp(2.4rem, 6vw, 5rem);
  --text-h2: clamp(2rem, 3.8vw, 3.2rem);
  --text-h3: clamp(1.3rem, 2vw, 1.7rem);
  --text-body: 1.02rem;
  --text-small: .88rem;
  --text-micro: .7rem;
  --tracking-display: -0.035em;
  --tracking-micro: .14em;

  --space-gutter: clamp(20px, 5vw, 72px);
  --space-section: clamp(90px, 11vw, 150px);
  --space-stack: var(--tk-space-7);

  --radius-control: var(--tk-radius-pill);
  --radius-surface: var(--tk-radius-2);
  --motion-ease: var(--tk-ease-out);
  --motion-fast: var(--tk-dur-1);
  --motion-base: var(--tk-dur-2);
  --motion-slow: var(--tk-dur-3);

  /* ===== CAMADA 3 · COMPONENTES ===== */
  --btn-height: 48px;
  --btn-pad-x: 26px;
  --btn-radius: var(--radius-control);
  --btn-primary-bg: var(--color-text);
  --btn-primary-fg: var(--color-bg);
  --btn-primary-bg-hover: var(--color-accent);
  --btn-ghost-border: var(--color-border-strong);
  --btn-ghost-fg: var(--color-text);

  --nav-bg-scrolled: rgba(8, 8, 10, 0.72);
  --nav-link: var(--color-text-muted);
  --nav-link-hover: var(--color-text);

  --label-color: var(--color-text-muted);
  --label-font: var(--font-mono);

  --card-bg: var(--color-bg-raised);
  --card-border: var(--color-border);
  --card-border-hover: var(--color-border-accent);
  --card-radius: var(--radius-surface);

  --hero-overlay: linear-gradient(to top, var(--color-bg) 0%, transparent 45%);
  --hero-3d-accent: var(--color-accent);

  /* ===== Compatibilidade: nomes antigos do style.css → tokens ===== */
  --bg: var(--color-bg);
  --bg-2: var(--color-bg-raised);
  --bg-3: var(--color-bg-overlay);
  --line: var(--color-border);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --accent: var(--color-accent);
  --accent-soft: var(--color-accent-soft);
  --smoke: var(--color-cool);
  --display: var(--font-display);
  --body: var(--font-body);
  --mono: var(--font-mono);
  --ease: var(--motion-ease);
  --pad: var(--space-gutter);
}

/* =========================================================
   COMPONENTES lidos dos tokens (camada 3)
   ========================================================= */
.btn { min-height: var(--btn-height); padding: 0 var(--btn-pad-x); border-radius: var(--btn-radius); font-family: var(--font-body); font-weight: 400; letter-spacing: .01em; }
.btn--solid { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.btn--solid:hover { background: var(--btn-primary-bg-hover); }
.btn--ghost { border-color: var(--btn-ghost-border); color: var(--btn-ghost-fg); }
.nav.scrolled { background: var(--nav-bg-scrolled); }
.nav__links a { color: var(--nav-link); }
.nav__links a:hover { color: var(--nav-link-hover); }
.label { color: var(--label-color); font-family: var(--label-font); font-size: var(--text-micro); letter-spacing: var(--tracking-micro); }
.h2 { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 500; letter-spacing: var(--tracking-display); }
.section { padding: var(--space-section) 0; }
.track, .video, .chapter__media, .featured, .fests--h .fest { border-color: var(--card-border); border-radius: var(--card-radius); }
.hero__vignette { background: radial-gradient(ellipse at 50% 40%, transparent 0%, rgba(8,8,10,.5) 60%, var(--color-bg) 100%), var(--hero-overlay); }

/* Escultura 3D do início */
.hero__3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 1.6s var(--motion-ease); }
.hero__3d.ready { opacity: 1; }
.has-motion .hero__video, .hero__video { filter: saturate(.9) contrast(1.06) brightness(.5); }
.hero__vignette { z-index: 1; }
.hero__content { z-index: 2; }

/* ---------- Ajustes de limpeza (06/11) ---------- */
.gig.gig--past { display: none; }                         /* agenda mostra só as próximas noites */
.about__img img { filter: grayscale(.15) brightness(1); }  /* foto do Sobre visível */
.padang__crown { width: clamp(180px, 22vw, 300px); margin: 18px 0 34px; }
.reborn__credits { gap: 6px 18px; }
.reborn__credits dd { font-size: .85rem; color: var(--color-text-muted); }
.snippets { margin-bottom: 30px; }

/* Selo Padang Records no início (discreto) */
.hero__label { display: inline-flex; align-items: center; line-height: 0; opacity: .62; transition: opacity var(--motion-base) var(--motion-ease); }
.hero__label:hover { opacity: 1; }
.hero__label img { height: clamp(40px, 4.4vw, 58px); width: auto; filter: drop-shadow(0 6px 18px rgba(0,0,0,.6)); }
.hero__bottom { align-items: center; }

/* =========================================================
   RODAPÉ (versão elegante)
   ========================================================= */
.ft { padding: clamp(80px, 9vw, 130px) 0 34px; border-top: 1px solid var(--color-border); background: linear-gradient(var(--color-bg), var(--color-bg-deep)); }
.ft-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: clamp(32px, 5vw, 80px); padding-bottom: clamp(56px, 7vw, 96px); }
.ft-logo img { height: 34px; width: auto; opacity: .95; }
.ft-line { color: var(--color-text-muted); font-size: var(--text-small); margin: 20px 0 26px; max-width: 30ch; }
.ft-mail { font-family: var(--font-display); font-size: clamp(1.1rem, 1.6vw, 1.4rem); letter-spacing: -0.01em; color: var(--color-text); border-bottom: 1px solid var(--color-border-strong); padding-bottom: 4px; transition: color var(--motion-base), border-color var(--motion-base); }
.ft-mail:hover { color: var(--color-accent); border-color: var(--color-accent); }
.ft-col { display: flex; flex-direction: column; gap: 12px; }
.ft-col .label { margin-bottom: 8px; }
.ft-col a, .ft-links a { color: var(--color-text-muted); font-size: var(--text-small); width: fit-content; transition: color var(--motion-base) var(--motion-ease); }
.ft-col a:hover, .ft-links a:hover { color: var(--color-text); }
.ft-links { display: flex; flex-direction: column; gap: 12px; }
.ft-crown { margin-bottom: 6px; opacity: .7; transition: opacity var(--motion-base) !important; }
.ft-crown:hover { opacity: 1; }
.ft-crown img { height: 46px; width: auto; }
.ft-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 26px; border-top: 1px solid var(--color-border); font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-faint); }
.ft-bottom a { color: var(--color-text-muted); transition: color var(--motion-base); }
.ft-bottom a:hover { color: var(--color-accent); }
@media (max-width: 900px) {
  .ft-top { grid-template-columns: 1fr 1fr; }
  .ft-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .ft-top { grid-template-columns: 1fr; } }

/* =========================================================
   GALERIA EDITORIAL — fotos de cinema, retratos e trios
   ========================================================= */
#galleryGrid.gallery__grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(150px, 17vw, 270px); grid-auto-flow: dense; gap: clamp(10px, 1.2vw, 18px); }
#galleryGrid .g-item, #galleryGrid .g-item:nth-child(6n+1), #galleryGrid .g-item:nth-child(6n+4) { grid-column: auto; grid-row: auto; }
#galleryGrid .g-item--s { grid-column: span 4; grid-row: span 1; }
#galleryGrid .g-item--w { grid-column: span 8; grid-row: span 2; }
#galleryGrid .g-item--t { grid-column: span 4; grid-row: span 2; }
#galleryGrid .g-item--f { grid-column: span 12; grid-row: span 2; }
#galleryGrid .g-item { border-radius: 4px; overflow: hidden; background: var(--color-bg-raised); }
#galleryGrid .g-item img { filter: saturate(.75) brightness(.82) contrast(1.05); transform: scale(1.06); transition: transform 1.6s var(--motion-ease), filter .9s var(--motion-ease); }
#galleryGrid .g-item:hover img { filter: saturate(1) brightness(1) contrast(1.02); transform: scale(1.01); }
#galleryGrid .g-item--f figcaption, #galleryGrid .g-item--w figcaption { font-size: .74rem; padding: 60px 22px 18px; }
#galleryGrid .g-item::after { display: none; }
@media (max-width: 900px) {
  #galleryGrid.gallery__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 44vw; }
  #galleryGrid .g-item--s { grid-column: span 1; grid-row: span 1; }
  #galleryGrid .g-item--t { grid-column: span 1; grid-row: span 2; }
  #galleryGrid .g-item--w, #galleryGrid .g-item--f { grid-column: span 2; grid-row: span 1; }
}
#galleryGrid .g-item.g-item--s { grid-column: span 4; grid-row: span 1; }
#galleryGrid .g-item.g-item--w { grid-column: span 8; grid-row: span 2; }
#galleryGrid .g-item.g-item--t { grid-column: span 4; grid-row: span 2; }
#galleryGrid .g-item.g-item--f { grid-column: span 12; grid-row: span 2; }
@media (max-width: 900px) {
  #galleryGrid .g-item.g-item--s { grid-column: span 1; grid-row: span 1; }
  #galleryGrid .g-item.g-item--t { grid-column: span 1; grid-row: span 2; }
  #galleryGrid .g-item.g-item--w, #galleryGrid .g-item.g-item--f { grid-column: span 2; grid-row: span 1; }
}

/* Selos no início: Padang Records + Ultravision */
.hero__labels { display: flex; align-items: center; gap: clamp(16px, 2vw, 26px); }
.hero__labels .hero__label { opacity: .62; }
.hero__labels .hero__label:hover { opacity: 1; }
.hero__label--uv img { height: clamp(34px, 3.6vw, 48px); }
.hero__labels-sep { width: 1px; height: 30px; background: var(--color-border-strong); }
/* Rodapé: coluna Ultravision */
.ft-top { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; }
.ft-uv img { height: 38px; }
.ft-note { color: var(--color-text-muted); font-size: var(--text-small); }
@media (max-width: 1100px) { .ft-top { grid-template-columns: 1fr 1fr 1fr; } .ft-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .ft-top { grid-template-columns: 1fr 1fr; } }

/* Título da Música com selo SoundCloud discreto */
.music__title { display: flex; align-items: flex-end; gap: clamp(14px, 1.6vw, 22px); }
.music__title .h2 { margin-bottom: 0; }
.sc-badge { display: inline-flex; color: var(--color-text-muted); opacity: .7; margin-bottom: .55em; transition: color var(--motion-base), opacity var(--motion-base); }
.sc-badge:hover { color: #ff5500; opacity: 1; }
.sc-badge svg { width: clamp(36px, 3.4vw, 50px); height: auto; }

/* Agenda: descrição, data com intervalo e Instagram do evento */
.gig { grid-template-columns: 150px 1.3fr 1fr auto; }
.gig__desc { display: block; margin-top: 6px; font-family: var(--font-body); font-weight: 300; font-size: var(--text-small); color: var(--color-text-muted); letter-spacing: 0; }
.gig__actions { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.gig__ig { position: relative; width: 46px; height: 46px; border-radius: 50%; padding: 2px; background: var(--color-border-strong); transition: background var(--motion-base), transform var(--motion-base) var(--motion-ease); }
.gig__ig img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; filter: grayscale(.35); transition: filter var(--motion-base); }
.gig__ig:hover { background: var(--color-accent); transform: scale(1.06); }
.gig__ig:hover img { filter: none; }
.gig__ig-badge { position: absolute; right: -4px; bottom: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-bg); color: var(--color-text); display: grid; place-items: center; border: 1px solid var(--color-border-strong); }
.gig__ig-badge svg { width: 12px; height: 12px; }
@media (max-width: 800px) {
  .gig { grid-template-columns: 1fr auto; }
  .gig__actions { grid-column: 2; grid-row: 1 / span 2; }
}