/* Encontro das Deusas, RED0_001_SITE_RETIRO, inicio.css
   Hero com 3 fotos, Bem-vinda e Imagine. */
/* hero */
.hero{min-height:100svh;display:flex;align-items:flex-end;padding:0 0 90px;color:#fff;overflow:hidden;background:var(--ameixa)}
@keyframes respira{to{scale:1}}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(46,36,64,.35) 0%,rgba(46,36,64,.1) 35%,rgba(46,36,64,.78) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero .sub{font-size:.8rem;letter-spacing:.34em;text-transform:uppercase;opacity:0;animation:sobe 1.2s .3s forwards}
.hero h1{font-size:clamp(2.7rem,8.4vw,7rem);letter-spacing:-.01em;margin:.2em 0 .1em;font-weight:400}
.hero h1 .pw{display:inline-block;white-space:nowrap}
.hero h1 .l{display:inline-block;opacity:0;transform:translateY(.4em);filter:blur(8px);animation:letra 1s forwards}
.hero h1 em{color:var(--lilas-cl)}
@keyframes letra{to{opacity:1;transform:none;filter:none}}
.hero .frase{font-family:var(--serif);font-style:italic;font-size:clamp(1.3rem,2.6vw,1.9rem);max-width:640px;opacity:0;animation:sobe 1.2s 1.6s forwards;color:rgba(255,255,255,.92)}
.hero .info{display:flex;flex-wrap:wrap;gap:12px 34px;margin:34px 0;font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;opacity:0;animation:sobe 1.2s 1.9s forwards}
.hero .info span{display:flex;align-items:center;gap:10px}
.hero .info span:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ouro)}
.hero .acoes{display:flex;flex-wrap:wrap;gap:14px;opacity:0;animation:sobe 1.2s 2.2s forwards}
@keyframes sobe{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.rola{position:absolute;right:24px;bottom:40px;z-index:2;writing-mode:vertical-rl;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.7);display:flex;align-items:center;gap:14px}
.rola:after{content:"";width:1px;height:60px;background:rgba(255,255,255,.6);animation:linha 2.4s infinite}
@keyframes linha{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}}
.poeira{position:absolute;inset:0;z-index:1;pointer-events:none}
/* Hero com 3 fotos que se alternam, com zoom lento */
.hero .bgs{position:absolute;inset:-8% 0 0 0;will-change:transform}
.hero .bgs .bg{position:absolute;inset:0;background-position:center 35%;background-size:cover;opacity:0;scale:1.12;animation:none;transition:opacity 1.8s ease}
.hero .bgs .bg.on{opacity:1;animation:kb 9s ease-out forwards}
@keyframes kb{from{scale:1.12}to{scale:1}}

/* boas-vindas */
.vindas{background:var(--areia);overflow:hidden}
.vindas .g{display:grid;grid-template-columns:1.05fr .95fr;gap:80px;align-items:center}
.vindas .fotos{position:relative;height:620px;isolation:isolate}
.vindas .fotos .a{position:absolute;left:0;top:0;width:72%;height:86%}
.vindas .fotos .b{position:absolute;right:0;bottom:0;width:48%;height:54%;border:10px solid var(--areia)}
.vindas .fotos img{width:100%;height:100%;object-fit:cover}
.citacao{font-family:var(--serif);font-style:italic;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.3;color:var(--ameixa);margin:28px 0}
.vindas p+p{margin-top:1em}
.assina{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--lilas-esc);margin-top:28px}
.vindas .fotos:before{content:"";position:absolute;left:12%;top:-6%;width:70%;height:96%;border:1px solid rgba(110,90,153,.35);border-radius:999px 999px 0 0;z-index:-1}
.vindas .fotos:after{content:"";position:absolute;left:20%;top:4%;width:62%;height:90%;background:var(--lavanda);border-radius:999px 999px 0 0;z-index:-2}
.vindas .fotos .a{border-radius:220px 220px 4px 4px;overflow:hidden}
.vindas .assinam{display:flex;align-items:center;gap:16px;margin-top:30px}
.vindas .assinam .rs{display:flex}
.vindas .assinam .rs img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:3px solid var(--areia);margin-left:-12px}
.vindas .assinam .rs img:first-child{margin-left:0}
.vindas .assinam .assina{margin-top:0}

/* imagine */
.imagine{background:var(--ameixa);color:#eae4f3;overflow:hidden}
.imagine .bgp{position:absolute;inset:-15% 0;background:url(../../imagens/inicio/imagine/imagine-praia-koh-samui.webp) center/cover;opacity:.22}
.imagine .wrap{position:relative}
.imagine h2{color:#fff}.imagine h2 b{color:var(--lilas-cl)}
.imagine .rot{color:var(--lilas-cl)}
.frases{margin-top:56px;display:grid;gap:4px;max-width:880px}
.frases p{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2.2rem);line-height:1.35;color:rgba(255,255,255,.28);transition:color .8s}
.frases p.on{color:#fff}
.frases p i{color:var(--lilas-cl)}
.fecha{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:880px}
.fecha div{border-top:1px solid rgba(255,255,255,.25);padding-top:18px;font-family:var(--serif);font-size:1.6rem;font-style:italic;color:#fff}

@media (max-width:980px){
  .vindas .g{grid-template-columns:1fr;gap:44px}
  .vindas .fotos{height:440px}
}
@media (max-width:640px){
  .fecha{grid-template-columns:1fr}
  .rola{display:none}
  .hero{padding-bottom:60px}
  .hero .acoes .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .hero h1 .l,.hero .sub,.hero .frase,.hero .info,.hero .acoes{opacity:1!important;transform:none!important;filter:none!important}
  .frases p{color:#fff}
  .hero .bgs .bg{scale:1}
}

/* ===== etapa 1 ===== */
/* Hero um pouco mais escuro */
.hero:after{background:linear-gradient(180deg,rgba(46,36,64,.5) 0%,rgba(46,36,64,.28) 35%,rgba(46,36,64,.86) 100%)}
/* Marcas que trocam junto com as fotos: logo com o nome, título escrito e símbolo */
.marcas{display:grid;align-items:end}
.marcas .mc{grid-area:1/1;opacity:0;filter:blur(10px);transform:translateY(14px);transition:opacity 1.4s ease,filter 1.4s ease,transform 1.4s ease}
.marcas .mc.on{opacity:1;filter:none;transform:none}
.marcas img{width:clamp(250px,38vw,500px);height:auto}
.marcas .simb{width:auto;height:clamp(130px,19vw,220px);margin-bottom:.3em}
.marcas+.frase{margin-top:.7em}
/* Imagine: as 3 frases fazem um zoom, uma de cada vez */
.fecha span{display:inline-block;transform-origin:left center}
.fecha .on span{animation:pulso 1.5s ease-in-out 1 both}
.fecha .on:nth-child(2) span{animation-delay:1.5s}
.fecha .on:nth-child(3) span{animation-delay:3s}
@keyframes pulso{0%,100%{transform:none}45%{transform:scale(1.15)}}
/* Bem-vinda: arco de luz percorrendo o contorno e arco lavanda que respira */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.vindas .arco-luz{position:absolute;left:12%;top:-6%;width:70%;height:96%;border-radius:999px 999px 0 0;z-index:-1;padding:2px;pointer-events:none;
  background:conic-gradient(from var(--ang),transparent 0 78%,rgba(200,169,110,.25) 84%,#c8a96e 90%,rgba(200,169,110,.25) 96%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  filter:drop-shadow(0 0 6px rgba(200,169,110,.7));animation:giro 7s linear infinite}
@keyframes giro{to{--ang:360deg}}
.vindas .fotos:after{transform-origin:50% 100%;animation:respArco 9s ease-in-out infinite}
@keyframes respArco{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@media (prefers-reduced-motion:reduce){.vindas .arco-luz{display:none}}

/* ===== etapa 1b ===== */
/* Hero com 85% da tela, para aparecer o começo da seção de baixo */
.hero{min-height:85svh}
/* Frases das fotos 2 e 3 do Hero */
.fr-hero{font-family:var(--serif);font-size:clamp(2rem,4.8vw,3.9rem);line-height:1.12;max-width:860px;color:#fff;letter-spacing:-.01em}
.fr-hero em{color:var(--lilas-cl)}
/* Bem-vinda: onda nas 3 fotos das condutoras e nomes crescendo na mesma ordem */
.vindas .assinam .rs img{position:relative}
.vindas .on .assinam .rs img{animation:onda 1.1s cubic-bezier(.3,.6,.3,1) 1.2s both}
.vindas .on .assinam .rs img:nth-child(2){animation-delay:1.45s}
.vindas .on .assinam .rs img:nth-child(3){animation-delay:1.7s}
@keyframes onda{0%,100%{transform:none}35%{transform:translateY(-16px)}70%{transform:translateY(4px)}}
.vindas .assina span{display:inline-block;transform-origin:center bottom}
.vindas .on .assina span{animation:cresce 1.1s ease 1.2s both}
.vindas .on .assina span:nth-child(2){animation-delay:1.45s}
.vindas .on .assina span:nth-child(3){animation-delay:1.7s}
@keyframes cresce{0%,100%{transform:none;color:inherit}40%{transform:scale(1.28);color:var(--ameixa)}}

/* ===== etapa 2: Hero em 2 lados ===== */
/* esquerda fixa (frase, local, data, grupo e botões), embaixo;
   direita troca com a foto (logo, frase 2 e frase 3), no centro da altura */
.hero{align-items:stretch}
.hero .wrap.dois{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding-top:120px}
.hero .dois .fixo{grid-column:1;grid-row:1;align-self:end}
.hero .dois .marcas{grid-column:2;grid-row:1;align-self:center;justify-items:center;align-items:center;text-align:center}
.hero .dois .marcas img{width:clamp(220px,32vw,440px)}
.hero .dois .fr-hero{font-size:clamp(1.7rem,3.4vw,2.9rem)}
@media (max-width:980px){
  .hero .wrap.dois{grid-template-columns:1fr;gap:.7em;align-content:end;padding-top:110px}
  .hero .dois .marcas{grid-column:1;grid-row:1;align-self:auto;justify-items:start;align-items:end;text-align:left}
  .hero .dois .fixo{grid-column:1;grid-row:2;align-self:auto}
  .hero .dois .marcas img{width:clamp(220px,58vw,420px)}
  .hero .dois .fr-hero{font-size:clamp(1.7rem,6vw,2.6rem)}
}

/* ===== etapa 2b ===== */
/* Hero: coluna da direita no computador, frases 15% maiores, 25 px acima e 10 px à direita */
@media (min-width:981px){
  .hero .dois .marcas{transform:translate(10px,-25px)}
  .hero .dois .fr-hero{font-size:clamp(1.95rem,3.9vw,3.35rem)}
}
/* Hero: a foto que sai mantém o tamanho em que estava e só desaparece */
.hero .bgs .bg.sai{animation:none}
/* Bem-vinda: menos espaço no topo, para aparecer logo abaixo do Hero */
.vindas{padding-top:60px}
@media (max-width:980px){.vindas{padding-top:50px}}