/* Homepage scroll story. All styles are scoped to this section. */
app-home.petra-home-with-animation{display:block;overflow:visible}
#petra-home-animation{--ph-yellow:#ffc400;position:relative;clear:both;display:block;width:100%;height:340vh;height:340svh;padding:0!important;margin:65px 0!important;background:#fafaf7;isolation:isolate;font-family:'Lato',Arial,sans-serif;color:#fff}
#petra-home-animation *{box-sizing:border-box}
#petra-home-animation .ph-sticky{position:sticky;top:0;display:flex;align-items:center;justify-content:center;height:100vh;height:100svh;overflow:hidden}
#petra-home-animation .ph-scene{position:relative;overflow:hidden;width:92%;height:84%;border-radius:26px;background:#a68b53;box-shadow:0 24px 65px #20232230}
#petra-home-animation .ph-canvas,#petra-home-animation .ph-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
#petra-home-animation .ph-glass{position:absolute;inset:0 0 0 auto;width:29%;background:linear-gradient(120deg,#20232235,#202322a6);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);border-left:1px solid #ffffff45}
#petra-home-animation .ph-copy{position:absolute;right:0;top:0;width:29%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px 24px}
#petra-home-animation .ph-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:700;border:1px solid #ffc40099;border-radius:40px;background:#ffc40015;padding:8px 13px;color:#fff}
#petra-home-animation .ph-temperature{display:block;font-size:clamp(85px,10vw,170px);font-weight:700;line-height:1.12;color:var(--ph-yellow);font-variant-numeric:tabular-nums;margin:28px 0 10px}
#petra-home-animation .ph-temperature sup{font-size:.4em;vertical-align:top;position:relative;top:.15em}
#petra-home-animation .ph-divider{width:80%;height:1px;background:var(--ph-yellow);margin:16px 0 28px}
#petra-home-animation .ph-messages{position:relative;width:100%;display:grid;align-items:center;min-height:150px}
#petra-home-animation .ph-message{grid-area:1/1;font-size:clamp(23px,2.4vw,40px);line-height:1.2;font-weight:700;margin:0;padding:0;color:#fff}
#petra-home-animation .ph-cool{opacity:0}
#petra-home-animation .ph-scroll-cue{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;white-space:nowrap;color:#fff;font-size:12px;letter-spacing:.4px;text-shadow:0 1px 6px #000}
#petra-home-animation .ph-scroll-cue span{height:24px;width:1px;background:var(--ph-yellow)}
#petra-home-animation .ph-note{position:absolute;bottom:10px;right:16px;margin:0;color:#ffffffce;font-size:10px;line-height:1.4;max-width:25%;text-align:center}
#petra-home-animation .ph-static{display:none}
@media(max-width:767px){
 #petra-home-animation{height:300vh;height:300svh;margin:40px 0!important}
 #petra-home-animation .ph-scene{width:94%;height:90%;border-radius:18px}
 #petra-home-animation .ph-poster,#petra-home-animation .ph-canvas{object-position:50% 40%}
 #petra-home-animation .ph-glass{inset:auto 0 0;width:100%;height:175px;border-left:0;border-top:1px solid #ffffff45;background:linear-gradient(0deg,#202322c9,#20232255)}
 #petra-home-animation .ph-copy{inset:auto 0 20px;width:100%;height:145px;display:grid;grid-template-columns:92px 1fr;gap:0 14px;padding:12px 20px;text-align:left}
 #petra-home-animation .ph-label{grid-column:1/-1;justify-self:center;font-size:9px;letter-spacing:1.5px;padding:5px 12px}
 #petra-home-animation .ph-temperature{font-size:65px;margin:8px 0 0}
 #petra-home-animation .ph-divider{display:none}
 #petra-home-animation .ph-messages{min-height:74px}
 #petra-home-animation .ph-message{font-size:23px;line-height:1.2}
 #petra-home-animation .ph-note{max-width:none;right:0;left:0;bottom:6px;font-size:9px}
 #petra-home-animation .ph-scroll-cue{bottom:190px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){
 #petra-home-animation{height:auto;margin:45px 0!important}
 #petra-home-animation .ph-sticky{display:none}
 #petra-home-animation .ph-static{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:0 25px;max-width:1400px;margin:auto}
 #petra-home-animation .ph-static figure{position:relative;overflow:hidden;border-radius:18px;margin:0;background:#343a40}
 #petra-home-animation .ph-static img{width:100%;aspect-ratio:16/11;object-fit:cover;display:block}
 #petra-home-animation .ph-static figcaption{padding:20px;font-size:22px;line-height:1.4;color:#fff}
}
@media(prefers-reduced-motion:reduce) and (max-width:767px){#petra-home-animation .ph-static{grid-template-columns:1fr;padding:0 15px}}