/* Phú Hải Festive V3.2.1 – Festive Season MAIN Hero visual modes.
   No external libraries, videos or canvas; images stay under Admin control.
   Motion only on active hero and after invitation; reduced motion remains static. */
.slide.hero-slide[data-visual-mode="animation"]{
 background:
  radial-gradient(ellipse at 76% 41%,rgba(226,189,128,.25),transparent 46%),
  radial-gradient(ellipse at 92% 92%,rgba(130,193,193,.26),transparent 37%),
  linear-gradient(127deg,#173b4b 3%,#244d53 55%,#123441 100%);
}
/* Hybrid without an uploaded photo falls back to the same elegant art backdrop. */
.slide.hero-slide.hero-hybrid-no-photo{background:radial-gradient(ellipse at 76% 41%,rgba(226,189,128,.25),transparent 46%),linear-gradient(127deg,#173b4b,#244d53 55%,#123441)}
.slide.hero-slide.hero-hybrid-no-photo::after{background:linear-gradient(90deg,rgba(12,34,43,.62),rgba(12,34,43,.28) 46%,rgba(12,34,43,.1));opacity:1!important}
/* The animation-only scene deliberately ignores the CMS photo, yet keeps it stored. */
.slide.hero-slide[data-visual-mode="animation"]::before{background-image:none!important}
.slide.hero-slide[data-visual-mode="animation"]::after{background:linear-gradient(90deg,rgba(12,34,43,.62),rgba(12,34,43,.28) 46%,rgba(12,34,43,.10) 82%);opacity:1!important}
.slide.hero-slide[data-visual-mode="hybrid"]::after{background:linear-gradient(90deg,rgba(5,19,26,.67),rgba(5,23,34,.26) 53%,rgba(5,20,28,.05));opacity:1!important}
.slide.hero-slide[data-visual-mode="animation"] .ornament{opacity:.42}
.slide.hero-slide[data-visual-mode="image"] .main-hero-art{display:none}
.main-hero-art{--main-art-accent:#efca85;position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;opacity:var(--main-art-opacity,.72);isolation:isolate;contain:paint}
.main-art-aura{position:absolute;inset:-10% -14% -12% 43%;background:radial-gradient(circle at 65% 45%,rgba(251,219,165,.24),transparent 58%);filter:blur(18px);opacity:.75}
.main-art-layer{position:absolute;pointer-events:none;max-width:none;transform-origin:55% 55%;opacity:1}
.main-art-layer img{width:100%;height:100%;display:block;object-fit:contain;user-select:none;-webkit-user-drag:none}
.main-art-coast{width:min(84vw,1120px);height:90%;right:-8%;bottom:-12%}
.main-art-orbit{width:clamp(320px,58vw,770px);height:auto;aspect-ratio:1;right:3%;top:6%;opacity:.78}
.main-art-sprig{width:clamp(260px,44vw,560px);aspect-ratio:6/5;right:-5%;top:-6%;opacity:.7}
.main-art-spark{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--main-art-accent);opacity:0;box-shadow:0 0 12px 3px rgba(255,228,171,.4)}
.main-art-spark-1{top:18%;left:61%}.main-art-spark-2{top:29%;left:92%;width:3px;height:3px}.main-art-spark-3{top:52%;left:78%;width:5px;height:5px}.main-art-spark-4{top:70%;left:56%;width:3px;height:3px}.main-art-spark-5{top:81%;left:90%}.main-art-spark-6{top:40%;left:63%;width:2px;height:2px}.main-art-spark-7{top:15%;left:83%;width:2px;height:2px}.main-art-spark-8{top:63%;left:96%;width:3px;height:3px}
/* Keep the information visually in front of the art. */
.slide.hero-slide .content{position:relative;z-index:3}
.slide.hero-slide .main-hero-art + .ornament{z-index:2}
/* Active-only initial reveal; nonactive slides are static to avoid wasting CPU. */
.hero-slide[data-visual-mode]:not(.active) .main-hero-art .main-art-layer,
.hero-slide[data-visual-mode]:not(.active) .main-hero-art .main-art-element{animation:none!important}
.hero-slide.active:not(.main-art-settled) .main-art-coast{animation:main-art-coast-in var(--main-art-duration,2600ms) cubic-bezier(.2,.8,.25,1) both}
.hero-slide.active:not(.main-art-settled) .main-art-orbit{animation:main-art-orbit-in var(--main-art-duration,2600ms) cubic-bezier(.2,.8,.25,1) .2s both}
.hero-slide.active:not(.main-art-settled) .main-art-sprig{animation:main-art-sprig-in var(--main-art-duration,2600ms) cubic-bezier(.2,.8,.25,1) .35s both}
.hero-slide.active .main-art-spark{animation:main-art-sparkle 5s ease-in-out infinite}
.hero-slide.active .main-art-spark:nth-child(2n){animation-delay:-2.5s}
.hero-slide.active .main-art-spark:nth-child(3n){animation-delay:-1.3s}
.hero-slide[data-art-speed=slow]{--main-art-duration:3700ms}
.hero-slide[data-art-intensity=soft] .main-hero-art{opacity:calc(var(--main-art-opacity,.72) - .20)}
.hero-slide[data-art-intensity=rich] .main-hero-art{opacity:var(--main-art-opacity,.72)}
.hero-slide[data-art-intensity=soft] .main-art-spark:nth-of-type(n+6){display:none}
.hero-slide[data-art-style=orbit] .main-art-orbit{width:clamp(400px,73vw,960px);top:-4%;right:-8%;opacity:1}
.hero-slide[data-art-style=orbit] .main-art-coast{opacity:.32}
.hero-slide[data-art-style=orbit] .main-art-sprig{opacity:.18}
.hero-slide[data-art-style=minimal] .main-art-coast{opacity:.35}
.hero-slide[data-art-style=minimal] .main-art-sprig{display:none}
.hero-slide[data-art-style=minimal] .main-art-orbit{opacity:.42}
.hero-slide[data-visual-mode=hybrid] .main-art-coast{opacity:.35}
.hero-slide[data-visual-mode=hybrid] .main-art-sprig{opacity:.55}
.hero-slide[data-visual-mode=hybrid] .main-art-orbit{opacity:.47}
@keyframes main-art-coast-in{from{opacity:0;transform:translate3d(5%,4%,0) scale(1.08)}to{opacity:1;transform:none}}
@keyframes main-art-orbit-in{from{opacity:0;transform:translate3d(3%,0,0) scale(.87) rotate(-12deg)}to{opacity:1;transform:none}}
@keyframes main-art-sprig-in{from{opacity:0;transform:translate3d(6%,-7%,0) rotate(8deg)}to{opacity:1;transform:none}}
@keyframes main-art-sparkle{0%,100%{opacity:0;transform:translateY(6px) scale(.6)}36%,56%{opacity:.85;transform:translateY(-3px) scale(1)}75%{opacity:.1}}
/* When user returns with Replay off, scene is immediately rendered as a still image. */
.hero-slide.main-art-settled .main-art-layer,.hero-slide.main-art-settled .main-art-element{animation:none!important;opacity:1;transform:none}
.hero-slide.main-art-settled .main-art-spark{opacity:.25!important}
/* Pause during invitation, browser tab inactivity and on lower-end devices. */
body.intro-active .main-hero-art *{animation-play-state:paused!important}
html.perf-lite .main-hero-art *{animation:none!important;transform:none!important}
html.perf-lite .main-art-spark{opacity:.24!important}
@media(max-width:700px){
 .hero-slide .main-art-coast{width:125vw;height:63%;right:-32%;bottom:28%}
 .hero-slide .main-art-orbit{width:105vw;right:-32%;top:5%;opacity:.52}
 .hero-slide .main-art-sprig{width:70vw;right:-9%;top:4%;opacity:.42}
 .hero-slide[data-visual-mode="animation"]::after{background:linear-gradient(0deg,rgba(12,36,43,.73) 0%,rgba(12,36,43,.42) 49%,rgba(12,36,43,.05) 100%)}
 .hero-slide[data-visual-mode="hybrid"]::after{background:linear-gradient(0deg,rgba(7,22,33,.76),rgba(7,22,33,.42) 55%,rgba(7,22,33,.09))}
 .main-art-spark-4,.main-art-spark-5,.main-art-spark-8{display:none}
}
@media(max-width:700px) and (max-height:680px){.hero-slide .main-art-orbit{top:-9%}.hero-slide .main-art-coast{bottom:20%}}
@media(prefers-reduced-motion:reduce){.main-hero-art *{animation:none!important;transform:none!important;transition:none!important}.main-art-spark{opacity:.24!important}}