/* Christmas 2026 hero — lakepointe.church/christmas */
@font-face{font-family:"Neue Haas Display";src:url("fonts/neue-haas-display-roman.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Haas Display";src:url("fonts/neue-haas-display-medium.woff2") format("woff2");font-weight:500 600;font-style:normal;font-display:swap}
.lpx-hero{--green:#2D443C;--cream:#F6E9DB;--gold:#B7946A;--ox:#641D19;--red:#984641;
  position:relative;isolation:isolate;overflow:hidden;background:var(--green);color:var(--cream);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:clamp(40px,6vh,72px) 24px 0;font-family:"Neue Haas Display","neue-haas-grotesk-display",Inter,system-ui,sans-serif}
.lpx-hero *{box-sizing:border-box}
.lpx-top{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;gap:22px;max-width:900px;width:100%}
.lpx-logo-slot{width:min(720px,90vw);aspect-ratio:1500/622}
.lpx-logo{width:100%;height:auto;display:block;overflow:visible}
.lpx-logo .cls-1{fill:#F3E7D8}.lpx-logo .cls-2{fill:var(--red)}.lpx-logo .cls-3{fill:var(--gold)}
.lpx-logo--img{opacity:0;transform:scale(.94);animation:lpxPlate .9s cubic-bezier(.2,.7,.2,1) .4s forwards;filter:drop-shadow(0 8px 18px rgba(0,0,0,.25))}
.lpx-sub{margin:0;font-size:clamp(17px,1.6vw,22px);letter-spacing:.04em;font-weight:500;color:var(--cream)}
.lpx-ctas{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;margin-top:18px}
.lpx-hero .lpx-btn--event{position:relative;overflow:hidden;flex-direction:column;gap:4px;min-height:80px;min-width:260px;padding:16px 38px;line-height:1.1;
  border:2px solid var(--gold);color:var(--cream);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.lpx-hero .lpx-btn--event::before{content:"";position:absolute;inset:0;background:url("img/noise-512.jpg") 0 0/256px repeat;mix-blend-mode:soft-light;opacity:.9;pointer-events:none}
.lpx-hero .lpx-btn--event::after{content:"";position:absolute;inset:0;background:url("img/cardstock-2000.jpg") center/cover;mix-blend-mode:color-burn;opacity:.35;pointer-events:none}
.lpx-hero .lpx-btn--event>span{position:relative;z-index:1}
.lpx-hero a.lpx-btn.lpx-btn--event{border:2px solid #CDAE7E} /* outranks the generic .lpx-btn border; brighter gold reads over the textured fill */
.lpx-hero .lpx-btn--blue{background:#324358}
.lpx-hero .lpx-btn--green{background:#2D443C}
.lpx-hero .lpx-btn--blue:hover{background:#3b5069;color:var(--cream)}
.lpx-hero .lpx-btn--green:hover{background:#375448;color:var(--cream)}
.lpx-hero .lpx-btn.lpx-btn--event{min-height:84px;padding:18px 64px;min-width:300px;font-size:18px}
.lpx-btn-title{font-size:19px;font-weight:600;letter-spacing:.12em}
.lpx-btn-sub{font-size:12px;font-weight:500;letter-spacing:.18em;color:var(--gold)}
.lpx-hero .lpx-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:4px;
  font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:1.5px solid transparent;transition:background .2s,color .2s}
.lpx-hero .lpx-btn--solid{background:var(--cream);color:var(--green);border-color:var(--cream)}
.lpx-hero .lpx-btn--solid:hover{background:#fff;color:var(--green)}
.lpx-hero .lpx-btn--ghost{color:var(--cream);border-color:var(--gold);background:transparent}
.lpx-hero .lpx-btn--ghost:hover{background:rgba(246,233,219,.1);color:var(--cream)}
.lpx-stage{position:relative;z-index:1;pointer-events:none;width:100%;margin-top:clamp(-150px,-8vw,-40px);aspect-ratio:5434/2472;overflow:hidden}
@media (min-width:1000px){.lpx-stage{aspect-ratio:5434/1950}} /* desktop: trim the foreground so the finder sits near the fold */
.lpx-stage::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none}
.lpx-skyline{position:absolute;left:0;right:0;bottom:0;top:0} /* no overflow clip: the figures rise above this box on wide screens */
.lpx-skyline::before{content:"";position:absolute;inset:0;background:var(--cream)}
.lpx-scenebox{position:absolute;bottom:0;left:0;aspect-ratio:5434/2472} /* sized by hero.js to cover the skyline */
.lpx-scene{position:absolute;inset:0;width:100%;height:100%;display:block}
.lpx-mj-wrap{position:absolute;left:5.815%;top:9.223%;width:29.242%;aspect-ratio:1589/1062} /* exact footprint cut from the scene */
.lpx-mj{position:absolute;inset:0;width:100%;height:100%;display:block}
.lpx-star{position:absolute;right:11%;top:16%;width:clamp(40px,5vw,72px);height:auto;overflow:visible;filter:drop-shadow(0 0 14px rgba(246,233,219,.55))}
.lpx-star path{fill:var(--cream)}
.lpx-tex{position:absolute;inset:0;z-index:3;pointer-events:none;background-repeat:repeat}
.lpx-tex--noise{background-image:url("img/noise-512.jpg");background-size:512px;mix-blend-mode:soft-light;opacity:.9}
.lpx-tex--card{background-image:url("img/cardstock-2000.jpg");background-size:cover;mix-blend-mode:color-burn;opacity:.45}
.lpx-tex--sketch{background-image:url("img/sketch-2000.jpg");background-size:140%;background-position:center;mix-blend-mode:multiply;opacity:.22}
/* timeline */
.lpx-logo .cls-1,.lpx-logo .cls-3{opacity:0;transform-origin:50% 50%;animation:lpxPlate .9s cubic-bezier(.2,.7,.2,1) .2s forwards}
.lpx-logo .cls-2{opacity:0;transform:translateY(14px);animation:lpxLetter .55s cubic-bezier(.2,.7,.2,1) forwards}
.lpx-logo .cls-2:nth-of-type(1){animation-delay:0.550s}.lpx-logo .cls-2:nth-of-type(2){animation-delay:0.595s}.lpx-logo .cls-2:nth-of-type(3){animation-delay:0.640s}.lpx-logo .cls-2:nth-of-type(4){animation-delay:0.685s}.lpx-logo .cls-2:nth-of-type(5){animation-delay:0.730s}.lpx-logo .cls-2:nth-of-type(6){animation-delay:0.775s}.lpx-logo .cls-2:nth-of-type(7){animation-delay:0.820s}.lpx-logo .cls-2:nth-of-type(8){animation-delay:0.865s}.lpx-logo .cls-2:nth-of-type(9){animation-delay:0.910s}.lpx-logo .cls-2:nth-of-type(10){animation-delay:0.955s}.lpx-logo .cls-2:nth-of-type(11){animation-delay:1.000s}.lpx-logo .cls-2:nth-of-type(12){animation-delay:1.045s}.lpx-logo .cls-2:nth-of-type(13){animation-delay:1.090s}.lpx-logo .cls-2:nth-of-type(14){animation-delay:1.135s}.lpx-logo .cls-2:nth-of-type(15){animation-delay:1.180s}.lpx-logo .cls-2:nth-of-type(16){animation-delay:1.225s}.lpx-logo .cls-2:nth-of-type(17){animation-delay:1.270s}.lpx-logo .cls-2:nth-of-type(18){animation-delay:1.315s}.lpx-logo .cls-2:nth-of-type(19){animation-delay:1.360s}.lpx-logo .cls-2:nth-of-type(20){animation-delay:1.405s}.lpx-logo .cls-2:nth-of-type(21){animation-delay:1.450s}.lpx-logo .cls-2:nth-of-type(22){animation-delay:1.495s}.lpx-logo .cls-2:nth-of-type(23){animation-delay:1.540s}.lpx-logo .cls-2:nth-of-type(24){animation-delay:1.585s}.lpx-logo .cls-2:nth-of-type(25){animation-delay:1.630s}.lpx-logo .cls-2:nth-of-type(26){animation-delay:1.675s}.lpx-logo .cls-2:nth-of-type(27){animation-delay:1.720s}.lpx-logo .cls-2:nth-of-type(28){animation-delay:1.765s}.lpx-logo .cls-2:nth-of-type(29){animation-delay:1.810s}.lpx-logo .cls-2:nth-of-type(30){animation-delay:1.855s}.lpx-logo .cls-2:nth-of-type(31){animation-delay:1.900s}.lpx-logo .cls-2:nth-of-type(32){animation-delay:1.945s}.lpx-logo .cls-2:nth-of-type(33){animation-delay:1.990s}.lpx-logo .cls-2:nth-of-type(34){animation-delay:2.035s}.lpx-logo .cls-2:nth-of-type(35){animation-delay:2.080s}.lpx-logo .cls-2:nth-of-type(36){animation-delay:2.125s}.lpx-logo .cls-2:nth-of-type(37){animation-delay:2.170s}.lpx-logo .cls-2:nth-of-type(38){animation-delay:2.215s}.lpx-logo .cls-2:nth-of-type(39){animation-delay:2.260s}.lpx-logo .cls-2:nth-of-type(40){animation-delay:2.305s}
.lpx-skyline{transform:translateY(45%);opacity:0;animation:lpxRise 1.6s cubic-bezier(.2,.7,.1,1) 1.5s forwards}
.lpx-mj-wrap{opacity:0;transform:translateX(-45%);animation:lpxWalk 1.2s cubic-bezier(.2,.7,.2,1) 2.7s forwards}
.lpx-star{opacity:0;transform:scale(.6);transform-origin:50% 50%;animation:lpxStar 1s cubic-bezier(.2,.7,.2,1) 3.7s forwards}
.lpx-ctas{opacity:0;transform:translateY(10px);animation:lpxUp .7s ease 4.2s forwards}
@keyframes lpxPlate{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes lpxLetter{to{opacity:1;transform:none}}
@keyframes lpxFade{to{opacity:1}}
@keyframes lpxRise{to{opacity:1;transform:none}}
@keyframes lpxWalk{to{opacity:1;transform:none}}
@keyframes lpxStar{to{opacity:1;transform:none}}
@keyframes lpxUp{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.lpx-hero *{animation:none!important;opacity:1!important;transform:none!important}}
@media (max-width:700px){
  .lpx-hero{min-height:auto;padding-top:48px}
  .lpx-top{gap:16px}
  .lpx-stage{margin-top:24px;aspect-ratio:5434/3900;max-height:none}
  .lpx-star{right:9%;top:6%;width:44px}
  .lpx-ctas{gap:12px;margin-top:10px;width:100%}
  .lpx-hero .lpx-btn.lpx-btn--event{width:100%;min-width:0;min-height:64px;padding:12px 20px;border:2px solid #CDAE7E}
  .lpx-btn-title{font-size:17px}
  .lpx-stage{margin-top:20px}
}

/* ===================================================================
   PAGE CLASSES — add these in Divi: Section Settings > Advanced > CSS Class
   xmas-paper        paper texture overlay (any section)
   xmas-torn-top     deckled top edge in the colour of the section above, with a thin gold rim
   xmas-torn-bottom  deckled bottom edge in the colour of the section below
   xmas-star-corner  big slow-twinkling star, bottom-left, overlapping the next section
   xmas-stack        stacked-postcard scrolling: the section pins at the top and the next section slides up over it
   xmas-star-small   small star echo, top-right
   xmas-spot-tree / xmas-spot-mountains           faint engraving, green lines (cream sections)
   xmas-spot-tree--cream / xmas-spot-mountains--cream   same, cream lines (green/blue sections)
   =================================================================== */
.xmas-paper{position:relative;isolation:isolate}
.xmas-paper::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:url("img/cardstock-2000.jpg") center/cover;mix-blend-mode:color-burn;opacity:.35}
.xmas-paper::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
  background:url("img/noise-512.jpg") 0 0/512px repeat;mix-blend-mode:soft-light;opacity:.85}
.xmas-torn-top,.xmas-torn-bottom{position:relative}
.xmas-torn-top{padding-top:calc(54px + 40px)!important}
.xmas-torn-bottom{padding-bottom:calc(54px + 40px)!important}
/* tear strips are injected by hero.js and painted in the neighbouring section's colour */
.lpx-tear{position:absolute;left:0;right:0;height:64px;pointer-events:none;z-index:4}
.lpx-tear--top{top:0;-webkit-mask:url("img/edge-bottom.png") center top/auto 64px repeat-x;mask:url("img/edge-bottom.png") center top/auto 64px repeat-x}      /* solid at top, torn along its bottom */
.lpx-tear--bottom{bottom:0;-webkit-mask:url("img/edge-top.png") center bottom/auto 64px repeat-x;mask:url("img/edge-top.png") center bottom/auto 64px repeat-x} /* solid at bottom, torn along its top */
.lpx-tear--rim{z-index:3;background:#B7946A;opacity:.9}
.lpx-tear--top.lpx-tear--rim{top:2px}
.lpx-tear--bottom.lpx-tear--rim{bottom:2px}
/* stacked postcards: each xmas-stack section pins to the top and the next one scrolls up over it */
.xmas-stack{position:-webkit-sticky!important;position:sticky!important;top:var(--xmas-stack-top,0px)!important;z-index:auto!important}
.lpx-dim{position:absolute;inset:0;background:#1a2520;opacity:0;pointer-events:none;z-index:7} /* covered card recedes (set by hero.js) */
@media (max-width:700px),(prefers-reduced-motion:reduce){.xmas-stack{position:relative!important;top:auto!important}.lpx-dim{display:none}}
/* stars (injected by hero.js) */
.xmas-star-corner,.xmas-star-small{position:relative}
.xmas-star-corner{overflow:visible!important;z-index:3} /* above the next section so the star is never cut */
.lpx-bigstar{position:absolute;left:-3%;bottom:-22%;width:clamp(200px,19vw,340px);height:auto;z-index:-1;pointer-events:none;
  filter:drop-shadow(0 0 28px rgba(246,233,219,.45));animation:lpxTwinkle 11s ease-in-out infinite alternate;will-change:transform,opacity}
.lpx-bigstar path{fill:#F6E9DB}
.lpx-smallstar{position:absolute;right:6%;top:56px;width:clamp(36px,4vw,64px);height:auto;z-index:-1;pointer-events:none;
  filter:drop-shadow(0 0 12px rgba(246,233,219,.5));animation:lpxTwinkle 9s ease-in-out 3s infinite alternate}
.lpx-smallstar path{fill:#F6E9DB}
@keyframes lpxTwinkle{from{opacity:.72;filter:drop-shadow(0 0 14px rgba(246,233,219,.3))}to{opacity:1;filter:drop-shadow(0 0 34px rgba(246,233,219,.6))}}
/* faint spot engravings */
.xmas-spot-tree,.xmas-spot-mountains,.xmas-spot-tree--cream,.xmas-spot-mountains--cream{background-repeat:no-repeat!important;background-size:min(72%,1100px) auto!important}
.xmas-spot-tree{background-image:url("img/spot-tree-green.webp")!important;background-position:right 110%!important}
.xmas-spot-tree--cream{background-image:url("img/spot-tree-cream.webp")!important;background-position:right 110%!important}
.xmas-spot-mountains{background-image:url("img/spot-mountains-green.webp")!important;background-position:left 110%!important}
.xmas-spot-mountains--cream{background-image:url("img/spot-mountains-cream.webp")!important;background-position:left 110%!important}
.xmas-spot-village{background-image:url("img/spot-village-cream.webp")!important;background-position:right bottom!important;background-size:min(42%,620px) auto!important;background-repeat:no-repeat!important}
@media (prefers-reduced-motion:reduce){.lpx-bigstar,.lpx-smallstar{animation:none!important;transform:none!important}}
@media (max-width:700px){.lpx-bigstar{display:none}.xmas-spot-tree,.xmas-spot-mountains,.xmas-spot-tree--cream,.xmas-spot-mountains--cream{background-size:120% auto!important}.xmas-spot-village{background-size:80% auto!important}}