/* Heritage theme layer: permanent roots + current-year motif. */
.public-site {
  --theme-motif-primary: rgba(236, 90, 36, 0.68);
  --theme-motif-secondary: rgba(255, 178, 94, 0.44);
  --theme-motif-highlight: rgba(255, 244, 226, 0.28);
  position: relative;
}

/* The homepage hero is intentionally static. Camp photos remain in the gallery and photo sections only. */
.public-site .camp-hero__media,
.public-site .camp-hero__media.has-photo {
  background-image: none !important;
  background:
    radial-gradient(circle at 78% 76%, rgba(236, 90, 36, 0.18), transparent 30%),
    radial-gradient(circle at 18% 24%, rgba(217, 164, 65, 0.1), transparent 28%),
    linear-gradient(128deg, #100d0b 0%, #211711 48%, #171411 100%) !important;
  background-position: center !important;
  background-size: cover !important;
}

/* A very faint current-theme flame follows the visitor through the public site. */
.public-site::after {
  content: "";
  position: fixed;
  right: -11vw;
  bottom: -20vh;
  z-index: 2;
  width: min(52vw, 680px);
  height: min(82vh, 820px);
  pointer-events: none;
  opacity: 0.055;
  background:
    radial-gradient(ellipse at 50% 12%, rgba(255, 244, 226, 0.72), transparent 16%),
    radial-gradient(ellipse at 34% 48%, rgba(255, 178, 94, 0.72), transparent 30%),
    radial-gradient(ellipse at 63% 60%, rgba(236, 90, 36, 0.88), transparent 40%),
    radial-gradient(ellipse at 50% 88%, rgba(236, 90, 36, 0.55), transparent 58%);
  border-radius: 52% 48% 56% 44% / 72% 68% 32% 28%;
  filter: blur(24px);
  mix-blend-mode: screen;
  transform-origin: bottom center;
  animation: theme-flame-drift 12s ease-in-out infinite alternate;
}

.site-root-network { display: none; }
.public-site .site-root-network {
  display: block;
  position: fixed;
  inset: 76px 0 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.72;
}
.public-site .site-root-network::before,
.public-site .site-root-network::after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  mix-blend-mode: multiply;
}
.public-site .site-root-network::before {
  left: 50%;
  top: -14px;
  width: min(72vw, 820px);
  height: min(220vh, 1800px);
  transform: translateX(-50%);
  background-image: url('../images/root-network.svg');
  opacity: 0.18;
}
.public-site .site-root-network::after {
  right: -1.5rem;
  bottom: 9vh;
  width: min(28vw, 260px);
  height: min(24vh, 180px);
  background-image: url('../images/root-corner.svg');
  transform: rotate(18deg);
  opacity: 0.14;
}
.public-site main,
.public-site .public-footer {
  position: relative;
  z-index: 1;
}

/* Real transparent white artwork. No mask, recolor filter, or opaque background. */
.public-brand { width: clamp(200px, 23vw, 320px); }
.public-brand img.public-brand__logo,
.public-footer__brand img.public-footer__logo {
  display: block;
  height: auto;
  aspect-ratio: 4 / 1;
  background: transparent !important;
  -webkit-mask: none !important;
  mask: none !important;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.28)) !important;
}
.public-brand img.public-brand__logo { width: 100%; }
.public-footer__brand img.public-footer__logo {
  width: min(310px, 100%);
  margin-bottom: 1.4rem;
  opacity: 0.98;
}

/* Current-year hero motif. Change the variables above when the annual theme changes. */
.hero-orbit,
.hero-motif {
  position: absolute;
  right: -5vw;
  bottom: -10vh;
  z-index: 1;
  width: min(44vw, 560px);
  height: min(74vh, 680px);
  pointer-events: none;
  opacity: 0.72;
  border: 0;
  border-radius: 0;
  animation: none;
  background: radial-gradient(circle at 52% 82%, rgba(236, 90, 36, 0.2), transparent 48%);
}
.hero-orbit::before,
.hero-orbit::after,
.hero-orbit span,
.hero-motif::before,
.hero-motif::after,
.hero-motif span {
  content: "";
  position: absolute;
  bottom: 0;
  border-radius: 48% 52% 58% 42% / 72% 70% 30% 28%;
  background:
    radial-gradient(circle at 50% 16%, var(--theme-motif-highlight), transparent 22%),
    linear-gradient(180deg, rgba(255, 244, 226, 0.08) 0%, var(--theme-motif-secondary) 48%, var(--theme-motif-primary) 100%);
  box-shadow: 0 0 70px rgba(236, 90, 36, 0.18);
  filter: blur(10px);
  mix-blend-mode: screen;
  transform-origin: bottom center;
  animation: ember-flicker 9s ease-in-out infinite alternate;
}
.hero-orbit::before,
.hero-motif::before {
  left: 34%;
  width: 40%;
  height: 88%;
  animation-delay: -2.4s;
}
.hero-orbit::after,
.hero-motif::after {
  left: 14%;
  width: 31%;
  height: 60%;
  opacity: 0.62;
  animation-delay: -6s;
}
.hero-orbit span,
.hero-motif span {
  left: 58%;
  width: 25%;
  height: 46%;
  opacity: 0.58;
  animation-delay: -3.8s;
}
.camp-hero__content {
  position: relative;
  z-index: 2;
}
.camp-hero__title {
  line-height: 0.82;
  text-shadow: 0 12px 32px rgba(0, 0, 0, 0.42);
}

/* Root details repeat through sections, cards, forms, and modal panels. */
.experience-card,
.info-card,
.arrival-card,
.registration-card,
.cost-panel,
.public-site .registration-review-panel,
.public-site .review-form-card,
.public-site .returning-choice,
.public-site .returning-modal-content,
.public-site.registration-form-page form.multi-step-form {
  position: relative;
  overflow: hidden;
}
.experience-card::after,
.info-card::after,
.arrival-card::after,
.registration-card::after,
.cost-panel::after,
.public-site .registration-review-panel::after,
.public-site .review-form-card::after,
.public-site .returning-choice::after,
.public-site .returning-modal-content::after,
.public-site.registration-form-page form.multi-step-form::after {
  content: "";
  position: absolute;
  right: -1.25rem;
  bottom: -0.6rem;
  z-index: 0;
  width: min(34vw, 190px);
  height: min(18vw, 120px);
  background: url('../images/root-corner.svg') no-repeat center / contain;
  opacity: 0.14;
  pointer-events: none;
}
.experience-card > *,
.info-card > *,
.arrival-card > *,
.registration-card > *,
.cost-panel > *,
.public-site .registration-review-panel > *,
.public-site .review-form-card > *,
.public-site .returning-choice > *,
.public-site .returning-modal-content > *,
.public-site.registration-form-page form.multi-step-form > * {
  position: relative;
  z-index: 1;
}
.experience-card::after,
.registration-card::after {
  filter: invert(1);
  opacity: 0.1;
}
.section-heading { position: relative; }
.section-heading::after {
  content: "";
  display: block;
  width: min(220px, 38vw);
  height: 28px;
  margin-top: 0.65rem;
  background: url('../images/root-corner.svg') no-repeat left center / contain;
  opacity: 0.16;
}
.experience .section-heading::after,
.flyer-feature .section-heading::after,
.final-cta .section-heading::after {
  filter: invert(1);
  opacity: 0.12;
}

@keyframes ember-flicker {
  0% { transform: translate3d(0, 0, 0) scale(0.94) rotate(-3deg); opacity: 0.42; }
  20% { transform: translate3d(8px, -10px, 0) scale(1.02) rotate(2deg); opacity: 0.62; }
  42% { transform: translate3d(-6px, -19px, 0) scale(0.98) rotate(-1deg); opacity: 0.52; }
  66% { transform: translate3d(10px, -28px, 0) scale(1.06) rotate(3deg); opacity: 0.7; }
  100% { transform: translate3d(-5px, -38px, 0) scale(0.94) rotate(-2deg); opacity: 0.44; }
}
@keyframes theme-flame-drift {
  0% { transform: translate3d(0, 0, 0) scale(0.95) rotate(-2deg); }
  50% { transform: translate3d(-2vw, -2.5vh, 0) scale(1.02) rotate(1deg); }
  100% { transform: translate3d(1vw, -5vh, 0) scale(0.98) rotate(-1deg); }
}

@media (max-width: 760px) {
  .public-brand { width: min(176px, 54vw); }
  .hero-orbit,
  .hero-motif {
    width: 84vw;
    height: 58vh;
    right: -24vw;
    bottom: -8vh;
    opacity: 0.62;
  }
  .hero-orbit::before,
  .hero-motif::before { left: 30%; width: 44%; height: 90%; }
  .hero-orbit::after,
  .hero-motif::after { left: 10%; width: 34%; height: 64%; }
  .hero-orbit span,
  .hero-motif span { left: 58%; width: 28%; height: 52%; }
  .public-site .site-root-network::before { width: 120vw; opacity: 0.14; }
  .public-site::after {
    right: -38vw;
    width: 100vw;
    height: 68vh;
    opacity: 0.04;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-site::after,
  .hero-orbit::before,
  .hero-orbit::after,
  .hero-orbit span,
  .hero-motif::before,
  .hero-motif::after,
  .hero-motif span { animation: none; }
}
