/* =====================================================================
   FESTRUM — Shared page-level cinematic enhancements
   Hero parallax · chapter index · marquee · chapter markers ·
   metrics strip · codex rows · 3D tilt · scroll cue
   Used across: o-clube, estrutura, inteligencia, conteudo, acesso
   ===================================================================== */

/* ===== Hero shared: parallax bg + ornament + veil ===== */
.fx-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.fx-hero-bg {
  position: absolute; inset: -8% -4%;
  z-index: 0;
  will-change: transform;
  pointer-events: none;
}
.fx-hero-bg img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0.18; filter: saturate(0.9) contrast(1.05);
}
.fx-hero-veil {
  position: absolute; inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, rgba(244,241,233,0.72) 0%, rgba(244,241,233,0.42) 35%, rgba(244,241,233,0.85) 100%),
    radial-gradient(80% 60% at 30% 40%, rgba(244,241,233,0.45), rgba(244,241,233,0) 70%);
  pointer-events: none;
}
.fx-hero-grid { position: relative; z-index: 1; }
.fx-hero-ornament {
  position: absolute;
  top: 11%; right: 4%;
  width: 64px; height: 160px;
  z-index: 1;
  opacity: 0.7;
  pointer-events: none;
}

/* ===== Hero foot: metadata strip ===== */
.fx-hero-foot {
  display: flex; gap: 48px;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(184,160,119,0.22);
  flex-wrap: wrap;
}
.fx-hf-item { display: flex; flex-direction: column; gap: 4px; }
.fx-hf-label {
  font-size: 10.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--champagne-deep);
}
.fx-hf-val {
  font-size: 14px;
  color: var(--deep-graphite);
  letter-spacing: 0.04em;
}

/* ===== Scroll cue ===== */
.fx-scroll-cue {
  position: absolute; left: 50%; bottom: 32px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-decoration: none;
  z-index: 2;
}
.fx-sc-label {
  font-size: 10.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--champagne-deep);
}
.fx-sc-arrow {
  width: 1px; height: 56px;
  background: linear-gradient(180deg, var(--champagne) 0%, transparent 100%);
  position: relative; overflow: hidden;
}
.fx-sc-arrow::after {
  content: ''; position: absolute; left: 0; right: 0;
  height: 14px; background: var(--champagne);
  animation: fx-cue-pulse 2.2s ease-in-out infinite;
}
@keyframes fx-cue-pulse {
  0%   { transform: translateY(-100%); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(420%); opacity: 0; }
}

/* ===== Chapter index (right rail) ===== */
.fx-chapter-index {
  position: fixed;
  right: 22px; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 14px;
  z-index: 80;
}
.fx-ci-item {
  position: relative;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  color: var(--soft-charcoal);
  opacity: 0.45;
  transition: opacity .35s var(--ease-quint, ease), color .35s ease;
}
.fx-ci-item .fx-ci-num {
  font-family: var(--serif);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.fx-ci-item::before {
  content: ''; position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.35;
  transition: opacity .35s ease, transform .35s ease;
}
.fx-ci-item:hover,
.fx-ci-item.active {
  opacity: 1; color: var(--champagne-deep);
}
.fx-ci-item.active::before { opacity: 1; transform: scale(1.18); }
.fx-ci-item::after {
  content: attr(data-label);
  position: absolute; right: 40px; top: 50%;
  transform: translateY(-50%) translateX(8px);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--champagne-deep);
  background: rgba(244,241,233,0.96);
  padding: 6px 10px; border-radius: 2px;
  border: 1px solid rgba(184,160,119,0.25);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .35s var(--ease-quint, ease);
  white-space: nowrap;
}
.fx-ci-item:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
.fx-ci-item.on-dark { color: rgba(229,215,182,0.85); }
.fx-ci-item.on-dark::after {
  background: rgba(20,18,14,0.94);
  color: var(--champagne);
  border-color: rgba(214,198,165,0.3);
}
@media (max-width: 1100px) { .fx-chapter-index { display: none; } }

/* ===== Marquee band ===== */
.fx-marquee {
  overflow: hidden;
  border-top: 1px solid rgba(184,160,119,0.22);
  border-bottom: 1px solid rgba(184,160,119,0.22);
  padding: 22px 0;
  background: var(--paper);
}
.fx-marquee.dark {
  background: var(--deep-graphite);
  border-color: rgba(214,198,165,0.18);
}
.fx-mq-track {
  display: inline-flex;
  align-items: center;
  gap: 38px;
  white-space: nowrap;
  animation: fs-marquee-smooth 38s linear infinite;
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: 0.02em;
  color: var(--deep-graphite);
}
.fx-marquee.dark .fx-mq-track { color: rgba(242,240,235,0.85); }
.fx-mq-track span { display: inline-flex; align-items: center; }
.fx-mq-track .fx-mq-dot {
  color: var(--champagne-deep);
  font-size: 10px;
}
.fx-marquee.dark .fx-mq-track .fx-mq-dot { color: var(--champagne); }

/* ===== Chapter markers ===== */
.fx-chapter-marker {
  display: flex; align-items: center; gap: 18px;
  margin-bottom: 56px;
}
.fx-cm-roman {
  font-size: 26px; color: var(--champagne-deep);
  letter-spacing: 0.02em;
}
.fx-cm-line {
  flex: 0 0 80px; height: 1px;
  background: linear-gradient(90deg, var(--champagne-deep), transparent);
}
.fx-cm-label {
  font-size: 11px; letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--soft-charcoal);
}
.fx-chapter-marker.dark .fx-cm-roman { color: var(--champagne); }
.fx-chapter-marker.dark .fx-cm-line { background: linear-gradient(90deg, var(--champagne), transparent); }
.fx-chapter-marker.dark .fx-cm-label { color: rgba(242,240,235,0.7); }

/* ===== Metrics strip ===== */
.fx-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 90px;
  padding-top: 48px;
  border-top: 1px solid rgba(184,160,119,0.22);
}
.fx-metric {
  display: flex; flex-direction: column; gap: 10px;
  padding-right: 28px;
  position: relative;
}
.fx-metric:not(:last-child)::after {
  content: ''; position: absolute; right: 0; top: 8px; bottom: 8px;
  width: 1px; background: rgba(184,160,119,0.18);
}
.fx-metric-num {
  font-family: var(--serif);
  font-size: clamp(44px, 5vw, 72px);
  color: var(--deep-graphite);
  line-height: 1;
  letter-spacing: -0.01em;
}
.fx-metric-num.word {
  font-style: italic;
  font-size: clamp(32px, 3.4vw, 48px);
  color: var(--champagne-deep);
  letter-spacing: 0;
}
.section.dark .fx-metric-num.word { color: var(--champagne); }
.fx-metric-label {
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--soft-charcoal);
  opacity: 0.75;
}
.section.dark .fx-metric-num { color: var(--off-white); }
.section.dark .fx-metric-label { color: rgba(242,240,235,0.7); }
.section.dark .fx-metrics { border-top-color: rgba(214,198,165,0.18); }
.section.dark .fx-metric:not(:last-child)::after { background: rgba(214,198,165,0.14); }

/* ===== Codex row ===== */
.fx-codex-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  margin-top: 80px;
  border-top: 1px solid rgba(214,198,165,0.18);
}
.fx-codex {
  display: flex; align-items: baseline; gap: 14px;
  padding: 30px 28px 28px 0;
  border-bottom: 1px solid rgba(214,198,165,0.12);
  border-right: 1px solid rgba(214,198,165,0.12);
  transition: background .5s var(--ease-quint, ease);
}
.fx-codex:hover { background: rgba(214,198,165,0.04); }
.fx-codex:last-child { border-right: 0; }
.section:not(.dark) .fx-codex-row { border-top-color: rgba(184,160,119,0.22); }
.section:not(.dark) .fx-codex { border-color: rgba(184,160,119,0.16); }
.section:not(.dark) .fx-codex:hover { background: rgba(184,160,119,0.04); }
.fx-cx-num {
  font-family: var(--serif);
  color: var(--champagne);
  font-size: 18px;
  flex: 0 0 auto;
}
.section:not(.dark) .fx-cx-num { color: var(--champagne-deep); }
.fx-cx-text {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(242,240,235,0.82);
}
.section:not(.dark) .fx-cx-text { color: var(--soft-charcoal); }

/* ===== Ritual grid (also works for capability cards) ===== */
.fx-ritual-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(184,160,119,0.22);
  border-left: 1px solid rgba(184,160,119,0.16);
}
.fx-ritual {
  padding: 44px 36px 50px;
  border-right: 1px solid rgba(184,160,119,0.16);
  border-bottom: 1px solid rgba(184,160,119,0.22);
  position: relative;
  transition: background .6s var(--ease-quint, ease);
  will-change: transform;
}
.fx-ritual:hover { background: rgba(255,253,247,0.5); }
.fx-ritual-num {
  display: inline-block;
  font-family: var(--serif);
  font-size: 22px;
  color: var(--champagne-deep);
  margin-bottom: 28px;
  letter-spacing: 0.04em;
}
.fx-ritual h4 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 14px;
  line-height: 1.25;
}
.fx-ritual h4 .it { color: var(--champagne-deep); }
.fx-ritual p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--soft-charcoal);
  opacity: 0.85;
  max-width: 280px;
}
.fx-ritual-tag {
  position: absolute; top: 38px; right: 28px;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--champagne-deep);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .4s ease, transform .4s ease;
}
.fx-ritual:hover .fx-ritual-tag { opacity: 1; transform: translateY(0); }

/* ===== Floating SVG ornaments ===== */
.fx-dark-ornament {
  position: absolute;
  top: 80px; right: 6%;
  width: 220px; height: 220px;
  opacity: 0.7;
  pointer-events: none;
}
.fx-cta-ornament {
  position: absolute;
  left: 4%; top: 50%;
  transform: translateY(-50%);
  width: 60px; height: 150px;
  opacity: 0.6;
  pointer-events: none;
}

/* ===== Tilt effect ===== */
[data-tilt] {
  transform-style: preserve-3d;
  transition: transform 0.5s var(--ease-quint, ease);
  will-change: transform;
}
@media (hover: none) {
  [data-tilt] { transform: none !important; }
}

/* ===== Responsive ===== */
@media (max-width: 980px) {
  .fx-metrics { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .fx-metric:nth-child(2)::after { display: none; }
  .fx-ritual-grid { grid-template-columns: 1fr 1fr; }
  .fx-codex-row { grid-template-columns: 1fr 1fr; }
  .fx-hero-ornament, .fx-dark-ornament, .fx-cta-ornament { display: none; }
  .fx-mq-track { font-size: 18px; gap: 26px; }
}
@media (max-width: 620px) {
  .fx-metrics { grid-template-columns: 1fr; }
  .fx-metric::after { display: none !important; }
  .fx-ritual-grid { grid-template-columns: 1fr; }
  .fx-codex-row { grid-template-columns: 1fr; }
  .fx-hero-foot { gap: 24px; }
  .fx-chapter-marker { margin-bottom: 36px; }
  .fx-scroll-cue { display: none; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .fx-sc-arrow::after,
  .fx-mq-track { animation: none !important; }
  .fx-hero-bg { transform: none !important; }
}