/* ============================================================
   /festa — hero "arc gallery": fotos em leque (domo) acima do
   título. Geometria calculada no Blade (cos/sin); aqui só o
   layout responsivo + animações, sem JS.

   Três camadas por card (transforms independentes):
   .arc-tile  → posição no arco + entrada (fade-up)
   .arc-float → flutuação contínua (bob vertical)
   .arc-card  → rotação em leque + hover
   ============================================================ */
#arc-hero{
  position:relative; overflow:hidden; background:var(--bg);
  padding:150px 0 0;
  --radius:480px; --card:120px;
}
#arc-hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60% 55% at 50% 6%, rgba(255,106,26,.10), transparent 70%);
}

#arc-hero .arc-ring{ position:relative; z-index:1; height:calc(var(--radius) * 1.2); }
#arc-hero .arc-pivot{ position:absolute; left:50%; bottom:0; width:0; height:0; }

#arc-hero .arc-tile{
  position:absolute;
  left:calc(var(--cos) * var(--radius));
  bottom:calc(var(--sin) * var(--radius));
  width:var(--card); height:var(--card);
  opacity:0; transform:translate(-50%,68%);
  animation:arc-fade-up .8s cubic-bezier(.22,.68,.32,1) forwards;
  animation-delay:var(--delay);
}
#arc-hero .arc-float{
  width:100%; height:100%;
  animation:arc-float var(--dur) ease-in-out var(--fdelay) infinite;
}
#arc-hero .arc-card{
  width:100%; height:100%; border-radius:20px; overflow:hidden;
  background:var(--bg-card);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 22px 48px -18px rgba(0,0,0,.7);
  transform:rotate(var(--tilt));
  transition:transform .3s ease, box-shadow .3s ease;
}
#arc-hero .arc-tile:hover{ z-index:99 !important; }
#arc-hero .arc-tile:hover .arc-card{
  transform:rotate(var(--tilt)) scale(1.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 30px 60px -16px rgba(0,0,0,.8);
}
#arc-hero .arc-card img{ width:100%; height:100%; object-fit:cover; display:block; }

#arc-hero .arc-content{
  position:relative; z-index:2; max-width:720px; margin:-200px auto 0;
  text-align:center; padding:0 20px 80px;
  opacity:0; animation:arc-fade-in .8s ease-out 1.1s forwards;
}
#arc-hero .arc-content .hero-tag{ display:inline-block; }
#arc-hero .arc-content h1{ margin-top:22px; font-size:clamp(36px,6vw,72px); font-weight:600; letter-spacing:-.03em; line-height:1.05; }
#arc-hero .arc-content h1 .accent{ color:var(--accent); }
#arc-hero .arc-content .lead{ margin-top:20px; color:var(--text-dim); font-size:clamp(15px,1.6vw,18px); max-width:52ch; margin-left:auto; margin-right:auto; }
#arc-hero .arc-cta{ margin-top:32px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

@keyframes arc-fade-up{ from{ opacity:0; transform:translate(-50%,68%);} to{ opacity:1; transform:translate(-50%,50%);} }
@keyframes arc-float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-12px);} }
@keyframes arc-fade-in{ from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:translateY(0);} }

@media (max-width:1024px){
  #arc-hero{ --radius:360px; --card:100px; }
  #arc-hero .arc-content{ margin-top:-160px; }
}
@media (max-width:640px){
  #arc-hero{ --radius:210px; --card:72px; padding-top:120px; }
  #arc-hero .arc-content{ margin-top:-96px; }
}
@media (prefers-reduced-motion:reduce){
  #arc-hero .arc-tile{ animation:none; opacity:1; transform:translate(-50%,50%); }
  #arc-hero .arc-float{ animation:none; }
  #arc-hero .arc-content{ animation:none; opacity:1; transform:none; }
}