{"id":18,"date":"2026-03-13T07:27:45","date_gmt":"2026-03-13T07:27:45","guid":{"rendered":"https:\/\/demo2.yinwoodweb.com\/catanauan1\/?page_id=18"},"modified":"2026-06-16T09:13:16","modified_gmt":"2026-06-16T01:13:16","slug":"about-us","status":"publish","type":"page","link":"https:\/\/demo2.yinwoodweb.com\/catanauan1\/about-us\/","title":{"rendered":"About"},"content":{"rendered":"\n<div class=\"wp-block-uagb-container uagb-block-a8f7bbc3 alignfull uagb-is-root-container\"><div class=\"wp-block-bplugins-custom-html\" id='bPluginsCustomHtml-1'>\n<!-- wp:html -->\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,700;1,400&family=Lato:wght@300;400&display=swap');\n\n.about-page{background:#0b0f1a;font-family:'Lato',sans-serif;color:#fff;overflow:hidden;}\n\n\/* \u2500\u2500 HERO \u2500\u2500 *\/\n.about-hero{position:relative;padding:120px 40px 90px;overflow:hidden;}\n.about-hero::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.4),transparent);}\n.about-hero::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 70% 50%,rgba(201,168,76,0.04) 0%,transparent 70%);pointer-events:none;}\n.about-hero-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}\n\n\/* \u2500\u2500 EYEBROW \u2014 base \u2500\u2500 *\/\n.about-eyebrow{font-size:9px;letter-spacing:5px;text-transform:uppercase;color:#c9a84c;margin-bottom:18px;display:flex;align-items:center;gap:12px;opacity:0;transform:translateX(-20px);transition:opacity 0.6s ease,transform 0.6s ease;}\n.about-eyebrow::before{content:'';display:block;width:30px;height:1px;background:rgba(201,168,76,0.5);}\n\n\/* \u2500\u2500 EYEBROW \u2014 activated (direct class or parent cascade) \u2500\u2500 *\/\n.about-eyebrow.about-anim-in,\n.about-section-header.about-anim-in .about-eyebrow{\n  opacity:1;transform:translateX(0);transition-delay:0.1s;\n}\n\n\/* \u2500\u2500 HERO TITLE \u2500\u2500 *\/\n.about-hero-title{font-family:'Playfair Display',serif;font-size:clamp(30px,4vw,54px);font-weight:700;color:#fff;line-height:1.15;margin-bottom:0;opacity:0;transform:translateY(25px);transition:opacity 0.7s ease,transform 0.7s ease;}\n.about-hero-title.about-anim-in{opacity:1;transform:translateY(0);transition-delay:0.2s;}\n.about-hero-title em{font-style:italic;color:#c9a84c;display:block;}\n\n\/* \u2500\u2500 LOCATION LINE \u2500\u2500 *\/\n.about-hero-loc{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(201,168,76,0.5);margin:8px 0 0;opacity:0;transform:translateY(15px);transition:opacity 0.6s ease,transform 0.6s ease;}\n.about-hero-loc.about-anim-in{opacity:1;transform:translateY(0);transition-delay:0.28s;}\n\n\/* \u2500\u2500 RULE \u2014 base \u2500\u2500 *\/\n.about-rule{width:50px;height:1px;background:linear-gradient(90deg,#c9a84c,transparent);margin:28px 0;transform:scaleX(0);transform-origin:left;transition:transform 0.6s ease;}\n\n\/* \u2500\u2500 RULE \u2014 activated (direct class or parent cascade) \u2500\u2500 *\/\n.about-rule.about-anim-in,\n.about-section-header.about-anim-in .about-rule{\n  transform:scaleX(1);transition-delay:0.35s;\n}\n\n\/* \u2500\u2500 HERO LEAD \u2500\u2500 *\/\n.about-hero-lead{font-size:15px;line-height:1.9;color:rgba(255,255,255,0.55);font-weight:300;margin-bottom:36px;opacity:0;transform:translateY(18px);transition:opacity 0.7s ease,transform 0.7s ease;}\n.about-hero-lead.about-anim-in{opacity:1;transform:translateY(0);transition-delay:0.45s;}\n\n\/* \u2500\u2500 HERO STATS \u2500\u2500 *\/\n.about-hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(201,168,76,0.12);border:1px solid rgba(201,168,76,0.12);opacity:0;transform:translateY(20px);transition:opacity 0.7s ease,transform 0.7s ease;}\n.about-hero-stats.about-anim-in{opacity:1;transform:translateY(0);transition-delay:0.55s;}\n.about-hero-stat{background:#0b0f1a;padding:20px 16px;text-align:center;}\n.about-hero-stat-num{font-family:'Playfair Display',serif;font-size:26px;font-weight:700;color:#c9a84c;display:block;line-height:1;margin-bottom:6px;transition:color 0.3s,text-shadow 0.3s;}\n.about-hero-stat:hover .about-hero-stat-num{color:#e8d08a;text-shadow:0 0 20px rgba(201,168,76,0.3);}\n.about-hero-stat-label{font-size:8px;letter-spacing:2.5px;text-transform:uppercase;color:rgba(255,255,255,0.35);}\n\n\/* \u2500\u2500 CAROUSEL \u2500\u2500 *\/\n.about-carousel-wrap{position:relative;padding:0 28px;opacity:0;transform:translateY(30px) scale(0.97);transition:opacity 0.8s ease,transform 0.8s ease;}\n.about-carousel-wrap.about-anim-in{opacity:1;transform:translateY(0) scale(1);transition-delay:0.2s;}\n.about-carousel{position:relative;aspect-ratio:3\/4;border:1px solid rgba(201,168,76,0.15);overflow:hidden;cursor:pointer;}\n.about-carousel-track{position:relative;width:100%;height:100%;}\n.about-carousel-slide{position:absolute;inset:0;opacity:0;transition:opacity 0.8s ease,transform 0.8s ease;transform:scale(1.04);}\n.about-carousel-slide.active{opacity:1;transform:scale(1);}\n.about-carousel-slide.exit-left{opacity:0;transform:scale(0.97) translateX(-3%);}\n.about-carousel-slide.exit-right{opacity:0;transform:scale(0.97) translateX(3%);}\n.about-carousel-slide img{width:100%;height:100%;object-fit:cover;display:block;}\n.about-carousel-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(11,15,26,0.6) 0%,transparent 50%);pointer-events:none;}\n.about-img-corner{position:absolute;width:22px;height:22px;border-color:rgba(201,168,76,0.45);border-style:solid;pointer-events:none;z-index:3;opacity:0;transition:opacity 0.4s ease;}\n.about-carousel:hover .about-img-corner{opacity:1;}\n.about-img-corner.tl{top:-1px;left:-1px;border-width:1px 0 0 1px;transition-delay:0s;}\n.about-img-corner.tr{top:-1px;right:-1px;border-width:1px 1px 0 0;transition-delay:0.05s;}\n.about-img-corner.bl{bottom:-1px;left:-1px;border-width:0 0 1px 1px;transition-delay:0.1s;}\n.about-img-corner.br{bottom:-1px;right:-1px;border-width:0 1px 1px 0;transition-delay:0.15s;}\n.about-img-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.9);background:rgba(11,15,26,0.8);border:1px solid rgba(201,168,76,0.3);padding:10px 18px;font-size:8px;letter-spacing:3px;text-transform:uppercase;color:#c9a84c;font-family:'Lato',sans-serif;opacity:0;transition:opacity 0.35s ease,transform 0.35s ease;pointer-events:none;white-space:nowrap;z-index:4;backdrop-filter:blur(4px);}\n.about-carousel:hover .about-img-hint{opacity:1;transform:translate(-50%,-50%) scale(1);}\n.about-img-badge{position:absolute;bottom:0;left:0;right:0;background:rgba(11,15,26,0.88);border-top:1px solid rgba(201,168,76,0.15);padding:12px 18px;display:flex;justify-content:space-between;align-items:center;pointer-events:none;z-index:3;}\n.about-img-badge-label{font-size:8px;letter-spacing:2px;text-transform:uppercase;color:rgba(201,168,76,0.45);}\n.about-img-badge-value{font-family:'Playfair Display',serif;font-size:13px;font-style:italic;color:#c9a84c;}\n.about-carousel-counter{position:absolute;top:14px;right:14px;z-index:4;font-size:9px;letter-spacing:2px;color:rgba(201,168,76,0.6);font-family:'Lato',sans-serif;background:rgba(11,15,26,0.7);padding:5px 10px;border:1px solid rgba(201,168,76,0.15);}\n\n\/* carousel arrows *\/\n.about-carousel-wrap .ac-arrow{\n  all:unset !important;\n  position:absolute !important;top:50% !important;\n  transform:translateY(-60%) !important;\n  width:42px !important;height:42px !important;\n  background:rgba(11,15,26,0.9) !important;\n  border:1px solid rgba(201,168,76,0.5) !important;\n  border-radius:0 !important;color:#c9a84c !important;\n  display:flex !important;align-items:center !important;justify-content:center !important;\n  cursor:pointer !important;z-index:20 !important;\n  box-sizing:border-box !important;\n  transition:background 0.3s,border-color 0.3s !important;\n  box-shadow:none !important;padding:0 !important;margin:0 !important;\n  text-decoration:none !important;font-size:0 !important;\n}\n.about-carousel-wrap .ac-arrow:hover{background:rgba(201,168,76,0.2) !important;border-color:#c9a84c !important;}\n.about-carousel-wrap .ac-arrow svg{width:18px !important;height:18px !important;stroke:#c9a84c !important;fill:none !important;stroke-width:2.5 !important;display:block !important;}\n.about-carousel-wrap .ac-arrow.prev{left:0 !important;}\n.about-carousel-wrap .ac-arrow.next{right:0 !important;}\n\n\/* dots *\/\n.about-carousel-dots{display:flex;gap:6px;justify-content:center;margin-top:14px;}\n.about-carousel-dot{width:20px;height:2px;background:rgba(201,168,76,0.2);cursor:pointer;transition:all 0.3s;}\n.about-carousel-dot.active{background:#c9a84c;width:32px;}\n\n\/* \u2500\u2500 SECTION \u2500\u2500 *\/\n.about-section{padding:80px 40px;position:relative;overflow:hidden;}\n.about-section::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.2),transparent);}\n.about-section-inner{max-width:1100px;margin:0 auto;}\n.about-section-header{margin-bottom:48px;}\n.about-section-title{font-family:'Playfair Display',serif;font-size:clamp(24px,3vw,36px);font-weight:700;color:#fff;line-height:1.2;opacity:0;transform:translateY(20px);transition:opacity 0.7s ease,transform 0.7s ease;}\n.about-section-header.about-anim-in .about-section-title{opacity:1;transform:translateY(0);transition-delay:0.15s;}\n.about-section-title em{font-style:italic;color:#c9a84c;}\n.about-bg-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(201,168,76,0.1);}\n.about-bg-card{background:#0b0f1a;padding:36px 32px;opacity:0;transform:translateY(25px);transition:opacity 0.6s ease,transform 0.6s ease,background 0.3s;}\n.about-bg-card.about-anim-in{opacity:1;transform:translateY(0);}\n.about-bg-card:hover{background:rgba(201,168,76,0.03);}\n\n\/* card corners on hover *\/\n.about-bg-card{position:relative;}\n.about-bg-card::before,.about-bg-card::after{content:'';position:absolute;width:14px;height:14px;border-color:rgba(201,168,76,0.3);border-style:solid;opacity:0;transition:opacity 0.4s ease;pointer-events:none;}\n.about-bg-card::before{top:10px;left:10px;border-width:1px 0 0 1px;}\n.about-bg-card::after{bottom:10px;right:10px;border-width:0 1px 1px 0;}\n.about-bg-card:hover::before,.about-bg-card:hover::after{opacity:1;}\n\n.about-bg-card-icon{width:36px;height:36px;margin-bottom:20px;stroke:#c9a84c;fill:none;stroke-width:1.2;opacity:0.7;transition:opacity 0.3s;}\n.about-bg-card:hover .about-bg-card-icon{opacity:1;}\n.about-bg-card-title{font-family:'Playfair Display',serif;font-size:18px;font-weight:700;color:#fff;margin-bottom:12px;}\n.about-bg-card-text{font-size:13.5px;color:rgba(255,255,255,0.5);line-height:1.85;font-weight:300;}\n.about-bg-card-text strong{color:rgba(201,168,76,0.8);font-weight:400;}\n\n\/* \u2500\u2500 AMBIENT PARTICLES \u2500\u2500 *\/\n.about-particle{position:absolute;border-radius:50%;background:rgba(201,168,76,0.06);pointer-events:none;z-index:0;}\n.about-particle:nth-child(1){width:220px;height:220px;top:-70px;right:-90px;animation:aboutFloat 15s ease-in-out infinite;}\n.about-particle:nth-child(2){width:140px;height:140px;bottom:-40px;left:3%;animation:aboutFloat 19s ease-in-out infinite reverse;}\n.about-particle:nth-child(3){width:80px;height:80px;top:45%;left:-25px;animation:aboutFloat 12s ease-in-out infinite 2s;}\n.about-particle:nth-child(4){width:100px;height:100px;top:20%;right:5%;animation:aboutFloat 16s ease-in-out infinite 4s;}\n@keyframes aboutFloat{\n  0%,100%{transform:translateY(0) scale(1);opacity:0.4;}\n  50%{transform:translateY(-25px) scale(1.1);opacity:0.85;}\n}\n\n\/* \u2500\u2500 CROSS PULSE (behind hero) \u2500\u2500 *\/\n.about-hero-cross{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0.03;pointer-events:none;animation:aboutCrossPulse 8s ease-in-out infinite;}\n@keyframes aboutCrossPulse{\n  0%,100%{opacity:0.03;transform:translate(-50%,-50%) scale(1);}\n  50%{opacity:0.05;transform:translate(-50%,-50%) scale(1.04);}\n}\n.about-hero-cross svg{width:300px;height:300px;stroke:#c9a84c;fill:none;stroke-width:0.5;}\n\n\/* \u2500\u2500 SAFETY NET: if JS never runs, reveal everything after 2s \u2500\u2500 *\/\n@keyframes aboutFallbackIn{\n  to{opacity:1;transform:none;}\n}\n.about-eyebrow,.about-hero-title,.about-hero-loc,.about-rule,.about-hero-lead,.about-hero-stats,.about-carousel-wrap,.about-section-title,.about-bg-card{\n  animation:aboutFallbackIn 0.01s forwards 2.5s;\n}\n\/* override fallback when JS actually works (about-anim-in wins via specificity) *\/\n.about-eyebrow.about-anim-in,\n.about-hero-title.about-anim-in,\n.about-hero-loc.about-anim-in,\n.about-rule.about-anim-in,\n.about-hero-lead.about-anim-in,\n.about-hero-stats.about-anim-in,\n.about-carousel-wrap.about-anim-in,\n.about-section-header.about-anim-in .about-section-title,\n.about-section-header.about-anim-in .about-eyebrow,\n.about-section-header.about-anim-in .about-rule,\n.about-bg-card.about-anim-in{\n  animation:none;\n}\n\n\/* \u2500\u2500 LIGHTBOX \u2500\u2500 *\/\n.about-lightbox{\n  position:fixed;inset:0;z-index:99999;\n  display:flex;flex-direction:column;\n  align-items:center;justify-content:center;\n  opacity:0;pointer-events:none;\n  transition:opacity 0.35s ease;\n  padding:20px;box-sizing:border-box;\n}\n.about-lightbox.open{opacity:1;pointer-events:all;}\n.alb-bg{\n  position:absolute;inset:0;\n  background:rgba(5,7,14,0.95);\n  z-index:0;cursor:pointer;backdrop-filter:blur(6px);\n}\n.alb-ui{\n  position:relative;z-index:2;\n  display:flex;flex-direction:column;align-items:center;gap:16px;\n  transform:scale(0.93) translateY(18px);transition:transform 0.4s ease;\n}\n.about-lightbox.open .alb-ui{transform:scale(1) translateY(0);}\n.alb-close{\n  all:unset !important;\n  position:absolute !important;\n  top:-50px !important;right:0 !important;\n  cursor:pointer !important;\n  font-size:9px !important;letter-spacing:3px !important;text-transform:uppercase !important;\n  color:rgba(201,168,76,0.6) !important;font-family:'Lato',sans-serif !important;\n  display:flex !important;align-items:center !important;gap:8px !important;\n  transition:color 0.3s !important;white-space:nowrap !important;\n}\n.alb-close:hover{color:#fff !important;}\n.alb-close svg{width:14px !important;height:14px !important;stroke:currentColor !important;fill:none !important;stroke-width:2 !important;display:block !important;}\n.alb-stage{display:flex;align-items:center;justify-content:center;gap:16px;}\n.alb-frame{position:relative;border:1px solid rgba(201,168,76,0.25);overflow:hidden;flex-shrink:0;line-height:0;}\n.alb-frame img{display:block;max-width:75vw;max-height:74vh;object-fit:contain;transition:opacity 0.25s ease;}\n.alb-corner{position:absolute;width:20px;height:20px;border-color:rgba(201,168,76,0.5);border-style:solid;pointer-events:none;}\n.alb-corner.tl{top:-1px;left:-1px;border-width:1px 0 0 1px;}\n.alb-corner.tr{top:-1px;right:-1px;border-width:1px 1px 0 0;}\n.alb-corner.bl{bottom:-1px;left:-1px;border-width:0 0 1px 1px;}\n.alb-corner.br{bottom:-1px;right:-1px;border-width:0 1px 1px 0;}\n.alb-nav{\n  all:unset !important;\n  width:48px !important;height:48px !important;\n  background:rgba(11,15,26,0.92) !important;\n  border:1px solid rgba(201,168,76,0.5) !important;\n  border-radius:0 !important;\n  display:flex !important;align-items:center !important;justify-content:center !important;\n  cursor:pointer !important;flex-shrink:0 !important;\n  transition:background 0.3s,border-color 0.3s !important;\n  box-shadow:none !important;padding:0 !important;margin:0 !important;\n  font-size:0 !important;box-sizing:border-box !important;\n}\n.alb-nav:hover{background:rgba(201,168,76,0.2) !important;border-color:#c9a84c !important;}\n.alb-nav svg{width:20px !important;height:20px !important;stroke:#c9a84c !important;fill:none !important;stroke-width:2.5 !important;display:block !important;}\n.alb-footer{display:flex;flex-direction:column;align-items:center;gap:10px;}\n.alb-dots{display:flex;gap:6px;}\n.alb-dot{width:20px;height:2px;background:rgba(201,168,76,0.2);cursor:pointer;transition:all 0.3s;}\n.alb-dot.active{background:#c9a84c;width:32px;}\n.alb-caption{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:rgba(201,168,76,0.45);font-family:'Lato',sans-serif;text-align:center;}\n\n@media(max-width:900px){\n  .about-hero-inner{grid-template-columns:1fr;gap:48px;}\n  .about-hero{padding:80px 24px 60px;}\n  .about-section{padding:60px 24px;}\n  .about-bg-grid{grid-template-columns:1fr;}\n  .about-carousel{aspect-ratio:4\/3;}\n  .alb-stage{gap:8px;}\n  .alb-nav{width:36px !important;height:36px !important;}\n  .alb-frame img{max-width:70vw;}\n}\n@media(max-width:540px){\n  .alb-nav{width:30px !important;height:44px !important;}\n  .alb-frame img{max-width:82vw;max-height:62vh;}\n  .alb-stage{gap:4px;}\n}\n<\/style>\n\n<div class=\"about-page\">\n\n  <section class=\"about-hero\">\n    <div class=\"about-particle\"><\/div>\n    <div class=\"about-particle\"><\/div>\n    <div class=\"about-particle\"><\/div>\n    <div class=\"about-particle\"><\/div>\n    <div class=\"about-hero-cross\">\n      <svg viewBox=\"0 0 100 100\"><line x1=\"50\" y1=\"5\" x2=\"50\" y2=\"95\"\/><line x1=\"20\" y1=\"30\" x2=\"80\" y2=\"30\"\/><\/svg>\n    <\/div>\n    <div class=\"about-hero-inner\">\n\n      <div class=\"about-hero-content\">\n        <p class=\"about-eyebrow\">About Us<\/p>\n        <h1 class=\"about-hero-title\">Immaculate Conception<em>Parish Church<\/em><\/h1>\n        <p class=\"about-hero-loc\">Catanauan, Quezon<\/p>\n        <div class=\"about-rule\"><\/div>\n        <p class=\"about-hero-lead\">One of the most enduring Catholic landmarks in southern Quezon province, our parish has served the spiritual needs of Catanauan&#8217;s faithful for over 171 years \u2014 a living testament to a community&#8217;s unbroken devotion.<\/p>\n        <div class=\"about-hero-stats\">\n          <div class=\"about-hero-stat\"><span class=\"about-hero-stat-num\" data-target=\"1855\">1855<\/span><span class=\"about-hero-stat-label\">Established<\/span><\/div>\n          <div class=\"about-hero-stat\"><span class=\"about-hero-stat-num\" data-target=\"46\">46<\/span><span class=\"about-hero-stat-label\">Barangays<\/span><\/div>\n          <div class=\"about-hero-stat\"><span class=\"about-hero-stat-num\" data-target=\"171\">171+<\/span><span class=\"about-hero-stat-label\">Years of Faith<\/span><\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"about-carousel-wrap\">\n        <button class=\"ac-arrow prev\" id=\"aboutPrevBtn\">\n          <svg viewBox=\"0 0 24 24\"><polyline points=\"15 18 9 12 15 6\"\/><\/svg>\n        <\/button>\n        <div class=\"about-carousel\" id=\"aboutCarousel\">\n          <div class=\"about-carousel-track\" id=\"aboutCarouselTrack\"><\/div>\n          <div class=\"about-carousel-overlay\"><\/div>\n          <div class=\"about-carousel-counter\" id=\"aboutCounter\">1 \/ 4<\/div>\n          <div class=\"about-img-hint\">View Full Image<\/div>\n          <div class=\"about-img-corner tl\"><\/div>\n          <div class=\"about-img-corner tr\"><\/div>\n          <div class=\"about-img-corner bl\"><\/div>\n          <div class=\"about-img-corner br\"><\/div>\n          <div class=\"about-img-badge\">\n            <span class=\"about-img-badge-label\" id=\"aboutBadgeLabel\">Diocese of Gumaca<\/span>\n            <span class=\"about-img-badge-value\">Est. 1855<\/span>\n          <\/div>\n        <\/div>\n        <button class=\"ac-arrow next\" id=\"aboutNextBtn\">\n          <svg viewBox=\"0 0 24 24\"><polyline points=\"9 6 15 12 9 18\"\/><\/svg>\n        <\/button>\n        <div class=\"about-carousel-dots\" id=\"aboutDots\"><\/div>\n      <\/div>\n\n    <\/div>\n  <\/section>\n\n  <section class=\"about-section\">\n    <div class=\"about-particle\" style=\"top:-40px;left:-60px;width:160px;height:160px;\"><\/div>\n    <div class=\"about-particle\" style=\"bottom:-30px;right:2%;width:110px;height:110px;\"><\/div>\n    <div class=\"about-section-inner\">\n      <div class=\"about-section-header\">\n        <p class=\"about-eyebrow\">Our Background<\/p>\n        <h2 class=\"about-section-title\">A Historic Parish <em>Rooted in Faith<\/em><\/h2>\n        <div class=\"about-rule\"><\/div>\n      <\/div>\n      <div class=\"about-bg-grid\">\n        <div class=\"about-bg-card\">\n          <svg class=\"about-bg-card-icon\" viewBox=\"0 0 24 24\"><path d=\"M12 2L2 7v10l10 5 10-5V7L12 2z\"\/><line x1=\"12\" y1=\"22\" x2=\"12\" y2=\"12\"\/><line x1=\"2\" y1=\"7\" x2=\"12\" y2=\"12\"\/><line x1=\"22\" y1=\"7\" x2=\"12\" y2=\"12\"\/><\/svg>\n          <h3 class=\"about-bg-card-title\">Established Parish<\/h3>\n          <p class=\"about-bg-card-text\">The Immaculate Conception Parish Church in Catanauan, Quezon stands as one of the most enduring Catholic landmarks in southern Quezon province. Established as a full parish in <strong>1855<\/strong>, it has served the spiritual needs of the community for over <strong>171 years<\/strong> under the <strong>Diocese of Gumaca<\/strong>.<\/p>\n        <\/div>\n        <div class=\"about-bg-card\">\n          <svg class=\"about-bg-card-icon\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"2\" y1=\"12\" x2=\"22\" y2=\"12\"\/><path d=\"M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z\"\/><\/svg>\n          <h3 class=\"about-bg-card-title\">Location &#038; Reach<\/h3>\n          <p class=\"about-bg-card-text\">Located in <strong>Barangay 5 Poblacion<\/strong>, the parish serves all <strong>46 barangays<\/strong> of Catanauan municipality, making it the central spiritual hub for the town&#8217;s Catholic faithful.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/section>\n\n<\/div>\n\n<!-- LIGHTBOX -->\n<div class=\"about-lightbox\" id=\"aboutLightbox\">\n  <div class=\"alb-bg\" id=\"aboutLbBg\"><\/div>\n  <div class=\"alb-ui\" id=\"aboutLbUi\">\n    <button class=\"alb-close\" id=\"aboutLbClose\">\n      Close <svg viewBox=\"0 0 24 24\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg>\n    <\/button>\n    <div class=\"alb-stage\">\n      <button class=\"alb-nav\" id=\"aboutLbPrev\">\n        <svg viewBox=\"0 0 24 24\"><polyline points=\"15 18 9 12 15 6\"\/><\/svg>\n      <\/button>\n      <div class=\"alb-frame\" id=\"aboutLbFrame\">\n        <img decoding=\"async\" id=\"aboutLightboxImg\" src=\"\" alt=\"Parish Church\">\n        <div class=\"alb-corner tl\"><\/div>\n        <div class=\"alb-corner tr\"><\/div>\n        <div class=\"alb-corner bl\"><\/div>\n        <div class=\"alb-corner br\"><\/div>\n      <\/div>\n      <button class=\"alb-nav\" id=\"aboutLbNext\">\n        <svg viewBox=\"0 0 24 24\"><polyline points=\"9 6 15 12 9 18\"\/><\/svg>\n      <\/button>\n    <\/div>\n    <div class=\"alb-footer\">\n      <div class=\"alb-dots\" id=\"aboutLbDots\"><\/div>\n      <p class=\"alb-caption\" id=\"aboutLbCaption\"><\/p>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n(function(){\n  var slides = [\n    { src:'https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-content\/uploads\/sites\/16\/2026\/06\/church-about.jpg',                                       caption:'Immaculate Conception Parish Church \u2014 Catanauan, Quezon', badge:'Parish Facade'     },\n    { src:'https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-content\/uploads\/sites\/16\/2026\/06\/Immaculate-Conception-Parish-Catanauan-Quezon.jpeg',       caption:'Immaculate Conception Parish \u2014 Exterior View',              badge:'Church Exterior'   },\n    { src:'https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-content\/uploads\/sites\/16\/2026\/06\/catanauan-church.jpg',                                    caption:'Catanauan Parish Church \u2014 Est. 1855',                       badge:'Historic Structure' },\n    { src:'https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-content\/uploads\/sites\/16\/2026\/06\/Immaculate-Conception-Parish-Catanauan-Quezon-Altar.jpeg', caption:'Main Altar \u2014 Immaculate Conception Parish',                 badge:'Church Altar'      }\n  ];\n\n  var current   = 0;\n  var animating = false;\n  var autoTimer;\n\n  var track      = document.getElementById('aboutCarouselTrack');\n  var counter    = document.getElementById('aboutCounter');\n  var cDots      = document.getElementById('aboutDots');\n  var badgeLabel = document.getElementById('aboutBadgeLabel');\n  var carousel   = document.getElementById('aboutCarousel');\n  var lightbox   = document.getElementById('aboutLightbox');\n  var lbImg      = document.getElementById('aboutLightboxImg');\n  var lbCaption  = document.getElementById('aboutLbCaption');\n  var lbDots     = document.getElementById('aboutLbDots');\n\n  \/* build carousel slides *\/\n  slides.forEach(function(s,i){\n    var div = document.createElement('div');\n    div.className = 'about-carousel-slide'+(i===0?' active':'');\n    div.innerHTML = '<img decoding=\"async\" src=\"'+s.src+'\" alt=\"'+s.caption+'\" loading=\"'+(i===0?'eager':'lazy')+'\">';\n    track.appendChild(div);\n  });\n\n  \/* build carousel dots *\/\n  slides.forEach(function(_,i){\n    var d = document.createElement('div');\n    d.className = 'about-carousel-dot'+(i===0?' active':'');\n    d.addEventListener('click', function(){ cGoTo(i); });\n    cDots.appendChild(d);\n  });\n\n  \/* build lightbox dots *\/\n  slides.forEach(function(_,i){\n    var d = document.createElement('div');\n    d.className = 'alb-dot'+(i===0?' active':'');\n    d.addEventListener('click', function(){ lbGoTo(i); });\n    lbDots.appendChild(d);\n  });\n\n  function syncUI(){\n    counter.textContent = (current+1)+' \/ '+slides.length;\n    badgeLabel.textContent = slides[current].badge;\n    cDots.querySelectorAll('.about-carousel-dot').forEach(function(d,i){ d.classList.toggle('active',i===current); });\n    lbImg.src = slides[current].src;\n    lbCaption.textContent = slides[current].caption;\n    lbDots.querySelectorAll('.alb-dot').forEach(function(d,i){ d.classList.toggle('active',i===current); });\n  }\n\n  function cGoTo(index,dir){\n    if(animating) return;\n    var next=(index+slides.length)%slides.length;\n    if(next===current) return;\n    animating=true;\n    var els=track.querySelectorAll('.about-carousel-slide');\n    var out=(dir!==undefined?(dir>0?'exit-left':'exit-right'):(next>current?'exit-left':'exit-right'));\n    els[current].classList.remove('active');\n    els[current].classList.add(out);\n    current=next;\n    els[current].classList.add('active');\n    syncUI();\n    setTimeout(function(){ els.forEach(function(s){ s.classList.remove('exit-left','exit-right'); }); animating=false; },850);\n    resetAuto();\n  }\n\n  function resetAuto(){\n    clearInterval(autoTimer);\n    autoTimer=setInterval(function(){ cGoTo(current+1,1); },5000);\n  }\n\n  function lbGoTo(index){\n    lbImg.style.opacity='0';\n    setTimeout(function(){\n      current=(index+slides.length)%slides.length;\n      syncUI();\n      lbImg.style.opacity='1';\n    },220);\n  }\n\n  function lbOpen(){\n    syncUI();\n    lightbox.classList.add('open');\n    document.body.style.overflow='hidden';\n  }\n\n  function lbClose(){\n    lightbox.classList.remove('open');\n    document.body.style.overflow='';\n  }\n\n  document.getElementById('aboutPrevBtn').addEventListener('click',function(e){ e.stopPropagation(); cGoTo(current-1,-1); });\n  document.getElementById('aboutNextBtn').addEventListener('click',function(e){ e.stopPropagation(); cGoTo(current+1, 1); });\n  carousel.addEventListener('click', lbOpen);\n\n  document.getElementById('aboutLbBg').addEventListener('click', lbClose);\n  document.getElementById('aboutLbUi').addEventListener('click', function(e){ e.stopPropagation(); });\n  document.getElementById('aboutLbClose').addEventListener('click', lbClose);\n  document.getElementById('aboutLbPrev').addEventListener('click', function(){ lbGoTo(current-1); });\n  document.getElementById('aboutLbNext').addEventListener('click', function(){ lbGoTo(current+1); });\n\n  document.addEventListener('keydown',function(e){\n    if(!lightbox.classList.contains('open')) return;\n    if(e.key==='Escape')     lbClose();\n    if(e.key==='ArrowRight') lbGoTo(current+1);\n    if(e.key==='ArrowLeft')  lbGoTo(current-1);\n  });\n\n  \/* swipe carousel *\/\n  var cTx=0;\n  carousel.addEventListener('touchstart',function(e){ cTx=e.touches[0].clientX; },{passive:true});\n  carousel.addEventListener('touchend',function(e){\n    var d=cTx-e.changedTouches[0].clientX;\n    if(Math.abs(d)>40) d>0?cGoTo(current+1,1):cGoTo(current-1,-1);\n  });\n\n  \/* swipe lightbox *\/\n  var lbTx=0;\n  document.getElementById('aboutLbFrame').addEventListener('touchstart',function(e){ lbTx=e.touches[0].clientX; },{passive:true});\n  document.getElementById('aboutLbFrame').addEventListener('touchend',function(e){\n    var d=lbTx-e.changedTouches[0].clientX;\n    if(Math.abs(d)>40) d>0?lbGoTo(current+1):lbGoTo(current-1);\n  });\n\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     SCROLL REVEAL + COUNT-UP\n     uses class \"about-anim-in\" (not \"animate-in\")\n     to avoid collision with the History section\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n  var allRevealEls = [];\n\n  \/* hero-level elements: add class directly *\/\n  var heroDirect = [\n    { sel: '.about-eyebrow',          idx: 0 },\n    { sel: '.about-hero-title',       idx: 0 },\n    { sel: '.about-hero-loc',         idx: 0 },\n    { sel: '.about-rule',             idx: 0 },\n    { sel: '.about-hero-lead',        idx: 0 },\n    { sel: '.about-hero-stats',       idx: 0 },\n    { sel: '.about-carousel-wrap',    idx: 0 }\n  ];\n\n  heroDirect.forEach(function(cfg){\n    var els = document.querySelectorAll(cfg.sel);\n    if(els[cfg.idx]) allRevealEls.push({ el: els[cfg.idx], delay: 0 });\n  });\n\n  \/* section header: add class to parent so CSS cascade activates children *\/\n  var sectionHeaders = document.querySelectorAll('.about-section-header');\n  sectionHeaders.forEach(function(sh){\n    allRevealEls.push({ el: sh, delay: 0 });\n  });\n\n  \/* bg cards: staggered *\/\n  document.querySelectorAll('.about-bg-card').forEach(function(card, i){\n    allRevealEls.push({ el: card, delay: i * 120 });\n  });\n\n  \/* count-up state *\/\n  var counted = false;\n\n  function countUp(){\n    if(counted) return;\n    counted = true;\n    document.querySelectorAll('.about-hero-stat-num').forEach(function(el){\n      var raw = el.getAttribute('data-target');\n      var target = parseInt(raw, 10);\n      var suffix = raw.replace(\/[0-9]\/g,'');\n      var duration = 1600;\n      var startTime = null;\n      var idx = Array.from(el.closest('.about-hero-stats').querySelectorAll('.about-hero-stat-num')).indexOf(el);\n      var delay = idx * 200;\n      setTimeout(function(){\n        function step(ts){\n          if(!startTime) startTime = ts;\n          var progress = Math.min((ts - startTime) \/ duration, 1);\n          var eased = 1 - Math.pow(1 - progress, 3);\n          el.textContent = Math.floor(eased * target) + suffix;\n          if(progress < 1) requestAnimationFrame(step);\n          else el.textContent = raw + suffix;\n        }\n        requestAnimationFrame(step);\n      }, delay + 550);\n    });\n  }\n\n  var revealed = [];\n\n  function aboutOnScroll(){\n    var wh = window.innerHeight;\n\n    allRevealEls.forEach(function(item, i){\n      if(revealed[i]) return;\n      if(item.el.getBoundingClientRect().top < wh * 0.88){\n        revealed[i] = true;\n        setTimeout(function(){\n          item.el.classList.add('about-anim-in');\n          \/* trigger count-up when stats become visible *\/\n          if(item.el.classList.contains('about-hero-stats')){\n            countUp();\n          }\n        }, item.delay);\n      }\n    });\n  }\n\n  window.addEventListener('scroll', aboutOnScroll, {passive:true});\n  aboutOnScroll();\n\n  syncUI();\n  resetAuto();\n})();\n<\/script>\n<!-- \/wp:html --><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-uagb-container uagb-block-3e8d55b5 alignfull uagb-is-root-container\"><div class=\"wp-block-bplugins-custom-html\" id='bPluginsCustomHtml-2'>\n<!-- wp:html -->\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,700;1,400&family=Lato:wght@300;400&display=swap');\n\n.hist-section{background:#0b0f1a;padding:90px 40px;font-family:'Lato',sans-serif;position:relative;overflow:hidden;}\n.hist-section::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.4),transparent);}\n.hist-bg-text{position:absolute;right:-20px;top:50%;transform:translateY(-50%);font-family:'Playfair Display',serif;font-size:220px;font-weight:700;color:rgba(201,168,76,0.025);line-height:1;pointer-events:none;user-select:none;white-space:nowrap;}\n.hist-inner{max-width:1100px;margin:0 auto;}\n.hist-header{text-align:center;margin-bottom:70px;}\n\n\/* \u2500\u2500 HEADER ELEMENTS: base state \u2500\u2500 *\/\n.hist-eyebrow{font-size:9px;letter-spacing:5px;text-transform:uppercase;color:#c9a84c;margin-bottom:14px;display:flex;align-items:center;justify-content:center;gap:14px;opacity:0;transform:translateY(15px);transition:opacity 0.6s ease,transform 0.6s ease;}\n.hist-eyebrow::before,.hist-eyebrow::after{content:'';display:block;width:40px;height:1px;background:rgba(201,168,76,0.4);}\n.hist-title{font-family:'Playfair Display',serif;font-size:clamp(26px,3.5vw,42px);font-weight:700;color:#fff;margin-bottom:32px;opacity:0;transform:translateY(20px);transition:opacity 0.7s ease,transform 0.7s ease;}\n.hist-quote{max-width:680px;margin:0 auto;border-left:2px solid rgba(201,168,76,0.35);padding:20px 28px;position:relative;opacity:0;transform:translateY(18px);transition:opacity 0.7s ease,transform 0.7s ease;}\n.hist-quote::before{content:'\\201C';font-family:'Playfair Display',serif;font-size:80px;color:rgba(201,168,76,0.12);position:absolute;top:-10px;left:16px;line-height:1;}\n.hist-quote-text{font-family:'Playfair Display',serif;font-style:italic;font-size:16px;color:rgba(255,255,255,0.6);line-height:1.7;margin-bottom:12px;}\n.hist-quote-attr{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:rgba(201,168,76,0.5);}\n\n\/* \u2500\u2500 HEADER ELEMENTS: activated \u2500\u2500 *\/\n.hist-header.hist-anim-in .hist-eyebrow{opacity:1!important;transform:translateY(0)!important;transition-delay:0.1s;}\n.hist-header.hist-anim-in .hist-title{opacity:1!important;transform:translateY(0)!important;transition-delay:0.2s;}\n.hist-header.hist-anim-in .hist-quote{opacity:1!important;transform:translateY(0)!important;transition-delay:0.35s;}\n\n\/* \u2500\u2500 TIMELINE: base \u2500\u2500 *\/\n.hist-timeline{position:relative;}\n.hist-timeline::before{content:'';position:absolute;left:50%;transform:translateX(-50%) scaleY(0);transform-origin:top;top:0;bottom:0;width:1px;background:linear-gradient(to bottom,transparent,rgba(201,168,76,0.3) 5%,rgba(201,168,76,0.3) 95%,transparent);transition:transform 1.2s ease;}\n\/* \u2500\u2500 TIMELINE: activated \u2500\u2500 *\/\n.hist-timeline.hist-anim-in::before{transform:translateX(-50%) scaleY(1)!important;}\n\n.hist-item{display:grid;grid-template-columns:1fr 60px 1fr;position:relative;}\n.hist-node{display:flex;flex-direction:column;align-items:center;position:relative;z-index:2;padding:10px 0;opacity:0;transform:scale(0.5);transition:opacity 0.5s ease,transform 0.5s ease;}\n.hist-node-dot{width:14px;height:14px;background:#0b0f1a;border:2px solid #c9a84c;border-radius:50%;flex-shrink:0;position:relative;z-index:2;transition:background 0.3s,box-shadow 0.3s;}\n.hist-item:hover .hist-node-dot{background:#c9a84c;box-shadow:0 0 14px rgba(201,168,76,0.35);}\n.hist-node-line{flex:1;width:1px;background:rgba(201,168,76,0.15);}\n.hist-year{font-family:'Playfair Display',serif;font-size:11px;font-weight:700;color:#c9a84c;letter-spacing:2px;text-align:center;white-space:nowrap;margin:6px 0;}\n.hist-item:last-child .hist-node-dot{background:#c9a84c;box-shadow:0 0 12px rgba(201,168,76,0.4);}\n\n\/* \u2500\u2500 NODE: activated \u2500\u2500 *\/\n.hist-item.hist-anim-in .hist-node{opacity:1!important;transform:scale(1)!important;transition-delay:0.15s;}\n\n.hist-card{background:rgba(255,255,255,0.025);border:1px solid rgba(201,168,76,0.1);padding:28px;position:relative;transition:background 0.3s,border-color 0.3s;margin:20px 0;}\n.hist-card:hover{background:rgba(201,168,76,0.04);border-color:rgba(201,168,76,0.2);}\n\n\/* \u2500\u2500 LEFT CARD WRAP: base \u2500\u2500 *\/\n.hist-item.left .hist-card-wrap{grid-column:1;padding-right:28px;opacity:0;transform:translateX(-40px);transition:opacity 0.7s ease,transform 0.7s ease;}\n.hist-item.left .hist-empty{grid-column:3;}\n\/* \u2500\u2500 LEFT CARD WRAP: activated \u2500\u2500 *\/\n.hist-item.left.hist-anim-in .hist-card-wrap{opacity:1!important;transform:translateX(0)!important;}\n\n\/* \u2500\u2500 RIGHT CARD WRAP: base \u2500\u2500 *\/\n.hist-item.right .hist-empty{grid-column:1;}\n.hist-item.right .hist-card-wrap{grid-column:3;padding-left:28px;opacity:0;transform:translateX(40px);transition:opacity 0.7s ease,transform 0.7s ease;}\n\/* \u2500\u2500 RIGHT CARD WRAP: activated \u2500\u2500 *\/\n.hist-item.right.hist-anim-in .hist-card-wrap{opacity:1!important;transform:translateX(0)!important;}\n\n.hist-item.left .hist-card::after{content:'';position:absolute;right:-8px;top:32px;border:7px solid transparent;border-left-color:rgba(201,168,76,0.12);}\n.hist-item.right .hist-card::after{content:'';position:absolute;left:-8px;top:32px;border:7px solid transparent;border-right-color:rgba(201,168,76,0.12);}\n\n\/* card corner accents on hover *\/\n.hist-card::before{content:'';position:absolute;top:10px;left:10px;width:12px;height:12px;border-top:1px solid rgba(201,168,76,0.25);border-left:1px solid rgba(201,168,76,0.25);opacity:0;transition:opacity 0.4s ease;pointer-events:none;}\n.hist-card:hover::before{opacity:1;}\n\n\/* image box \u2014 clickable *\/\n.hist-card-img{width:100%;aspect-ratio:16\/7;border:1px solid rgba(201,168,76,0.1);margin-bottom:18px;position:relative;overflow:hidden;cursor:pointer;}\n.hist-card-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.5s ease,filter 0.5s ease;}\n.hist-card-img:hover img{transform:scale(1.04);filter:brightness(1.05);}\n\n\/* image shimmer on hover *\/\n.hist-card-img::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.06),transparent);z-index:4;pointer-events:none;transition:none;}\n.hist-card-img:hover::before{animation:histShimmer 0.8s ease forwards;}\n@keyframes histShimmer{0%{left:-100%;}100%{left:150%;}}\n\n.hist-card-img-corner{position:absolute;width:14px;height:14px;border-color:rgba(201,168,76,0.3);border-style:solid;z-index:2;opacity:0;transition:opacity 0.4s ease;}\n.hist-card-img:hover .hist-card-img-corner{opacity:1;}\n.hist-card-img-corner.tl{top:0;left:0;border-width:1px 0 0 1px;transition-delay:0s;}\n.hist-card-img-corner.tr{top:0;right:0;border-width:1px 1px 0 0;transition-delay:0.05s;}\n.hist-card-img-corner.bl{bottom:0;left:0;border-width:0 0 1px 1px;transition-delay:0.1s;}\n.hist-card-img-corner.br{bottom:0;right:0;border-width:0 1px 1px 0;transition-delay:0.15s;}\n.hist-card-img-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(11,15,26,0.5);opacity:0;transition:opacity 0.3s;z-index:3;}\n.hist-card-img:hover .hist-card-img-hint{opacity:1;}\n.hist-card-img-hint span{font-size:8px;letter-spacing:3px;text-transform:uppercase;color:#c9a84c;border:1px solid rgba(201,168,76,0.4);padding:7px 14px;font-family:'Lato',sans-serif;}\n\n.hist-card-era{font-size:8px;letter-spacing:3px;text-transform:uppercase;color:rgba(201,168,76,0.5);margin-bottom:10px;}\n.hist-card-title{font-family:'Playfair Display',serif;font-size:18px;font-weight:700;color:#fff;line-height:1.3;margin-bottom:12px;}\n.hist-card-text{font-size:13px;color:rgba(255,255,255,0.5);line-height:1.8;font-weight:300;}\n\n\/* \u2500\u2500 AMBIENT PARTICLES \u2500\u2500 *\/\n.hist-particle{position:absolute;border-radius:50%;background:rgba(201,168,76,0.06);pointer-events:none;z-index:0;}\n.hist-particle:nth-child(1){width:200px;height:200px;top:-60px;left:-80px;animation:histFloat 15s ease-in-out infinite;}\n.hist-particle:nth-child(2){width:140px;height:140px;bottom:-40px;right:3%;animation:histFloat 19s ease-in-out infinite reverse;}\n.hist-particle:nth-child(3){width:90px;height:90px;top:30%;right:-30px;animation:histFloat 12s ease-in-out infinite 2s;}\n.hist-particle:nth-child(4){width:60px;height:60px;bottom:25%;left:5%;animation:histFloat 16s ease-in-out infinite 4s;}\n@keyframes histFloat{\n  0%,100%{transform:translateY(0) scale(1);opacity:0.4;}\n  50%{transform:translateY(-25px) scale(1.1);opacity:0.85;}\n}\n\n\/* \u2500\u2500 BACKGROUND TEXT PULSE \u2500\u2500 *\/\n.hist-bg-text{animation:histBgPulse 8s ease-in-out infinite;}\n@keyframes histBgPulse{\n  0%,100%{opacity:1;transform:translateY(-50%) scale(1);}\n  50%{opacity:0.7;transform:translateY(-50%) scale(1.03);}\n}\n\n\/* \u2500\u2500 SAFETY NET \u2500\u2500 *\/\n@keyframes histFallbackIn{to{opacity:1!important;transform:none!important;}}\n\n\/* fallback: elements that JS never touched get revealed after 2.5s *\/\n.hist-eyebrow:not(.hist-anim-in),\n.hist-title:not(.hist-anim-in),\n.hist-quote:not(.hist-anim-in),\n.hist-node:not(.hist-anim-in),\n.hist-item.left .hist-card-wrap:not(.hist-anim-in),\n.hist-item.right .hist-card-wrap:not(.hist-anim-in){\n  animation:histFallbackIn 0.01s forwards 2.5s;\n}\n\/* Note: the :not() approach above won't work for nested selectors.\n   Use the JS-driven approach below instead. We rely on JS to add .hist-revealed\n   to the section when ANY scroll\/observer fires, which disables all fallbacks. *\/\n.hist-section.hist-revealed .hist-eyebrow,\n.hist-section.hist-revealed .hist-title,\n.hist-section.hist-revealed .hist-quote,\n.hist-section.hist-revealed .hist-node,\n.hist-section.hist-revealed .hist-item.left .hist-card-wrap,\n.hist-section.hist-revealed .hist-item.right .hist-card-wrap,\n.hist-section.hist-revealed .hist-timeline::before{\n  animation:none!important;\n}\n\n\/* \u2500\u2500 LIGHTBOX \u2500\u2500 *\/\n.hlb{position:fixed;inset:0;z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity 0.35s ease;padding:20px;box-sizing:border-box;}\n.hlb.open{opacity:1;pointer-events:all;}\n.hlb-bg{position:absolute;inset:0;background:rgba(5,7,14,0.96);cursor:pointer;backdrop-filter:blur(6px);}\n.hlb-ui{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:14px;transform:scale(0.93) translateY(18px);transition:transform 0.4s ease;}\n.hlb.open .hlb-ui{transform:scale(1) translateY(0);}\n.hlb-close{all:unset!important;position:absolute!important;top:-44px!important;right:0!important;cursor:pointer!important;font-size:9px!important;letter-spacing:3px!important;text-transform:uppercase!important;color:rgba(201,168,76,0.6)!important;font-family:'Lato',sans-serif!important;display:flex!important;align-items:center!important;gap:8px!important;transition:color 0.3s!important;white-space:nowrap!important;}\n.hlb-close:hover{color:#fff!important;}\n.hlb-close svg{width:14px!important;height:14px!important;stroke:currentColor!important;fill:none!important;stroke-width:2!important;display:block!important;}\n.hlb-stage{display:flex;align-items:center;justify-content:center;gap:16px;}\n.hlb-nav{all:unset!important;width:48px!important;height:48px!important;background:rgba(11,15,26,0.92)!important;border:1px solid rgba(201,168,76,0.5)!important;border-radius:0!important;display:flex!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;flex-shrink:0!important;transition:background 0.3s,border-color 0.3s!important;box-shadow:none!important;padding:0!important;margin:0!important;font-size:0!important;box-sizing:border-box!important;}\n.hlb-nav:hover{background:rgba(201,168,76,0.2)!important;border-color:#c9a84c!important;}\n.hlb-nav svg{width:20px!important;height:20px!important;stroke:#c9a84c!important;fill:none!important;stroke-width:2.5!important;display:block!important;}\n.hlb-frame{position:relative;border:1px solid rgba(201,168,76,0.25);overflow:hidden;flex-shrink:0;line-height:0;}\n.hlb-frame img{display:block;max-width:76vw;max-height:74vh;object-fit:contain;transition:opacity 0.25s ease;}\n.hlb-corner{position:absolute;width:20px;height:20px;border-color:rgba(201,168,76,0.5);border-style:solid;pointer-events:none;z-index:2;}\n.hlb-corner.tl{top:-1px;left:-1px;border-width:1px 0 0 1px;}\n.hlb-corner.tr{top:-1px;right:-1px;border-width:1px 1px 0 0;}\n.hlb-corner.bl{bottom:-1px;left:-1px;border-width:0 0 1px 1px;}\n.hlb-corner.br{bottom:-1px;right:-1px;border-width:0 1px 1px 0;}\n.hlb-footer{display:flex;flex-direction:column;align-items:center;gap:10px;}\n.hlb-dots{display:flex;gap:6px;}\n.hlb-dot{width:20px;height:2px;background:rgba(201,168,76,0.2);cursor:pointer;transition:all 0.3s;}\n.hlb-dot.active{background:#c9a84c;width:32px;}\n.hlb-caption{font-size:9px;letter-spacing:3px;text-transform:uppercase;color:rgba(201,168,76,0.45);font-family:'Lato',sans-serif;text-align:center;}\n.hlb-counter{font-size:9px;letter-spacing:2px;color:rgba(201,168,76,0.4);font-family:'Lato',sans-serif;}\n\n@media(max-width:768px){\n  .hist-section{padding:60px 20px;}\n  .hist-timeline::before{left:24px;}\n  .hist-item{grid-template-columns:48px 1fr !important;}\n  .hist-item.left .hist-card-wrap,.hist-item.right .hist-card-wrap{grid-column:2!important;padding-left:20px!important;padding-right:0!important;transform:none!important;}\n  .hist-item.left .hist-empty,.hist-item.right .hist-empty{display:none;}\n  .hist-node{grid-column:1!important;order:-1;}\n  .hist-item.left .hist-card::after,.hist-item.right .hist-card::after{left:-8px!important;right:auto!important;border:7px solid transparent!important;border-right-color:rgba(201,168,76,0.12)!important;border-left-color:transparent!important;}\n  .hist-bg-text{display:none;}\n  .hist-quote{padding:16px 20px;}\n  .hlb-stage{gap:8px;}\n  .hlb-nav{width:36px!important;height:36px!important;}\n  .hlb-frame img{max-width:80vw;max-height:65vh;}\n}\n@media(max-width:480px){\n  .hlb-nav{width:30px!important;height:44px!important;}\n  .hlb-frame img{max-width:88vw;max-height:60vh;}\n  .hlb-stage{gap:4px;}\n}\n<\/style>\n\n<section class=\"hist-section\" id=\"histSection\">\n  <div class=\"hist-particle\"><\/div>\n  <div class=\"hist-particle\"><\/div>\n  <div class=\"hist-particle\"><\/div>\n  <div class=\"hist-particle\"><\/div>\n  <div class=\"hist-bg-text\">1855<\/div>\n  <div class=\"hist-inner\">\n\n    <div class=\"hist-header\">\n      <p class=\"hist-eyebrow\">Our Story<\/p>\n      <h2 class=\"hist-title\">Parish History<\/h2>\n      <div class=\"hist-quote\">\n        <p class=\"hist-quote-text\">From generation to generation, the faith of our forebears has been passed down through the walls of this sacred house.<\/p>\n        <p class=\"hist-quote-attr\">\u2014 Parish Tradition, Diocese of Gumaca<\/p>\n      <\/div>\n    <\/div>\n\n    <div class=\"hist-timeline\">\n\n      <!-- PRE-1813 -->\n      <div class=\"hist-item left\">\n        <div class=\"hist-card-wrap\">\n          <div class=\"hist-card\">\n            <p class=\"hist-card-era\">Pre-1813<\/p>\n            <h3 class=\"hist-card-title\">Image Discovery<\/h3>\n            <div class=\"hist-card-img\" data-hlb-index=\"0\">\n              <img decoding=\"async\" src=\"https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-content\/uploads\/sites\/16\/2026\/06\/449edd0b9d6163dfda4ab4190a69ec64f9236296.jpg\" alt=\"Image Discovery\" loading=\"eager\">\n              <div class=\"hist-card-img-corner tl\"><\/div><div class=\"hist-card-img-corner tr\"><\/div>\n              <div class=\"hist-card-img-corner bl\"><\/div><div class=\"hist-card-img-corner br\"><\/div>\n              <div class=\"hist-card-img-hint\"><span>View Image<\/span><\/div>\n            <\/div>\n            <p class=\"hist-card-text\">A humble fisherman discovered the wooden image of La Inmaculada Concepci\u00f3n de Catanauan half-buried in the muddy shore. That same night, the Virgin Mary appeared to him in a dream, requesting a chapel be built in her honor. This divine encounter sparked the devotion that defines our parish today.<\/p>\n          <\/div>\n        <\/div>\n        <div class=\"hist-node\">\n          <div class=\"hist-node-line\"><\/div>\n          <div class=\"hist-node-dot\"><\/div>\n          <div class=\"hist-year\">Pre<br>1813<\/div>\n          <div class=\"hist-node-line\"><\/div>\n        <\/div>\n        <div class=\"hist-empty\"><\/div>\n      <\/div>\n\n      <!-- 1813 -->\n      <div class=\"hist-item right\">\n        <div class=\"hist-empty\"><\/div>\n        <div class=\"hist-node\">\n          <div class=\"hist-node-line\"><\/div>\n          <div class=\"hist-node-dot\"><\/div>\n          <div class=\"hist-year\">1813<\/div>\n          <div class=\"hist-node-line\"><\/div>\n        <\/div>\n        <div class=\"hist-card-wrap\">\n          <div class=\"hist-card\">\n            <p class=\"hist-card-era\">1813<\/p>\n            <h3 class=\"hist-card-title\">Church Dedication & Early Growth<\/h3>\n            <div class=\"hist-card-img\" data-hlb-index=\"1\">\n              <img decoding=\"async\" src=\"https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-content\/uploads\/sites\/16\/2026\/06\/church-dedication.jpg\" alt=\"Church Dedication\" loading=\"lazy\">\n              <div class=\"hist-card-img-corner tl\"><\/div><div class=\"hist-card-img-corner tr\"><\/div>\n              <div class=\"hist-card-img-corner bl\"><\/div><div class=\"hist-card-img-corner br\"><\/div>\n              <div class=\"hist-card-img-hint\"><span>View Image<\/span><\/div>\n            <\/div>\n            <p class=\"hist-card-text\">Responding to the growing faithful, the small chapel was renovated and strengthened into a proper church, formally dedicated to the Immaculate Conception. By 1855, it achieved full parish status, becoming the spiritual heart of Catanauan and anchor of Catholic life in southern Quezon.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- 1983 -->\n      <div class=\"hist-item left\">\n        <div class=\"hist-card-wrap\">\n          <div class=\"hist-card\">\n            <p class=\"hist-card-era\">1983<\/p>\n            <h3 class=\"hist-card-title\">Diocese of Gumaca Established<\/h3>\n            <div class=\"hist-card-img\" data-hlb-index=\"2\">\n              <img decoding=\"async\" src=\"https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-content\/uploads\/sites\/16\/2026\/06\/Diocese-of-Gumaca-Established.jpg\" alt=\"Diocese of Gumaca Established\" loading=\"lazy\">\n              <div class=\"hist-card-img-corner tl\"><\/div><div class=\"hist-card-img-corner tr\"><\/div>\n              <div class=\"hist-card-img-corner bl\"><\/div><div class=\"hist-card-img-corner br\"><\/div>\n              <div class=\"hist-card-img-hint\"><span>View Image<\/span><\/div>\n            <\/div>\n            <p class=\"hist-card-text\">The Roman Catholic Diocese of Gumaca was erected, placing our parish under Bishop Roy Rudolfo Cimatu's jurisdiction. This strengthened our connection to the broader Church while preserving our unique Marian traditions rooted in the miraculous image.<\/p>\n          <\/div>\n        <\/div>\n        <div class=\"hist-node\">\n          <div class=\"hist-node-line\"><\/div>\n          <div class=\"hist-node-dot\"><\/div>\n          <div class=\"hist-year\">1983<\/div>\n          <div class=\"hist-node-line\"><\/div>\n        <\/div>\n        <div class=\"hist-empty\"><\/div>\n      <\/div>\n\n      <!-- ~2000 -->\n      <div class=\"hist-item right\">\n        <div class=\"hist-empty\"><\/div>\n        <div class=\"hist-node\">\n          <div class=\"hist-node-line\"><\/div>\n          <div class=\"hist-node-dot\"><\/div>\n          <div class=\"hist-year\">~2000<\/div>\n          <div class=\"hist-node-line\"><\/div>\n        <\/div>\n        <div class=\"hist-card-wrap\">\n          <div class=\"hist-card\">\n            <p class=\"hist-card-era\">~2000<\/p>\n            <h3 class=\"hist-card-title\">Earthquake Restoration<\/h3>\n            <div class=\"hist-card-img\" data-hlb-index=\"3\">\n              <img decoding=\"async\" src=\"https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-content\/uploads\/sites\/16\/2026\/06\/Earthquake-Restoration.jpg\" alt=\"Earthquake Restoration\" loading=\"lazy\">\n              <div class=\"hist-card-img-corner tl\"><\/div><div class=\"hist-card-img-corner tr\"><\/div>\n              <div class=\"hist-card-img-corner bl\"><\/div><div class=\"hist-card-img-corner br\"><\/div>\n              <div class=\"hist-card-img-hint\"><span>View Image<\/span><\/div>\n            <\/div>\n            <p class=\"hist-card-text\">A devastating earthquake damaged our beloved church, but under Fr. Gumersindo Hernandez, OP's leadership, the community rallied to restore her beauty. The renovated structure now beautifully preserves our 19th-century colonial architecture for future generations.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- TODAY -->\n      <div class=\"hist-item left\">\n        <div class=\"hist-card-wrap\">\n          <div class=\"hist-card\">\n            <p class=\"hist-card-era\">Today<\/p>\n            <h3 class=\"hist-card-title\">Living Faith in the Digital Age<\/h3>\n            <div class=\"hist-card-img\" data-hlb-index=\"4\">\n              <img decoding=\"async\" src=\"https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-content\/uploads\/sites\/16\/2026\/06\/living-in-digital-age.png\" alt=\"Living Faith in the Digital Age\" loading=\"lazy\">\n              <div class=\"hist-card-img-corner tl\"><\/div><div class=\"hist-card-img-corner tr\"><\/div>\n              <div class=\"hist-card-img-corner bl\"><\/div><div class=\"hist-card-img-corner br\"><\/div>\n              <div class=\"hist-card-img-hint\"><span>View Image<\/span><\/div>\n            <\/div>\n            <p class=\"hist-card-text\">Our parish thrives with daily Holy Masses, livestreamed on Facebook, vibrant feast celebrations on December 8, and sacraments that nourish thousands. The miraculous Virgin continues to draw pilgrims, proving her enduring protection over Catanauan.<\/p>\n          <\/div>\n        <\/div>\n        <div class=\"hist-node\">\n          <div class=\"hist-node-line\"><\/div>\n          <div class=\"hist-node-dot\"><\/div>\n          <div class=\"hist-year\">Today<\/div>\n          <div class=\"hist-node-line\"><\/div>\n        <\/div>\n        <div class=\"hist-empty\"><\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- LIGHTBOX -->\n<div class=\"hlb\" id=\"histLightbox\">\n  <div class=\"hlb-bg\" id=\"histLbBg\"><\/div>\n  <div class=\"hlb-ui\" id=\"histLbUi\">\n    <button class=\"hlb-close\" id=\"histLbClose\">\n      Close <svg viewBox=\"0 0 24 24\"><line x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\/><line x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\/><\/svg>\n    <\/button>\n    <div class=\"hlb-stage\">\n      <button class=\"hlb-nav\" id=\"histLbPrev\">\n        <svg viewBox=\"0 0 24 24\"><polyline points=\"15 18 9 12 15 6\"\/><\/svg>\n      <\/button>\n      <div class=\"hlb-frame\" id=\"histLbFrame\">\n        <img decoding=\"async\" id=\"histLbImg\" src=\"\" alt=\"\">\n        <div class=\"hlb-corner tl\"><\/div>\n        <div class=\"hlb-corner tr\"><\/div>\n        <div class=\"hlb-corner bl\"><\/div>\n        <div class=\"hlb-corner br\"><\/div>\n      <\/div>\n      <button class=\"hlb-nav\" id=\"histLbNext\">\n        <svg viewBox=\"0 0 24 24\"><polyline points=\"9 6 15 12 9 18\"\/><\/svg>\n      <\/button>\n    <\/div>\n    <div class=\"hlb-footer\">\n      <div class=\"hlb-dots\" id=\"histLbDots\"><\/div>\n      <p class=\"hlb-caption\" id=\"histLbCaption\"><\/p>\n      <p class=\"hlb-counter\" id=\"histLbCounter\"><\/p>\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n(function(){\n  var section = document.getElementById('histSection');\n  if(!section) return;\n\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     LIGHTBOX\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n  var slides = [\n    { src:'https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-content\/uploads\/sites\/16\/2026\/06\/449edd0b9d6163dfda4ab4190a69ec64f9236296.jpg', caption:'Pre-1813 \u2014 Image Discovery' },\n    { src:'https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-content\/uploads\/sites\/16\/2026\/06\/church-dedication.jpg', caption:'1813 \u2014 Church Dedication & Early Growth' },\n    { src:'https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-content\/uploads\/sites\/16\/2026\/06\/Diocese-of-Gumaca-Established.jpg', caption:'1983 \u2014 Diocese of Gumaca Established' },\n    { src:'https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-content\/uploads\/sites\/16\/2026\/06\/Earthquake-Restoration.jpg', caption:'~2000 \u2014 Earthquake Restoration' },\n    { src:'https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-content\/uploads\/sites\/16\/2026\/06\/living-in-digital-age.png', caption:'Today \u2014 Living Faith in the Digital Age' }\n  ];\n\n  var current  = 0;\n  var lightbox = document.getElementById('histLightbox');\n  var lbImg    = document.getElementById('histLbImg');\n  var lbCap    = document.getElementById('histLbCaption');\n  var lbCount  = document.getElementById('histLbCounter');\n  var lbDots   = document.getElementById('histLbDots');\n\n  slides.forEach(function(_,i){\n    var d = document.createElement('div');\n    d.className = 'hlb-dot'+(i===0?' active':'');\n    d.addEventListener('click',function(){ hlbGoTo(i); });\n    lbDots.appendChild(d);\n  });\n\n  function syncUI(){\n    lbImg.src = slides[current].src;\n    lbImg.alt = slides[current].caption;\n    lbCap.textContent = slides[current].caption;\n    lbCount.textContent = (current+1)+' \/ '+slides.length;\n    lbDots.querySelectorAll('.hlb-dot').forEach(function(d,i){ d.classList.toggle('active',i===current); });\n  }\n\n  function hlbGoTo(index){\n    lbImg.style.opacity='0';\n    setTimeout(function(){\n      current=(index+slides.length)%slides.length;\n      syncUI();\n      lbImg.style.opacity='1';\n    },220);\n  }\n\n  function hlbOpen(index){\n    current=index;\n    syncUI();\n    lightbox.classList.add('open');\n    document.body.style.overflow='hidden';\n  }\n\n  function hlbClose(){\n    lightbox.classList.remove('open');\n    document.body.style.overflow='';\n  }\n\n  section.querySelectorAll('.hist-card-img[data-hlb-index]').forEach(function(el){\n    el.addEventListener('click',function(){\n      hlbOpen(parseInt(this.getAttribute('data-hlb-index')));\n    });\n  });\n\n  document.getElementById('histLbBg').addEventListener('click',hlbClose);\n  document.getElementById('histLbUi').addEventListener('click',function(e){e.stopPropagation();});\n  document.getElementById('histLbClose').addEventListener('click',hlbClose);\n  document.getElementById('histLbPrev').addEventListener('click',function(){hlbGoTo(current-1);});\n  document.getElementById('histLbNext').addEventListener('click',function(){hlbGoTo(current+1);});\n\n  document.addEventListener('keydown',function(e){\n    if(!lightbox.classList.contains('open')) return;\n    if(e.key==='Escape') hlbClose();\n    if(e.key==='ArrowRight') hlbGoTo(current+1);\n    if(e.key==='ArrowLeft') hlbGoTo(current-1);\n  });\n\n  var tx=0;\n  document.getElementById('histLbFrame').addEventListener('touchstart',function(e){tx=e.touches[0].clientX;},{passive:true});\n  document.getElementById('histLbFrame').addEventListener('touchend',function(e){\n    var d=tx-e.changedTouches[0].clientX;\n    if(Math.abs(d)>40) d>0?hlbGoTo(current+1):hlbGoTo(current-1);\n  });\n\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     SCROLL REVEAL via IntersectionObserver\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n  var header   = section.querySelector('.hist-header');\n  var timeline = section.querySelector('.hist-timeline');\n  var items    = section.querySelectorAll('.hist-item');\n\n  \/* Immediately disable fallback once JS is confirmed running *\/\n  section.classList.add('hist-revealed');\n\n  \/* Build reveal queue: {element, delay} *\/\n  var queue = [];\n\n  if(header)   queue.push({el:header, delay:0});\n  if(timeline) queue.push({el:timeline, delay:0});\n  items.forEach(function(item,i){\n    queue.push({el:item, delay: i * 100});\n  });\n\n  if('IntersectionObserver' in window){\n    var seen = [];\n    queue.forEach(function(){ seen.push(false); });\n\n    var observer = new IntersectionObserver(function(entries){\n      entries.forEach(function(entry){\n        if(!entry.isIntersecting) return;\n        var idx = queue.findIndex(function(q){ return q.el === entry.target; });\n        if(idx === -1 || seen[idx]) return;\n        seen[idx] = true;\n        observer.unobserve(entry.target);\n        setTimeout(function(){\n          entry.target.classList.add('hist-anim-in');\n        }, queue[idx].delay);\n      });\n    },{threshold:0.05, rootMargin:'0px 0px -10% 0px'});\n\n    queue.forEach(function(q){ observer.observe(q.el); });\n  } else {\n    \/* Fallback for ancient browsers: use scroll *\/\n    function histOnScroll(){\n      var wh=window.innerHeight;\n      queue.forEach(function(q,i){\n        if(q.el.classList.contains('hist-anim-in')) return;\n        if(q.el.getBoundingClientRect().top < wh*0.88){\n          setTimeout(function(){ q.el.classList.add('hist-anim-in'); }, q.delay);\n        }\n      });\n    }\n    window.addEventListener('scroll',histOnScroll,{passive:true});\n    histOnScroll();\n  }\n})();\n<\/script>\n<!-- \/wp:html --><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-uagb-container uagb-block-1a6f10ee alignfull uagb-is-root-container\"><div class=\"wp-block-bplugins-custom-html\" id='bPluginsCustomHtml-3'>\n<!-- wp:html -->\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,700;1,400&family=Lato:wght@300;400&display=swap');\n\n.ps-section{background:#0b0f1a;padding:90px 40px;font-family:'Lato',sans-serif;position:relative;overflow:hidden;}\n.ps-section::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,0.4),transparent);}\n.ps-inner{max-width:1100px;margin:0 auto;position:relative;z-index:1;}\n.ps-header{text-align:center;margin-bottom:52px;}\n\n\/* \u2500\u2500 HEADER: base states \u2500\u2500 *\/\n.ps-eyebrow{font-size:9px;letter-spacing:5px;text-transform:uppercase;color:#c9a84c;margin-bottom:14px;display:flex;align-items:center;justify-content:center;gap:14px;opacity:0;transform:translateY(15px);transition:opacity 0.6s ease,transform 0.6s ease;}\n.ps-eyebrow::before,.ps-eyebrow::after{content:'';display:block;width:40px;height:1px;background:rgba(201,168,76,0.4);}\n.ps-title{font-family:'Playfair Display',serif;font-size:clamp(26px,3.5vw,42px);font-weight:700;color:#fff;margin-bottom:8px;opacity:0;transform:translateY(20px);transition:opacity 0.7s ease,transform 0.7s ease;}\n.ps-subtitle{font-family:'Playfair Display',serif;font-style:italic;font-size:15px;color:rgba(201,168,76,0.7);opacity:0;transform:translateY(15px);transition:opacity 0.6s ease,transform 0.6s ease;}\n\n\/* \u2500\u2500 HEADER: activated \u2500\u2500 *\/\n.ps-header.ps-anim-in .ps-eyebrow{opacity:1!important;transform:translateY(0)!important;transition-delay:0.1s;}\n.ps-header.ps-anim-in .ps-title{opacity:1!important;transform:translateY(0)!important;transition-delay:0.2s;}\n.ps-header.ps-anim-in .ps-subtitle{opacity:1!important;transform:translateY(0)!important;transition-delay:0.3s;}\n\n\/* \u2500\u2500 TABS NAV: base + activated \u2500\u2500 *\/\n.ps-tabs-nav{display:flex;gap:1px;background:rgba(201,168,76,0.12);margin-bottom:1px;flex-wrap:wrap;opacity:0;transform:translateY(20px);transition:opacity 0.7s ease,transform 0.7s ease;}\n.ps-tabs-nav.ps-anim-in{opacity:1!important;transform:translateY(0)!important;transition-delay:0.15s;}\n\n\/* tabs nav buttons *\/\n.ps-tab-btn{flex:1;min-width:140px;padding:14px 20px;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:rgba(201,168,76,0.45);font-family:'Lato',sans-serif;background:#0b0f1a;border:none;cursor:pointer;transition:all 0.3s;text-align:center;border-bottom:2px solid transparent;display:flex;align-items:center;justify-content:center;gap:8px;}\n.ps-tab-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.5;flex-shrink:0;}\n.ps-tab-btn:hover{color:#c9a84c;background:rgba(201,168,76,0.04);}\n.ps-tab-btn.active{color:#c9a84c;background:rgba(201,168,76,0.08);border-bottom-color:#c9a84c;}\n\n\/* panels *\/\n.ps-tab-panels{border:1px solid rgba(201,168,76,0.12);opacity:0;transform:translateY(25px);transition:opacity 0.7s ease,transform 0.7s ease;}\n.ps-tab-panels.ps-anim-in{opacity:1!important;transform:translateY(0)!important;transition-delay:0.25s;}\n\n.ps-panel{display:none;padding:44px 40px;background:#0b0f1a;}\n.ps-panel.active{display:block;}\n\n\/* panel entrance animation *\/\n@keyframes psPanelIn{\n  from{opacity:0;transform:translateY(18px);}\n  to{opacity:1;transform:translateY(0);}\n}\n.ps-panel.ps-panel-enter{animation:psPanelIn 0.5s ease forwards;}\n\n.ps-panel-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;}\n.ps-panel-lead{font-size:15px;line-height:1.9;color:rgba(255,255,255,0.6);font-weight:300;margin-bottom:24px;}\n.ps-panel-body{font-size:13.5px;line-height:1.9;color:rgba(255,255,255,0.5);font-weight:300;margin-bottom:20px;}\n.ps-panel-body strong{color:rgba(201,168,76,0.8);font-weight:400;}\n.ps-panel-h3{font-family:'Playfair Display',serif;font-size:20px;font-weight:700;color:#fff;margin-bottom:14px;margin-top:28px;}\n.ps-panel-h3:first-child{margin-top:0;}\n.ps-rule{width:40px;height:1px;background:linear-gradient(90deg,#c9a84c,transparent);margin:20px 0;}\n\n\/* image placeholder *\/\n.ps-img{width:100%;aspect-ratio:3\/4;background:rgba(255,255,255,0.03);border:1px solid rgba(201,168,76,0.15);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;position:relative;overflow:hidden;}\n.ps-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}\n.ps-img-ph{display:flex;flex-direction:column;align-items:center;gap:10px;}\n.ps-img-ph svg{width:32px;height:32px;stroke:rgba(201,168,76,0.2);fill:none;stroke-width:1.5;}\n.ps-img-ph span{font-size:8px;letter-spacing:2px;text-transform:uppercase;color:rgba(201,168,76,0.25);}\n.ps-img-corner{position:absolute;width:16px;height:16px;border-color:rgba(201,168,76,0.3);border-style:solid;}\n.ps-img-corner.tl{top:0;left:0;border-width:1px 0 0 1px;}\n.ps-img-corner.tr{top:0;right:0;border-width:1px 1px 0 0;}\n.ps-img-corner.bl{bottom:0;left:0;border-width:0 0 1px 1px;}\n.ps-img-corner.br{bottom:0;right:0;border-width:0 1px 1px 0;}\n.ps-img-tag{position:absolute;bottom:0;left:0;right:0;background:rgba(11,15,26,0.85);border-top:1px solid rgba(201,168,76,0.15);padding:10px 14px;font-size:8px;letter-spacing:2px;text-transform:uppercase;color:rgba(201,168,76,0.5);}\n\n\/* features *\/\n.ps-features{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;}\n.ps-feature{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;background:rgba(201,168,76,0.04);border:1px solid rgba(201,168,76,0.08);}\n.ps-feature-dot{width:6px;height:6px;border-radius:50%;background:#c9a84c;flex-shrink:0;margin-top:4px;}\n.ps-feature-text{font-size:13px;color:rgba(255,255,255,0.55);line-height:1.6;}\n.ps-feature-text strong{color:rgba(201,168,76,0.8);font-weight:400;}\n\n\/* miracles *\/\n.ps-miracles{display:flex;flex-direction:column;gap:1px;background:rgba(201,168,76,0.1);}\n.ps-miracle{background:#0b0f1a;padding:22px 24px;transition:background 0.3s;}\n.ps-miracle:hover{background:rgba(201,168,76,0.04);}\n.ps-miracle-title{font-family:'Playfair Display',serif;font-size:15px;font-weight:700;color:#fff;margin-bottom:8px;display:flex;align-items:center;gap:10px;}\n.ps-miracle-title::before{content:'';display:block;width:18px;height:1px;background:#c9a84c;flex-shrink:0;}\n.ps-miracle-text{font-size:13px;color:rgba(255,255,255,0.5);line-height:1.75;}\n\n\/* feast *\/\n.ps-feast{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(201,168,76,0.1);margin-top:20px;}\n.ps-feast-item{background:#0b0f1a;padding:20px;transition:background 0.3s;}\n.ps-feast-item:hover{background:rgba(201,168,76,0.04);}\n.ps-feast-icon{width:28px;height:28px;stroke:#c9a84c;fill:none;stroke-width:1.5;margin-bottom:10px;opacity:0.7;}\n.ps-feast-label{font-size:8px;letter-spacing:2px;text-transform:uppercase;color:rgba(201,168,76,0.5);margin-bottom:6px;}\n.ps-feast-text{font-size:13px;color:rgba(255,255,255,0.55);line-height:1.6;}\n\n\/* architecture *\/\n.ps-arch-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(201,168,76,0.1);margin-top:20px;}\n.ps-arch-item{background:#0b0f1a;padding:20px 22px;transition:background 0.3s;}\n.ps-arch-item:hover{background:rgba(201,168,76,0.04);}\n.ps-arch-item-label{font-size:8px;letter-spacing:2px;text-transform:uppercase;color:#c9a84c;margin-bottom:6px;}\n.ps-arch-item-text{font-size:13px;color:rgba(255,255,255,0.5);line-height:1.6;}\n\n\/* priests *\/\n.ps-priest-current{background:rgba(201,168,76,0.05);border:1px solid rgba(201,168,76,0.18);padding:28px;margin-bottom:1px;}\n.ps-priest-badge{font-size:8px;letter-spacing:3px;text-transform:uppercase;color:#c9a84c;margin-bottom:12px;display:flex;align-items:center;gap:8px;}\n.ps-priest-badge::before{content:'';display:block;width:20px;height:1px;background:#c9a84c;}\n.ps-priest-name{font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:#fff;margin-bottom:4px;}\n.ps-priest-role{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:rgba(201,168,76,0.6);margin-bottom:16px;}\n.ps-priest-desc{font-size:13.5px;color:rgba(255,255,255,0.5);line-height:1.85;font-weight:300;}\n.ps-past-priests{display:flex;flex-direction:column;gap:1px;background:rgba(201,168,76,0.1);margin-top:1px;}\n.ps-past-priest{background:#0b0f1a;padding:18px 22px;display:flex;align-items:center;gap:16px;transition:background 0.3s;}\n.ps-past-priest:hover{background:rgba(201,168,76,0.04);}\n.ps-past-priest-icon{width:34px;height:34px;border:1px solid rgba(201,168,76,0.25);display:flex;align-items:center;justify-content:center;flex-shrink:0;}\n.ps-past-priest-icon svg{width:14px;height:14px;stroke:#c9a84c;fill:none;stroke-width:1.5;}\n.ps-past-priest-name{font-family:'Playfair Display',serif;font-size:15px;font-weight:700;color:#fff;margin-bottom:3px;}\n.ps-past-priest-note{font-size:11px;color:rgba(255,255,255,0.35);letter-spacing:1px;}\n\n\/* \u2500\u2500 AMBIENT PARTICLES \u2500\u2500 *\/\n.ps-particle{position:absolute;border-radius:50%;background:rgba(201,168,76,0.06);pointer-events:none;z-index:0;}\n.ps-particle:nth-child(1){width:200px;height:200px;top:-60px;right:-70px;animation:psFloat 15s ease-in-out infinite;}\n.ps-particle:nth-child(2){width:130px;height:130px;bottom:-40px;left:2%;animation:psFloat 19s ease-in-out infinite reverse;}\n.ps-particle:nth-child(3){width:90px;height:90px;top:35%;left:-25px;animation:psFloat 12s ease-in-out infinite 2s;}\n.ps-particle:nth-child(4){width:70px;height:70px;top:15%;right:4%;animation:psFloat 16s ease-in-out infinite 4s;}\n@keyframes psFloat{\n  0%,100%{transform:translateY(0) scale(1);opacity:0.4;}\n  50%{transform:translateY(-25px) scale(1.1);opacity:0.85;}\n}\n\n\/* \u2500\u2500 SAFETY NET \u2500\u2500 *\/\n@keyframes psFallbackIn{to{opacity:1!important;transform:none!important;}}\n.ps-eyebrow,.ps-title,.ps-subtitle,.ps-tabs-nav,.ps-tab-panels{\n  animation:psFallbackIn 0.01s forwards 2.5s;\n}\n.ps-section.ps-revealed .ps-eyebrow,\n.ps-section.ps-revealed .ps-title,\n.ps-section.ps-revealed .ps-subtitle,\n.ps-section.ps-revealed .ps-tabs-nav,\n.ps-section.ps-revealed .ps-tab-panels{\n  animation:none!important;\n}\n\n\/* \u2500\u2500 Mobile \u2500\u2500 *\/\n@media(max-width:900px){\n  .ps-section{padding:60px 20px;}\n  .ps-panel{padding:28px 20px;}\n  .ps-panel-grid{grid-template-columns:1fr;gap:28px;}\n  .ps-tabs-nav{flex-direction:column;gap:1px;}\n  .ps-tab-btn{flex:none;min-width:0;width:100%;padding:14px 20px;font-size:10px;letter-spacing:3px;justify-content:flex-start;border-bottom:none;border-left:2px solid transparent;}\n  .ps-tab-btn.active{border-left-color:#c9a84c;border-bottom-color:transparent;}\n  .ps-feast{grid-template-columns:1fr;}\n  .ps-arch-grid{grid-template-columns:1fr;}\n}\n<\/style>\n\n<section class=\"ps-section\" id=\"psSection\">\n  <div class=\"ps-particle\"><\/div>\n  <div class=\"ps-particle\"><\/div>\n  <div class=\"ps-particle\"><\/div>\n  <div class=\"ps-particle\"><\/div>\n  <div class=\"ps-inner\">\n\n    <div class=\"ps-header\">\n      <p class=\"ps-eyebrow\">The Patron Saint<\/p>\n      <h2 class=\"ps-title\">Our Lady of the Immaculate Conception<\/h2>\n      <p class=\"ps-subtitle\">Life, Devotion & History of Our Patron<\/p>\n    <\/div>\n\n    <div class=\"ps-tabs-nav\" id=\"psTabsNav\">\n      <button class=\"ps-tab-btn active\" data-tab=\"doctrine\">\n        <svg viewBox=\"0 0 24 24\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg>\n        The Doctrine\n      <\/button>\n      <button class=\"ps-tab-btn\" data-tab=\"image\">\n        <svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"8\" r=\"4\"\/><path d=\"M12 14c-5 0-8 2-8 4v1h16v-1c0-2-3-4-8-4z\"\/><\/svg>\n        The Image\n      <\/button>\n      <button class=\"ps-tab-btn\" data-tab=\"miracles\">\n        <svg viewBox=\"0 0 24 24\"><path d=\"M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z\"\/><\/svg>\n        Miracles\n      <\/button>\n      <button class=\"ps-tab-btn\" data-tab=\"feast\">\n        <svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"\/><line x1=\"16\" y1=\"2\" x2=\"16\" y2=\"6\"\/><line x1=\"8\" y1=\"2\" x2=\"8\" y2=\"6\"\/><line x1=\"3\" y1=\"10\" x2=\"21\" y2=\"10\"\/><\/svg>\n        Feast & Devotion\n      <\/button>\n      <button class=\"ps-tab-btn\" data-tab=\"architecture\">\n        <svg viewBox=\"0 0 24 24\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"\/><polyline points=\"9 22 9 12 15 12 15 22\"\/><\/svg>\n        Architecture\n      <\/button>\n      <button class=\"ps-tab-btn\" data-tab=\"leadership\">\n        <svg viewBox=\"0 0 24 24\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>\n        Leadership\n      <\/button>\n    <\/div>\n\n    <div class=\"ps-tab-panels\">\n\n      <!-- DOCTRINE -->\n      <div class=\"ps-panel active\" id=\"ps-doctrine\">\n        <div class=\"ps-panel-grid\">\n          <div>\n            <h3 class=\"ps-panel-h3\">What Is the Immaculate Conception?<\/h3>\n            <div class=\"ps-rule\"><\/div>\n            <p class=\"ps-panel-lead\">The Catholic belief that Mary, the mother of Jesus, was conceived without sin \u2014 proclaimed by <strong>Pope Pius IX in 1854<\/strong>, one year before our parish was established.<\/p>\n            <p class=\"ps-panel-body\">The belief teaches that Mary was preserved from all stain of sin from the first moment of her conception, by the grace of God and in anticipation of Jesus' redemption. This makes her the perfect vessel to bear the Son of God.<\/p>\n            <p class=\"ps-panel-body\">Our parish's dedication to the Immaculate Conception is profoundly timely \u2014 established just one year after the doctrine was officially proclaimed, cementing our community's Marian identity from its very founding.<\/p>\n          <\/div>\n          <div>\n            <div class=\"ps-img\">\n              <div class=\"ps-img-ph\">\n                <svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"1\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/><polyline points=\"21 15 16 10 5 21\"\/><\/svg>\n                <span>Your Image Here<\/span>\n              <\/div>\n              <div class=\"ps-img-corner tl\"><\/div><div class=\"ps-img-corner tr\"><\/div>\n              <div class=\"ps-img-corner bl\"><\/div><div class=\"ps-img-corner br\"><\/div>\n              <div class=\"ps-img-tag\">Immaculate Conception \u2014 Papal Proclamation 1854<\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- IMAGE -->\n      <div class=\"ps-panel\" id=\"ps-image\">\n        <div class=\"ps-panel-grid\">\n          <div>\n            <div class=\"ps-img\" style=\"aspect-ratio:3\/4;\">\n              <div class=\"ps-img-ph\">\n                <svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"1\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/><polyline points=\"21 15 16 10 5 21\"\/><\/svg>\n                <span>Your Image Here<\/span>\n              <\/div>\n              <div class=\"ps-img-corner tl\"><\/div><div class=\"ps-img-corner tr\"><\/div>\n              <div class=\"ps-img-corner bl\"><\/div><div class=\"ps-img-corner br\"><\/div>\n              <div class=\"ps-img-tag\">La Inmaculada Concepci\u00f3n de Catanauan<\/div>\n            <\/div>\n          <\/div>\n          <div>\n            <h3 class=\"ps-panel-h3\">La Inmaculada Concepci\u00f3n de Catanauan<\/h3>\n            <div class=\"ps-rule\"><\/div>\n            <p class=\"ps-panel-body\">A unique, <strong>brown-skinned wooden statue<\/strong> of the Virgin Mary, carved in the <em>de tallado<\/em> (folk Filipino) style, likely from the <strong>17th\u201318th century<\/strong>.<\/p>\n            <h3 class=\"ps-panel-h3\">Distinctive Features<\/h3>\n            <div class=\"ps-features\">\n              <div class=\"ps-feature\"><div class=\"ps-feature-dot\"><\/div><div class=\"ps-feature-text\"><strong>Dark skin tone<\/strong> \u2014 representing Filipino identity<\/div><\/div>\n              <div class=\"ps-feature\"><div class=\"ps-feature-dot\"><\/div><div class=\"ps-feature-text\"><strong>Praying hands<\/strong> \u2014 in a gesture of humility and devotion<\/div><\/div>\n              <div class=\"ps-feature\"><div class=\"ps-feature-dot\"><\/div><div class=\"ps-feature-text\"><strong>Long flowing hair<\/strong><\/div><\/div>\n              <div class=\"ps-feature\"><div class=\"ps-feature-dot\"><\/div><div class=\"ps-feature-text\"><strong>Marian crown<\/strong> with golden halo<\/div><\/div>\n              <div class=\"ps-feature\"><div class=\"ps-feature-dot\"><\/div><div class=\"ps-feature-text\"><strong>White and blue mantle<\/strong> \u2014 traditional Marian colors<\/div><\/div>\n              <div class=\"ps-feature\"><div class=\"ps-feature-dot\"><\/div><div class=\"ps-feature-text\"><strong>Heart emblem<\/strong> on the mantle<\/div><\/div>\n              <div class=\"ps-feature\"><div class=\"ps-feature-dot\"><\/div><div class=\"ps-feature-text\"><strong>Standalone statue<\/strong>, not attached to a wall<\/div><\/div>\n            <\/div>\n            <p class=\"ps-panel-body\">Devotees dress the statue in real clothing, often donated by parishioners over centuries. She is treated with deep personal reverence, as if she were a living member of the community.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- MIRACLES -->\n      <div class=\"ps-panel\" id=\"ps-miracles\">\n        <h3 class=\"ps-panel-h3\">Why Is This Image Miraculous?<\/h3>\n        <div class=\"ps-rule\"><\/div>\n        <p class=\"ps-panel-body\" style=\"max-width:700px;margin-bottom:28px;\">Devotees have reported numerous miracles attributed to La Inmaculada Concepci\u00f3n de Catanauan over centuries. The wooden statue has survived over <strong>300 years<\/strong>, multiple earthquakes, and colonial wars, remaining intact and vibrant despite its age.<\/p>\n        <div class=\"ps-miracles\">\n          <div class=\"ps-miracle\">\n            <div class=\"ps-miracle-title\">Protection from Pirates<\/div>\n            <p class=\"ps-miracle-text\">During the Spanish colonial era, Moro pirates and raiders frequently targeted coastal towns in Quezon. The image is credited with miraculously protecting Catanauan from destruction, as raiders reportedly abandoned their plans before attacking the town.<\/p>\n          <\/div>\n          <div class=\"ps-miracle\">\n            <div class=\"ps-miracle-title\">Protection from Natural Calamities<\/div>\n            <p class=\"ps-miracle-text\">The Virgin has been invoked during storms, floods, and earthquakes, with devotees reporting safe passage and minimal damage when prayers were offered before the image.<\/p>\n          <\/div>\n          <div class=\"ps-miracle\">\n            <div class=\"ps-miracle-title\">Personal Healings<\/div>\n            <p class=\"ps-miracle-text\">Many faithful claim physical and emotional healings after praying before the statue, including recovery from illnesses, resolution of family conflicts, and finding peace in difficult times.<\/p>\n          <\/div>\n          <div class=\"ps-miracle\">\n            <div class=\"ps-miracle-title\">Longevity of the Sacred Image<\/div>\n            <p class=\"ps-miracle-text\">The wooden statue has survived over 300 years, multiple earthquakes, and colonial wars, remaining intact and vibrant despite its age \u2014 a miracle in itself.<\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- FEAST -->\n      <div class=\"ps-panel\" id=\"ps-feast\">\n        <div class=\"ps-panel-grid\">\n          <div>\n            <h3 class=\"ps-panel-h3\">Devotion Through the Ages<\/h3>\n            <div class=\"ps-rule\"><\/div>\n            <p class=\"ps-panel-body\">The image's devotion has been passed down through generations. Each year, <strong>December 8<\/strong> (Feast of the Immaculate Conception) draws thousands of pilgrims from across Quezon and neighboring provinces.<\/p>\n            <h3 class=\"ps-panel-h3\">Feast Day Celebrations<\/h3>\n            <div class=\"ps-feast\">\n              <div class=\"ps-feast-item\">\n                <svg class=\"ps-feast-icon\" viewBox=\"0 0 24 24\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\/><\/svg>\n                <div class=\"ps-feast-label\">Dec 1\u20139<\/div>\n                <div class=\"ps-feast-text\">Nine-day novena prayers leading to the feast<\/div>\n              <\/div>\n              <div class=\"ps-feast-item\">\n                <svg class=\"ps-feast-icon\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>\n                <div class=\"ps-feast-label\">Grand Fiesta<\/div>\n                <div class=\"ps-feast-text\">Food, music, and community gatherings<\/div>\n              <\/div>\n              <div class=\"ps-feast-item\">\n                <svg class=\"ps-feast-icon\" viewBox=\"0 0 24 24\"><path d=\"M11 2h2v7h7v2h-7v11h-2V11H4V9h7V2z\"\/><\/svg>\n                <div class=\"ps-feast-label\">Solemn High Mass<\/div>\n                <div class=\"ps-feast-text\">Presided by bishop or diocesan officials<\/div>\n              <\/div>\n              <div class=\"ps-feast-item\">\n                <svg class=\"ps-feast-icon\" viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"4\"\/><path d=\"M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41\"\/><\/svg>\n                <div class=\"ps-feast-label\">Procession<\/div>\n                <div class=\"ps-feast-text\">Traditional procession through Catanauan's streets<\/div>\n              <\/div>\n              <div class=\"ps-feast-item\">\n                <svg class=\"ps-feast-icon\" viewBox=\"0 0 24 24\"><path d=\"M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9z\"\/><\/svg>\n                <div class=\"ps-feast-label\">Vigil Prayers<\/div>\n                <div class=\"ps-feast-text\">Vigil prayers and midnight Mass on December 8<\/div>\n              <\/div>\n              <div class=\"ps-feast-item\">\n                <svg class=\"ps-feast-icon\" viewBox=\"0 0 24 24\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"\/><\/svg>\n                <div class=\"ps-feast-label\">Pilgrims<\/div>\n                <div class=\"ps-feast-text\">Thousands from Quezon and neighboring provinces<\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n          <div>\n            <div class=\"ps-img\">\n              <div class=\"ps-img-ph\">\n                <svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"1\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/><polyline points=\"21 15 16 10 5 21\"\/><\/svg>\n                <span>Your Image Here<\/span>\n              <\/div>\n              <div class=\"ps-img-corner tl\"><\/div><div class=\"ps-img-corner tr\"><\/div>\n              <div class=\"ps-img-corner bl\"><\/div><div class=\"ps-img-corner br\"><\/div>\n              <div class=\"ps-img-tag\">December 8 \u2014 Feast of the Immaculate Conception<\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- ARCHITECTURE -->\n      <div class=\"ps-panel\" id=\"ps-architecture\">\n        <div class=\"ps-panel-grid\">\n          <div>\n            <h3 class=\"ps-panel-h3\">19th-Century Spanish Colonial Baroque<\/h3>\n            <div class=\"ps-rule\"><\/div>\n            <p class=\"ps-panel-body\">The church building showcases classic Philippine colonial Baroque architecture, designed to withstand earthquakes and tropical weather \u2014 a necessity in the Philippines' active seismic zone.<\/p>\n            <div class=\"ps-arch-grid\">\n              <div class=\"ps-arch-item\">\n                <div class=\"ps-arch-item-label\">Facade<\/div>\n                <div class=\"ps-arch-item-text\">Beige facade with arched windows and entrance<\/div>\n              <\/div>\n              <div class=\"ps-arch-item\">\n                <div class=\"ps-arch-item-label\">Bell Tower<\/div>\n                <div class=\"ps-arch-item-text\">Central bell tower with statue of Virgin Mary above the entrance<\/div>\n              <\/div>\n              <div class=\"ps-arch-item\">\n                <div class=\"ps-arch-item-label\">Altar<\/div>\n                <div class=\"ps-arch-item-text\">Ornate golden altar with crucified Jesus, columns, and floral decorations<\/div>\n              <\/div>\n              <div class=\"ps-arch-item\">\n                <div class=\"ps-arch-item-label\">Ceilings<\/div>\n                <div class=\"ps-arch-item-text\">Vaulted ceilings with painted religious motifs<\/div>\n              <\/div>\n              <div class=\"ps-arch-item\">\n                <div class=\"ps-arch-item-label\">Furnishings<\/div>\n                <div class=\"ps-arch-item-text\">Wooden pews and traditional church furnishings<\/div>\n              <\/div>\n              <div class=\"ps-arch-item\">\n                <div class=\"ps-arch-item-label\">Feast Days<\/div>\n                <div class=\"ps-arch-item-text\">Floral arrangements and lit candles during feast days<\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n          <div>\n            <div class=\"ps-img\">\n              <div class=\"ps-img-ph\">\n                <svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"1\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/><polyline points=\"21 15 16 10 5 21\"\/><\/svg>\n                <span>Your Image Here<\/span>\n              <\/div>\n              <div class=\"ps-img-corner tl\"><\/div><div class=\"ps-img-corner tr\"><\/div>\n              <div class=\"ps-img-corner bl\"><\/div><div class=\"ps-img-corner br\"><\/div>\n              <div class=\"ps-img-tag\">Immaculate Conception Church \u2014 Spanish Colonial Baroque<\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- LEADERSHIP -->\n      <div class=\"ps-panel\" id=\"ps-leadership\">\n        <h3 class=\"ps-panel-h3\">Parish Leadership<\/h3>\n        <div class=\"ps-rule\"><\/div>\n        <div class=\"ps-panel-grid\">\n          <div>\n            <div class=\"ps-priest-current\">\n              <div class=\"ps-priest-badge\">Current Parish Priest<\/div>\n              <div class=\"ps-priest-name\">Rev. Fr. Richard T. Eleazar<\/div>\n              <div class=\"ps-priest-role\">Parish Priest \u00b7 October 2024 \u2013 Present<\/div>\n              <p class=\"ps-priest-desc\">Rev. Fr. Richard T. Eleazar leads the parish community with warmth, accessibility, and active digital engagement. He presides over 11 weekly Masses, conducts sacraments, and livestreams major liturgical events on Facebook. He is known for his pastoral care, confession availability, and youth ministry support.<\/p>\n            <\/div>\n            <div style=\"margin-top:28px;\">\n              <h3 class=\"ps-panel-h3\">Past Parish Priests<\/h3>\n              <div class=\"ps-past-priests\">\n                <div class=\"ps-past-priest\">\n                  <div class=\"ps-past-priest-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M11 2h2v7h7v2h-7v11h-2V11H4V9h7V2z\"\/><\/svg><\/div>\n                  <div>\n                    <div class=\"ps-past-priest-name\">Fr. Gumersindo Hernandez, OP<\/div>\n                    <div class=\"ps-past-priest-note\">Led the post-earthquake restoration (~2000)<\/div>\n                  <\/div>\n                <\/div>\n                <div class=\"ps-past-priest\">\n                  <div class=\"ps-past-priest-icon\"><svg viewBox=\"0 0 24 24\"><path d=\"M11 2h2v7h7v2h-7v11h-2V11H4V9h7V2z\"\/><\/svg><\/div>\n                  <div>\n                    <div class=\"ps-past-priest-name\">Fr. Felix M. Zoleta, OP<\/div>\n                    <div class=\"ps-past-priest-note\">Previously served as parish priest<\/div>\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n          <div>\n            <div class=\"ps-img\">\n              <div class=\"ps-img-ph\">\n                <svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"1\"\/><circle cx=\"8.5\" cy=\"8.5\" r=\"1.5\"\/><polyline points=\"21 15 16 10 5 21\"\/><\/svg>\n                <span>Your Image Here<\/span>\n              <\/div>\n              <div class=\"ps-img-corner tl\"><\/div><div class=\"ps-img-corner tr\"><\/div>\n              <div class=\"ps-img-corner bl\"><\/div><div class=\"ps-img-corner br\"><\/div>\n              <div class=\"ps-img-tag\">Rev. Fr. Richard T. Eleazar \u2014 Parish Priest<\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<script>\n(function(){\n  var section = document.getElementById('psSection');\n  if(!section) return;\n\n  var header    = section.querySelector('.ps-header');\n  var tabsNav   = section.querySelector('.ps-tabs-nav');\n  var tabPanels = section.querySelector('.ps-tab-panels');\n  var btns      = section.querySelectorAll('.ps-tab-btn');\n  var panels    = section.querySelectorAll('.ps-panel');\n\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     PANEL ENTRANCE ANIMATION HELPER\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n  function animatePanel(panel){\n    if(!panel) return;\n    panel.classList.remove('ps-panel-enter');\n    void panel.offsetWidth; \/* force reflow to restart animation *\/\n    panel.classList.add('ps-panel-enter');\n    setTimeout(function(){ panel.classList.remove('ps-panel-enter'); }, 550);\n  }\n\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     TAB SWITCHING\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n  btns.forEach(function(btn){\n    btn.addEventListener('click', function(){\n      var target = this.getAttribute('data-tab');\n      btns.forEach(function(b){ b.classList.remove('active'); });\n      panels.forEach(function(p){ p.classList.remove('active'); });\n      this.classList.add('active');\n      var panel = document.getElementById('ps-'+target);\n      if(panel){\n        panel.classList.add('active');\n        animatePanel(panel);\n      }\n    });\n  });\n\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     SCROLL REVEAL via IntersectionObserver\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n\n  \/* Disable fallback once JS is confirmed running *\/\n  section.classList.add('ps-revealed');\n\n  \/* Build reveal queue *\/\n  var queue = [];\n  if(header)    queue.push({el:header,    delay:0});\n  if(tabsNav)   queue.push({el:tabsNav,   delay:0});\n  if(tabPanels) queue.push({el:tabPanels, delay:0});\n\n  if('IntersectionObserver' in window){\n    var seen = [];\n    queue.forEach(function(){ seen.push(false); });\n\n    var observer = new IntersectionObserver(function(entries){\n      entries.forEach(function(entry){\n        if(!entry.isIntersecting) return;\n        var idx = queue.findIndex(function(q){ return q.el === entry.target; });\n        if(idx === -1 || seen[idx]) return;\n        seen[idx] = true;\n        observer.unobserve(entry.target);\n        setTimeout(function(){\n          entry.target.classList.add('ps-anim-in');\n          \/* When tab-panels becomes visible, animate the currently active panel *\/\n          if(entry.target === tabPanels){\n            var activePanel = tabPanels.querySelector('.ps-panel.active');\n            if(activePanel) animatePanel(activePanel);\n          }\n        }, queue[idx].delay);\n      });\n    },{threshold:0.05, rootMargin:'0px 0px -10% 0px'});\n\n    queue.forEach(function(q){ observer.observe(q.el); });\n  } else {\n    \/* Fallback for ancient browsers *\/\n    function psOnScroll(){\n      var wh = window.innerHeight;\n      queue.forEach(function(q){\n        if(q.el.classList.contains('ps-anim-in')) return;\n        if(q.el.getBoundingClientRect().top < wh * 0.88){\n          setTimeout(function(){\n            q.el.classList.add('ps-anim-in');\n            if(q.el === tabPanels){\n              var activePanel = tabPanels.querySelector('.ps-panel.active');\n              if(activePanel) animatePanel(activePanel);\n            }\n          }, q.delay);\n        }\n      });\n    }\n    window.addEventListener('scroll', psOnScroll, {passive:true});\n    psOnScroll();\n  }\n})();\n<\/script>\n<!-- \/wp:html --><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-uagb-container uagb-block-61fa3800 alignfull uagb-is-root-container\"><div class=\"wp-block-bplugins-custom-html\" id='bPluginsCustomHtml-4'>\n<!-- wp:html -->\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,700;1,400&family=Lato:wght@300;400&display=swap');\n\n.ps-rest-section {\n  background: #0b0f1a;\n  padding: 120px 40px;\n  font-family: 'Lato', sans-serif;\n  position: relative;\n  overflow: hidden;\n  text-align: center;\n}\n.ps-rest-section::before {\n  content: '';\n  position: absolute;\n  top: 0; left: 0; right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.4), transparent);\n}\n.ps-rest-section::after {\n  content: '';\n  position: absolute;\n  bottom: 0; left: 0; right: 0;\n  height: 1px;\n  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.4), transparent);\n}\n\n\/* \u2500\u2500 church bg \u2500\u2500 *\/\n.ps-church-bg {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n  z-index: 0;\n  overflow: hidden;\n}\n\n.ps-church-floor {\n  position: absolute;\n  bottom: 0; left: 0; right: 0;\n  height: 35%;\n  background: linear-gradient(to top, rgba(201,168,76,0.03) 0%, transparent 100%);\n}\n\n.ps-church-nave {\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 60%;\n  max-width: 700px;\n  height: 100%;\n  border-left: 1px solid rgba(201,168,76,0.06);\n  border-right: 1px solid rgba(201,168,76,0.06);\n  background: linear-gradient(to bottom, transparent 0%, transparent 20%, rgba(201,168,76,0.015) 100%);\n}\n\n.ps-church-arch {\n  position: absolute;\n  width: 36px;\n  border: 1px solid rgba(201,168,76,0.08);\n  border-radius: 50% 50% 0 0 \/ 60% 60% 0 0;\n  background: linear-gradient(to bottom, rgba(201,168,76,0.04) 0%, rgba(201,168,76,0.01) 60%, transparent 100%);\n}\n.ps-church-arch.l1 { left: 14%; bottom: 22%; height: 38%; }\n.ps-church-arch.l2 { left: 22%; bottom: 18%; height: 34%; }\n.ps-church-arch.r1 { right: 14%; bottom: 22%; height: 38%; }\n.ps-church-arch.r2 { right: 22%; bottom: 18%; height: 34%; }\n\n.ps-church-arch-center {\n  position: absolute;\n  left: 50%;\n  bottom: 15%;\n  transform: translateX(-50%);\n  width: 56px;\n  height: 52%;\n  border: 1px solid rgba(201,168,76,0.1);\n  border-radius: 50% 50% 0 0 \/ 55% 55% 0 0;\n  background: linear-gradient(to bottom, rgba(201,168,76,0.06) 0%, rgba(201,168,76,0.02) 50%, transparent 100%);\n}\n\n.ps-rose-window {\n  position: absolute;\n  top: 8%;\n  left: 50%;\n  transform: translateX(-50%);\n  width: 100px;\n  height: 100px;\n  border-radius: 50%;\n  border: 1px solid rgba(201,168,76,0.1);\n  background: radial-gradient(circle, rgba(201,168,76,0.06) 0%, rgba(201,168,76,0.02) 50%, transparent 70%);\n}\n.ps-rose-window::before {\n  content: '';\n  position: absolute;\n  top: 50%; left: 50%;\n  transform: translate(-50%, -50%);\n  width: 54px; height: 54px;\n  border-radius: 50%;\n  border: 1px solid rgba(201,168,76,0.07);\n}\n.ps-rose-window::after {\n  content: '';\n  position: absolute;\n  top: 50%; left: 50%;\n  transform: translate(-50%, -50%);\n  width: 24px; height: 24px;\n  border-radius: 50%;\n  border: 1px solid rgba(201,168,76,0.08);\n  background: rgba(201,168,76,0.04);\n}\n\n.ps-rose-petal { position: absolute; background: rgba(201,168,76,0.05); }\n.ps-rose-petal.v { top: 15%; left: 50%; width: 1px; height: 70%; transform: translateX(-50%); }\n.ps-rose-petal.h { top: 50%; left: 15%; width: 70%; height: 1px; transform: translateY(-50%); }\n.ps-rose-petal.d1 { top: 50%; left: 50%; width: 70%; height: 1px; transform: translate(-50%,-50%) rotate(45deg); }\n.ps-rose-petal.d2 { top: 50%; left: 50%; width: 70%; height: 1px; transform: translate(-50%,-50%) rotate(-45deg); }\n\n.ps-light-beam {\n  position: absolute;\n  top: 18%; left: 50%;\n  width: 200px; height: 85%;\n  transform: translateX(-50%);\n  background: linear-gradient(to bottom, rgba(201,168,76,0.035) 0%, rgba(201,168,76,0.01) 40%, transparent 80%);\n  clip-path: polygon(40% 0%, 60% 0%, 100% 100%, 0% 100%);\n}\n\n.ps-light-beam-side {\n  position: absolute;\n  top: 25%;\n  width: 60px; height: 70%;\n  background: linear-gradient(to bottom, rgba(201,168,76,0.025) 0%, rgba(201,168,76,0.008) 50%, transparent 100%);\n}\n.ps-light-beam-side.left { left: 16%; clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%); }\n.ps-light-beam-side.right { right: 16%; clip-path: polygon(30% 0%, 70% 0%, 100% 100%, 0% 100%); }\n\n.ps-pillar {\n  position: absolute;\n  bottom: 0;\n  width: 1px;\n  background: linear-gradient(to top, rgba(201,168,76,0.06) 0%, rgba(201,168,76,0.02) 60%, transparent 100%);\n}\n.ps-pillar.p1 { left: 30%; height: 75%; }\n.ps-pillar.p2 { left: 38%; height: 80%; }\n.ps-pillar.p3 { right: 30%; height: 75%; }\n.ps-pillar.p4 { right: 38%; height: 80%; }\n\n.ps-vault {\n  position: absolute;\n  top: 0; left: 50%;\n  transform: translateX(-50%);\n  width: 70%;\n  max-width: 800px;\n  height: 20%;\n  border: 1px solid rgba(201,168,76,0.04);\n  border-radius: 0 0 50% 50% \/ 0 0 100% 100%;\n  border-top: none;\n}\n\n.ps-dust {\n  position: absolute;\n  width: 3px; height: 3px;\n  border-radius: 50%;\n  background: rgba(201,168,76,0.15);\n  animation: psDustFloat linear infinite;\n}\n@keyframes psDustFloat {\n  0%   { opacity: 0; transform: translateY(0) translateX(0); }\n  20%  { opacity: 0.4; }\n  80%  { opacity: 0.2; }\n  100% { opacity: 0; transform: translateY(-200px) translateX(30px); }\n}\n\n.ps-rest-vignette {\n  position: absolute;\n  inset: 0;\n  background: radial-gradient(ellipse at center, transparent 30%, #0b0f1a 85%);\n  pointer-events: none;\n  z-index: 0;\n}\n\n.ps-rest-inner {\n  max-width: 720px;\n  margin: 0 auto;\n  position: relative;\n  z-index: 1;\n}\n\n\/* \u2500\u2500 CROSS: base + activated \u2500\u2500 *\/\n.ps-rest-cross {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 36px;\n  opacity: 0;\n  transform: translateY(18px);\n  transition: opacity 0.6s ease, transform 0.6s ease;\n}\n.ps-rest-cross.ps-anim-in {\n  opacity: 1 !important;\n  transform: translateY(0) !important;\n  transition-delay: 0.1s;\n}\n.ps-rest-cross svg {\n  width: 28px; height: 28px;\n  stroke: #c9a84c; fill: none;\n  stroke-width: 1; opacity: 0.5;\n}\n.ps-rest-cross-line {\n  width: 60px; height: 1px;\n  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.3));\n}\n.ps-rest-cross-line:last-child {\n  background: linear-gradient(90deg, rgba(201,168,76,0.3), transparent);\n}\n.ps-rest-cross-line:first-child { margin-right: 20px; }\n.ps-rest-cross-line:last-child { margin-left: 20px; }\n\n\/* \u2500\u2500 QMARK: base + activated \u2500\u2500 *\/\n.ps-rest-qmark {\n  font-family: 'Playfair Display', serif;\n  font-size: 80px; line-height: 1;\n  color: rgba(201,168,76,0.12);\n  margin-bottom: -10px;\n  user-select: none;\n  opacity: 0;\n  transform: translateY(22px) scale(0.85);\n  transition: opacity 0.7s ease, transform 0.7s ease;\n}\n.ps-rest-qmark.ps-anim-in {\n  opacity: 1 !important;\n  transform: translateY(0) scale(1) !important;\n  transition-delay: 0.2s;\n}\n\n\/* \u2500\u2500 QUOTE: base + activated \u2500\u2500 *\/\n.ps-rest-quote {\n  font-family: 'Playfair Display', serif;\n  font-style: italic;\n  font-size: clamp(20px, 3vw, 30px);\n  font-weight: 400;\n  color: #fff;\n  line-height: 1.65;\n  margin-bottom: 20px;\n  letter-spacing: 0.3px;\n  opacity: 0;\n  transform: translateY(22px);\n  transition: opacity 0.8s ease, transform 0.8s ease;\n}\n.ps-rest-quote.ps-anim-in {\n  opacity: 1 !important;\n  transform: translateY(0) !important;\n  transition-delay: 0.35s;\n}\n\n\/* \u2500\u2500 REF: base + activated \u2500\u2500 *\/\n.ps-rest-ref {\n  font-family: 'Lato', sans-serif;\n  font-size: 10px;\n  letter-spacing: 4px;\n  text-transform: uppercase;\n  color: rgba(201,168,76,0.6);\n  margin-bottom: 52px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 14px;\n  opacity: 0;\n  transform: translateY(15px);\n  transition: opacity 0.6s ease, transform 0.6s ease;\n}\n.ps-rest-ref::before,\n.ps-rest-ref::after {\n  content: '';\n  display: block;\n  width: 30px; height: 1px;\n  background: rgba(201,168,76,0.25);\n}\n.ps-rest-ref.ps-anim-in {\n  opacity: 1 !important;\n  transform: translateY(0) !important;\n  transition-delay: 0.5s;\n}\n\n\/* \u2500\u2500 BUTTONS: base + activated \u2500\u2500 *\/\n.ps-rest-buttons {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 12px;\n  flex-wrap: wrap;\n  opacity: 0;\n  transform: translateY(18px);\n  transition: opacity 0.7s ease, transform 0.7s ease;\n}\n.ps-rest-buttons.ps-anim-in {\n  opacity: 1 !important;\n  transform: translateY(0) !important;\n  transition-delay: 0.6s;\n}\n\n.ps-rest-btn {\n  display: inline-block;\n  padding: 12px 30px;\n  font-family: 'Lato', sans-serif;\n  font-size: 10px;\n  letter-spacing: 3px;\n  text-transform: uppercase;\n  text-decoration: none !important;\n  cursor: pointer;\n  transition: background 0.3s, color 0.3s, border-color 0.3s, letter-spacing 0.3s;\n}\n.ps-rest-btn-primary {\n  border: 1px solid rgba(201,168,76,0.7);\n  background: rgba(201,168,76,0.12);\n  color: #e8d08a;\n}\n.ps-rest-btn-primary:hover {\n  background: rgba(201,168,76,0.28);\n  color: #fff;\n  letter-spacing: 0.2em;\n}\n.ps-rest-btn-secondary {\n  border: 1px solid rgba(255,255,255,0.25);\n  background: transparent;\n  color: rgba(255,255,255,0.75);\n}\n.ps-rest-btn-secondary:hover {\n  background: rgba(255,255,255,0.08);\n  color: #fff;\n  letter-spacing: 0.2em;\n}\n\n\/* \u2500\u2500 SAFETY NET \u2500\u2500 *\/\n@keyframes psrFallbackIn{to{opacity:1!important;transform:none!important;}}\n.ps-rest-cross,.ps-rest-qmark,.ps-rest-quote,.ps-rest-ref,.ps-rest-buttons{\n  animation:psrFallbackIn 0.01s forwards 2.5s;\n}\n.ps-rest-section.ps-revealed .ps-rest-cross,\n.ps-rest-section.ps-revealed .ps-rest-qmark,\n.ps-rest-section.ps-revealed .ps-rest-quote,\n.ps-rest-section.ps-revealed .ps-rest-ref,\n.ps-rest-section.ps-revealed .ps-rest-buttons{\n  animation:none!important;\n}\n\n@media (max-width: 600px) {\n  .ps-rest-section { padding: 80px 24px; }\n  .ps-rest-buttons { flex-direction: column; gap: 10px; }\n  .ps-rest-btn { width: 100%; text-align: center; padding: 14px 28px; }\n  .ps-rest-qmark { font-size: 60px; }\n  .ps-church-arch.l1, .ps-church-arch.r1 { width: 24px; }\n  .ps-church-arch.l2, .ps-church-arch.r2 { width: 24px; }\n  .ps-rose-window { width: 70px; height: 70px; }\n  .ps-rose-window::before { width: 38px; height: 38px; }\n  .ps-rose-window::after { width: 16px; height: 16px; }\n  .ps-church-arch-center { width: 40px; }\n}\n<\/style>\n\n<section class=\"ps-rest-section\" id=\"psRestSection\">\n\n  <div class=\"ps-church-bg\">\n    <div class=\"ps-church-floor\"><\/div>\n    <div class=\"ps-vault\"><\/div>\n    <div class=\"ps-church-nave\"><\/div>\n    <div class=\"ps-pillar p1\"><\/div>\n    <div class=\"ps-pillar p2\"><\/div>\n    <div class=\"ps-pillar p3\"><\/div>\n    <div class=\"ps-pillar p4\"><\/div>\n    <div class=\"ps-church-arch l1\"><\/div>\n    <div class=\"ps-church-arch l2\"><\/div>\n    <div class=\"ps-church-arch r1\"><\/div>\n    <div class=\"ps-church-arch r2\"><\/div>\n    <div class=\"ps-church-arch-center\"><\/div>\n    <div class=\"ps-rose-window\">\n      <div class=\"ps-rose-petal v\"><\/div>\n      <div class=\"ps-rose-petal h\"><\/div>\n      <div class=\"ps-rose-petal d1\"><\/div>\n      <div class=\"ps-rose-petal d2\"><\/div>\n    <\/div>\n    <div class=\"ps-light-beam\"><\/div>\n    <div class=\"ps-light-beam-side left\"><\/div>\n    <div class=\"ps-light-beam-side right\"><\/div>\n    <div class=\"ps-dust\" style=\"left:25%;top:55%;animation-duration:8s;\"><\/div>\n    <div class=\"ps-dust\" style=\"left:40%;top:65%;animation-duration:10s;animation-delay:2s;\"><\/div>\n    <div class=\"ps-dust\" style=\"left:55%;top:50%;animation-duration:9s;animation-delay:4s;\"><\/div>\n    <div class=\"ps-dust\" style=\"left:68%;top:60%;animation-duration:11s;animation-delay:1s;\"><\/div>\n    <div class=\"ps-dust\" style=\"left:35%;top:70%;animation-duration:7s;animation-delay:3s;\"><\/div>\n    <div class=\"ps-dust\" style=\"left:60%;top:58%;animation-duration:12s;animation-delay:5s;\"><\/div>\n  <\/div>\n\n  <div class=\"ps-rest-vignette\"><\/div>\n\n  <div class=\"ps-rest-inner\">\n\n    <div class=\"ps-rest-cross\">\n      <span class=\"ps-rest-cross-line\"><\/span>\n      <svg viewBox=\"0 0 24 24\"><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"22\"\/><line x1=\"6\" y1=\"8\" x2=\"18\" y2=\"8\"\/><\/svg>\n      <span class=\"ps-rest-cross-line\"><\/span>\n    <\/div>\n\n    <div class=\"ps-rest-qmark\">&ldquo;<\/div>\n\n    <p class=\"ps-rest-quote\">\n      Come to me, all who are weary and burdened,<br>and I will give you rest.\n    <\/p>\n\n    <p class=\"ps-rest-ref\">Matthew 11:28<\/p>\n\n    <div class=\"ps-rest-buttons\">\n      <a href=\"https:\/\/demo2.yinwoodweb.com\/catanauan1\/donate\/\" class=\"ps-rest-btn ps-rest-btn-primary\">Donate<\/a>\n      <a href=\"https:\/\/demo2.yinwoodweb.com\/catanauan1\/contact-us\/\" class=\"ps-rest-btn ps-rest-btn-secondary\">Contact Us<\/a>\n    <\/div>\n\n  <\/div>\n<\/section>\n\n<script>\n(function(){\n  var section = document.getElementById('psRestSection');\n  if(!section) return;\n\n  \/* Build reveal queue with staggered delays *\/\n  var queue = [\n    { el: section.querySelector('.ps-rest-cross'),     delay: 0   },\n    { el: section.querySelector('.ps-rest-qmark'),      delay: 0   },\n    { el: section.querySelector('.ps-rest-quote'),      delay: 0   },\n    { el: section.querySelector('.ps-rest-ref'),        delay: 0   },\n    { el: section.querySelector('.ps-rest-buttons'),    delay: 0   }\n  ].filter(function(q){ return q.el !== null; });\n\n  \/* Disable fallback once JS is confirmed running *\/\n  section.classList.add('ps-revealed');\n\n  if('IntersectionObserver' in window){\n    var seen = [];\n    queue.forEach(function(){ seen.push(false); });\n\n    var observer = new IntersectionObserver(function(entries){\n      entries.forEach(function(entry){\n        if(!entry.isIntersecting) return;\n        var idx = queue.findIndex(function(q){ return q.el === entry.target; });\n        if(idx === -1 || seen[idx]) return;\n        seen[idx] = true;\n        observer.unobserve(entry.target);\n        setTimeout(function(){\n          entry.target.classList.add('ps-anim-in');\n        }, queue[idx].delay);\n      });\n    },{threshold:0.05, rootMargin:'0px 0px -10% 0px'});\n\n    queue.forEach(function(q){ observer.observe(q.el); });\n  } else {\n    \/* Fallback for ancient browsers *\/\n    function psrOnScroll(){\n      var wh = window.innerHeight;\n      queue.forEach(function(q){\n        if(q.el.classList.contains('ps-anim-in')) return;\n        if(q.el.getBoundingClientRect().top < wh * 0.88){\n          setTimeout(function(){ q.el.classList.add('ps-anim-in'); }, q.delay);\n        }\n      });\n    }\n    window.addEventListener('scroll', psrOnScroll, {passive:true});\n    psrOnScroll();\n  }\n})();\n<\/script>\n<!-- \/wp:html --><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"slim_seo":{"title":"About - Immaculate Conception Parish","description":""},"footnotes":""},"class_list":["post-18","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Yin Wood","author_link":"https:\/\/demo2.yinwoodweb.com\/catanauan1\/blogs\/author\/phwpywadsa623\/"},"uagb_comment_info":0,"uagb_excerpt":null,"_links":{"self":[{"href":"https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-json\/wp\/v2\/pages\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-json\/wp\/v2\/comments?post=18"}],"version-history":[{"count":203,"href":"https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-json\/wp\/v2\/pages\/18\/revisions"}],"predecessor-version":[{"id":1479,"href":"https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-json\/wp\/v2\/pages\/18\/revisions\/1479"}],"wp:attachment":[{"href":"https:\/\/demo2.yinwoodweb.com\/catanauan1\/wp-json\/wp\/v2\/media?parent=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}