/* ============================================================================
   COMPONENTS — custom, non-utility styles (decorative backgrounds, the CTA
   gradient, animations, the FAQ accordion, the modal transitions, toasts).
   These are plain CSS (no Tailwind classes) so they work independently of the
   compiled main.css. Loaded after main.css.
   ========================================================================== */

/* Decorative grid background (sections) */
.grid-bg {
  background-color: #f3ebe1;
  background-image:
    linear-gradient(rgba(30, 61, 82, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 61, 82, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}
.hero-grid::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(30, 61, 82, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 61, 82, 0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse at top, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at top, #000 30%, transparent 75%);
}

/* Gold/terra underline under section headings */
.title-rule::after {
  content: ''; display: block; width: 56px; height: 3px; margin: 18px auto 0;
  border-radius: 3px; opacity: .9;
  background: linear-gradient(90deg, #9a7d26, #b8952f, #c45c3e);
}

/* Primary call-to-action button */
.btn-cta {
  background: linear-gradient(165deg, #d66f4f 0%, #c45c3e 45%, #a34a31 100%);
  box-shadow: 0 8px 24px rgba(196, 92, 62, 0.35);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.btn-cta:hover {
  transform: translateY(-2px); box-shadow: 0 12px 32px rgba(196, 92, 62, 0.42);
  background: linear-gradient(165deg, #e07d5c 0%, #a34a31 100%);
}
.btn-cta:active { transform: translateY(0); }

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* Live "pulse" ring (live dot + success check) */
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); } 70% { box-shadow: 0 0 0 12px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
.pulse-dot { animation: pulse-ring 1.4s ease-in-out infinite; }

/* Continuous announcement marquee — two identical groups, shift one group width (-50%) for a seamless loop */
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { display: inline-flex; flex-wrap: nowrap; white-space: nowrap; will-change: transform; animation: marquee 30s linear infinite; }
.marquee-group { display: inline-flex; align-items: center; flex-shrink: 0; }

/* Premium FAQ accordion — animate grid-template-rows 0fr->1fr to true content height */
.faq-item { transition: border-color .3s ease, box-shadow .35s ease, background-color .3s ease; }
.faq-item.open { border-color: rgba(15, 118, 110, .5); box-shadow: 0 12px 32px rgba(15, 36, 51, .09); }
.faq-ans { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.22,1,.36,1); }
.faq-item.open .faq-ans { grid-template-rows: 1fr; }
.faq-clip { overflow: hidden; min-height: 0; }
.faq-inner { opacity: 0; transform: translateY(6px); transition: opacity .28s ease-out, transform .4s cubic-bezier(.22,1,.36,1); }
.faq-item.open .faq-inner { opacity: 1; transform: none; transition-delay: .07s; }
.faq-chev { transition: transform .4s cubic-bezier(.22,1,.36,1); }
.faq-item.open .faq-chev { transform: rotate(180deg); }

/* Hidden scrollbar (testimonial rail) */
.no-bar::-webkit-scrollbar { display: none; }
.no-bar { -ms-overflow-style: none; scrollbar-width: none; }

/* Registration modal */
#regModal { transition: opacity .3s var(--ease); }
#regModal .modal-card { transition: transform .35s var(--ease), opacity .35s var(--ease); }
#regModal.hidden-modal { opacity: 0; pointer-events: none; }
#regModal.hidden-modal .modal-card { transform: translateY(24px) scale(.98); opacity: 0; }

/* Thank-you page entrance */
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
.pop { animation: pop .5s cubic-bezier(.22,1,.36,1) both; }

/* ----------------------------------------------------------------- TOASTS */
.toast-host {
  position: fixed; z-index: 400; right: 16px; bottom: 16px;
  display: flex; flex-direction: column; gap: 10px;
  max-width: min(360px, calc(100vw - 32px)); pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 10px;
  border-radius: 12px; padding: 12px 14px;
  font-family: "DM Sans", sans-serif; font-size: 14px; line-height: 1.4; font-weight: 500;
  color: #171412; background: #fff; border: 1px solid #ddd2c4;
  box-shadow: 0 16px 48px rgba(15, 36, 51, 0.18);
  opacity: 0; transform: translateY(12px); transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.toast.in { opacity: 1; transform: none; }
.toast-msg { flex: 1; min-width: 0; }
.toast-x { flex-shrink: 0; border: 0; background: none; cursor: pointer; font-size: 18px; line-height: 1; color: #7a7268; padding: 0 2px; }
.toast-x:hover { color: #171412; }
.toast-error   { border-color: rgba(196, 92, 62, .45); border-left: 4px solid #c45c3e; }
.toast-success { border-color: rgba(15, 118, 110, .45); border-left: 4px solid #0f766e; }
.toast-info    { border-color: rgba(30, 61, 82, .35); border-left: 4px solid #1e3d52; }