/* Designers Hub — página do Sharingan (/sharingan/). Usa os tokens e componentes de /styles.css;
   aqui só a identidade própria: o vermelho do olho sobre o preto do Hub. */
.sh { --red: #ff2b3a; --red-rgb: 255, 43, 58; --blood: #7a0612; }
.sh em { color: var(--red); }
.sh .kicker { color: rgba(var(--red-rgb), 0.85); letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px; font-weight: 600; }
.sh .btn-primary { background: var(--red); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18) inset, 0 12px 40px rgba(var(--red-rgb), 0.35); }
.sh .btn-primary:hover { background: #ff4552; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset, 0 16px 50px rgba(var(--red-rgb), 0.5); }
.sh .section + .section::before, .sh .section + .final::before { background: linear-gradient(90deg, transparent, rgba(var(--red-rgb), 0.35), transparent); }

/* ── Hero ── */
.sh-hero { position: relative; padding: 140px 0 100px; text-align: center; }
.sh-hero::before { content: ''; position: absolute; inset: 0 0 auto; height: 820px; z-index: -1; background: radial-gradient(45% 50% at 50% 30%, rgba(var(--red-rgb), 0.14), transparent 70%); pointer-events: none; }
.sh-hero .container { display: flex; flex-direction: column; align-items: center; }
.sh-badge { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px; padding: 7px 14px 7px 12px; border-radius: 999px; border: 1px solid rgba(var(--red-rgb), 0.3); background: rgba(var(--red-rgb), 0.06); font-size: 13px; font-weight: 500; color: #ffb3b9; }
.sh-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(var(--red-rgb), 0.18); animation: shBlink 2.4s ease-in-out infinite; }
@keyframes shBlink { 50% { box-shadow: 0 0 0 8px rgba(var(--red-rgb), 0.04); } }
.sh-h1 { font-size: clamp(54px, 9vw, 120px); font-weight: 600; letter-spacing: -0.04em; line-height: 0.95; }
.sh-h1 span { background: linear-gradient(180deg, #fff 30%, #ffb3b9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sh-tagline { margin-top: 18px; font-size: clamp(20px, 2.6vw, 30px); font-weight: 400; color: var(--text); }
.sh-hero .lead { margin-inline: auto; max-width: 620px; }
.sh-actions { justify-content: center; margin-top: 34px; }

/* ── O olho ── */
.sh-eye { width: min(100%, 460px); margin: 0 auto 34px; filter: drop-shadow(0 0 60px rgba(var(--red-rgb), 0.35)); }
.sh-eye svg { display: block; width: 100%; height: auto; overflow: visible; }
.sh-eye .lid-line { fill: none; stroke: rgba(255, 255, 255, 0.55); stroke-width: 1.4; }
.sh-eye .lid-glow { fill: none; stroke: rgba(var(--red-rgb), 0.5); stroke-width: 6; filter: blur(6px); }
.sh-eye .lid-mask { transform-box: fill-box; transform-origin: center; animation: shLid 7s var(--ease) infinite; }
.sh-eye .lid-lines { transform-box: fill-box; transform-origin: center; animation: shLid 7s var(--ease) infinite; }
@keyframes shLid { 0%, 86%, 100% { transform: scaleY(1); } 90% { transform: scaleY(0.04); } 94% { transform: scaleY(1); } }
.sh-eye .iris { transform-box: fill-box; transform-origin: center; animation: shWake 1.6s var(--ease) both; }
@keyframes shWake { from { transform: scale(0.55); opacity: 0; } to { transform: none; opacity: 1; } }
.sh-eye .contours circle { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 0.8; stroke-dasharray: 3 5; animation: shContour 18s linear infinite; }
.sh-eye .contours circle:nth-child(2) { animation-duration: 26s; animation-direction: reverse; }
.sh-eye .contours circle:nth-child(3) { animation-duration: 34s; }
@keyframes shContour { to { stroke-dashoffset: -160; } }
.sh-eye .ring { fill: none; stroke: #14010a; stroke-width: 1.6; opacity: 0.85; }
.sh-eye .blades { transform-box: view-box; transform-origin: 120px 80px; animation: shSpin 9s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.sh-eye .blade { fill: #0d0005; }
@keyframes shSpin { 0% { rotate: 0deg; } 70%, 100% { rotate: 360deg; } }
.sh-eye .pupil { transform-box: fill-box; transform-origin: center; animation: shPupil 9s ease-in-out infinite; }
@keyframes shPupil { 0%, 100% { transform: scale(1); } 60% { transform: scale(0.72); } 75% { transform: scale(1.12); } }
.sh-eye .scan { fill: url(#shScan); animation: shScan 4.5s ease-in-out infinite; }
@keyframes shScan { 0% { transform: translateY(-70px); opacity: 0; } 20%, 80% { opacity: 1; } 100% { transform: translateY(70px); opacity: 0; } }

/* ── Como funciona ── */
.sh-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: sh; }
.sh-step { position: relative; padding: 30px 26px 28px; border-radius: 22px; border: 1px solid var(--line); background: var(--card); counter-increment: sh; transition: border-color 0.3s, transform 0.4s var(--ease); }
.sh-step:hover { border-color: rgba(var(--red-rgb), 0.35); transform: translateY(-4px); }
.sh-step::before { content: counter(sh, decimal-leading-zero); display: block; margin-bottom: 22px; font: 500 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--red); }
.sh-step h3 { font-size: 20px; }
.sh-step p { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* ── A técnica: as quatro camadas ── */
.sh-layers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sh-layer { margin: 0; }
.sh-frame { position: relative; overflow: hidden; aspect-ratio: 3 / 4; border-radius: 20px; border: 1px solid var(--line-2); background: #0d0e11; }
.sh-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sh-frame svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sh-frame .bg-floor { fill: url(#shFloor); }
.sh-l1 .person { fill: #8b8f98; }
.sh-l1 .scene { fill: #23262c; }
.sh-l2 { background: #090410; }
.sh-l2 .person { fill: url(#shDepth); }
.sh-l2 .scene { fill: #201033; }
.sh-l3 { background: #000; }
.sh-l3 .person { fill: #fff; }
.sh-l3 .scene { fill: #000; }
.sh-l4 .person { fill: url(#shNew); }
.sh-l4 .scene { fill: #23262c; }
.sh-l4::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(var(--red-rgb), 0.45), inset 0 0 50px rgba(var(--red-rgb), 0.18); border-radius: inherit; pointer-events: none; }
.sh-layer figcaption { margin-top: 14px; }
.sh-layer b { display: block; font-size: 15px; font-weight: 500; }
.sh-layer small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.sh-arrowline { position: relative; height: 1px; margin: 26px 0 0; background: linear-gradient(90deg, transparent, rgba(var(--red-rgb), 0.6), transparent); }
.sh-arrowline::after { content: ''; position: absolute; top: -3px; left: 0; width: 60px; height: 7px; border-radius: 4px; background: var(--red); filter: blur(3px); animation: shRun 3.6s ease-in-out infinite; }
@keyframes shRun { from { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } to { left: calc(100% - 60px); opacity: 0; } }

/* ── Destaques ── */
.sh-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sh-feat { display: flex; gap: 18px; padding: 26px; border-radius: 22px; border: 1px solid var(--line); background: var(--card); }
.sh-feat-icon { display: grid; flex-shrink: 0; place-items: center; width: 46px; height: 46px; border-radius: 14px; border: 1px solid rgba(var(--red-rgb), 0.3); background: rgba(var(--red-rgb), 0.08); }
.sh-feat-icon svg { width: 21px; height: 21px; fill: none; stroke: #ff8a93; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sh-feat h3 { font-size: 17px; }
.sh-feat p { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* ── Para quem ── */
.sh-uses { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sh-use { padding: 26px 24px; border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(170deg, var(--card-2), var(--card)); }
.sh-use h3 { font-size: 17px; }
.sh-use p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--muted); }

/* ── Uso responsável ── */
.sh-ethics { display: flex; gap: 20px; align-items: flex-start; max-width: 860px; margin: 0 auto; padding: 28px 30px; border-radius: 22px; border: 1px solid var(--line-2); background: var(--card); }
.sh-ethics svg { flex-shrink: 0; width: 26px; height: 26px; fill: none; stroke: var(--red); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sh-ethics b { font-size: 16px; font-weight: 500; }
.sh-ethics p { margin-top: 6px; font-size: 14.5px; line-height: 1.65; color: var(--muted); }

/* ── Chamada final ── */
.sh-final { align-items: center; text-align: center; background: radial-gradient(60% 80% at 50% 110%, rgba(var(--red-rgb), 0.22), transparent 70%), #0b0b0d; }
.sh-final::before { display: none; }
.sh-final .title { max-width: 680px; margin-inline: auto; }
.sh-final .lead { margin-inline: auto; }
.sh-final .hero-actions { justify-content: center; margin-top: 30px; }
.sh-final .sh-eye-mini { width: 120px; margin: 0 auto 26px; }

@media (max-width: 960px) {
  .sh-layers, .sh-uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-steps { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sh-hero { padding: 120px 0 80px; }
  .sh-feats { grid-template-columns: 1fr; }
  .sh-uses { grid-template-columns: 1fr; }
  .sh-ethics { flex-direction: column; padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-eye *, .sh-arrowline::after, .sh-dot { animation: none !important; }
}

/* ── Página nova: cabeça de seção, vídeo do topo e camadas com imagens ── */
.sh-head { max-width: 680px; margin: 0 auto 44px; text-align: center; }
.sh-head .lead { margin-inline: auto; }
.sh-showreel { width: min(100%, 900px); margin: 56px auto 0; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 26px; border: 1px solid rgba(var(--red-rgb), 0.35); box-shadow: 0 40px 120px rgba(var(--red-rgb), 0.18); }
.sh-showreel video { width: 100%; height: 100%; object-fit: cover; object-position: 60% 25%; }
.sh-layer.is-result .sh-frame { border-color: rgba(var(--red-rgb), 0.55); box-shadow: 0 0 0 1px rgba(var(--red-rgb), 0.35), 0 24px 60px rgba(var(--red-rgb), 0.18); }
.sh-eye .iris .blades { transform-box: view-box; transform-origin: 120px 80px; }
.sh-final { padding: 110px 0 130px; }
.sh-final .container { display: flex; flex-direction: column; align-items: center; }
@media (max-width: 640px) {
  .sh-showreel { margin-top: 40px; border-radius: 18px; }
  .sh-eye { width: min(80%, 300px); margin-bottom: 22px; }
  .sh-layers { gap: 10px; }
  .sh-layer small { font-size: 12.5px; }
}

/* Destaques dos títulos em vermelho (o estilo geral pinta de cinza) */
.sh h1 em, .sh h2 em, .sh .title em, .sh em .w, .sh .sh-tagline em { background: linear-gradient(180deg, #ff8a93 0%, #ff2b3a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sh-showreel img { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }