/* Seasonal composition. Original sources: Calle, Chris Bolson and Bato Web Agency.
   MIT notices in THIRD-PARTY-NOTICES.txt. The permanent brand styles stay in styles.css. */

/* Calle: large silhouettes cross the title, never the salon photograph. */
.title-stage{position:relative;display:flow-root;isolation:isolate;overflow:clip}
.title-stage .bats-stage{inset:0;z-index:3;overflow:clip}
.title-stage .bats-stage svg{position:absolute;top:50%;left:-15%;width:130%;height:auto;aspect-ratio:600/400;transform:translateY(-50%);fill:#020204;stroke:rgba(236,196,64,.42);stroke-width:.8;filter:drop-shadow(0 2px 2px rgba(0,0,0,.4))}
.title-stage .bats-stage .shadow{display:block;filter:blur(6px);opacity:.2}
.title-stage .bats-stage .bat{animation:large-bat-flight 15s ease-in-out infinite}
.title-stage .bats-stage .bat1{animation:large-bat-flight-one 15s ease-in-out infinite}
.title-stage .bats-stage .bat2{animation:large-bat-flight-two 15s ease-in-out infinite}
/* Vertical paths fit the two-line headline; the original 400px demo would clip most flights. */
@keyframes large-bat-flight{0%,100%{transform:translate(150px,70px) rotate(10deg)}25%{transform:translate(-150px,65px) rotate(-10deg)}50%{transform:translate(-160px,-5px) rotate(10deg)}75%{transform:translate(-140px,-10px) rotate(-10deg)}}
@keyframes large-bat-flight-one{0%,100%{transform:translate(-140px,15px) rotate(-10deg)}25%{transform:translate(0,30px) rotate(10deg)}50%{transform:translate(150px,70px) rotate(-10deg)}75%{transform:translate(-100px,40px) rotate(10deg)}85%{transform:translate(-110px,65px) rotate(10deg)}}
@keyframes large-bat-flight-two{0%,100%{transform:translate(150px,20px) rotate(10deg)}25%{transform:translate(160px,-5px) scale(.85) rotate(-10deg)}50%{transform:translate(170px,0) scale(.85) rotate(10deg)}75%{transform:translate(105px,40px) rotate(-10deg)}}

/* Bato: hanging spiders, original stagger and 1.5-second bounce. */
.spiders{display:none;position:absolute;inset:0 0 auto;width:100%;z-index:2;pointer-events:none;overflow:clip;height:205px}
[data-season=halloween] .spiders{display:block}
.spider{position:absolute;top:0;display:flex;flex-direction:column;align-items:center;animation:spider-jump 1.5s ease-in-out infinite alternate}
.spider:before{content:'';display:block;width:1px;height:var(--spider-line-height,80px);background:linear-gradient(to bottom,#ccc,rgba(218,209,209,.15))}
.spider img{display:block;width:40px;height:auto;margin-top:-10px;filter:drop-shadow(0 0 2px rgba(247,226,154,.55))}
.spider:nth-child(1){left:10%;--spider-line-height:120px}
.spider:nth-child(2){left:25%;--spider-line-height:80px;animation-delay:.3s}
.spider:nth-child(3){left:45%;--spider-line-height:50px;animation-delay:.6s}
.spider:nth-child(4){left:65%;--spider-line-height:100px;animation-delay:.9s}
.spider:nth-child(5){left:85%;--spider-line-height:150px;animation-delay:1.2s}
.masthead{z-index:4}
@keyframes spider-jump{0%,100%{transform:translateY(0)}50%{transform:translateY(-3vh)}}

/* Bato's counter panels, fitted to the existing gold/glass service card. */
.countdown-block{margin-top:24px;padding-top:17px;border-top:1px solid var(--gold-soft)}
.countdown-kicker{margin:0 0 11px;font-size:8px;letter-spacing:1.2px;color:var(--gold-light)}
.countdown{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;max-width:380px}
.countdown-item{display:flex;flex-direction:column;gap:5px;min-width:0}
.countdown-value{display:flex;align-items:center;justify-content:center;aspect-ratio:129/134;width:100%;font:400 clamp(27px,8vw,38px)/1 Georgia,serif;font-variant-numeric:tabular-nums;color:#fff;background:url('./assets/bato/counter-gold.svg') center/100% 100% no-repeat}
.countdown-label{text-align:center;font:10px/1.5 var(--font-body);color:var(--muted)}
.countdown-deadline{margin:11px 0 0;font:10px/1.6 Georgia,serif;color:var(--dim)}

/* A dedicated scene keeps every surprise outside the woman's photograph. */
.halloween-play{position:relative;isolation:isolate;min-width:0;margin:35px 0 5px;padding:0 18px 24px;border:1px solid var(--gold-soft);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 65%)}
.haunt-scene{position:relative;isolation:isolate;display:grid;place-items:center;height:310px;overflow:clip}
.skull-illustration{position:relative;width:230px;max-width:85%;transition:opacity .5s ease}
.skull-illustration>img{display:block;width:100%;height:auto}
.skull-eyes{position:absolute;top:54.72%;left:50%;width:24.16%;transform:translateX(-50%);display:flex;justify-content:space-between}
.skull-eye{width:14.48%;aspect-ratio:22/32;border-radius:50%;background:rgba(239,222,222,.89);filter:blur(2px);box-shadow:0 0 20px rgba(239,222,222,.89),0 0 30px rgba(239,222,222,.89),0 0 30px rgba(239,222,222,.89);transition:transform .16s ease-out}
.haunt-scene:after{content:'';position:absolute;z-index:2;inset:0;background-image:var(--bg-img);background-position:center bottom;background-repeat:no-repeat;background-size:auto min(var(--bg-img-height,300px),100%);opacity:0;filter:blur(20px);transition:opacity .5s ease-in-out,filter .5s ease-in-out;pointer-events:none}
.haunt-scene.active:after{opacity:1;filter:blur(0);transition-delay:0s,.3s}
.haunt-scene.active .skull-illustration{opacity:.12}
.magic-controls{position:relative;z-index:2}
.halloween-play .magic-button{font-size:25px;min-height:60px;text-shadow:0 0 1px rgba(247,226,154,.6)}
.halloween-play .magic-button:after{display:none}
.halloween-play .magic-button[aria-disabled=true]{cursor:wait}
.halloween-play .magic-meta{margin-top:4px}
.halloween-props{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin:57px auto 0;max-width:420px;width:100%}
.prop-card{position:relative;aspect-ratio:324/250;border-radius:20px;background:url('./assets/bato/card.svg') center/100% 100% no-repeat;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:box-shadow .6s ease}
.prop-card img{position:absolute;top:-30%;left:50%;display:block;transform:translateX(-50%);width:auto;height:110%;max-width:130%;object-fit:contain;transition:top .6s ease}
@media(hover:hover){.prop-card:hover{box-shadow:0 0 20px rgba(1,1,1,.35)}.prop-card:hover img{top:-35%}}
[data-motion=off] .haunt-scene:after{transition:none;filter:none}
[data-motion=off] .skull-eye{transition:none;transform:none!important}
[data-motion=off] .prop-card img{transition:none}

@media(min-width:701px){
  .portal-layout{row-gap:30px;align-items:start}
  .welcome{grid-column:1;grid-row:1;align-self:start}
  .paths{grid-column:2;grid-row:1/span 2;align-self:start}
  .halloween-play{grid-column:1;grid-row:2;margin:0;padding:0 24px 28px}
  .haunt-scene{height:360px}.skull-illustration{width:280px}
  .halloween-play .magic-button{font-size:29px}
  .countdown-value{font-size:41px}.countdown-label{font-size:11px}
  .countdown-kicker{font-size:9px}.countdown-deadline{font-size:11px}
}
@media(max-width:700px){
  .spider:nth-child(2),.spider:nth-child(3),.spider:nth-child(4){display:none}
  .spider img{width:27px;margin-top:-7px}
  .spider:nth-child(1){left:0;--spider-line-height:122px}
  .spider:nth-child(5){left:auto;right:0;--spider-line-height:91px}
  .countdown-block{margin-top:20px}.countdown{gap:8px}
}
@media(prefers-reduced-motion:reduce){.spider,.title-stage .bat,.title-stage .bat1,.title-stage .bat2{animation:none!important}.skull-eye{transform:none!important}.haunt-scene:after{filter:none;transition:none}.skull-illustration,.prop-card img{transition:none}}

/* Fourth revision: skull replaces the portrait; only Ghosts + Pumpkins remain below. */
.hero-skull{display:grid;place-items:center;min-height:330px;margin:20px 0 0}
.hero-skull .skull-illustration{width:260px;max-width:90%}
.halloween-play .haunt-scene{height:250px}
.category-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:12px;width:100%;transition:opacity .5s ease}
.category-pair img{display:block;width:100%;height:auto;transition:transform .3s ease}
.haunt-scene.active .category-pair{opacity:.12}
@media(hover:hover){.category-pair img:hover{transform:translateY(-8px)}}
.reel-section{margin:25px 0 0;padding-top:18px;border-top:1px solid var(--gold-soft)}
.reel-section figcaption{color:var(--gold-light);font-size:9px;letter-spacing:1.15px;line-height:1.5}
.reel-frame{max-width:260px;width:100%;margin:14px auto 0;border:1px solid var(--gold-line);border-radius:16px;overflow:hidden;background:#050509;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.reel-frame video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:contain}
@media(min-width:701px){.portal-layout{grid-template-rows:min-content 1fr}.hero-skull{min-height:415px;margin-top:25px}.hero-skull .skull-illustration{width:320px}.halloween-play .haunt-scene{height:280px}}
@media(prefers-reduced-motion:reduce){.category-pair,.category-pair img{transition:none}.category-pair img:hover{transform:none}}