/* =========================================================================
   Micareta de Feira — estilos
   Escala: tudo que reproduz o design usa "px do design" × --u.
   O design original tem o conteúdo entre x=200 e x=1750 (1550 px).
   --u = 1px em telas largas e encolhe proporcionalmente até o celular.
   ========================================================================= */

@font-face { font-family: "CimoOne"; src: url("../fonts/cimo-one.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Gillune"; src: url("../fonts/gillune-black.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Rebar"; src: url("../fonts/rebar.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Mangueira"; src: url("../fonts/mangueira.woff2") format("woff2"); font-display: swap; }

:root {
  --blue: #0000ff;
  --red: #c0272d;
  --yellow: #ffce00;
  --gold: #f6b946;
  --pin: #f5ca46;
  --orange: #ef7d2d;
  --shadow-blue: #007fc3;
  --white: #fff;
  --ink: #1d1d1b;
  --gutter: 16px;
  --f-title: "CimoOne", "Arial Black", Impact, sans-serif;
  --f-list: "Gillune", "Arial Black", sans-serif;
  --f-cond: "Rebar", "Arial Narrow", sans-serif;
  --f-text: "Mangueira", "Trebuchet MS", sans-serif;
  --ease: cubic-bezier(.2, .75, .2, 1);
}
@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (min-width: 960px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--blue);
  color: var(--white);
  font-family: var(--f-text);
  line-height: 1.4;
  container-type: inline-size;
  --u: min(1px, calc((100cqw - 2 * var(--gutter)) / 1550));
}
body.no-scroll { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; font-weight: normal; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 6px; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px;
  background: var(--yellow); color: var(--ink); font-weight: 700; border-radius: 8px; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- Seções e fundos (ver backgrounds.css para imagens) ---------- */
.sec {
  position: relative;
  background-color: var(--bg-color, var(--blue));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.is-blue { --bg-color: var(--blue); }
.is-red { --bg-color: var(--red); }

.stage {
  position: relative;
  z-index: 2;
  width: calc(1550 * var(--u));
  height: calc(var(--h) * var(--u));
  margin-inline: auto;
}

/* Elemento posicionado nas coordenadas do design, relativo ao palco */
.abs, .stage .decor {
  position: absolute;
  left: calc((var(--x) - 200) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
}
/* Decoração fora do palco: relativa ao centro da seção (x=975 no design) */
.sec > .decor {
  position: absolute;
  z-index: 1;
  left: calc(50% + (var(--x) - 975) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  pointer-events: none;
}

/* Título com sombra em camadas (branco + azul + amarelo), como no design */
.t-shadow {
  font-family: var(--f-title);
  color: var(--white);
  text-shadow:
    .068em .068em 0 var(--shadow-blue),
    .039em .039em 0 var(--gold),
    .107em .107em 0 var(--gold);
  line-height: 1;
  white-space: nowrap;
}

/* =========================================================================
   SEÇÃO 1 — Cabeçalho
   ========================================================================= */
.site-header {
  --bg-color: var(--blue);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 3px solid var(--white);
  transition: box-shadow .3s;
}
.header-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: calc(1550 * var(--u));
  height: clamp(64px, calc(158 * var(--u)), 128px);
  margin-inline: auto;
  padding-inline: calc(190 * var(--u));
  transition: height .3s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 6px 18px rgb(0 0 40 / .35); }
.site-header.is-scrolled .header-bar { height: 64px; }
.header-logo { justify-self: center; display: flex; align-items: center; }
.header-logo img { height: clamp(50px, calc(139 * var(--u)), 108px); width: auto; transition: height .3s var(--ease), transform .3s var(--ease); }
.site-header.is-scrolled .header-logo img { height: 52px; }
.header-logo:hover img { transform: scale(1.05) rotate(-2deg); }
.icon-btn {
  display: inline-grid; place-items: center;
  width: 48px; height: 48px; padding: 0;
  background: none; border: 0; border-radius: 12px; cursor: pointer;
  transition: background-color .2s, transform .2s;
}
.icon-btn:hover { background: rgb(255 255 255 / .14); }
.icon-btn:active { transform: scale(.92); }
.icon-btn svg { width: 30px; height: 30px; }
#search-btn { justify-self: end; }
.burger { display: grid; gap: 6px; width: 30px; }
.burger i { display: block; height: 4px; background: currentColor; border-radius: 4px; transition: transform .3s var(--ease), opacity .2s; }
[aria-expanded="true"] .burger i:nth-child(1) { transform: translateY(10px) rotate(45deg); }
[aria-expanded="true"] .burger i:nth-child(2) { opacity: 0; }
[aria-expanded="true"] .burger i:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
@media (min-width: 960px) {
  .icon-btn { width: 60px; height: 60px; }
  .icon-btn svg, .burger { width: 40px; height: 40px; }
  .burger { height: auto; gap: 8px; }
  .burger i { height: 6px; }
  [aria-expanded="true"] .burger i:nth-child(1) { transform: translateY(14px) rotate(45deg); }
  [aria-expanded="true"] .burger i:nth-child(3) { transform: translateY(-14px) rotate(-45deg); }
}

/* Menu lateral */
.menu {
  position: fixed; inset: 0; z-index: 60;
  background: rgb(0 0 60 / .55);
  opacity: 0; visibility: hidden;
  transition: opacity .3s, visibility 0s .3s;
}
.menu.is-open { opacity: 1; visibility: visible; transition: opacity .3s; }
.menu-panel {
  position: absolute; inset: 0 auto 0 0;
  width: min(86vw, 380px);
  padding: 80px 28px 32px;
  background: var(--blue);
  border-right: 4px solid var(--yellow);
  transform: translateX(-100%);
  transition: transform .4s var(--ease);
  overflow-y: auto;
}
.menu.is-open .menu-panel { transform: none; }
.menu-close { position: absolute; top: 14px; right: 14px; }
.menu ul { display: grid; gap: 6px; }
.menu a {
  display: block; padding: 10px 12px; border-radius: 10px;
  font-family: var(--f-title); font-size: 1.6rem; text-decoration: none; line-height: 1.1;
  text-shadow: .06em .06em 0 var(--shadow-blue), .1em .1em 0 var(--gold);
  transition: background-color .2s, transform .2s var(--ease);
}
.menu a:hover, .menu a:focus-visible { background: rgb(255 255 255 / .12); transform: translateX(6px); }

/* Busca */
.busca {
  width: min(92vw, 520px); max-height: 80vh; padding: 0;
  border: 0; border-radius: 22px; background: var(--white); color: var(--ink);
  box-shadow: 0 20px 60px rgb(0 0 0 / .4);
}
.busca::backdrop { background: rgb(0 0 60 / .6); }
.busca-box { padding: 20px; }
.busca-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.busca-head h2 { font-family: var(--f-title); font-size: 1.5rem; color: var(--red); }
.busca input {
  width: 100%; padding: 14px 16px; font: 1.1rem var(--f-list); font-weight: 800;
  border: 3px solid var(--blue); border-radius: 14px; outline-offset: 2px;
}
.busca-status { min-height: 1.5em; margin: 10px 2px; font-size: .95rem; }
.busca-resultados { display: grid; gap: 6px; max-height: 50vh; overflow-y: auto; }
.busca-resultados a {
  display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px;
  background: #f1f1ff; border-radius: 12px; text-decoration: none; font-family: var(--f-list);
}
.busca-resultados a:hover { background: var(--yellow); }
.busca-resultados span { color: var(--red); white-space: nowrap; }

/* =========================================================================
   SEÇÃO 2 — Hero
   ========================================================================= */
.hero { --bg-color: var(--blue); }
.hero .stage { --h: 1421; }
.hero-logo { position: static; }
.hero-logo img { position: absolute; }
.hero-artists { z-index: 3; }
.hero-names li {
  position: absolute; top: 0; left: calc(var(--c) * 1%);
  transform: translateX(-50%);
  display: grid; justify-items: center; gap: calc(4 * var(--u));
  font: 800 max(9px, calc(30 * var(--u)))/1 var(--f-list);
  text-transform: uppercase; text-align: center; white-space: nowrap;
}
.hero-names li::before {
  content: ""; width: max(7px, calc(18 * var(--u))); aspect-ratio: 16 / 24;
  background: var(--orange);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 24'%3E%3Cpath d='M8 0a8 8 0 0 0-8 8c0 5.6 6.6 14.4 7.2 15.3a1 1 0 0 0 1.6 0C9.4 22.4 16 13.6 16 8a8 8 0 0 0-8-8Zm0 11.5A3.5 3.5 0 1 1 8 4.5a3.5 3.5 0 0 1 0 7Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 24'%3E%3Cpath d='M8 0a8 8 0 0 0-8 8c0 5.6 6.6 14.4 7.2 15.3a1 1 0 0 0 1.6 0C9.4 22.4 16 13.6 16 8a8 8 0 0 0-8-8Zm0 11.5A3.5 3.5 0 1 1 8 4.5a3.5 3.5 0 0 1 0 7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.hero-names li:nth-child(n+3)::before { background: var(--gold); }
.hero-photo { margin-top: calc(90.6 * var(--u)); width: 100%; }
.palm { opacity: 1; transform-origin: 50% 100%; }

/* =========================================================================
   SEÇÃO 3 — Banner panorâmico
   ========================================================================= */
.aerial { --bg-color: var(--red); overflow: hidden; }
.aerial .stage { --h: 852; min-height: 240px; }
.aerial-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 46%;
}
.aerial-date {
  font: max(26px, calc(118 * var(--u)))/.87 var(--f-title);
  color: var(--white);
  text-shadow: 0 2px 14px rgb(0 0 0 / .35);
  white-space: nowrap;
}

/* =========================================================================
   SEÇÃO 4 — O verão começa aqui
   ========================================================================= */
.verao { --bg-color: var(--blue); }
.verao .stage { --h: 749; }
.verao-titulo img, .verao-circulo img { width: 100%; }

/* =========================================================================
   SEÇÃO 5 — Programação
   ========================================================================= */
.day-scene {
  position: absolute; left: calc(40 * var(--u)); top: 0;
  width: calc(1020 * var(--u)); height: 100%;
  container-type: inline-size;
}
/* Fotos cortadas em linha reta na base de cada dia (celular, tablet e desktop). */
.day-scene { overflow: hidden; }
.day-scene > * { --u: calc(100cqw / 1020); }
.day-title {
  position: absolute; z-index: 1;
  left: calc(var(--x) * var(--u));
  top: calc((var(--y) - var(--tf) * .74) * var(--u));
  font-size: calc(var(--tf) * var(--u));
  letter-spacing: -.035em;
  word-spacing: -.06em;
}
.day-photos { position: absolute; inset: 0; z-index: 2; }
.day-photo {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
}
.day-list {
  position: absolute;
  left: calc((var(--lx) - 230) * var(--u));
  top: calc((var(--ly) - var(--fs) * .8) * var(--u));
  font: 800 calc(var(--fs) * var(--u)) / calc(var(--lh) * var(--u)) var(--f-list);
  white-space: nowrap;
}
.day-list li { display: flex; align-items: center; gap: .36em; }
.pin { flex: none; width: .44em; height: .66em; color: var(--pin); }

/* =========================================================================
   SEÇÃO 6 — Notícias
   ========================================================================= */
.news { --bg-color: var(--red); }
.news .stage { --h: 891; }
.news-h {
  position: absolute; left: 0; right: 0; top: calc(57 * var(--u));
  text-align: center; font-size: calc(93.71 * var(--u));
}
.news-sub { position: absolute; left: 0; right: 0; top: calc(148 * var(--u)); }
.news-sub img { width: calc(366 * var(--u)); margin-inline: auto; }
.news-cards { position: absolute; inset: calc(280 * var(--u)) 0 auto 0; height: calc(518 * var(--u)); }
.news-card {
  position: absolute; left: calc(var(--x) * var(--u)); top: 0;
  width: calc(464 * var(--u)); height: 100%;
}
.news-card > * {
  display: block; height: 100%;
  padding: calc(10 * var(--u));
  background: var(--white); color: var(--ink);
  border-radius: calc(46 * var(--u));
  text-decoration: none;
  box-shadow: 0 0 0 rgb(0 0 0 / 0);
  transition: transform .35s var(--ease), box-shadow .35s;
}
.news-card a:hover, .news-card a:focus-visible, .news-card article:hover {
  transform: translateY(-8px); box-shadow: 0 18px 34px rgb(60 0 0 / .35);
}
.news-img { overflow: hidden; border-radius: calc(38 * var(--u)) calc(38 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)); aspect-ratio: 444 / 347; }
.news-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.news-card :hover > .news-img img, .news-card a:focus-visible .news-img img { transform: scale(1.07); }
.news-title {
  padding: calc(22 * var(--u)) calc(13 * var(--u)) 0;
  font: calc(27.02 * var(--u)) / calc(32.43 * var(--u)) var(--f-text);
  text-align: justify; hyphens: auto;
}
.drops-big { z-index: 1; }

/* =========================================================================
   SEÇÃO 7 — Galeria
   ========================================================================= */
.galeria { --bg-color: var(--blue); }
.galeria .stage { --h: 765; }
.galeria-h {
  position: absolute; left: calc(259.6 * var(--u)); top: calc(49 * var(--u)); z-index: 3;
  font: calc(58.77 * var(--u)) / calc(56.1 * var(--u)) var(--f-cond);
}
.galeria-btns {
  position: absolute; left: calc(1026 * var(--u)); top: calc(34 * var(--u)); z-index: 3;
  display: grid; gap: calc(25 * var(--u));
}
.pill {
  display: grid; place-items: center;
  width: calc(256 * var(--u)); height: calc(85 * var(--u));
  padding-bottom: .06em;
  background: var(--yellow);
  border-radius: 999px;
  font-size: calc(64.35 * var(--u));
  text-decoration: none;
  transition: transform .25s var(--ease), box-shadow .25s;
}
a.pill[href]:hover, a.pill[href]:focus-visible { transform: translateY(-3px) scale(1.05) rotate(-2deg); box-shadow: 0 10px 20px rgb(0 0 60 / .35); }
a[aria-disabled="true"] { cursor: default; }
.galeria-photo {
  position: absolute; left: calc(142 * var(--u)); bottom: 0; z-index: 2;
  width: calc(1306 * var(--u));
}

/* =========================================================================
   SEÇÃO 8 — Playlist
   ========================================================================= */
.playlist { --bg-color: var(--red); }
.playlist .stage { --h: 586; }
.playlist-h { position: absolute; left: 0; right: 0; top: calc(61 * var(--u)); text-align: center; font-size: calc(93.71 * var(--u)); z-index: 3; }
.playlist-frame {
  position: absolute; left: calc(404 * var(--u)); top: calc(199 * var(--u)); z-index: 3;
  width: calc(780 * var(--u)); height: calc(289 * var(--u));
  border-radius: calc(53 * var(--u));
  overflow: hidden;
  background: linear-gradient(180deg, #1a2433, #0d1016);
  box-shadow: 0 10px 30px rgb(0 0 0 / .3);
}
.playlist-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.playlist-empty {
  height: 100%; display: flex; align-items: center; justify-content: center; gap: 1em;
  font: max(13px, calc(30 * var(--u)))/1.25 var(--f-list); text-align: left;
}
.playlist-empty svg { width: 2.2em; height: 2.2em; color: #1ed760; }
.playlist-empty strong { display: block; font-weight: 800; }
.playlist-empty span { opacity: .7; font-family: var(--f-text); }
.has-embed .playlist-empty { display: none; }
.note { z-index: 2; pointer-events: none; }

/* =========================================================================
   SEÇÃO 9 — Redes sociais
   ========================================================================= */
.redes { --bg-color: var(--red); }
.redes .stage { --h: 452; }
.redes-h { position: absolute; left: 0; right: 0; top: calc(56 * var(--u)); text-align: center; font-size: calc(93.71 * var(--u)); }
.redes-txt {
  position: absolute; left: calc(457 * var(--u)); top: calc(226 * var(--u));
  font: calc(45.58 * var(--u)) / calc(43.5 * var(--u)) var(--f-cond);
}
.redes-icons { position: absolute; left: calc(871 * var(--u)); top: calc(220 * var(--u)); display: flex; align-items: center; gap: calc(23 * var(--u)); }
.social { display: block; width: calc(133 * var(--u)); border-radius: 50%; transition: transform .3s var(--ease); }
.redes-icons li + li .social { width: calc(119 * var(--u)); }
a.social[href]:hover, a.social[href]:focus-visible { transform: scale(1.1) rotate(-6deg); }

/* =========================================================================
   SEÇÃO 10 — Rodapé
   ========================================================================= */
.site-footer { --bg-color: var(--white); padding: max(16px, calc(12 * var(--u))) var(--gutter);   }
.site-footer img { width: max(160px, calc(287 * var(--u))); margin-inline: auto; }

/* =========================================================================
   Celular e tablet (< 960px): seções com muito texto viram fluxo normal
   ========================================================================= */
@media (max-width: 959.98px) {
  .day .stage, .news .stage, .galeria .stage, .playlist .stage, .redes .stage {
    width: auto; height: auto; margin-inline: var(--gutter);
  }

  /* Programação */
  .day .stage { display: grid; gap: 14px; padding-block: 22px 26px; }
  .day-scene { position: relative; left: 0; width: 100%; height: auto; aspect-ratio: 1020 / var(--h); overflow: hidden; }
  .day-list {
    position: static; white-space: normal;
    columns: 2; column-gap: 14px;
    font: 800 14px/1.55 var(--f-list);
  }
  .day-list li { break-inside: avoid; align-items: flex-start; }
  .day-list .pin { margin-top: .2em; }

  /* Notícias */
  .news .stage { padding-block: 34px 44px; text-align: center; }
  .news-h, .news-sub, .news-cards, .news-card { position: static; }
  .news-h { font-size: clamp(30px, 8.5vw, 52px); }
  .news-sub { margin-top: 12px; }
  .news-sub img { width: clamp(200px, 56vw, 340px); }
  .news-cards { display: grid; gap: 18px; height: auto; margin-top: 28px; text-align: left; }
  .news-card { width: auto; height: auto; }
  .news-card > * { padding: 9px; border-radius: 26px; }
  .news-img { border-radius: 20px 20px 6px 6px; }
  .news-title { padding: 14px 10px 10px; font-size: 17px; line-height: 1.25; text-align: left; }

  /* Galeria */
  .galeria .stage { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px 14px; padding-top: 30px; }
  .galeria-h, .galeria-btns, .galeria-photo { position: static; }
  .galeria-h { font-size: clamp(22px, 6.4vw, 40px); line-height: .98; }
  .galeria-btns { gap: 12px; }
  .pill { width: clamp(112px, 30vw, 180px); height: clamp(46px, 12vw, 64px); font-size: clamp(24px, 6.6vw, 40px); }
  .galeria-photo { grid-column: 1 / -1; width: 100%; margin-top: 6px; }

  /* Playlist */
  .playlist .stage { padding-block: 36px 30px; }
  .playlist-h { position: relative; font-size: clamp(32px, 9vw, 56px); }
  .playlist-frame { position: relative; left: 0; top: 0; width: 100%; height: 352px; margin-top: 30px; border-radius: 22px; }
  .playlist-frame:not(.has-embed) { height: 180px; }
  .note { position: absolute; }
  .n-laranja { left: -6px; top: 4px; width: 64px; }
  .n-rosa { left: auto; right: -2px; top: 18px; width: 50px; }
  .n-azul { left: -10px; top: auto; bottom: -6px; width: 56px; }
  .n-disco { left: auto; right: -12px; top: auto; bottom: -4px; width: 64px; }

  /* Redes */
  .redes .stage { display: grid; justify-items: center; gap: 22px; padding-block: 34px 40px; }
  .redes-h, .redes-txt, .redes-icons { position: static; }
  .redes-h { font-size: clamp(30px, 8.5vw, 56px); }
  .redes .stage { grid-template-columns: auto auto; justify-content: center; column-gap: clamp(20px, 7vw, 56px); }
  .redes-h { grid-column: 1 / -1; }
  .redes-txt { font-size: clamp(19px, 5.4vw, 30px); line-height: .98; }
  .redes-icons { gap: 12px; }
  .social, .redes-icons li + li .social { width: clamp(56px, 15vw, 84px); }
}
@media (min-width: 600px) and (max-width: 959.98px) {
  .day .stage { grid-template-columns: 1.55fr 1fr; align-items: center; gap: 20px; }
  .day-list { columns: 1; font-size: 15px; }
  .news-cards { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .news-title { font-size: 15px; }
  .playlist-frame { width: min(100%, 620px); margin-inline: auto; }
}

/* =========================================================================
   Animações
   ========================================================================= */
.js .reveal { opacity: 0; transform: translateY(34px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* Fotos e listas da programação entram em sequência */
.js .day-photos.reveal, .js .day-list.reveal { opacity: 1; transform: none; }
.js .day-photos .day-photo, .js .day-list li { opacity: 0; transform: translateY(40px); transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i) * 80ms); }
.js .day-list li { transform: translateX(24px); transition-delay: calc(var(--i) * 45ms + 150ms); }
.js .is-in .day-photo, .js .is-in li { opacity: 1; transform: none; }
.day-title { transition: transform .9s var(--ease); }

/* Círculo do "verão": chega rolando da direita, freia, quica e acende */
.js .verao-circulo.reveal { transform: none; transition: none; }
.js .verao-circulo.is-in { animation: circulo-chega 1.5s cubic-bezier(.22, .9, .3, 1) both; }
.js .verao-titulo.reveal { transform: translateX(-40px) scale(.94); }
.js .verao-titulo.is-in { transform: none; }
.js .galeria-photo.reveal { transform: translateY(60px); }
.js .galeria-photo.is-in { transform: none; }
.js .news-card.reveal { transform: translateY(50px) rotate(-1.5deg); }
.js .news-card.reveal.is-in { transform: none; }

@keyframes pop-in { from { opacity: 0; transform: scale(.55) rotate(-25deg); } to { opacity: 1; transform: none; } }
@keyframes rise-in { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes sway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(5deg); } }
@keyframes ken-burns { from { transform: scale(1.14); } to { transform: scale(1); } }

/* Sol do logo: cai girando do alto, bate, quica, solta um clarão e duas ondas de choque */
@keyframes sol-chega {
  0%   { opacity: 0; transform: translateY(-85%) scale(2.1) rotate(-200deg); filter: drop-shadow(0 0 0 rgb(255 206 0 / 0)); }
  45%  { opacity: 1; }
  58%  { transform: translateY(0) scale(.86, 1.1) rotate(10deg); filter: drop-shadow(0 0 0 rgb(255 206 0 / 0)); }
  68%  { transform: translateY(-3%) scale(1.16, .9) rotate(-5deg); filter: drop-shadow(0 0 calc(70 * var(--u)) rgb(255 206 0 / .95)); }
  80%  { transform: scale(.96, 1.04) rotate(2deg); }
  90%  { transform: scale(1.03) rotate(-1deg); }
  100% { opacity: 1; transform: none; filter: drop-shadow(0 0 calc(18 * var(--u)) rgb(255 206 0 / .45)); }
}
@keyframes sol-brilho {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 calc(18 * var(--u)) rgb(255 206 0 / .45)); }
  50%      { transform: scale(1.045); filter: drop-shadow(0 0 calc(38 * var(--u)) rgb(255 206 0 / .75)); }
}
@keyframes onda-choque {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.1); }
}
@keyframes circulo-chega {
  0%   { opacity: 0; transform: translateX(70%) rotate(300deg) scale(.55); filter: brightness(1.6) saturate(1.4); }
  25%  { opacity: 1; }
  62%  { transform: translateX(-1.5%) rotate(-14deg) scale(1.05); filter: brightness(1.25) saturate(1.2); }
  76%  { transform: translateX(1.5%) rotate(6deg) scale(.97); }
  88%  { transform: rotate(-2deg) scale(1.015); }
  100% { opacity: 1; transform: none; filter: none; }
}

.logo-sol { animation: sol-chega 1.6s cubic-bezier(.3, .8, .35, 1) both, sol-brilho 4.5s ease-in-out 1.7s infinite; transform-origin: 50% 62%; }
/* Ondas de choque saindo do centro do sol na hora do impacto (só na index: .hero-logo) */
.hero-logo::before, .hero-logo::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: calc((484 - 200 + 271) * var(--u)); top: calc((35 + 228) * var(--u));
  width: calc(520 * var(--u)); aspect-ratio: 1; border-radius: 50%;
  border: max(3px, calc(9 * var(--u))) solid var(--yellow);
  box-shadow: 0 0 calc(30 * var(--u)) rgb(255 206 0 / .7);
  opacity: 0;
  animation: onda-choque 1.1s cubic-bezier(.15, .7, .3, 1) .92s both;
}
.hero-logo::after { border-color: var(--white); animation-delay: 1.1s; }
.logo-marca { animation: rise-in .9s var(--ease) .25s both; }
.logo-slogan { animation: fade-in .8s ease .7s both; }
.hero-names { animation: fade-in .8s ease .9s both; }
.hero-photo { animation: rise-in 1.1s var(--ease) .45s both; }
.palm { animation: sway 7s ease-in-out infinite; }
.palm-r { animation-delay: -3s; }
.drops { animation: float 7s ease-in-out infinite; }
.aerial-photo { animation: ken-burns 14s ease-out both; }
.verao-circulo.is-in img { animation: float 6s ease-in-out 1.6s infinite; }
.note { animation: bob 4.5s ease-in-out infinite; }
.n-rosa { animation-delay: -1.2s; }
.n-azul { animation-delay: -2.4s; }
.n-disco { animation: float 5s ease-in-out -1s infinite; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js .reveal, .js .day-photo, .js .day-list li { opacity: 1 !important; transform: none !important; }
}