/*
Theme Name: Our Ancestral Tree Halloween Child v32
Theme URI: https://ourancestraltree.com/
Description: Halloween child theme using the original v1.8.23 sizing, with five optional borderless decorative image widget holders in the left sidebar and one in the right sidebar.
Author: Our Ancestral Tree
Template: our-ancestral-tree-white-v1.8.23-button-border-color-picker
Version: 32.0.0
Text Domain: our-ancestral-tree-halloween-v32
*/

:root{
  --hw-bg:#080704;
  --hw-panel:#11100d;
  --hw-panel2:#17120d;
  --hw-ink:#ead8b8;
  --hw-muted:#c8b28e;
  --hw-orange:#e17b1d;
  --hw-orange2:#f0a03f;
  --hw-copper:#8a4318;
  --hw-line:#8b461b;
  --hw-parch:#d5af78;
  --hw-parch2:#c99b60;
}

/* Keep ALL sizing and responsive layout from the parent theme. */
html,body{background:var(--hw-bg)!important}
body{color:var(--hw-ink)!important}

/* Absolutely no decorative side/background pseudo images. */
html body::before,
html body::after{
  content:none!important;
  display:none!important;
  background:none!important;
  background-image:none!important;
}

.site-header,.site-navigation,.site-main,.site-footer{position:relative;z-index:1}

/* Halloween header artwork, while the original header image still controls size. */
.site-header{background:#090806!important;border-bottom-color:#3f2413!important}
.oat-header-art{
  background:#090806 url("assets/header-ref.png") center center/cover no-repeat!important;
}
.oat-header-art img{opacity:0!important}
.oat-header-art::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(7,5,3,.03),rgba(12,7,3,.16));
  box-shadow:inset 0 -2px 0 var(--hw-line);
}

/* Navigation colors only. Parent controls height, spacing and widths. */
.site-navigation{
  background:#0b0a08!important;
  border-top-color:#3f2413!important;
  border-bottom-color:#a45219!important;
  box-shadow:0 3px 12px rgba(0,0,0,.58)!important;
}
.primary-menu a{color:#ead7b5!important;text-shadow:0 1px #000}
.primary-menu a:hover,
.primary-menu .current-menu-item>a,
.primary-menu .current_page_item>a{
  color:#ffad47!important;
  background:#17110c!important;
  border-bottom-color:#dc741d!important;
}
.menu-symbol,.menu-symbol.dashicons{color:#ef8b26!important}
.oat-search input,.oat-search button{
  background:#15110d!important;
  color:#ead9bb!important;
  border-color:#8b4318!important;
}
.oat-search input::placeholder{color:#bca786!important}

/* Main background is plain; no side images. */
.site-main{background:#080704!important}

/* Shared Halloween colors only; layout remains original. */
.oat-side-panel,.oat-feature-card,.oat-data-panel,.oat-featured-person,
.oat-wordpress-widget-area .widget,.oat-page-content,.oat-flexible-home-block,.oat-spotlight-widget{
  color:var(--hw-ink)!important;
  background:linear-gradient(180deg,#15120e,#0d0c09)!important;
  border-color:var(--hw-line)!important;
  box-shadow:inset 0 0 0 1px rgba(239,142,44,.045),0 2px 7px rgba(0,0,0,.48)!important;
}

.oat-side-panel h2{
  color:#ebcb97!important;
  background:#15120e!important;
  border-bottom-color:#65401f!important;
}
.oat-side-panel h2 .dashicons,.oat-panel-tree{color:#ee8b28!important}
.oat-side-menu li+li{border-top-color:#3a281c!important}
.oat-side-menu a{color:#e6d0ac!important}
.oat-side-menu a:before{color:#e98427!important}
.oat-side-menu a:hover{color:#ffad47!important;background:#1a120d!important}

/* Hero artwork v30 — one uploaded image, automatically fitted as a layered scene.
   The SAME image is used for both layers: a dark, softened ambient fill behind it,
   then a sharp contain-fit copy above. This prevents awkward empty bands without
   cropping the user's actual artwork. */
.oat-hero{
  position:relative!important;
  overflow:hidden!important;
  border-color:var(--hw-line)!important;
  background:transparent!important;
  box-shadow:0 3px 10px rgba(0,0,0,.48)!important;
  isolation:isolate!important;
}
/* v31: no forced fill behind transparent artwork. Transparent PNG/WebP areas
   now show the hero/page background naturally. */
.oat-hero::after{content:none!important;display:none!important;}
/* Main uploaded image: whole image remains visible and proportional. */
.oat-hero-image{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  min-height:0!important;
  height:auto!important;
  pointer-events:none!important;
  background-image:var(--oat-welcome-art, url("assets/hero-v18-study.png"))!important;
  background-position:var(--oat-welcome-x,50%) center!important;
  background-size:contain!important;
  background-repeat:no-repeat!important;
  filter:none!important;
  opacity:var(--oat-welcome-opacity,1)!important;
}
/* Soft left fade for readable live text; no split panel or parchment. */
.oat-hero::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:2!important;
  pointer-events:none!important;
  background:
    radial-gradient(circle at 74% 42%,rgba(238,126,30,.08),transparent 25%),
    linear-gradient(90deg,rgba(7,5,3,.91) 0%,rgba(8,5,3,.81) 26%,rgba(8,5,3,.55) 43%,rgba(8,5,3,.18) 62%,rgba(8,5,3,0) 79%)!important;
}
.oat-hero-copy{position:relative!important;z-index:4!important;overflow:visible!important;color:#f2dfbd!important;background:transparent!important;box-shadow:none!important;clip-path:none!important;}
.oat-hero-copy::before,.oat-hero-copy::after{content:none!important;display:none!important;}
.oat-hero h1,.oat-hero p{position:relative!important;z-index:4!important;color:#f4dfb7!important;text-shadow:0 2px 3px rgba(0,0,0,.78)!important;}
.oat-hero h1{color:#f1d6a3!important;}
.oat-flourish{position:relative!important;z-index:4!important;color:#e69a3c!important;text-shadow:0 1px 2px #000!important;}
.oat-hero .oat-primary-button{position:relative!important;z-index:5!important;}
.oat-primary-button{color:#f6ddb4!important;background:transparent!important;border:1px solid #bc611e!important;box-shadow:none!important;}
.oat-primary-button:hover{background:rgba(8,6,4,.28)!important;color:#fff2dc!important;}

/* v30 atmospheric scene: warm glow plus a few drifting autumn leaves. */
.oat-welcome-atmosphere{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;}
.oat-welcome-glow{position:absolute;inset:0;background:radial-gradient(circle at 72% 48%,rgba(255,139,31,.10),transparent 31%);animation:oatWelcomeGlow 4.8s ease-in-out infinite alternate;}
.oat-welcome-leaf{position:absolute;top:-34px;width:13px;height:18px;border-radius:80% 15% 75% 20%;background:linear-gradient(135deg,#b84f12,#e58b22 55%,#7d2f0d);opacity:.72;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));animation:oatLeafDrift var(--leaf-speed,9s) linear infinite;animation-delay:var(--leaf-delay,0s);}
.oat-welcome-leaf::after{content:"";position:absolute;width:1px;height:13px;background:rgba(81,41,14,.65);left:50%;top:4px;transform:rotate(-25deg);transform-origin:top;}
.oat-welcome-leaf:nth-child(2){left:48%;--leaf-speed:10.7s;--leaf-delay:-2s;transform:scale(.75) rotate(18deg);}
.oat-welcome-leaf:nth-child(3){left:61%;--leaf-speed:8.9s;--leaf-delay:-6s;transform:scale(.58) rotate(-20deg);}
.oat-welcome-leaf:nth-child(4){left:76%;--leaf-speed:12.2s;--leaf-delay:-4s;transform:scale(.84) rotate(31deg);}
.oat-welcome-leaf:nth-child(5){left:88%;--leaf-speed:9.8s;--leaf-delay:-7.5s;transform:scale(.66) rotate(-12deg);}
@keyframes oatWelcomeGlow{from{opacity:.42}to{opacity:.9}}
@keyframes oatLeafDrift{
  0%{translate:0 -20px;rotate:0deg;opacity:0}
  8%{opacity:.72}
  40%{translate:28px 120px;rotate:150deg}
  72%{translate:-18px 215px;rotate:310deg;opacity:.6}
  100%{translate:36px 330px;rotate:520deg;opacity:0}
}
@media(max-width:900px){
  html body .oat-hero-image{background-size:contain!important;background-position:var(--oat-welcome-x,50%) center!important;}
  html body .oat-hero::before{background:rgba(8,6,4,.60)!important;}
  html body .oat-welcome-leaf{display:none!important;}
}
@media(prefers-reduced-motion:reduce){
  .oat-welcome-glow,.oat-welcome-leaf{animation:none!important;}
  .oat-welcome-leaf{display:none!important;}
}

/* v32: candle overlay anchored to the fitted image coordinate system by candle-anchor.js. */
.oat-candle-flicker{
  position:absolute!important;
  left:var(--oat-candle-left-px,var(--oat-candle-x,78%))!important;
  top:var(--oat-candle-top-px,var(--oat-candle-y,30%))!important;
  width:var(--oat-candle-render-size,var(--oat-candle-size,34px))!important;
  height:calc(var(--oat-candle-render-size,var(--oat-candle-size,34px)) * 1.45)!important;
  transform:translate(-50%,-50%)!important;
  z-index:2!important;
  pointer-events:none!important;
  border-radius:50%!important;
  opacity:.92;
  mix-blend-mode:screen;
  background:radial-gradient(ellipse at center,
    rgba(255,244,190,.46) 0 10%,
    rgba(255,181,67,.40) 22%,
    rgba(242,119,20,.20) 43%,
    rgba(226,85,10,.08) 61%,
    transparent 76%);
  filter:blur(.4px) drop-shadow(0 0 9px rgba(255,151,39,.38));
  animation:oatCandleAura 1.28s steps(6,end) infinite;
}
.oat-candle-flicker::before,
.oat-candle-flicker::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;
}
.oat-candle-flicker::before{
  width:185%;
  height:165%;
  background:radial-gradient(circle,rgba(255,173,57,.15),rgba(255,116,18,.06) 46%,transparent 72%);
  filter:blur(5px);
  animation:oatCandleGlow 2.15s ease-in-out infinite alternate;
}
.oat-candle-flame{
  position:absolute;
  left:50%;
  top:50%;
  width:31%;
  height:52%;
  transform:translate(-50%,-54%) rotate(2deg);
  transform-origin:50% 90%;
  border-radius:52% 48% 55% 45% / 70% 68% 32% 30%;
  background:linear-gradient(180deg,
    rgba(255,255,220,.98) 0 16%,
    rgba(255,221,118,.95) 29%,
    rgba(255,151,37,.92) 64%,
    rgba(227,83,8,.68) 88%,
    rgba(114,32,2,.08) 100%);
  box-shadow:0 0 4px rgba(255,241,181,.95),0 0 9px rgba(255,155,35,.74),0 0 18px rgba(235,91,9,.34);
  filter:blur(.15px);
  animation:oatCandleFlame .86s steps(7,end) infinite;
}
@keyframes oatCandleAura{
  0%{opacity:.78;transform:translate(-50%,-50%) scale(.94,.98)}
  18%{opacity:.96;transform:translate(-50%,-50%) scale(1.04,.93)}
  37%{opacity:.83;transform:translate(-50%,-50%) scale(.97,1.06)}
  61%{opacity:1;transform:translate(-50%,-50%) scale(1.07,.97)}
  79%{opacity:.86;transform:translate(-50%,-50%) scale(.95,1.03)}
  100%{opacity:.94;transform:translate(-50%,-50%) scale(1.02,.96)}
}
@keyframes oatCandleGlow{
  from{opacity:.52;transform:translate(-50%,-50%) scale(.82)}
  to{opacity:.92;transform:translate(-50%,-50%) scale(1.12)}
}
@keyframes oatCandleFlame{
  0%{transform:translate(-50%,-54%) rotate(-2deg) scale(.92,1.05)}
  14%{transform:translate(-48%,-56%) rotate(4deg) scale(1.05,.92)}
  31%{transform:translate(-53%,-53%) rotate(-5deg) scale(.88,1.12)}
  49%{transform:translate(-49%,-55%) rotate(2deg) scale(1.02,.95)}
  66%{transform:translate(-52%,-52%) rotate(-3deg) scale(.95,1.08)}
  83%{transform:translate(-47%,-55%) rotate(5deg) scale(1.06,.91)}
  100%{transform:translate(-50%,-54%) rotate(0deg) scale(.96,1.03)}
}
@media(prefers-reduced-motion:reduce){
  .oat-candle-flicker,.oat-candle-flame,.oat-candle-flicker::before{animation:none!important;}
}

/* Cards and data panels: colors only. */
.oat-feature-card img{border:1px solid #70411e!important;filter:sepia(.08) saturate(.94) brightness(.91) contrast(1.04)!important}
.oat-feature-card h2,.oat-data-panel>header h2{color:#ead3aa!important}
.oat-feature-card p,.oat-person-list p,.oat-news-list p{color:#d3c0a1!important}
.oat-feature-card>a,.oat-featured-inner a{
  color:#eac897!important;
  background:#17120e!important;
  border-color:#9c501c!important;
}
.oat-feature-card>a:hover,.oat-featured-inner a:hover{color:#fff0d5!important;background:#632a0c!important}
.oat-data-panel>header{background:#11100d!important;border-bottom-color:#63401e!important}
.oat-data-panel>header a,.oat-person-list h3 a,.oat-news-list h3 a,.oat-home-person-card h3{color:#ed8923!important}
.oat-person-list article,.oat-news-list article{border-bottom-color:#39291d!important}
.oat-person-list img,.oat-news-list img{border:1px solid #67401d!important}
.oat-news-list time{color:#af9c80!important}

/* Right rail colors only. */
.oat-featured-person>h2,
.oat-wordpress-widget-area h2,
.oat-wordpress-widget-area .widget-title{
  color:#e8c799!important;
  border-bottom-color:#63401e!important;
}
.oat-featured-inner img{border:1px solid #74431d!important}
.oat-featured-inner h3{color:#ead6b2!important}
.oat-featured-years,.oat-featured-description,
.oat-wordpress-widget-area p,.oat-wordpress-widget-area li{color:#d6c1a0!important}
.oat-crown{color:#ed8d29!important}

/* Original parent footer dimensions/content; NO decorative bottom image. */
.site-footer{
  background:#0e0c09!important;
  background-image:none!important;
  border-top-color:#7d3e16!important;
  color:#cdb89a!important;
  box-shadow:inset 0 1px rgba(239,142,44,.08)!important;
}
.site-footer::before,.site-footer::after,
.oat-footer-row::before,.oat-footer-row::after{
  content:none!important;
  display:none!important;
  background:none!important;
  background-image:none!important;
}
.oat-footer-row{visibility:visible!important}
.footer-menu a{color:#e58929!important}
.oat-halloween-footer-tagline{display:none!important}

/* Kill any old side/footer image elements if markup or cached child CSS injected them. */
img[src*="left-frame-ref"],img[src*="right-frame-ref"],
img[src*="left-decor-ref"],img[src*="right-decor-ref"],
img[src*="right-bottom-ref"],img[src*="left-side-ref"],
img[src*="footer-ref"]{display:none!important}

.entry-content,.oat-page-content{color:#dfcaab!important}
.oat-plugin-page .site-main{background:#080704!important}


/* ================================================================
   v15 — OPTIONAL DECORATIVE IMAGE HOLDERS
   These are real WordPress widget areas, but visually disappear so
   their images look like they belong to the theme itself.
   ================================================================ */
.oat-decorative-widget-area{
  width:100%;
  margin:8px 0 0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible;
}
.oat-decorative-widget-area .oat-decorative-widget,
.oat-decorative-widget-area .widget,
.oat-decorative-widget-area .wp-block-image,
.oat-decorative-widget-area figure,
.oat-decorative-widget-area p{
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.oat-decorative-widget-area .oat-decorative-widget-title,
.oat-decorative-widget-area .widget-title,
.oat-decorative-widget-area h1,
.oat-decorative-widget-area h2,
.oat-decorative-widget-area h3{
  display:none!important;
}
.oat-decorative-widget-area img{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  object-fit:contain!important;
}
.oat-decorative-widget-area a{
  display:block;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  line-height:0;
}
/* Do not reserve blank space when no decorative image is assigned. */
.oat-decorative-widget-area:empty{display:none!important}

/* On phones, keep decorative art optional but compact so it never
   overwhelms the actual genealogy content. */
@media(max-width:900px){
  .oat-decorative-widget-area{max-width:420px;margin:10px auto 0!important}
}


/* ================================================================
   v26 — LIFELIKE OCCASIONAL HALLOWEEN SURPRISES
   CSS artwork only: no extra image files. Homepage-only, pointer-safe,
   and disabled automatically when reduced motion is requested.
   ================================================================ */
.oat-halloween-magic{
  position:fixed;
  inset:0;
  z-index:50;
  pointer-events:none;
  overflow:hidden;
  visibility:hidden;
}
.oat-halloween-magic.is-ready{visibility:visible;}

/* Spider: soft silk thread, body sway, and tiny leg motion. */
.oat-magic-spider{
  --oat-spider-x:18vw;
  --oat-spider-drop:170px;
  --oat-spider-sway:6px;
  position:absolute;
  top:-94px;
  left:var(--oat-spider-x);
  width:48px;
  height:128px;
  opacity:0;
  transform-origin:24px 0;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.88));
}
.oat-magic-spider::before{
  content:"";
  position:absolute;
  left:23px;
  top:0;
  width:1px;
  height:92px;
  background:linear-gradient(180deg,rgba(228,221,205,.02),rgba(228,221,205,.58) 36%,rgba(228,221,205,.78));
  box-shadow:0 0 2px rgba(255,247,231,.18);
}
.oat-spider-body{
  position:absolute;
  left:14px;
  top:88px;
  width:20px;
  height:24px;
  border-radius:46% 46% 55% 55%;
  background:
    radial-gradient(circle at 36% 28%,rgba(125,73,34,.42),transparent 17%),
    linear-gradient(180deg,#26180f 0%,#0f0b09 75%);
  box-shadow:0 -8px 0 -4px #16100c,0 0 0 1px rgba(156,92,40,.25),inset 0 -4px 6px rgba(0,0,0,.45);
  transform-origin:50% 15%;
}
.oat-spider-body::before,
.oat-spider-body::after{
  content:"";
  position:absolute;
  top:1px;
  width:18px;
  height:27px;
  opacity:.96;
  background:
    linear-gradient(31deg,transparent 44%,#15100d 45% 53%,transparent 54%) 0 0/100% 7px repeat-y;
}
.oat-spider-body::before{right:13px;transform-origin:right center;animation:oatSpiderLegsLeft .42s ease-in-out infinite alternate;}
.oat-spider-body::after{left:13px;transform:scaleX(-1);transform-origin:left center;animation:oatSpiderLegsRight .47s ease-in-out infinite alternate;}
.oat-magic-spider.is-active{animation:oatSpiderVisit 8.4s cubic-bezier(.42,0,.32,1) both;}
.oat-magic-spider.is-active .oat-spider-body{animation:oatSpiderBodySway 1.05s ease-in-out infinite alternate;}
@keyframes oatSpiderVisit{
  0%{opacity:0;transform:translate3d(0,-35px,0) rotate(0deg)}
  7%{opacity:.9}
  27%{opacity:.98;transform:translate3d(var(--oat-spider-sway),var(--oat-spider-drop),0) rotate(2.2deg)}
  42%{transform:translate3d(calc(var(--oat-spider-sway) * -.45),var(--oat-spider-drop),0) rotate(-2.4deg)}
  56%{transform:translate3d(calc(var(--oat-spider-sway) * .35),var(--oat-spider-drop),0) rotate(1.2deg)}
  64%{opacity:.98;transform:translate3d(0,var(--oat-spider-drop),0) rotate(0deg)}
  91%{opacity:.92}
  100%{opacity:0;transform:translate3d(0,-35px,0) rotate(-1deg)}
}
@keyframes oatSpiderBodySway{from{transform:rotate(-3deg) translateX(-1px)}to{transform:rotate(3deg) translateX(1px)}}
@keyframes oatSpiderLegsLeft{from{transform:rotate(-4deg)}to{transform:rotate(5deg)}}
@keyframes oatSpiderLegsRight{from{transform:scaleX(-1) rotate(-5deg)}to{transform:scaleX(-1) rotate(4deg)}}

/* Human apparition: a faint Victorian-style figure that materializes, pauses, and vanishes. */
.oat-magic-ghost{
  --oat-ghost-y:34vh;
  --oat-ghost-scale:1;
  position:absolute;
  top:var(--oat-ghost-y);
  right:-170px;
  width:108px;
  height:208px;
  opacity:0;
  transform-origin:50% 82%;
  filter:blur(.35px) drop-shadow(0 0 18px rgba(239,232,214,.18));
}
/* head / hair */
.oat-magic-ghost::before{
  content:"";
  position:absolute;
  left:34px;
  top:3px;
  width:40px;
  height:49px;
  border-radius:48% 48% 46% 46%;
  background:
    radial-gradient(circle at 37% 42%,rgba(42,39,36,.38) 0 2px,transparent 3px),
    radial-gradient(circle at 63% 42%,rgba(42,39,36,.38) 0 2px,transparent 3px),
    radial-gradient(ellipse at 50% 65%,rgba(58,53,49,.18) 0 5px,transparent 6px),
    linear-gradient(180deg,rgba(222,218,207,.62),rgba(239,235,224,.48) 64%,rgba(230,225,214,.12));
  box-shadow:
    -5px 0 8px -3px rgba(43,39,35,.35),
    5px 0 8px -3px rgba(43,39,35,.35),
    0 0 18px rgba(245,240,225,.15);
  animation:oatGhostFaceBreath 3.5s ease-in-out infinite alternate;
}
/* shoulders, arms, long translucent clothing */
.oat-magic-ghost::after{
  content:"";
  position:absolute;
  left:7px;
  top:45px;
  width:94px;
  height:158px;
  clip-path:polygon(30% 0,70% 0,82% 10%,91% 34%,83% 36%,75% 23%,79% 58%,93% 100%,72% 94%,56% 100%,43% 93%,25% 100%,9% 94%,25% 57%,29% 24%,17% 38%,9% 33%,18% 10%);
  background:
    linear-gradient(90deg,transparent 0 8%,rgba(232,228,218,.17) 18%,rgba(244,240,230,.45) 48%,rgba(231,226,214,.18) 82%,transparent 100%),
    linear-gradient(180deg,rgba(239,235,224,.49),rgba(225,219,207,.24) 50%,rgba(215,208,195,.025) 100%);
  filter:blur(1.4px);
  box-shadow:0 0 24px rgba(242,236,220,.09);
  animation:oatGhostVeil 4.1s ease-in-out infinite alternate;
}
.oat-magic-ghost.is-active{animation:oatHumanGhostVisit 14.2s cubic-bezier(.29,.08,.22,1) both;}
@keyframes oatHumanGhostVisit{
  0%{opacity:0;transform:translate3d(0,15px,0) scale(calc(var(--oat-ghost-scale) * .94))}
  13%{opacity:.05}
  25%{opacity:.19;transform:translate3d(-105px,-3px,0) scale(var(--oat-ghost-scale))}
  43%{opacity:.34;transform:translate3d(-210px,2px,0) scale(calc(var(--oat-ghost-scale) * 1.015))}
  56%{opacity:.38;transform:translate3d(-260px,-2px,0) scale(calc(var(--oat-ghost-scale) * 1.02))}
  68%{opacity:.34;transform:translate3d(-284px,1px,0) scale(var(--oat-ghost-scale))}
  82%{opacity:.17;transform:translate3d(-375px,-5px,0) scale(calc(var(--oat-ghost-scale) * .985))}
  100%{opacity:0;transform:translate3d(-495px,-12px,0) scale(calc(var(--oat-ghost-scale) * .95))}
}
@keyframes oatGhostFaceBreath{from{opacity:.68;transform:translateY(0) scale(.99)}to{opacity:.94;transform:translateY(-1px) scale(1.015)}}
@keyframes oatGhostVeil{from{opacity:.62;transform:skewX(-.7deg) translateX(-1px)}to{opacity:.9;transform:skewX(.8deg) translateX(2px)}}

@media(max-width:900px){
  .oat-magic-spider{transform-origin:top center;scale:.84;}
  .oat-magic-ghost{scale:.84;}
}
@media(prefers-reduced-motion:reduce){
  .oat-halloween-magic{display:none!important;}
}