/* ===== Diego Simonete — Landing Page ===== */

:root{
  --bg: #2a2320;         /* grafite quente / mocha */
  --bg-2: #322a26;       /* seção alternada, um tom acima */
  --dark: #1e1815;       /* faixas de contraste mais escuras */
  --dark-2: #191411;
  --ink: #f0e9db;        /* texto principal creme */
  --ink-dim: #c7bcab;    /* texto secundário */
  --ink-faint: #97897a;  /* legendas / labels */
  --cream: #f0e9db;
  --cream-dim: #c7bcab;
  --gold: #c99a4a;
  --gold-bright: #e0b869;
  --gold-deep: #a97c34;
  --line: rgba(240,233,219,.12);
  --line-dark: rgba(240,233,219,.08);
  --card: #322a26;       /* superfícies de cartão */
  --card-2: #3a312c;     /* card elevado / hover */
  --serif: 'Cormorant Garamond', serif;
  --sans: 'Manrope', system-ui, sans-serif;
  --ease: cubic-bezier(.16,.84,.24,1);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2{font-family:var(--serif); font-weight:600; letter-spacing:.01em;}

.eyebrow{
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:700;
  margin-bottom:.9rem;
}

/* custom mic cursor */
.cursor-mic{
  position:fixed; top:0; left:0; width:38px; height:38px; margin:-19px 0 0 -19px;
  border-radius:50%; z-index:90; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  background:rgba(58,49,44,.85); border:1px solid rgba(224,184,105,.5); backdrop-filter:blur(4px);
  color:var(--gold-bright); box-shadow:0 8px 22px -8px rgba(0,0,0,.6);
  opacity:0; transition:opacity .3s, background .25s, color .25s, border-color .25s;
  will-change:transform;
}
html.has-custom-cursor .cursor-mic{opacity:1;}
html.has-custom-cursor, html.has-custom-cursor body{cursor:none;}
html.has-custom-cursor a, html.has-custom-cursor button, html.has-custom-cursor .btn{cursor:none;}

/* scroll progress */
#scrollProgress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  z-index:80; transition:width .12s linear;
}

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

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.9rem 1.6rem;
  border-radius:999px;
  font-weight:700;
  font-size:.92rem;
  letter-spacing:.01em;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s;
  white-space:nowrap;
}
.btn--primary{
  background:linear-gradient(135deg, var(--gold-bright), var(--gold-deep));
  color:#221703;
  box-shadow:0 10px 26px -10px rgba(122,87,32,.55);
}
.btn--primary:hover{transform:translateY(-3px); box-shadow:0 16px 32px -10px rgba(122,87,32,.6);}
.btn--ghost{
  border:1px solid rgba(240,233,219,.22);
  color:var(--ink);
  background:rgba(240,233,219,.04);
}
.btn--ghost:hover{border-color:var(--gold); background:rgba(201,154,74,.14); transform:translateY(-3px);}
.btn--lg{padding:1.1rem 2.2rem; font-size:1rem;}
.btn--sm{padding:.6rem 1.1rem; font-size:.8rem;}

/* ===== NAV ===== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem clamp(1.2rem,5vw,4rem);
  transition:background .4s, backdrop-filter .4s, padding .4s, border-color .4s, box-shadow .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(30,24,21,.8);
  backdrop-filter:blur(14px);
  padding-top:1rem; padding-bottom:1rem;
  border-color:var(--line);
  box-shadow:0 10px 30px -20px rgba(0,0,0,.5);
}
.nav__logo{font-family:var(--serif); font-size:1.15rem; letter-spacing:.08em; font-weight:600;}
.nav__logo span{color:var(--gold);}
.nav__links{display:flex; align-items:center; gap:2rem; font-size:.85rem; font-weight:500; color:var(--ink-dim);}
.nav__links a{position:relative;}
.nav__links a:not(.nav__cta)::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--gold);
  transform:scaleX(0); transform-origin:right; transition:transform .35s var(--ease);
}
.nav__links a:not(.nav__cta):hover::after{transform:scaleX(1); transform-origin:left;}
.nav__links a:hover{color:var(--ink);}
.nav__cta{
  color:#221703 !important; background:linear-gradient(135deg, var(--gold-bright), var(--gold)); padding:.55rem 1.2rem; border-radius:999px; font-weight:700;
}
@media (max-width: 760px){ .nav__links a:not(.nav__cta){display:none;} }

/* ===== HERO ===== */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding: 7rem clamp(1.2rem,6vw,5rem) 3rem;
  overflow:hidden;
}
.hero__bg-glow{
  position:absolute; inset:-20% -10% auto -10%; height:120%;
  background:radial-gradient(ellipse at 72% 18%, rgba(201,154,74,.22), transparent 60%),
             radial-gradient(ellipse at 8% 85%, rgba(201,154,74,.14), transparent 55%);
  pointer-events:none;
}
.hero__inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 1.05fr; align-items:center; gap:3rem;
  max-width:1380px; margin:0 auto; width:100%;
}
.hero__title{font-size:clamp(3rem, 8vw, 6.2rem); line-height:.95; display:flex; flex-direction:column;}
.hero__title--outline{
  background:linear-gradient(100deg, var(--gold-deep) 20%, var(--gold-bright) 40%, var(--gold-deep) 60%);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 6s linear infinite;
}
@keyframes shimmer{
  0%{background-position:0% 0;}
  100%{background-position:250% 0;}
}
.hero__tagline{
  margin-top:1.6rem; max-width:36ch;
  color:var(--ink-dim); font-size:1.08rem; line-height:1.6;
}
.hero__tagline em{color:var(--gold-bright); font-style:normal; font-weight:600;}
.hero__actions{display:flex; flex-wrap:wrap; gap:1rem; margin-top:2.2rem;}
.hero__social{
  margin-top:2.2rem; display:flex; align-items:center; gap:.6rem;
  font-size:.85rem; color:var(--ink-faint);
}
.hero__social a{display:flex; align-items:center; gap:.4rem; color:var(--ink-dim);}
.hero__social a:hover{color:var(--gold);}
.hero__social .dot{opacity:.5;}

.hero__portrait{position:relative; justify-self:center; perspective:1200px;}
.portrait__tilt{transform-style:preserve-3d; will-change:transform;}
.portrait__frame{
  position:relative; width:min(480px, 88vw); aspect-ratio:4/5;
  border-radius:18px; overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(155deg, #3a312c, #241d1a);
  box-shadow:0 40px 90px -28px rgba(0,0,0,.6);
  animation:float 5s ease-in-out infinite;
  transform-style:preserve-3d;
  will-change:transform;
}
@keyframes float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-14px);}
}
.portrait__frame img{width:100%; height:100%; object-fit:cover; object-position:center top;}
.portrait__placeholder-label{
  display:none; position:absolute; inset:0; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.5rem;
  font-size:.85rem; color:var(--ink-faint); letter-spacing:.04em; line-height:1.6; padding:1rem;
}
.portrait__placeholder-label small{font-size:.72rem; opacity:.75;}
.portrait--placeholder img{display:none;}
.portrait--placeholder .portrait__placeholder-label{display:flex;}
.portrait__ring{
  position:absolute; top:-22px; right:-22px; width:110px; height:110px;
  border:1px solid var(--gold); border-radius:50%; opacity:.45;
  animation:spin 18s linear infinite;
}
.portrait__ring::before{
  content:''; position:absolute; inset:14px; border:1px dashed var(--gold); border-radius:50%;
}
@keyframes spin{to{transform:rotate(360deg);}}
.portrait__badge{
  position:absolute; left:-1.2rem; bottom:1.6rem;
  background:rgba(30,24,21,.9); backdrop-filter:blur(10px);
  border:1px solid rgba(224,184,105,.28); border-radius:12px;
  padding:.8rem 1.1rem;
  display:flex; flex-direction:column; gap:.15rem;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.55);
  animation:badgeFloat 4s ease-in-out infinite .5s;
}
@keyframes badgeFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(8px);}
}
.portrait__badge strong{font-family:var(--serif); font-size:1rem; color:var(--gold-bright);}
.portrait__badge span{font-size:.72rem; color:var(--ink-faint); letter-spacing:.05em; text-transform:uppercase;}

/* waveform decoration */
.hero__waveform{
  position:absolute; left:50%; bottom:9rem; transform:translateX(-50%);
  display:flex; align-items:flex-end; gap:6px; height:40px; opacity:.55; z-index:1;
}
.hero__waveform span{
  width:4px; background:linear-gradient(var(--gold), transparent); border-radius:2px;
  animation:wave 1.4s ease-in-out infinite;
}
.hero__waveform span:nth-child(odd){animation-duration:1.1s;}
.hero__waveform span:nth-child(1){height:14px; animation-delay:.0s;}
.hero__waveform span:nth-child(2){height:26px; animation-delay:.1s;}
.hero__waveform span:nth-child(3){height:10px; animation-delay:.2s;}
.hero__waveform span:nth-child(4){height:34px; animation-delay:.3s;}
.hero__waveform span:nth-child(5){height:18px; animation-delay:.4s;}
.hero__waveform span:nth-child(6){height:40px; animation-delay:.5s;}
.hero__waveform span:nth-child(7){height:20px; animation-delay:.6s;}
.hero__waveform span:nth-child(8){height:30px; animation-delay:.7s;}
.hero__waveform span:nth-child(9){height:12px; animation-delay:.8s;}
.hero__waveform span:nth-child(10){height:24px; animation-delay:.9s;}
.hero__waveform span:nth-child(11){height:16px; animation-delay:1s;}
.hero__waveform span:nth-child(12){height:28px; animation-delay:1.1s;}
@keyframes wave{0%,100%{transform:scaleY(.4);} 50%{transform:scaleY(1);}}

.hero__scroll{
  position:absolute; left:50%; bottom:2.2rem; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-faint);
}
.hero__scroll-line{width:1px; height:38px; background:linear-gradient(var(--gold), transparent); animation:scrollLine 2s ease-in-out infinite;}
@keyframes scrollLine{0%{opacity:0; transform:scaleY(0); transform-origin:top;} 40%{opacity:1; transform:scaleY(1); transform-origin:top;} 100%{opacity:0; transform:scaleY(1); transform-origin:bottom;}}

@media (max-width: 900px){
  .hero__inner{grid-template-columns:1fr; text-align:center;}
  .hero__title{align-items:center;}
  .hero__tagline{margin-inline:auto;}
  .hero__actions{justify-content:center;}
  .hero__social{justify-content:center;}
  .hero__portrait{margin-top:2rem;}
  .portrait__badge{left:50%; transform:translateX(-50%);}
  @keyframes badgeFloat{0%,100%{transform:translateX(-50%) translateY(0);} 50%{transform:translateX(-50%) translateY(8px);}}
}

/* ===== MARQUEE ===== */
.marquee{
  overflow:hidden; padding:1.3rem 0; background:var(--dark);
}
.marquee__track{
  display:flex; gap:2.5rem; white-space:nowrap; width:max-content;
  font-family:var(--serif); font-size:1.3rem; color:var(--cream-dim);
  animation:marquee 22s linear infinite;
}
.marquee__track span:nth-child(4n+2){color:var(--gold-bright);}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ===== ABOUT ===== */
.about{padding:8rem clamp(1.2rem,6vw,5rem);}
.about__inner{
  max-width:1250px; margin:0 auto;
  display:grid; grid-template-columns:.9fr 1.1fr; gap:4.5rem; align-items:center;
}
.about__photo-frame{
  position:relative; border-radius:14px; overflow:hidden; aspect-ratio:4/5;
  border:1px solid var(--line); background:linear-gradient(155deg,#3a312c,#241d1a);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.55);
}
.about__photo-frame img{width:100%; height:100%; object-fit:cover;}
.about__stats{
  margin-top:1.6rem; display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:var(--card);
}
.stat{padding:1.2rem .5rem; text-align:center; border-right:1px solid var(--line);}
.stat:last-child{border-right:none;}
.stat__num{display:block; font-family:var(--serif); font-size:1.9rem; color:var(--gold-bright); font-weight:700;}
.stat__label{font-size:.68rem; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.08em;}
.about__text h2{font-size:clamp(1.9rem,3.4vw,2.7rem); line-height:1.15; margin-bottom:1.4rem;}
.about__text p{color:var(--ink-dim); line-height:1.75; margin-bottom:1.1rem; font-size:1rem;}
.about__text strong{color:var(--ink);}
.about__text .btn{margin-top:1rem;}

@media (max-width:900px){
  .about__inner{grid-template-columns:1fr;}
}

/* ===== SINGLE ===== */
.single{position:relative; padding:8rem clamp(1.2rem,6vw,5rem); background:var(--bg-2); text-align:center; overflow:hidden;}
.single__glow{
  position:absolute; top:0; left:50%; transform:translateX(-50%); width:900px; height:500px;
  background:radial-gradient(ellipse, rgba(169,120,47,.16), transparent 65%); pointer-events:none;
}
.single__inner{position:relative; max-width:900px; margin:0 auto;}
.single__title{font-size:clamp(2.4rem,6vw,4.2rem); margin-bottom:1rem;}
.single__title span{color:var(--gold-bright);}
.single__sub{color:var(--ink-dim); max-width:44ch; margin:0 auto 3rem;}
.single__player{border-radius:18px; overflow:hidden; border:1px solid var(--line); box-shadow:0 40px 90px -30px rgba(33,29,22,.35);}
.single__video{position:relative; width:100%; aspect-ratio:16/9; background:#000;}
.single__video iframe{position:absolute; inset:0; width:100%; height:100%;}

/* ===== CONTACT ===== */
.contact{position:relative; padding:9rem clamp(1.2rem,6vw,5rem); text-align:center; overflow:hidden; background:var(--dark); color:var(--cream);}
.contact__glow{
  position:absolute; bottom:-30%; left:50%; transform:translateX(-50%); width:1000px; height:600px;
  background:radial-gradient(ellipse, rgba(201,154,74,.22), transparent 65%); pointer-events:none;
}
.contact__inner{position:relative; max-width:700px; margin:0 auto;}
.contact .eyebrow{color:var(--gold-bright);}
.contact h2{font-size:clamp(2.2rem,5vw,3.6rem); line-height:1.1; margin-bottom:1.2rem; color:var(--cream);}
.contact__sub{color:var(--cream-dim); margin-bottom:2.4rem;}
.contact__social{margin-top:1.6rem;}
.contact__social a{color:var(--cream-dim); font-size:.88rem;}
.contact__social a:hover{color:var(--gold-bright);}

/* ===== FOOTER ===== */
.footer{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
  padding:2rem clamp(1.2rem,6vw,5rem);
  font-size:.78rem; color:var(--cream-dim);
  background:var(--dark);
  border-top:1px solid var(--line-dark);
}

/* ===== SCROLL REVEALS ===== */
.reveal{
  opacity:0; transform:translateY(24px);
  animation:reveal 1s var(--ease) forwards;
  animation-delay:calc(var(--d, 0) * .14s + .1s);
}
@keyframes reveal{to{opacity:1; transform:none;}}

.reveal-scroll{opacity:0; transform:translateY(46px) scale(.97); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); transition-delay:calc(var(--d,0) * .12s);}
.reveal-scroll.is-visible{opacity:1; transform:none;}