/* ============================================================ Carm — Intro "Beira-mar" (golden-hour editorial de moda praia) CSS diferido do overlay de entrada. Pareado com o CSS CRITICO inline em (block extra_css do home.html) e com static/js/intro.js. Regra de ouro de performance: anima-se APENAS transform/opacity/filter. ============================================================ */ .intro__stage { position: absolute; inset: 0; overflow: hidden; } /* Foto editorial de biquini — a estrela. Ken Burns (zoom lento) + fade-in. */ .intro__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; /* enquadra o corpo; biquini fica no terco inferior */ opacity: 0; transform: scale(1.14); will-change: opacity, transform; user-select: none; -webkit-user-drag: none; } /* Desktop/paisagem: a foto retrato vira uma COLUNA editorial centralizada (evita o zoom extremo do cover num viewport largo). O ambiente quente + caustica preenchem as laterais, como um editorial de revista. */ @media (min-width: 860px) { .intro__stage { display: grid; place-items: center; } .intro__photo { position: relative; inset: auto; height: 100%; width: auto; aspect-ratio: 1000 / 1325; object-position: 50% 50%; box-shadow: 0 24px 90px rgba(20, 14, 9, .45); } } /* Veu: brilho de sol no topo + escurecimento inferior (legibilidade) + vinheta central quente para o wordmark ter contraste sobre a foto. */ .intro__wash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 72% at 50% -14%, rgba(255, 236, 205, .5), transparent 52%), radial-gradient(70% 42% at 50% 30%, rgba(22, 17, 12, .46), transparent 70%), linear-gradient(180deg, rgba(22, 17, 12, .30) 0%, rgba(22, 17, 12, 0) 30%, rgba(22, 17, 12, .22) 74%, rgba(22, 17, 12, .5) 100%), linear-gradient(180deg, rgba(184, 148, 90, .14), rgba(200, 75, 75, .06)); } /* Caustica de agua: manchas de luz difusas que derivam lentamente, como sol tremeluzindo na superficie do mar/piscina. */ .intro__caustics { position: absolute; inset: -22%; pointer-events: none; opacity: 0; mix-blend-mode: soft-light; filter: blur(7px); will-change: transform, opacity; background-repeat: no-repeat; background-image: radial-gradient(closest-side, rgba(255, 255, 255, .55), transparent 70%), radial-gradient(closest-side, rgba(255, 247, 230, .5), transparent 70%), radial-gradient(closest-side, rgba(255, 255, 255, .42), transparent 70%), radial-gradient(closest-side, rgba(255, 250, 236, .5), transparent 70%), radial-gradient(closest-side, rgba(255, 255, 255, .38), transparent 70%); background-size: 40vmax 40vmax, 30vmax 30vmax, 46vmax 46vmax, 26vmax 26vmax, 36vmax 36vmax; background-position: 8% 18%, 78% 26%, 58% 82%, 30% 66%, 90% 74%; } /* Conteudo editorial (eyebrow + wordmark + tagline). */ .intro__content { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; /* titulo no terco superior */ padding-top: clamp(64px, 16vh, 150px); gap: clamp(10px, 1.4vw, 18px); text-align: center; padding-inline: 24px; } .intro__eyebrow { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .42em; text-indent: .42em; /* compensa o tracking para centralizar */ font-size: clamp(.64rem, 1.1vw, .78rem); font-weight: 600; color: #FCE9CE; opacity: 0; /* animado */ text-shadow: 0 1px 14px rgba(0, 0, 0, .38); } .intro__mask { display: block; overflow: hidden; line-height: 1; filter: drop-shadow(0 6px 26px rgba(0, 0, 0, .35)); /* legibilidade do wordmark */ } .intro__word { display: inline-flex; font-family: var(--font-display); font-weight: 500; font-size: clamp(3.4rem, 15vw, 9.5rem); letter-spacing: .015em; line-height: 1; } .intro__char { display: inline-block; transform: translateY(115%); /* pre-oculto sob a mascara (pre-JS/fallback) */ will-change: transform; color: #FFF6EA; /* fallback solido */ } /* Cada glifo carrega um gradiente creme -> ouro (luz do sol nas letras). O clip fica no .intro__char (que contem o no de texto). @supports garante que sem suporte a letra continue creme solido (nunca invisivel). */ @supports ((-webkit-background-clip: text) or (background-clip: text)) { .intro__char { background: linear-gradient(180deg, #FFFDF8 0%, #FCEFD6 52%, #E7C88F 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } } .intro__tagline { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .32em; text-indent: .32em; font-size: clamp(.66rem, 1vw, .8rem); font-weight: 500; color: #F2E6D4; opacity: 0; /* animado */ text-shadow: 0 1px 12px rgba(0, 0, 0, .42); } /* ============================================================ Saida "maré partida" — cortina em duas metades + fio dourado central. As metades reproduzem PIXEL A PIXEL o gradiente do fundo critico do overlay (home.html ): na saida, elas cobrem a tela no mesmo frame em que o fundo do overlay fica transparente (.intro--parting) — troca invisivel — e entao se partem revelando a loja pela fresta central. ============================================================ */ .intro__curtain { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; /* mostrada pelo JS/fallback so na saida */ visibility: hidden; } .intro__curtain-half { position: absolute; left: 0; right: 0; will-change: transform; /* Mesmo gradiente do CSS critico (.intro), fatiado por background-size 200%: a metade de cima mostra a metade superior do gradiente, a de baixo a inferior — juntas sao identicas ao fundo que substituem. */ background: #F2E5D8; } .intro__curtain-half--top { top: 0; height: 50%; } .intro__curtain-half--bottom { /* 1px de sobreposicao sob a metade de cima: engole o arredondamento de viewport de altura impar (nunca aparece um fio do site no meio). */ top: calc(50% - 1px); height: calc(50% + 1px); } /* Fio dourado central: o UNICO ornamento da abertura — desenha do centro para as bordas um instante antes da cortina partir e se apaga na fresta. (Os antigos "labios de luz" nas bordas das metades foram removidos de proposito: sublinhar duas vezes e bijuteria; luxo e subtracao.) */ .intro__seam { position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; margin-top: -1px; z-index: 6; opacity: 0; transform: scaleX(0); transform-origin: 50% 50%; pointer-events: none; background: linear-gradient(90deg, transparent, #E7C88F 18%, #FFF3DC 50%, #E7C88F 82%, transparent); box-shadow: 0 0 24px 2px rgba(212, 172, 106, .5); will-change: transform, opacity; } /* Estado de saida: o fundo do overlay some (a cortina, identica, ja cobre a tela) e o overlay para de comer cliques enquanto a cortina termina. */ .intro.intro--parting { background: none; pointer-events: none; } .intro.intro--parting::before { opacity: 0; } /* Controle "Pular introducao" (acima da cortina ate desaparecer). */ .intro__skip { position: absolute; top: auto; bottom: 18px; right: 22px; z-index: 7; font-family: var(--font-sans); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(75, 58, 43, .58); background: none; border: 0; cursor: pointer; opacity: 0; text-shadow: none; transition: color var(--t-fast); } .intro__skip:hover { color: rgba(75, 58, 43, .9); } .intro__skip:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; opacity: 1; } /* ============================================================ CONSTRUCAO DO SITE — o site se monta apos a cortina partir. Tudo escondido SOMENTE sob html.intro-lock (adicionada pelo JS quando a intro engata): sem-JS / reduced-motion / sessao-vista veem o site normal no primeiro paint. O cleanup() SEMPRE remove a classe e zera estilos inline — nada fica invisivel aconteca o que acontecer. ============================================================ */ /* Estado inicial do conteudo do hero (texto/CTAs staggerados). */ html.intro-lock [data-hero-in] { opacity: 0; transform: translateY(24px); } /* Blocos acima da dobra coreografados pela timeline: o palco (hero/carrossel) sobe pela fresta da cortina; o header desce por ultimo, como a moldura pendurada depois da obra. */ html.intro-lock .hero-carousel, html.intro-lock .hero { opacity: 0; transform: translateY(22px); } html.intro-lock .site-header { opacity: 0; transform: translateY(-10px); } /* Fallback sem GSAP: quando o cleanup remover .intro-lock, header e hero entram por transicao CSS em vez de "pipocar". (No caminho GSAP esta classe nao existe — a timeline controla os estilos inline.) */ html.intro-fallback .site-header, html.intro-fallback .hero-carousel, html.intro-fallback .hero { transition: opacity .7s ease, transform .7s ease .05s; } /* Construcao por scroll: secoes abaixo da dobra entram conforme aparecem. A transicao vive SO no estado .is-built (nao interfere em transicoes de hover dos cards internos — o reveal e no nivel da secao). */ html.build-reveal [data-build] { opacity: 0; transform: translateY(18px); /* mais "ar", menos "salto" */ } html.build-reveal [data-build].is-built { opacity: 1; transform: none; transition: opacity .75s cubic-bezier(.22, .61, .36, 1), transform .75s cubic-bezier(.22, .61, .36, 1); } /* Economia em telas pequenas: caustica um pouco mais leve. */ @media (max-width: 640px) { .intro__caustics { filter: blur(5px); opacity: 0; } } /* ============================================================ FALLBACK PURO-CSS (sem GSAP): .intro--fallback e adicionado pelo JS quando o CDN do GSAP falha. Mesmo roteiro da timeline: entrada editorial, veu dissolve, cortina cobre (troca invisivel), fio central acende e a cortina se parte. O cleanup dispara no animationend de `introPartBottom` (fim do movimento da metade de baixo). ============================================================ */ .intro--fallback .intro__photo { animation: introPhoto 1.0s ease .1s both, introVeilOut .45s ease 1.9s both; } .intro--fallback .intro__wash { animation: introVeilOut .45s ease 1.9s both; } .intro--fallback .intro__caustics { animation: introCaustics .9s ease .25s both, introVeilOut .45s ease 1.9s both; } .intro--fallback .intro__eyebrow { animation: introUp .6s ease .4s both; } .intro--fallback .intro__char { animation: introChar .75s cubic-bezier(.2, .8, .2, 1) .65s both; } .intro--fallback .intro__tagline { animation: introUp .6s ease 1.15s both; } .intro--fallback .intro__content { animation: introVeilOut .4s ease 1.9s both; } .intro--fallback .intro__skip { animation: introFade .4s ease 0s both, introVeilOut .3s ease 1.9s both; } /* Troca invisivel: cortina aparece e o fundo do overlay some no mesmo instante (1ms; os pixels sao identicos). */ .intro--fallback .intro__curtain { animation: introCurtainShow 1ms linear 2.32s both; } .intro--fallback { animation: introBare 1ms linear 2.32s both; } .intro--fallback .intro__seam { animation: introSeamDraw .4s cubic-bezier(.65, 0, .35, 1) 2.38s both, introVeilOut .3s ease 3.0s both; } .intro--fallback .intro__curtain-half--top { animation: introPartTop .9s cubic-bezier(.76, 0, .24, 1) 2.9s both; } .intro--fallback .intro__curtain-half--bottom { animation: introPartBottom .9s cubic-bezier(.76, 0, .24, 1) 2.9s both; } @keyframes introPhoto { from { opacity: 0; transform: scale(1.14); } to { opacity: 1; transform: scale(1); } } @keyframes introCaustics { from { opacity: 0; } to { opacity: .55; } } @keyframes introUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes introChar { from { transform: translateY(115%); } to { transform: translateY(0); } } @keyframes introFade { from { opacity: 0; } to { opacity: 1; } } @keyframes introVeilOut { to { opacity: 0; } } @keyframes introCurtainShow { to { opacity: 1; visibility: visible; } } @keyframes introBare { to { background: transparent; pointer-events: none; } } @keyframes introSeamDraw { from { opacity: 1; transform: scaleX(0); } to { opacity: 1; transform: scaleX(1); } } @keyframes introPartTop { from { transform: translateY(0); } to { transform: translateY(-100%); } } @keyframes introPartBottom { from { transform: translateY(0); } to { transform: translateY(100%); } } /* prefers-reduced-motion: sem movimento. (O CSS critico ja faz display:none no overlay; aqui garantimos o site inteiro sempre visivel.) */ @media (prefers-reduced-motion: reduce) { .intro { display: none !important; } .intro--fallback { animation: none !important; } html.intro-lock [data-hero-in], html.intro-lock .site-header, html.intro-lock .hero-carousel, html.intro-lock .hero, html.build-reveal [data-build] { opacity: 1 !important; transform: none !important; } } /* Abertura minimalista: somente a marca, centralizada na tela. */ .intro__backdrop { position: absolute; inset: -28px; z-index: 0; background: radial-gradient(circle at 7% 9%, rgba(248, 190, 91, .52) 0 5%, rgba(251, 207, 126, .26) 15%, transparent 34%), radial-gradient(circle at 94% 91%, rgba(232, 157, 104, .30) 0 6%, rgba(240, 185, 139, .16) 17%, transparent 36%), radial-gradient(ellipse at 50% 48%, rgba(255, 251, 245, .92) 0 25%, rgba(250, 242, 232, .68) 48%, transparent 74%), linear-gradient(135deg, #EEDCCC 0%, #F7EEE5 48%, #EED9CC 100%); filter: saturate(.96); transform: scale(1.04); opacity: 1; will-change: transform, opacity; } .intro__backdrop::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .035; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); } .intro__halo { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 50% 50%, rgba(255, 250, 224, .78) 0, rgba(255, 237, 185, .26) 26%, transparent 56%); will-change: opacity, transform; } .intro::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(132deg, rgba(255, 245, 210, .20) 0 8%, transparent 24%), linear-gradient(312deg, rgba(255, 225, 196, .16) 0 7%, transparent 23%), radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, .22), transparent 52%); } .intro__content { align-items: center; justify-content: center; padding: 24px; z-index: 2; } .intro__logo-wrap { position: relative; width: min(66vw, 320px); } .intro__logo { display: block; width: 100%; height: auto; opacity: 0; transform: translateY(8px) scale(.92); filter: drop-shadow(0 10px 24px rgba(49, 36, 23, .38)) blur(2px); will-change: opacity, transform, filter; user-select: none; -webkit-user-drag: none; } .intro__logo-shine { position: absolute; inset: 0; pointer-events: none; opacity: 0; transform: translateX(-115%); background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 242, .82) 49%, rgba(255, 250, 220, .42) 53%, transparent 62%); -webkit-mask: url("../img/carm-logo.1c7fc734a0f1.svg") center / contain no-repeat; mask: url("../img/carm-logo.1c7fc734a0f1.svg") center / contain no-repeat; will-change: transform, opacity; } .intro--fallback .intro__logo { animation: introLogo 1.2s cubic-bezier(.22, .61, .36, 1) .2s both, introVeilOut .45s ease 1.9s both; } .intro--fallback .intro__halo { animation: introHalo 1.25s ease .15s both, introVeilOut .45s ease 1.9s both; } .intro--fallback .intro__logo-shine { animation: introShine .75s ease-in-out 1.05s both; } .intro--fallback .intro__backdrop, .intro--fallback::before { animation: introVeilOut .45s ease 1.9s both; } @keyframes introLogo { 0% { opacity: 0; transform: translateY(8px) scale(.92); filter: drop-shadow(0 10px 24px rgba(49, 36, 23, .38)) blur(2px); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: drop-shadow(0 9px 22px rgba(49, 36, 23, .38)) blur(0); } } @keyframes introHalo { from { opacity: 0; transform: scale(.9); } to { opacity: .72; transform: scale(1); } } @keyframes introShine { 0% { opacity: 0; transform: translateX(-115%); } 20% { opacity: .72; } 80% { opacity: .58; } 100% { opacity: 0; transform: translateX(115%); } }