/* =========================================================
   brn.motion · portfolio site
   Estilo inspirado em octosmm.webflow.io: glow rosa saturado
   sobre preto, grain forte, cards com blur + cantos bem
   arredondados ("squircle"), tudo na cor institucional #E30C58
   ========================================================= */

:root{
  --bg: #08080a;
  --bg-alt: #111113;
  --bg-card: #17171a;
  --fg: #f4f4f5;
  --muted: #9a9aa2;
  --border: #232327;
  --accent: #E30C58;      /* cor institucional brn.motion */
  --accent-2: #ff3d7f;    /* variação clara */
  --accent-hot: #ff0a54;  /* rosa quente saturado, pro glow tipo octo */
  --accent-deep: #4a001c; /* variação escura, base do glow */
  --radius: 6px;
  --radius-lg: 28px;      /* cantos bem arredondados tipo "squircle" */
  --ff: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-display: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.16,.84,.44,1);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ff);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
  cursor: default;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family: var(--ff-display); font-weight:700; letter-spacing:-.01em; margin:0; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
::selection{ background: var(--accent); color:#fff; }

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

/* grain overlay for cinematic texture */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:9999;
  opacity:.07; 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");
}

/* custom cursor */
.cursor-dot{
  position:fixed; top:0; left:0; width:10px; height:10px; border-radius:50%;
  background: var(--accent); pointer-events:none; z-index:9998;
  transform: translate(-50%,-50%);
  transition: width .25s var(--ease), height .25s var(--ease), background .25s var(--ease), opacity .25s;
  display:none;
}
@media (hover:hover) and (pointer:fine){
  .cursor-dot{ display:block; }
  body.cursor-hover .cursor-dot{ width:38px; height:38px; background:transparent; border:1.5px solid var(--accent); }
}

/* reveal on scroll */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* =================== HEADER =================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  padding: 22px 5%;
  display:flex; align-items:center;
  background: linear-gradient(to bottom, rgba(10,10,11,.9), transparent);
  transition: background .3s var(--ease), padding .3s var(--ease), backdrop-filter .3s var(--ease);
}
.site-header.scrolled{
  background: rgba(10,10,11,.86);
  backdrop-filter: blur(10px);
  padding: 14px 5%;
  border-bottom: 1px solid var(--border);
}
.header-inner{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo{ display:inline-flex; align-items:center; }
.logo img{ height: 34px; width:auto; }
.main-nav{ display:flex; gap:36px; margin-left:auto; margin-right:24px; }
.main-nav a{
  font-size:.82rem; letter-spacing:.06em; font-weight:500; color: var(--fg);
  position:relative; padding-bottom:4px;
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background: var(--accent);
  transition: width .3s var(--ease);
}
.main-nav a:hover::after{ width:100%; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 26px; border-radius: 999px; font-size:.82rem; font-weight:600;
  border:1px solid transparent; transition: all .3s var(--ease);
  background: none; appearance: none; -webkit-appearance: none;
  font-family: inherit; cursor: pointer;
}
.btn-primary{ background: var(--fg); color:#0a0a0b; }
.btn-primary:hover{ background: var(--accent); color:#fff; transform: translateY(-2px); }
.btn-outline{ border-color: rgba(244,244,245,.3); color: var(--fg); }
.btn-outline:hover{ border-color: var(--accent); color: var(--accent-2); }
.btn-ghost{ color: var(--fg); border-bottom:1px solid var(--border); border-radius:0; padding:12px 4px; }
.btn-ghost:hover{ border-color: var(--accent); color: var(--accent-2); }
.nav-cta{ padding: 10px 22px; }
.menu-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px; }
.menu-toggle span{ width:24px; height:2px; background: var(--fg); transition: all .3s var(--ease); }

/* =================== HERO (glow radial estilo referência) =================== */
.hero{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: 150px 5% 90px; overflow:hidden; text-align:center;
  background: var(--bg);
}
/* grid cross divider like reference 1 */
.hero::before{
  content:""; position:absolute; inset:8% 8% 0 8%; z-index:1; pointer-events:none;
  border-left:1px solid rgba(244,244,245,.06); border-right:1px solid rgba(244,244,245,.06);
}
.hero-bigword{
  position:absolute; left:50%; bottom:-4%; transform:translateX(-50%);
  font-family: var(--ff-display);
  font-size: clamp(6rem, 22vw, 20rem); font-weight:800; letter-spacing:-.03em;
  color: transparent; -webkit-text-stroke: 1px rgba(244,244,245,.06);
  z-index:1; white-space:nowrap; pointer-events:none; user-select:none;
}
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(36% 40% at 82% 6%, var(--accent-hot) 0%, transparent 70%),
    radial-gradient(30% 32% at 12% 14%, var(--accent-2) 0%, transparent 72%),
    radial-gradient(60% 56% at 50% 100%, var(--accent) 0%, var(--accent-deep) 36%, transparent 74%),
    linear-gradient(to bottom, var(--bg) 0%, rgba(8,8,10,.1) 22%, rgba(8,8,10,.1) 55%, var(--bg) 96%);
  opacity:1;
}
.hero-content{ position:relative; z-index:2; max-width: 780px; display:flex; flex-direction:column; align-items:center; }
.hero-content .eyebrow{ text-align:center; margin-bottom: 30px; }
.hero-title{
  font-family: var(--ff);
  font-size: clamp(1rem, 3.8vw, 2.4rem);
  line-height: 1.3;
  font-weight:700;
  letter-spacing:-.02em;
  white-space: nowrap;
}
.word-swap{ color: var(--accent-2); }
.hero-sub{
  display:block; margin: 34px auto 0; max-width: 540px; color: var(--muted); font-size:1.05rem; font-weight:400;
  line-height:1.7;
}
.hero-actions{ position:relative; z-index:2; display:flex; gap:18px; justify-content:center; margin-top:44px; flex-wrap:wrap; }

/* video em janela, abaixo do texto */
.hero-video-frame{
  position:relative; z-index:2; width:100%; max-width: 880px; margin-top: 56px;
  aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow:hidden;
  border: 1px solid rgba(244,244,245,.12);
  box-shadow: 0 30px 80px -20px rgba(255,10,84,.4), 0 10px 40px rgba(0,0,0,.5);
  background: var(--bg-card);
}
.hero-video{ width:100%; height:100%; object-fit:cover; display:block; border:0; }
.hero-video-controls{
  position:absolute; right:16px; bottom:16px; z-index:3;
  display:flex; gap:10px;
}
.hero-video-btn{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(244,244,245,.18);
  background:rgba(8,8,10,.55); backdrop-filter:blur(8px); color:var(--fg);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.hero-video-btn:hover{ background:rgba(227,12,88,.35); border-color:var(--accent); transform:scale(1.06); }
.hero-video-glow{
  position:absolute; inset:0; pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  background: linear-gradient(to top, rgba(0,0,0,.28), transparent 32%);
}
.scroll-hint{
  position:relative; margin-top: 56px; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.scroll-hint span{
  width:1px; height:44px; background: linear-gradient(var(--accent-2), transparent);
  animation: scrollLine 1.8s infinite var(--ease);
}
.scroll-hint p{ font-size:.65rem; letter-spacing:.22em; text-transform:uppercase; color: var(--muted); }
@keyframes scrollLine{ 0%{ transform:scaleY(0); transform-origin:top; } 50%{ transform:scaleY(1); transform-origin:top; } 51%{ transform-origin:bottom; } 100%{ transform:scaleY(0); transform-origin:bottom; } }

/* =================== MARQUEE =================== */
.marquee{
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  overflow:hidden; white-space:nowrap; padding: 18px 0; background: var(--bg-alt);
  position:relative; z-index:2;
}
.marquee-track{ display:inline-flex; gap:24px; animation: marquee 32s linear infinite; }
.marquee-track span{ font-size:1.1rem; font-weight:700; letter-spacing:.01em; color: var(--muted); text-transform:uppercase; }
.marquee-track span:nth-child(odd){ color: var(--accent-2); }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* =================== SECTION HEAD =================== */
.section-head{ text-align:center; max-width:640px; margin: 0 auto 56px; padding-top: 110px; }
.section-head h2{ font-size: clamp(1.6rem, 3.6vw, 2.5rem); text-transform:uppercase; letter-spacing:-.01em; }

/* =================== WORK =================== */
.work{ padding: 0 5% 120px; }
.view-all{ text-align:center; margin-top: 56px; }
.filters{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom: 50px; }
.filter-btn{
  background:none; border:1px solid var(--border); color: var(--muted);
  padding: 10px 22px; border-radius: 999px; font-size:.78rem; font-weight:600; letter-spacing:.02em;
  transition: all .3s var(--ease);
}
.filter-btn:hover{ color: var(--fg); border-color: var(--fg); }
.filter-btn.active{ background: var(--accent); border-color: var(--accent); color:#fff; }

.work-grid{
  max-width: 1400px; margin:0 auto;
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 32px;
}
.work-item{ cursor:pointer; opacity:0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.work-item.in{ opacity:1; transform:none; }
.work-thumb{
  position:relative; aspect-ratio: 16/10; overflow:hidden; background: var(--bg-card); border-radius: var(--radius-lg);
}
.work-thumb img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .7s var(--ease), filter .5s var(--ease);
  filter: grayscale(55%) brightness(.82);
}
.work-item:hover .work-thumb img{ transform: scale(1.06); filter: grayscale(0%) brightness(1); }
.work-thumb::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(227,12,88,.35), transparent 55%);
  opacity:0; transition: opacity .4s var(--ease);
}
.work-item:hover .work-thumb::after{ opacity:1; }
.play-btn{
  position:absolute; inset:0; margin:auto; width:56px; height:56px; border-radius:50%;
  background: rgba(227,12,88,.94); display:flex; align-items:center; justify-content:center;
  opacity:0; transform: scale(.7); transition: all .35s var(--ease);
}
.work-item:hover .play-btn{ opacity:1; transform: scale(1); }
.play-btn svg{ width:18px; height:18px; fill:#fff; margin-left:2px; }
.work-meta{ display:flex; justify-content:space-between; align-items:baseline; padding-top:16px; }
.work-meta h3{ font-family: var(--ff); font-size:1.02rem; font-weight:700; }
.work-meta span{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color: var(--accent-2); font-weight:600; }

/* =================== ABOUT =================== */
.about{
  position:relative; overflow:hidden; background: var(--bg-alt); padding: 110px 5%;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.about::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: radial-gradient(34% 60% at 92% 0%, var(--accent-hot) 0%, transparent 70%);
  opacity:.45;
}
.about-inner{ position:relative; z-index:1; max-width:1200px; margin:0 auto; display:grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items:center; }
.about-text h2{ font-size: clamp(1.6rem,3.6vw,2.4rem); text-transform:uppercase; letter-spacing:-.01em; margin-bottom:22px; max-width:480px; }
.about-lead{ color: var(--muted); font-size:1.08rem; font-weight:400; line-height:1.7; max-width:460px; }
.about-skills{ display:flex; flex-direction:column; gap:16px; }
.skill-card{
  background: var(--bg-card); border:1px solid var(--border); border-radius: var(--radius-lg); padding: 26px 28px;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
  position:relative; overflow:hidden;
}
.skill-card::before{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity .3s var(--ease);
  background: linear-gradient(135deg, var(--accent) 0%, transparent 60%);
}
.skill-card:hover{ border-color: var(--accent); transform: translateX(6px); }
.skill-card:hover::before{ opacity:.15; }
.skill-card h3{ font-family: var(--ff); font-size:1.02rem; font-weight:700; margin-bottom:6px; position:relative; }
.skill-card p{ color: var(--muted); font-size:.9rem; position:relative; }

/* =================== SERVICES — cards diagonais em bloco =================== */
.services{ padding: 0 5% 120px; }
.services-grid{
  max-width:1200px; margin:0 auto; display:grid; grid-template-columns: repeat(4,1fr); gap:18px;
}
.service-card{
  position:relative; border-radius: var(--radius-lg); padding: 32px 26px; min-height: 220px;
  background: var(--bg-card); border:1px solid var(--border); overflow:hidden;
  transition: transform .35s var(--ease), border-color .35s var(--ease);
  display:flex; flex-direction:column; justify-content:space-between;
}
.service-card:hover{ transform: translateY(-6px); border-color: var(--accent); }
.service-card:nth-child(odd){
  background: linear-gradient(145deg, var(--accent-hot) 0%, var(--accent) 45%, var(--accent-deep) 100%);
  border-color: transparent;
}
/* blob de blur claro por cima do gradiente + grain, igual referência */
.service-card:nth-child(odd)::before{
  content:""; position:absolute; inset:-20% -20% auto auto; width:70%; height:70%;
  background: radial-gradient(circle, rgba(255,255,255,.55) 0%, transparent 70%);
  filter: blur(30px); pointer-events:none;
}
.service-card:nth-child(odd)::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; 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");
}
.service-card:nth-child(odd) .service-num,
.service-card:nth-child(odd) h3{ color:#fff; position:relative; z-index:1; }
.service-card:nth-child(odd) p{ color: rgba(255,255,255,.85); position:relative; z-index:1; }
.service-num{ font-size:.85rem; font-weight:800; color: var(--accent-2); }
.service-card h3{ font-family: var(--ff); font-size:1.1rem; font-weight:700; margin: 18px 0 10px; position:relative; z-index:1; }
.service-card p{ color: var(--muted); font-size:.9rem; line-height:1.6; position:relative; z-index:1; }

/* =================== CONTACT =================== */
.contact{ position:relative; padding: 110px 5% 130px; text-align:center; background: var(--bg); overflow:hidden; }
.contact::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(34% 42% at 26% 100%, var(--accent-hot) 0%, transparent 68%),
    radial-gradient(34% 42% at 76% 100%, var(--accent-2) 0%, transparent 68%),
    radial-gradient(58% 62% at 50% 100%, var(--accent-deep) 0%, transparent 72%);
  opacity:.9;
}
.contact-inner{ position:relative; z-index:1; max-width: 720px; margin:0 auto; }
.contact h2{ font-size: clamp(1.8rem,4.4vw,2.8rem); text-transform:uppercase; letter-spacing:-.01em; margin-bottom:18px; }
.contact-lead{ color: var(--muted); font-size:1.08rem; font-weight:400; margin-bottom:50px; display:block; }
.contact-links{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--border); }
.contact-link{
  display:flex; justify-content:space-between; align-items:center; padding: 22px 8px;
  border-bottom:1px solid var(--border); transition: padding-left .3s var(--ease), color .3s var(--ease);
}
.contact-link:hover{ padding-left: 14px; color: var(--accent-2); }
.contact-label{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color: var(--muted); }
.contact-value{ font-size:1.15rem; font-weight:600; }

/* =================== FOOTER =================== */
.site-footer{
  padding: 34px 5%; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
  border-top:1px solid var(--border);
}
.footer-logo{ height:28px; opacity:.85; }
.site-footer p{ color: var(--muted); font-size:.8rem; }

/* =================== LIGHTBOX =================== */
.lightbox{
  position:fixed; inset:0; z-index:2000; background: rgba(6,6,7,.94);
  display:flex; align-items:center; justify-content:center; padding: 6vh 5%;
  opacity:0; pointer-events:none; transition: opacity .35s var(--ease);
}
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox-content{ max-width: 1000px; width:100%; }
.lightbox-media{
  width:100%; aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow:hidden;
  background:#000; box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.lightbox-media img,
.lightbox-media video,
.lightbox-media iframe{ width:100%; height:100%; display:block; border:0; object-fit:cover; }
.lightbox-caption{ padding-top:22px; text-align:center; }
.lightbox-caption h3{ font-family: var(--ff); font-size:1.3rem; font-weight:700; }
.lightbox-caption p{ color: var(--accent-2); font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; margin-top:6px; font-weight:600; }
.lightbox-close{
  position:absolute; top:26px; right:5%; width:44px; height:44px; border-radius:50%; border:1px solid var(--border);
  background:none; color:#fff; font-size:1.6rem; line-height:1; display:flex; align-items:center; justify-content:center;
  transition: all .3s var(--ease);
}
.lightbox-close:hover{ border-color: var(--accent); color: var(--accent-2); transform: rotate(90deg); }

/* =================== ALL PROJECTS OVERLAY =================== */
.all-projects{
  position:fixed; inset:0; z-index:1500; background: var(--bg);
  overflow-y:auto; padding: 40px 5% 100px;
  opacity:0; pointer-events:none; transform: translateY(24px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.all-projects.open{ opacity:1; pointer-events:auto; transform:none; }
.all-projects-header{
  max-width:1400px; margin: 0 auto 30px; display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  padding-top: 20px;
}
.all-projects-header h2{ font-size: clamp(1.8rem, 4vw, 2.6rem); text-transform:uppercase; letter-spacing:-.01em; }
.all-projects-header .lightbox-close{ position:static; flex-shrink:0; }
.all-projects-grid{ padding-top: 10px; }
body.all-projects-open{ overflow:hidden; }

/* =================== RESPONSIVE =================== */
@media (max-width: 900px){
  .main-nav{ position:fixed; top:0; right:0; height:100vh; width:78%; max-width:340px;
    background: var(--bg-alt); flex-direction:column; justify-content:center; gap:30px; padding: 40px;
    transform: translateX(100%); transition: transform .4s var(--ease); border-left:1px solid var(--border); z-index:60; }
  .main-nav.open{ transform: translateX(0); }
  .main-nav a{ font-size:1.1rem; }
  .nav-cta{ display:none; }
  .menu-toggle{ display:flex; z-index:70; }
  body.nav-open .menu-toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  body.nav-open .menu-toggle span:nth-child(2){ opacity:0; }
  body.nav-open .menu-toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
  .work-grid{ grid-template-columns: 1fr; }
  .about-inner{ grid-template-columns:1fr; }
  .services-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 520px){
  .services-grid{ grid-template-columns: 1fr; }
  .contact-link{ flex-direction:column; align-items:flex-start; gap:6px; }
}