/* ===== MC MKT — Primeira dobra ===== */

:root{
  --black: #030303;
  --pink: #ff005c;
  --white: #f5f5f2;
  --text-gray: #c9c9c9;
  --header-h: 130px;
}

*, *::before, *::after{ box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
  width: 100%;
}

body{
  font-family: 'Arimo', Arial, Helvetica, sans-serif;
}

.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ===== Background ambiente (orbs coloridos) ===== */
.ambient-background{
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #030303;
  isolation: isolate;
}

.orb-layer{
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}

.ambient-orb{
  position: absolute;
  display: block;
  will-change: transform, opacity, border-radius;
  transform: translate3d(0, 0, 0);
  mix-blend-mode: screen;
}

.ambient-orb--blue{
  width: clamp(420px, 42vw, 820px);
  aspect-ratio: 1;
  top: clamp(-300px, -16vw, -130px);
  right: clamp(-280px, -11vw, -100px);
  border-radius: 50%;
  opacity: 0.78;
  background:
    radial-gradient(
      circle at 42% 45%,
      rgba(36, 91, 255, 0.92) 0%,
      rgba(15, 60, 190, 0.72) 42%,
      rgba(5, 29, 105, 0.38) 65%,
      rgba(0, 12, 55, 0) 78%
    );
  filter: blur(16px);
  animation: moveBlue 11s ease-in-out infinite alternate;
  animation-delay: -3s;
}

.ambient-orb--pink{
  width: clamp(520px, 48vw, 920px);
  height: clamp(300px, 34vw, 620px);
  left: clamp(-300px, -12vw, -100px);
  bottom: clamp(-330px, -18vw, -140px);
  opacity: 0.72;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 0, 92, 0.90) 0%,
      rgba(180, 0, 69, 0.60) 35%,
      rgba(91, 0, 45, 0.30) 62%,
      transparent 79%
    );
  filter: blur(75px);
  animation: movePink 13s ease-in-out infinite alternate;
  animation-delay: -7s;
}

.ambient-orb--yellow{
  width: clamp(420px, 40vw, 760px);
  height: clamp(230px, 26vw, 480px);
  left: 38%;
  bottom: clamp(-300px, -17vw, -130px);
  opacity: 0.58;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255, 196, 0, 0.88) 0%,
      rgba(177, 116, 0, 0.48) 42%,
      rgba(85, 51, 0, 0.20) 66%,
      transparent 80%
    );
  filter: blur(85px);
  animation: moveYellow 15s ease-in-out infinite alternate;
  animation-delay: -5s;
}

.ambient-orb--purple{
  width: clamp(280px, 28vw, 520px);
  aspect-ratio: 1;
  right: 24%;
  bottom: -22%;
  opacity: 0.25;
  background:
    radial-gradient(
      circle,
      rgba(105, 40, 255, 0.75),
      rgba(58, 12, 138, 0.28) 55%,
      transparent 76%
    );
  filter: blur(90px);
  animation: movePurple 17s ease-in-out infinite alternate;
  animation-delay: -9s;
}

@keyframes moveBlue{
  0%{
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    border-radius: 50%;
    opacity: 0.68;
  }
  45%{
    transform: translate3d(-70px, 45px, 0) scale(1.08) rotate(8deg);
    border-radius: 62% 38% 48% 52% / 44% 58% 42% 56%;
    opacity: 0.86;
  }
  100%{
    transform: translate3d(-110px, 15px, 0) scale(1.16) rotate(-6deg);
    border-radius: 42% 58% 62% 38% / 55% 42% 58% 45%;
    opacity: 0.74;
  }
}

@keyframes movePink{
  0%{
    transform: translate3d(0, 0, 0) scale(1);
    border-radius: 50%;
  }
  50%{
    transform: translate3d(80px, -45px, 0) scale(1.14);
    border-radius: 65% 35% 55% 45% / 48% 62% 38% 52%;
  }
  100%{
    transform: translate3d(130px, -20px, 0) scale(1.05);
    border-radius: 38% 62% 43% 57% / 60% 40% 60% 40%;
  }
}

@keyframes moveYellow{
  0%{
    transform: translate3d(-30px, 0, 0) scale(0.95);
    opacity: 0.42;
  }
  50%{
    transform: translate3d(55px, -55px, 0) scale(1.18);
    opacity: 0.68;
  }
  100%{
    transform: translate3d(110px, -15px, 0) scale(1.04);
    opacity: 0.52;
  }
}

@keyframes movePurple{
  0%{
    transform: translate3d(0, 30px, 0) scale(0.90) rotate(0deg);
  }
  50%{
    transform: translate3d(-60px, -35px, 0) scale(1.14) rotate(16deg);
  }
  100%{
    transform: translate3d(35px, -65px, 0) scale(1) rotate(-10deg);
  }
}

.ambient-vignette{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at center,
      transparent 20%,
      rgba(3, 3, 3, 0.08) 55%,
      rgba(3, 3, 3, 0.30) 100%
    );
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce){
  .ambient-orb{
    animation: none !important;
  }

  .orb-layer{
    transform: none !important;
  }
}

@media (max-width: 860px){
  .ambient-orb--blue{
    width: 520px;
    top: -220px;
    right: -260px;
    opacity: 0.66;
  }

  .ambient-orb--pink{
    width: 560px;
    left: -280px;
    bottom: -230px;
    filter: blur(65px);
    opacity: 0.61;
  }

  .ambient-orb--yellow{
    width: 480px;
    left: 20%;
    bottom: -250px;
    filter: blur(70px);
    opacity: 0.49;
  }

  .ambient-orb--purple{
    display: none;
  }
}

/* ===== Header (somente logotipo) ===== */
.site-header{
  position: relative;
  z-index: 10;
  height: var(--header-h);
  display: flex;
  align-items: center;
  padding: 0 clamp(32px, 4vw, 68px);
  background: transparent;
}

.logo{
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.logo:focus-visible{
  outline: 2px solid var(--pink);
  outline-offset: 4px;
}

/* Logotipo oficial: D:\Trabalhos\MCMKT\Logo-MC-Marketing-2.png (branco, fundo transparente). */
.logo-image{
  display: block;
  width: clamp(150px, 16vw, 250px);
  height: auto;
}

/* ===== Hero ===== */
.hero{
  position: relative;
  z-index: 5;
  min-height: calc(100svh - var(--header-h));
  width: 100%;
  display: grid;
  grid-template-columns: minmax(500px, 0.95fr) clamp(90px, 15vw, 300px) minmax(320px, 0.68fr);
  gap: clamp(20px, 2.4vw, 40px);
  padding: 20px clamp(32px, 4vw, 68px) 60px;
  align-items: start;
  align-content: center;
  background: transparent;
}

/* Ordem visual: MC MKT à esquerda, barra divisória, texto à direita
   (a ordem no HTML continua com o texto primeiro, por acessibilidade/leitura). */
.hero-mark{ order: 1; }
.hero-divider{ order: 2; }
.hero-content{
  order: 3;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(24px);
  animation: heroIn 0.9s cubic-bezier(.16,.8,.28,1) 0.15s forwards;
}

/* Barra rosa diagonal entre as colunas — mesma inclinação medida na barra "/"
   do arquivo oficial do logotipo (~18,7° a partir da vertical) e mais grossa. */
.hero-divider{
  align-self: stretch;
  min-height: 320px;
  background: var(--pink);
  clip-path: polygon(75% 0%, 100% 0%, 25% 100%, 0% 100%);
  opacity: 0;
  animation: heroIn 0.9s cubic-bezier(.16,.8,.28,1) 0.28s forwards;
}

.hero-title{
  margin: 0;
  font-family: "Archivo Black", "Arial Black", sans-serif;
  font-weight: 400;
  font-size: clamp(34px, 2.8vw, 52px);
  line-height: 0.96;
  letter-spacing: -0.045em;
  -webkit-text-stroke: 0;
  text-transform: uppercase;
  max-width: 640px;
}

.hero-title .line{
  display: block;
  white-space: nowrap;
}

.title-creative{
  display: block;
  color: var(--white);
}

.title-strategy{
  display: block;
  color: var(--pink);
}

.hero-sub{
  margin: 32px 0 0;
  max-width: 480px;
  font-size: clamp(17px, 1.25vw, 22px);
  line-height: 1.45;
  color: var(--text-gray);
  font-weight: 400;
}

/* ===== MC MKT mark ===== */
.hero-mark{
  display: flex;
  align-items: flex-start;
  line-height: 0.8;
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  animation: markIn 1s cubic-bezier(.16,.8,.28,1) 0.35s forwards;
}

.mark-block{
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  /* Mesmo font-size do .mark-text-line: só para servir de referência ao "em"
     do margin-left abaixo (não afeta texto, que continua controlado no filho). */
  font-size: clamp(190px, 22vw, 400px);
  /* Compensa o side-bearing natural do "M" na fonte Arimo (~6,25% do font-size),
     que o logotipo (recortado sem respiro) não tem — sem isso, MC/MKT parece
     nascer mais à direita que a logo mesmo com as caixas CSS alinhadas. */
  margin-left: -0.0625em;
}

.mark-text-line{
  display: block;
  font-weight: 900;
  font-size: clamp(190px, 22vw, 400px);
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: transparent;
  visibility: hidden;
  white-space: nowrap;
}

/* Máscara única contendo as duas linhas (MC + MKT), evitando duas
   instâncias do vídeo. viewBox proporcional ao par de linhas reais
   (mesmo font-size/weight/letter-spacing nos dois <text> do SVG). */
.video-mask{
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: left top;
  mask-position: left top;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 714 472'><text x='0' y='193' font-family=%22Arimo, Arial, sans-serif%22 font-weight='900' font-size='295' letter-spacing='-6' fill='white'>MC</text><text x='0' y='429' font-family=%22Arimo, Arial, sans-serif%22 font-weight='900' font-size='295' letter-spacing='-6' fill='white'>MKT</text></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 714 472'><text x='0' y='193' font-family=%22Arimo, Arial, sans-serif%22 font-weight='900' font-size='295' letter-spacing='-6' fill='white'>MC</text><text x='0' y='429' font-family=%22Arimo, Arial, sans-serif%22 font-weight='900' font-size='295' letter-spacing='-6' fill='white'>MKT</text></svg>");
}

/* Fundo colorido dentro da máscara MC/MKT. Fica sempre presente atrás do vídeo —
   como o vídeo (iframe ou <video>) só aparece (.is-playing) quando a reprodução é
   confirmada, esse gradiente é o que se vê sempre que o vídeo falhar ou não existir. */
.mark-fallback{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    #ff005c 0%,
    #ff005c 28%,
    #1346d8 58%,
    #ffc400 100%
  );
}

.video-wrap{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220%;
  height: 220%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.video-wrap.is-playing{
  opacity: 1;
}

.video-wrap iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

/* Preparado para quando assets/videos/hero-loop.mp4 existir (ver comentário no HTML).
   O fade em si é feito pelo .video-wrap.is-playing (acima), então aqui só o encaixe. */
.hero-video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

@keyframes heroIn{
  to{ opacity: 1; transform: translateY(0); }
}

@keyframes markIn{
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .hero-content, .hero-mark, .hero-divider{
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ===== Responsive ===== */
@media (max-width: 1024px){
  .hero{
    grid-template-columns: 1fr 1fr;
  }

  .hero-divider{
    display: none;
  }
}

@media (max-width: 860px){
  .site-header{
    padding: 0 clamp(20px, 5vw, 24px);
  }

  .hero{
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 20px clamp(20px, 5vw, 24px) 48px;
  }

  .hero-content{
    order: 1;
    align-self: auto;
  }

  .hero-mark{
    order: 2;
    margin-top: clamp(16px, 5vw, 32px);
  }

  .hero-divider{
    display: none;
  }

  .hero-title{
    font-size: clamp(28px, 9vw, 44px);
    max-width: 100%;
  }

  .mark-block{
    font-size: clamp(145px, 44vw, 240px);
  }

  .mark-text-line{
    font-size: clamp(145px, 44vw, 240px);
  }
}