/* BRACI — css/effects.css
Adicionar no , APÓS main.css:
─────────────────────────────────────────── */
/* ═══════════════════════════════════════════
2. CURSOR PERSONALIZADO
═══════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
body,
body a,
body button,
body [role="button"],
body input,
body textarea,
body select,
body label {
cursor: none !important;
}
}
.cursor-dot {
position: fixed;
width: 24px;
height: 24px;
background: transparent url('../img/logo-braci.png') center / contain no-repeat;
pointer-events: none;
/* Acima de tudo (morphed-menu, site-header e o lightbox do vídeo 10010) */
z-index: 10020;
transform: translate(-50%, -50%);
will-change: left, top, transform, filter;
filter: none;
transition:
opacity 0.3s ease,
transform 0.35s cubic-bezier(0.33, 1, 0.68, 1);
}
/* Sobre fundos escuros (hero, FAQ preta, section--dark, etc.) */
.cursor-dot.is-light {
filter: brightness(0) invert(1) drop-shadow(0 0 1px rgba(0, 0, 0, 0.25));
}
.cursor-dot.is-hovering {
transform: translate(-50%, -50%) scale(1.15);
}
.cursor-dot.is-hovering-link {
transform: translate(-50%, -50%) scale(1.1);
}
.cursor-dot.is-clicking {
transform: translate(-50%, -50%) scale(0.85);
}
@media (hover: none), (pointer: coarse) {
.cursor-dot { display: none; }
}
/* ═══════════════════════════════════════════
3. STACKING DE SEÇÕES (cards sobrepostos)
Cada seção desliza sobre a anterior.
═══════════════════════════════════════════ */
.landing-videos,
.landing-events,
.landing-sound,
.landing-qualities,
.landing-ticker,
.landing-faq,
.landing-contact,
.landing-footer {
position: sticky;
top: 0;
overflow: hidden; /* clips o border-radius sem quebrar sticky de ancestrais */
border-radius: 14px 14px 0 0;
}
/* landing-scroll-words: não é sticky — flui normalmente sobre o vídeo.
border-radius + box-shadow criam o visual de card sobre card sem precisar de sticky
(overflow:visible mantido para o swrev-sticky interno funcionar) */
.landing-scroll-words {
position: relative;
border-radius: 14px 14px 0 0;
box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.18);
}
/* Galeria de vídeos: fundo creme, sem cantos — fica por baixo do bloco verde */
.landing-videos {
z-index: 2;
border-radius: 0;
overflow: visible;
background-color: var(--color-cream);
}
/* Stage/track são só agrupamento — filhos participam diretamente de
em todos os breakpoints. */
.landing-videos-stage,
.landing-videos__scroll-track {
display: contents;
}
/* Z-index crescente: cada card cobre o anterior */
.landing-scroll-words {
z-index: 3;
/* overflow:visible — permite sticky interno (.swrev-sticky) na faixa de texto */
overflow: visible;
}
.cat-cards { position: relative; z-index: 4; }
.landing-events { z-index: 4; }
.landing-sound { z-index: 5; }
.landing-qualities { z-index: 6; }
.landing-ticker { z-index: 8; }
.landing-faq { z-index: 9; }
.landing-contact { z-index: 11; }
.landing-footer { z-index: 12; }
/* FAQ após qualidades: continuação da página (sem card sticky/sombra) */
.landing-faq-accordion {
position: relative;
z-index: 7;
border-radius: 0;
box-shadow: none;
overflow: visible;
}
/* Stacking local FAQ → história → contato (z acima de landing-videos:2 e qualities:6) */
.s-intro,
.landing-faq-accordion.s-intro {
position: sticky;
top: 0;
z-index: 7;
overflow: visible;
box-shadow: none;
}
#story-outer {
position: relative;
z-index: 8;
overflow: visible;
background: var(--color-cream, #faf7f2);
}
#story-pin {
position: sticky;
top: 0;
z-index: 2;
}
.s-after,
.landing-contact.s-after {
position: relative;
z-index: 11;
overflow: visible;
border-radius: 0;
}
/* Sombra no topo — dá profundidade ao "card" (contato excluído: flui no rodapé verde) */
.landing-sound,
.landing-qualities,
.landing-ticker,
.landing-faq,
.landing-footer {
box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.18);
}
#story-outer {
box-shadow: none;
}
/* landing-events: junção reta com o bloco verde (sem onda nem radius) */
.landing-events {
border-radius: 0;
box-shadow: 0 -8px 36px rgba(0, 0, 0, 0.12);
/* Cobre a viewport no stacking — evita faixa creme do body por baixo */
min-height: 100vh;
min-height: 100lvh;
}
/* Remove o margin-top negativo e o ::before do contato — stacking cuida disso */
.landing-contact {
margin-top: 0;
}
.landing-contact::before {
display: none;
}
/* Contato com stacking local (.s-after) não herda sticky global */
.s-after,
.landing-contact.s-after {
position: relative;
overflow: visible;
border-radius: 0;
}
/* Mobile: sem stacking sticky global — exceto história → contato (story-scrollytelling.css) */
@media (max-width: 767px) {
.landing-videos,
.landing-events,
.landing-sound,
.landing-qualities,
.landing-ticker,
.landing-faq,
.landing-contact:not(.s-after),
.landing-footer,
.s-intro:not(.landing-faq-accordion),
.landing-faq-accordion.s-intro {
position: relative;
top: auto;
bottom: auto;
overflow: visible;
box-shadow: none;
}
.landing-videos {
padding-top: 0;
}
.landing-scroll-words {
position: relative;
z-index: 3;
background-color: var(--color-secondary);
border-radius: 10px 10px 0 0;
box-shadow: none;
}
.landing-events {
border-radius: 0;
}
.landing-sound,
.landing-qualities,
.landing-ticker,
.landing-faq,
#story-outer,
.landing-contact,
.landing-footer {
border-radius: 10px 10px 0 0;
}
/* Qualidades: no mobile, carrossel interativo (scroll lateral + toque) em pages.css */
}
/* ═══════════════════════════════════════════
4. HERO: reveal de letras
═══════════════════════════════════════════ */
.landing-hero__title .char,
.landing-hero__logo {
opacity: 0;
filter: blur(14px);
transform: translateY(0.35em);
animation: charIn 0.62s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.landing-hero__title .char {
display: inline-block;
}
/* Logo — entrada cinematográfica: emerge do desfoque e cresce até o lugar.
Override do charIn compartilhado acima (opacity:0 herdado mantém o logo
invisível durante o delay). */
.landing-hero__logo {
display: block;
transform-origin: center;
animation: heroLogoIn 1.4s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}
@keyframes charIn {
to {
opacity: 1;
filter: blur(0);
transform: translateY(0);
}
}
@keyframes heroLogoIn {
from {
opacity: 0;
transform: scale(0.82) translateY(0.5rem);
filter: blur(22px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
filter: blur(0);
}
}
/* Subtitle — text-reveal por linhas: pai visível, unidades animam; single: o bloco inteiro anima */
.landing-hero__subtitle.text-reveal:not(.text-reveal--single) {
opacity: 1;
transform: none;
animation: none;
}
.landing-hero__subtitle:not(.text-reveal) {
opacity: 0;
transform: translateY(10px);
animation: subtitleIn 0.65s cubic-bezier(0.33, 1, 0.68, 1) 0.8s forwards;
}
@keyframes subtitleIn {
to { opacity: 0.9; transform: translateY(0); }
}
/* ═══════════════════════════════════════════
HERO: logo animado — símbolo gira e entra, depois o nome "BRACI" se escreve
(símbolo/nome recortados na mesma escala do logo oficial)
═══════════════════════════════════════════ */
.landing-hero__lockup {
--hl-h: clamp(2.5rem, 10vw, 3.6rem); /* altura do nome (as letras) */
--hl-name-w: calc(var(--hl-h) * 3.2865);
--hl-sym-w: calc(var(--hl-h) * 1.8292);
--hl-sym-h: calc(var(--hl-h) * 1.6995);
--hl-gap: calc(var(--hl-h) * 0.3546);
/* deslocamento p/ o símbolo nascer centralizado, antes do nome aparecer */
--hl-shift: calc((var(--hl-name-w) + var(--hl-gap)) / 2);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--hl-gap);
height: var(--hl-sym-h);
transform: translateX(var(--hl-shift));
animation: heroLockupSlide 0.68s cubic-bezier(0.45, 0, 0.18, 1) 0.95s forwards;
}
.landing-hero__lockup-symbol,
.landing-hero__lockup-name {
display: block;
flex: none;
background-color: var(--color-cream);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
}
.landing-hero__lockup-symbol {
width: var(--hl-sym-w);
height: var(--hl-sym-h);
-webkit-mask-image: url("../img/braci-sym-v2.svg");
mask-image: url("../img/braci-sym-v2.svg");
-webkit-mask-position: center;
mask-position: center;
transform-origin: center;
opacity: 0;
animation: heroSymbolSpin 1.2s cubic-bezier(0.45, 0, 0.15, 1) forwards;
}
.landing-hero__lockup-name {
width: var(--hl-name-w);
height: var(--hl-h);
-webkit-mask-image: url("../img/braci-nome-v2.svg");
mask-image: url("../img/braci-nome-v2.svg");
-webkit-mask-position: left center;
mask-position: left center;
/* cortina fechada à direita; abre da esquerda p/ direita a partir do símbolo */
clip-path: inset(0 100% 0 0);
opacity: 0;
animation: heroNameWrite 0.75s cubic-bezier(0.4, 0, 0.2, 1) 1.15s forwards;
}
@keyframes heroSymbolSpin {
0% { opacity: 0; transform: rotate(0deg) scale(0.92); }
12% { opacity: 1; }
55% { transform: rotate(360deg) scale(1); animation-timing-function: ease-out; }
72% { transform: rotate(360deg) scale(1.12); }
100% { opacity: 1; transform: rotate(360deg) scale(1); }
}
@keyframes heroLockupSlide {
from { transform: translateX(var(--hl-shift)); }
to { transform: translateX(0); }
}
@keyframes heroNameWrite {
0% { clip-path: inset(0 100% 0 0); opacity: 1; }
100% { clip-path: inset(0 0 0 0); opacity: 1; }
}
@media (min-width: 768px) {
.landing-hero__lockup {
--hl-h: clamp(3rem, 6vw, 4.6rem);
}
}
/* Sem animação: lockup montado e estático */
@media (prefers-reduced-motion: reduce) {
.landing-hero__lockup {
transform: none;
animation: none;
}
.landing-hero__lockup-symbol {
opacity: 1;
animation: none;
}
.landing-hero__lockup-name {
opacity: 1;
clip-path: inset(0 0 0 0);
animation: none;
}
}
/* ═══════════════════════════════════════════
6. HERO: indicador de scroll (ícone mouse)
Injetado via JS
═══════════════════════════════════════════ */
.hero-scroll-cue {
position: absolute;
bottom: 2.5rem;
left: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
z-index: 3;
pointer-events: none;
opacity: 0;
animation: scrollCueFade 0.75s ease 1s forwards;
transition: opacity 0.5s ease;
}
.hero-scroll-cue.hidden {
opacity: 0 !important;
transition: opacity 0.5s ease;
}
@keyframes scrollCueFade {
to { opacity: 0.62; }
}
.hero-scroll-cue__mouse {
width: 20px;
height: 32px;
border: 1.5px solid rgba(250, 247, 242, 0.65);
border-radius: 10px;
position: relative;
}
.hero-scroll-cue__wheel {
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%);
width: 3px;
height: 6px;
background: rgba(250, 247, 242, 0.85);
border-radius: 2px;
animation: wheelAnim 1.7s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes wheelAnim {
0% { opacity: 1; transform: translateX(-50%) translateY(0); }
75% { opacity: 0; transform: translateX(-50%) translateY(10px); }
76% { opacity: 0; transform: translateX(-50%) translateY(0); }
100% { opacity: 0; transform: translateX(-50%) translateY(0); }
}
.hero-scroll-cue__label {
font-family: "Montserrat", sans-serif;
font-size: 0.55rem;
font-weight: 600;
letter-spacing: 0.24em;
text-transform: uppercase;
color: rgba(250, 247, 242, 0.55);
}
@media (max-width: 767px) {
.hero-scroll-cue {
display: none !important;
}
}
/* ═══════════════════════════════════════════
7. CLIP REVEAL — títulos de seção
JS envolve o conteúdo em .clip-wrap > .clip-inner
═══════════════════════════════════════════ */
.clip-wrap {
display: block;
overflow: hidden;
}
.clip-inner {
display: block;
transform: translateY(105%);
transition: transform 0.72s cubic-bezier(0.33, 1, 0.68, 1);
}
.clip-inner.is-visible {
transform: translateY(0);
}
/* Seção de contato é sticky — o IntersectionObserver não dispara corretamente;
revela o título imediatamente sem animação de clip */
.landing-contact .clip-inner {
transform: translateY(0);
}
/* Delay em linhas sucessivas (eventos) */
.clip-inner:nth-child(2) { transition-delay: 0.07s; }
.clip-inner:nth-child(3) { transition-delay: 0.14s; }
/* ═══════════════════════════════════════════
8. EVENT CARDS: seta hover
═══════════════════════════════════════════ */
.landing-event-card .landing-event-card__arrow {
transition: transform 0.32s cubic-bezier(0.33, 1, 0.68, 1);
}
.landing-event-card:hover .landing-event-card__arrow {
transform: translateX(7px);
}
/* Override: remove o translateY(-3px) padrão para não conflitar com o tilt 3D do JS */
.landing-event-card:hover {
transform: none;
}
/* ═══════════════════════════════════════════
9. BUTTON HOVER / PRESS — animação leve
═══════════════════════════════════════════ */
.site-header__whatsapp,
.contact-info__whatsapp,
.contact-form__submit,
.morphed-menu__btn {
transition:
transform 0.28s cubic-bezier(0.33, 1, 0.68, 1),
background-color 0.2s ease,
opacity 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
.site-header__whatsapp:hover,
.contact-info__whatsapp:hover,
.contact-form__submit:hover {
transform: translateY(-3px);
}
.morphed-menu__btn:hover {
transform: scale(1.04);
}
}
.site-header__whatsapp:active,
.contact-info__whatsapp:active,
.contact-form__submit:active,
.morphed-menu__btn:active {
transform: scale(0.96);
transition-duration: 0.12s;
}
/* ═══════════════════════════════════════════
10. FAQ — FUNDO VERDE
═══════════════════════════════════════════ */
.landing-faq {
background-color: #2b4939;
/* Era padding: 0 ... sem padding-top; agora é card separado */
padding-top: clamp(3.5rem, 8vw, 5.5rem);
}
.landing-faq__title {
color: #faf7f2;
}
.landing-faq__item {
border-bottom-color: rgba(250, 247, 242, 0.14);
}
.landing-faq__question {
color: #faf7f2;
}
.landing-faq__question:focus-visible {
outline-color: rgba(250, 247, 242, 0.6);
}
.landing-faq__answer p {
color: rgba(250, 247, 242, 0.7);
}
/* Nossa História — ver css/story-scrollytelling.css */
/* ═══════════════════════════════════════════
12. PARALLAX — previne clip nas imagens
═══════════════════════════════════════════ */
.landing-hero {
overflow: hidden;
}
.landing-sound--photo .landing-sound__media img {
will-change: transform;
}
/* ═══════════════════════════════════════════
13. QUALIDADES: números — appear via JS
═══════════════════════════════════════════ */
.ql-panel__bg-num {
opacity: 0;
transform: translateY(14px);
transition: opacity 0.55s ease, transform 0.55s ease;
}
.ql-panel__bg-num.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ═══════════════════════════════════════════
14. FOOTER — ajuste leve
═══════════════════════════════════════════ */
.landing-footer {
/* Força fundo sempre visível (estava herdando via stacking) */
background-color: #faf7f2;
}
/* ═══════════════════════════════════════════
15. PREFERS-REDUCED-MOTION
═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
.landing-hero__title .char,
.landing-hero__logo,
.landing-hero__subtitle,
.hero-scroll-cue,
.hero-scroll-cue__wheel,
.clip-inner,
.ql-panel__bg-num {
animation: none !important;
transition: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
/* Desativa stacking para quem prefere menos movimento */
.landing-videos,
.landing-events,
.landing-sound,
.landing-qualities,
.landing-ticker,
.landing-faq,
#story-outer,
.landing-contact,
.landing-footer {
position: static;
border-radius: 0;
box-shadow: none;
}
.landing-faq-accordion.s-intro {
position: relative;
box-shadow: none;
}
}