/* Spirit-Filled Proclamation — custom styles on top of Tailwind */

[x-cloak] { display: none !important; }

html { scroll-behavior: smooth; }

body { -webkit-font-smoothing: antialiased; }

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-5 {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tamil-aware body */
:lang(ta) {
  font-family: 'Noto Sans Tamil', 'Inter', sans-serif;
}

/* Tamil nav: tighter spacing + smaller font, Tamil glyphs are wider */
.lang-ta-nav {
  font-size: 0.85rem;
  gap: 0.875rem !important;
}
@media (min-width: 1280px) {
  .lang-ta-nav { font-size: 0.9rem; gap: 1.25rem !important; }
}
.lang-ta-nav a {
  font-family: 'Noto Sans Tamil', 'Inter', sans-serif;
}

/* Tamil brand — two-line tagline beside the logo */
.brand-ta {
  font-family: 'Noto Sans Tamil', 'Cormorant Garamond', serif;
  font-size: 0.78rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  white-space: normal;
  max-width: 16rem;
}
@media (min-width: 1024px) {
  .brand-ta { font-size: 0.86rem; max-width: 20rem; }
}
@media (min-width: 1280px) {
  .brand-ta { font-size: 0.95rem; }
}

.prose {
  color: #1F1B2E;
}
.prose p { margin-bottom: 1em; }
.prose strong { color: #5A2A82; }

/* Audio player skin tweak */
audio { width: 100%; }
audio::-webkit-media-controls-panel {
  background: linear-gradient(to right, #F5EFE0, #fff);
}

/* Sticky bottom nav adds padding so content doesn't hide */
@media (max-width: 768px) {
  body { padding-bottom: 60px; }
}

/* Subtle cross divider */
.divider-cross {
  display: flex; align-items: center; justify-content: center;
  margin: 2.5rem 0;
}
.divider-cross::before, .divider-cross::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(to right, transparent, #B8862B44, transparent);
}
.divider-cross > svg { margin: 0 .75rem; opacity: .6; color: #5A2A82; }

/* Print: hide nav/footer */
@media print {
  header, footer, .fixed, .sticky { display: none !important; }
}

/* ============================================================
   PAGE HERO BANNERS — unified treatment for all section headers
   ============================================================ */
.page-hero {
  position: relative;
  border-radius: 1.5rem;
  overflow: hidden;
  margin-bottom: 2.5rem;
  isolation: isolate;
  height: clamp(180px, 28vw, 280px);
  box-shadow: 0 18px 40px -16px rgba(90,42,130,0.30);
  background: linear-gradient(135deg, #5A2A82 0%, #1F1B2E 100%);
}
.page-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 35%;
  z-index: 0;
  transform: scale(1.02);
}
.page-hero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(31,27,46,0.78) 0%, rgba(90,42,130,0.45) 45%, rgba(31,27,46,0.10) 100%);
  z-index: 1;
}
.page-hero__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem 2rem;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.page-hero__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  font-weight: 600;
  line-height: 1.05;
}
.page-hero__subtitle {
  margin-top: .35rem;
  opacity: 0.95;
  font-size: clamp(.9rem, 1.4vw, 1.1rem);
  font-weight: 300;
  max-width: 38rem;
}

/* Center variant for short page heroes */
.page-hero--center .page-hero__content {
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Tighter image cards (used in prayer cards, etc.) */
.image-strip {
  position: relative;
  height: clamp(110px, 18vw, 180px);
  overflow: hidden;
  border-radius: 1rem 1rem 0 0;
}
.image-strip img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(.4,0,.2,1);
}
.image-strip:hover img { transform: scale(1.05); }
.image-strip__fade {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(255,255,255,0.92) 100%);
}

/* Uniform card style */
.tile {
  background: #fff;
  border: 1px solid rgba(90,42,130,0.10);
  border-radius: 1.25rem;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: transform 0.35s cubic-bezier(.4,2,.4,1), box-shadow 0.35s ease;
}
.tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 40px -16px rgba(90,42,130,0.28), 0 0 0 1px rgba(245,184,66,0.35);
}

/* ============================================================
   Page section system — consistent spacing for the home page
   ============================================================ */
.page-section {
  max-width: 72rem; /* 1152px = 6xl */
  margin: 0 auto;
  padding: 0 1rem;
  margin-top: 4rem;  /* 64px between sections */
}
@media (min-width: 768px) { .page-section { margin-top: 5rem; padding: 0 1.5rem; } }
.page-section--narrow { max-width: 56rem; }
.page-section--last { margin-bottom: 5rem; }

/* ============================================================
   LITURGICAL ACCENT — colorshift utilities driven by --liturgical-accent
   (Set in base.html <style> from services/liturgy.py for today's season)
   ============================================================ */

/* A dot/pip in the current season's color — used in eyebrows + badges */
.liturgical-dot {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  vertical-align: middle;
  border-radius: 9999px;
  background: var(--liturgical-accent, #B8862B);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.85), 0 0 0 3px rgba(31,27,46,0.08);
}

/* Saint-of-day / liturgical-season badge */
.liturgical-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.2em 0.7em;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Fallback for browsers without color-mix() — must use brand-clay/charcoal/gold */
  background: #F2E6C8;
  color: #5A2A82;
  border: 1px solid rgba(184, 134, 43, 0.35);
  /* Modern: derive a soft tint + readable text from the season's accent */
  background: color-mix(in srgb, var(--liturgical-accent, #B8862B) 20%, white);
  color:      color-mix(in srgb, var(--liturgical-accent, #B8862B) 70%, #1F1B2E);
  border:     1px solid color-mix(in srgb, var(--liturgical-accent, #B8862B) 45%, transparent);
}

/* Soft accent bar — used on prayer cards top edge */
.liturgical-bar {
  height: 3px;
  background: var(--liturgical-accent, #B8862B);
  border-radius: 9999px 9999px 0 0;
  opacity: 0.85;
}

/* Section header typography — consistent across the home page */
.section-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #B8862B; /* brand gold */
}
.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 600;
  color: #5A2A82; /* brand purple */
  line-height: 1.05;
  margin-top: 0.25rem;
}
.section-title-sm {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.5rem, 2.5vw, 1.875rem);
  font-weight: 600;
  color: #5A2A82;
  line-height: 1.1;
  margin-top: 0.25rem;
}
.section-lead {
  margin-top: 0.5rem;
  color: rgba(0,0,0,0.62);
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

/* Prayer-request CTA band */
.cta-band {
  background: linear-gradient(135deg, rgba(245,184,66,0.10) 0%, rgba(90,42,130,0.10) 100%);
  border: 1px solid rgba(90,42,130,0.10);
  border-radius: 1.5rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
}
@media (min-width: 768px) {
  .cta-band { padding: 3.5rem 2.5rem; }
}
.cta-band__btn {
  display: inline-block;
  margin-top: 1.5rem;
  padding: 0.75rem 1.75rem;
  background: #5A2A82;
  color: #fff;
  border-radius: 9999px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease;
}
.cta-band__btn:hover {
  transform: translateY(-2px);
  background: #6a3a92;
}

/* ============================================================
   HERO X — quiet, focused Pentecost composition
   ============================================================ */

.hero-x {
  position: relative;
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 767px) { .hero-x { min-height: 100svh; height: 100svh; } }

/* Sky: smooth radial — cream center fading into ivory at the edges,
   so the section blends with the page body. NO harsh dark bottom. */
.hero-x__sky {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 70% 65% at 50% 25%,
      #fffceb 0%, #fff3c8 20%, #ffe39a 40%,
      #f9c876 60%, #ecb05a 80%, #e1a04b 100%);
}

/* Soft halo behind the dove — gives a glow without being a "burst" */
.hero-x__glow {
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  width: 700px; height: 700px;
  background: radial-gradient(circle,
    rgba(255,255,255,0.85) 0%,
    rgba(255,250,210,0.55) 25%,
    rgba(255,220,140,0.25) 50%,
    transparent 75%);
  filter: blur(20px);
  z-index: 1;
  pointer-events: none;
  animation: glow-breathe 6s ease-in-out infinite;
}
@keyframes glow-breathe {
  0%,100% { opacity: 0.85; transform: translateX(-50%) scale(1); }
  50%     { opacity: 1;    transform: translateX(-50%) scale(1.05); }
}

/* Worshippers — image's transparent canvas covers the full hero.
   People are pre-positioned at 60-80% vertical in the source image,
   so they naturally appear in the lower-middle of the hero. */
.hero-x__people {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}
.hero-x__people img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* Stage: full-height flex — dove + title sit comfortably above the people band */
.hero-x__stage {
  position: relative;
  z-index: 10;
  max-width: 56rem;
  margin: 0 auto;
  padding: 3rem 1rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  color: #ffffff;
  min-height: 100vh;
  height: 100%;
  gap: 0;
}
@media (min-width: 768px) {
  .hero-x__stage { padding: 4rem 2rem 0; }
}

/* Push the title block up so it sits ABOVE the people band, not over it */
.hero-x__title-wrap {
  position: relative;
  z-index: 12;        /* above people band */
  margin-top: 0.5rem;
}

/* Dove */
.hero-x__dove {
  position: relative;
  width: 140px; height: 140px;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) { .hero-x__dove { width: 190px; height: 190px; margin-bottom: 1.5rem; } }

/* Title — readable, grand, balanced */
.hero-x__title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.05;
  font-weight: 700;
  margin: 0;
  color: #ffffff;
  /* Strong drop shadow + dark glow for contrast against gold sky */
  text-shadow:
    0 2px 4px rgba(58,28,8,0.55),
    0 6px 24px rgba(58,28,8,0.65),
    0 0 60px rgba(58,28,8,0.45);
  letter-spacing: -0.01em;
}
/* Override the old gold-gradient class so it stops fading into the sky */
.hero-x__title .hero-title-glow {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #ffffff;
  filter: none;
  text-shadow: inherit;
}
.hero-x__tagline {
  margin-top: 1rem;
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 500;
  color: #ffffff;
  max-width: 32rem;
  text-shadow:
    0 1px 3px rgba(58,28,8,0.6),
    0 4px 16px rgba(58,28,8,0.5);
}

/* CTAs */
.hero-x__ctas {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.875rem;
}
.hero-x__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  box-shadow: 0 14px 32px -10px rgba(0,0,0,0.35);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-x__cta:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -10px rgba(0,0,0,0.45); }
.hero-x__cta--primary {
  background: #ffffff;
  color: #5A2A82;
}
.hero-x__cta--primary:hover { background: #fff8e1; }
.hero-x__cta--whatsapp {
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: #fff;
}

/* Wave divider — sits at the very bottom, blends into ivory body */
.hero-x__wave {
  position: absolute; left: 0; right: 0; bottom: -1px;
  width: 100%; height: 80px;
  display: block;
  z-index: 12;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-x__glow, .dove-img { animation: none !important; }
}

/* ----- intense sun-burst beams (the dramatic light from above) ----- */
.hero-sunbeams { z-index: 1; overflow: hidden; }
.sun-core {
  position: absolute;
  top: -8%;
  left: 50%;
  width: 480px; height: 480px;
  margin-left: -240px;
  background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,250,210,0.95) 18%, rgba(255,220,140,0.7) 40%, rgba(255,200,90,0) 70%);
  filter: blur(6px);
  animation: sun-pulse 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes sun-pulse {
  0%,100% { opacity: 0.9; transform: scale(1); }
  50%     { opacity: 1;   transform: scale(1.08); }
}

/* Diagonal beams of light — wider at the bottom, originating from sun */
.beam {
  position: absolute;
  top: -10%;
  left: 50%;
  width: 80px;
  height: 130%;
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.95) 0%,
    rgba(255,250,210,0.55) 18%,
    rgba(255,220,140,0.30) 50%,
    rgba(255,200,90,0) 100%
  );
  transform-origin: top center;
  filter: blur(3px);
  mix-blend-mode: screen;
  opacity: 0.9;
  animation: beam-flicker 5s ease-in-out infinite;
}
.beam-1 { transform: translateX(-50%) rotate(-55deg); width: 110px; opacity: 0.7; }
.beam-2 { transform: translateX(-50%) rotate(-32deg); width: 80px;  animation-delay: 0.6s; }
.beam-3 { transform: translateX(-50%) rotate(-15deg); width: 60px;  opacity: 0.85; animation-delay: 1.2s; }
.beam-4 { transform: translateX(-50%) rotate(0deg);   width: 140px; opacity: 0.95; animation-delay: 0.3s; }
.beam-5 { transform: translateX(-50%) rotate(15deg);  width: 60px;  opacity: 0.85; animation-delay: 1.5s; }
.beam-6 { transform: translateX(-50%) rotate(32deg);  width: 80px;  animation-delay: 0.9s; }
.beam-7 { transform: translateX(-50%) rotate(55deg);  width: 110px; opacity: 0.7; animation-delay: 0.4s; }
@keyframes beam-flicker {
  0%, 100% { opacity: var(--opacity, 0.85); filter: blur(3px); }
  50%      { opacity: 1; filter: blur(2px); }
}

/* ----- soft rotating ray burst as backing layer ----- */
.hero-rays { z-index: 0; }
.ray-burst {
  position: absolute;
  top: 5%;
  left: 50%;
  width: 1800px; height: 1800px;
  margin-left: -900px; margin-top: -900px;
  background: conic-gradient(
    from 0deg,
    rgba(255,250,210,0) 0deg,    rgba(255,250,210,0.4) 8deg,  rgba(255,250,210,0) 16deg,
    rgba(255,250,210,0.3) 30deg, rgba(255,250,210,0) 38deg,
    rgba(255,250,210,0.4) 60deg, rgba(255,250,210,0) 68deg,
    rgba(255,250,210,0.3) 95deg, rgba(255,250,210,0) 103deg,
    rgba(255,250,210,0.4) 130deg, rgba(255,250,210,0) 138deg,
    rgba(255,250,210,0.3) 165deg, rgba(255,250,210,0) 173deg,
    rgba(255,250,210,0.4) 200deg, rgba(255,250,210,0) 208deg,
    rgba(255,250,210,0.3) 235deg, rgba(255,250,210,0) 243deg,
    rgba(255,250,210,0.4) 270deg, rgba(255,250,210,0) 278deg,
    rgba(255,250,210,0.3) 305deg, rgba(255,250,210,0) 313deg,
    rgba(255,250,210,0.4) 340deg, rgba(255,250,210,0) 348deg,
    rgba(255,250,210,0) 360deg
  );
  mix-blend-mode: screen;
  filter: blur(3px);
  animation: ray-spin 80s linear infinite, ray-pulse 8s ease-in-out infinite;
  opacity: 0.6;
}
@keyframes ray-spin  { to { transform: rotate(360deg); } }
@keyframes ray-pulse { 0%,100% { opacity: 0.45; } 50% { opacity: 0.7; } }

/* ----- drifting orange-tinted clouds ----- */
.cloud {
  position: absolute;
  height: 80px;
  width: 240px;
  filter: blur(0.8px) drop-shadow(0 6px 16px rgba(255,180,80,0.35));
  will-change: transform;
  z-index: 2;
}
.cloud-1 { top: 12%; left: -25%; animation: drift-r 80s linear infinite; transform: scale(1.4); }
.cloud-2 { top: 22%; right: -25%; animation: drift-l 100s linear infinite; transform: scale(1.6); }
.cloud-3 { top: 45%; left: -20%; animation: drift-r 120s linear infinite 12s; transform: scale(1.1); opacity: 0.75; }
.cloud-4 { top: 32%; right: -25%; animation: drift-l 140s linear infinite 6s; transform: scale(0.9); opacity: 0.6; }
@keyframes drift-r { from { transform: translateX(-20%); } to { transform: translateX(130vw); } }
@keyframes drift-l { from { transform: translateX(20%); }  to { transform: translateX(-130vw); } }

/* ----- floating light particles ----- */
.particle {
  position: absolute;
  left: var(--left);
  bottom: -12px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8d0 0%, #f5b842 60%, transparent 100%);
  box-shadow: 0 0 12px 2px rgba(255,235,150,0.7);
  animation: rise var(--dur) ease-in-out infinite;
  animation-delay: var(--delay);
  opacity: 0;
  pointer-events: none;
}
@keyframes rise {
  0%   { transform: translateY(0) scale(1);   opacity: 0; }
  20%  { opacity: 0.9; }
  80%  { opacity: 0.7; }
  100% { transform: translateY(-90vh) scale(0.4); opacity: 0; }
}

/* ----- dove inside the stage (flex item) ----- */
.dove-halo {
  position: absolute; inset: -25%;
  background: radial-gradient(circle,
    rgba(255,255,255,0.95) 0%,
    rgba(255,250,210,0.7) 22%,
    rgba(255,220,140,0.4) 48%,
    transparent 72%);
  filter: blur(12px);
  animation: glow-pulse 3.5s ease-in-out infinite;
  z-index: -1;
}
.dove-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 28px rgba(255,255,255,0.95))
    drop-shadow(0 0 60px rgba(255,235,150,0.85))
    drop-shadow(0 0 100px rgba(255,200,100,0.55));
  animation: dove-float 5s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

@keyframes glow-pulse {
  0%,100% { transform: scale(1);    opacity: 0.85; }
  50%     { transform: scale(1.15); opacity: 1; }
}
@keyframes dove-float {
  0%,100% { transform: translateY(0)     rotate(0deg); }
  50%     { transform: translateY(-14px) rotate(0.5deg); }
}

/* ----- title gradient glow ----- */
.hero-title-glow {
  background: linear-gradient(to bottom, #ffffff 0%, #fffbe0 35%, #ffe9a8 70%, #fcc764 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 4px 30px rgba(0,0,0,0.4);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.35));
}

/* ----- 3D CTAs ----- */
.cta-3d {
  display: inline-flex;
  align-items: center;
  position: relative;
  transition: transform 0.25s cubic-bezier(.4,2,.4,1), box-shadow 0.25s ease;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.cta-3d:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 14px 32px -6px rgba(0,0,0,0.45), 0 0 24px rgba(245,184,66,0.6);
}
.cta-3d:active { transform: translateY(-1px) scale(1.01); }

/* ============================================================
   Scroll-reveal animations  (data-reveal on any element)
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(.4,0,.2,1), transform 0.9s cubic-bezier(.4,0,.2,1);
  transition-delay: calc(var(--delay, 0) * 1ms);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reusable card lift on hover (3D) */
.card-3d {
  transition: transform 0.35s cubic-bezier(.4,2,.4,1), box-shadow 0.35s ease;
  transform-style: preserve-3d;
}
.card-3d:hover {
  transform: translateY(-6px) rotateX(2deg);
  box-shadow: 0 22px 40px -12px rgba(90,42,130,0.25), 0 0 0 1px rgba(245,184,66,0.4);
}

/* Mobile tweaks */
@media (max-width: 768px) {
  .hero-v2, .hero-stage { min-height: 80vh; }
  .ray-burst { top: 0%; }
  .worshippers { height: 30vh; min-height: 160px; }
  .sun-core { width: 320px; height: 320px; margin-left: -160px; }
  .beam-1, .beam-7 { display: none; }
  .hero-top-pad { height: 4vh; }
  .hero-title-block { padding-bottom: 6vh; }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .ray-burst, .cloud, .particle, .dove-img, .beam, .sun-core, .dove-halo {
    animation: none !important;
  }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}