/* BGG center-hero bow wake — isolated Phase 2 module. */
.hero-wake-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none;opacity:0;transition:opacity 180ms linear;will-change:contents,opacity}
.hero-wake-canvas.ready{animation:heroWakeOpacityPulse 4s ease-in-out infinite}
@keyframes heroWakeOpacityPulse{0%,100%{opacity:.60}50%{opacity:.90}}



/* BGG opening atmosphere V11 — stronger Specter + Sky + Storm Lighting. Wakes remain V9 authority. */

.sky-atmosphere{position:absolute;left:0;right:0;top:0;height:58%;z-index:1;overflow:hidden;pointer-events:none;opacity:0;transition:opacity 300ms ease;mix-blend-mode:normal;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 73%,rgba(0,0,0,.86) 87%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 73%,rgba(0,0,0,.86) 87%,transparent 100%)}
.sky-haze-band{position:absolute;inset:-20% -18%;will-change:transform,opacity;pointer-events:none}
.sky-haze-a{background:radial-gradient(ellipse 30% 18% at 12% 34%,rgba(204,224,237,.19),transparent 67%),radial-gradient(ellipse 38% 18% at 50% 19%,rgba(195,218,233,.16),transparent 69%),radial-gradient(ellipse 34% 20% at 88% 38%,rgba(207,226,239,.18),transparent 69%);filter:blur(19px);mix-blend-mode:screen;opacity:.84;animation:skyHazeDriftA11 18s ease-in-out infinite alternate}
.sky-haze-b{background:radial-gradient(ellipse 38% 26% at 20% 18%,rgba(0,5,10,.42),transparent 69%),radial-gradient(ellipse 45% 24% at 70% 31%,rgba(0,5,10,.38),transparent 71%),radial-gradient(ellipse 28% 19% at 96% 12%,rgba(0,4,8,.36),transparent 69%);filter:blur(23px);mix-blend-mode:multiply;opacity:.66;animation:skyHazeDriftB11 23s ease-in-out infinite alternate}
.sky-haze-c{background:linear-gradient(99deg,transparent 3%,rgba(205,225,238,.07) 25%,rgba(221,236,245,.145) 45%,transparent 68%),radial-gradient(ellipse 46% 16% at 55% 54%,rgba(192,215,230,.13),transparent 67%);filter:blur(14px);mix-blend-mode:screen;opacity:.72;animation:skyHazeDriftC11 14.5s ease-in-out infinite alternate}
@keyframes skyHazeDriftA11{0%{transform:translate3d(-4.3%,-.8%,0) scale(1.055)}100%{transform:translate3d(4.8%,1.4%,0) scale(1.105)}}
@keyframes skyHazeDriftB11{0%{transform:translate3d(4.0%,.7%,0) scale(1.09)}100%{transform:translate3d(-4.2%,-1.1%,0) scale(1.045)}}
@keyframes skyHazeDriftC11{0%{transform:translate3d(-2.8%,1.5%,0) scale(1.03)}100%{transform:translate3d(3.4%,-1.3%,0) scale(1.085)}}

/* Stronger but still slow supernatural motion: clearly visible drift, breathing scale and shimmer. */
#app.title-atmosphere-active .specter-layer{animation:specterFloatV11 9.6s ease-in-out infinite,specterGlowV11 12.8s linear infinite}
@keyframes specterFloatV11{0%,100%{transform:translate3d(3px,6px,0) scale(1.000)}22%{transform:translate3d(-8px,0,0) scale(1.008)}50%{transform:translate3d(6px,-16px,0) scale(1.020)}76%{transform:translate3d(-5px,-5px,0) scale(1.010)}}
@keyframes specterGlowV11{0%,12%,27%,40%,56%,72%,100%{opacity:.78;filter:brightness(1.00) contrast(1.01) drop-shadow(0 0 9px rgba(220,242,255,.15))}18%{opacity:.91;filter:brightness(1.12) contrast(1.03) drop-shadow(0 0 20px rgba(220,242,255,.28))}43%{opacity:.88;filter:brightness(1.10) contrast(1.03) drop-shadow(0 0 17px rgba(220,242,255,.23))}45%{opacity:1;filter:brightness(1.30) contrast(1.05) drop-shadow(0 0 34px rgba(220,242,255,.48))}46%{opacity:.86;filter:brightness(1.10) contrast(1.03) drop-shadow(0 0 18px rgba(220,242,255,.25))}47.5%{opacity:1;filter:brightness(1.40) contrast(1.06) drop-shadow(0 0 44px rgba(220,242,255,.58))}49%{opacity:.88;filter:brightness(1.12) contrast(1.03) drop-shadow(0 0 20px rgba(220,242,255,.28))}51.5%{opacity:.97;filter:brightness(1.24) contrast(1.04) drop-shadow(0 0 31px rgba(220,242,255,.42))}55%{opacity:.79;filter:brightness(1.01) contrast(1.01) drop-shadow(0 0 9px rgba(220,242,255,.15))}83%{opacity:.93;filter:brightness(1.14) contrast(1.03) drop-shadow(0 0 22px rgba(220,242,255,.30))}}

/* Stronger broad illumination; still atmospheric rather than a visible lightning-bolt effect. */
.storm-light{position:absolute;left:0;right:0;top:0;height:64%;z-index:4;pointer-events:none;opacity:0;background:radial-gradient(ellipse 31% 38% at 68% 8%,rgba(235,247,255,.96),rgba(177,215,239,.42) 41%,transparent 74%),radial-gradient(ellipse 54% 33% at 40% 15%,rgba(196,222,239,.53),transparent 70%),linear-gradient(to bottom,rgba(215,234,246,.18),transparent 82%);mix-blend-mode:screen;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 68%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 68%,transparent 100%);will-change:opacity,filter}
#app.title-atmosphere-active .sky-atmosphere{opacity:1}
#app.title-atmosphere-active .storm-light{animation:stormLightV11 12.8s linear infinite}
@keyframes stormLightV11{0%,40.5%,57%,100%{opacity:0;filter:brightness(1)}42.5%{opacity:.08;filter:brightness(1.04)}44.7%{opacity:.34;filter:brightness(1.22)}45.9%{opacity:.035;filter:brightness(1.02)}47.5%{opacity:.54;filter:brightness(1.38)}48.7%{opacity:.055;filter:brightness(1.03)}51.4%{opacity:.29;filter:brightness(1.18)}54.8%{opacity:.06;filter:brightness(1.04)}56.5%{opacity:0;filter:brightness(1)}}

#app:not(.title-atmosphere-active) .sky-haze-band,#app:not(.title-atmosphere-active) .storm-light{animation-play-state:paused!important}



/* BGG opening water-surface V12 — ships read toward viewer; water detail travels away from viewer toward horizon.
   Existing transparent ocean-detail extracts are reused so the motion stays native to the artwork.
   Each layer travels only upward/receding, fades before reset, and is phase-staggered to hide looping. */
#app.title-atmosphere-active .water-layer{transform-origin:50% 92%;will-change:transform,opacity,filter}
#app.title-atmosphere-active .water-a{animation:waterRecedeA12 7.2s linear infinite;filter:brightness(1.08) contrast(1.02)}
#app.title-atmosphere-active .water-b{animation:waterRecedeB12 8.8s linear infinite -2.9s;filter:blur(.25px) brightness(1.12)}
#app.title-atmosphere-active .water-c{animation:waterRecedeC12 5.9s linear infinite -1.7s;filter:brightness(1.20)}
#app.title-atmosphere-active .water-swell{animation:waterSwellRecede12 8.1s linear infinite -4.0s;transform-origin:50% 100%}

@keyframes waterRecedeA12{
  0%{transform:translate3d(-7px,24px,0) scale3d(1.018,1.025,1);opacity:0}
  9%{opacity:.48}
  48%{transform:translate3d(2px,-7px,0) scale3d(1.004,1.000,1);opacity:.58}
  86%{opacity:.40}
  100%{transform:translate3d(8px,-38px,0) scale3d(.989,.974,1);opacity:0}
}
@keyframes waterRecedeB12{
  0%{transform:translate3d(12px,18px,0) scale3d(1.014,1.020,1);opacity:0}
  12%{opacity:.28}
  52%{transform:translate3d(-2px,-9px,0) scale3d(1.001,.997,1);opacity:.39}
  87%{opacity:.25}
  100%{transform:translate3d(-10px,-34px,0) scale3d(.990,.978,1);opacity:0}
}
@keyframes waterRecedeC12{
  0%{transform:translate3d(-4px,15px,0) scale3d(1.010,1.016,1);opacity:0}
  11%{opacity:.16}
  50%{transform:translate3d(3px,-7px,0) scale3d(1.000,.999,1);opacity:.25}
  84%{opacity:.14}
  100%{transform:translate3d(6px,-29px,0) scale3d(.992,.982,1);opacity:0}
}
@keyframes waterSwellRecede12{
  0%{transform:translate3d(0,20px,0) scaleY(1.075);opacity:0}
  12%{opacity:.25}
  52%{transform:translate3d(0,-6px,0) scaleY(1.00);opacity:.39}
  86%{opacity:.22}
  100%{transform:translate3d(0,-31px,0) scaleY(.935);opacity:0}
}
#app:not(.title-atmosphere-active) .water-layer,#app:not(.title-atmosphere-active) .water-swell{animation-play-state:paused!important}



/* BGG opening fog / atmospheric mist V13.
   Three depth bands: horizon/rear, fleet-level/mid, and light foreground surface mist.
   Motion is lateral and slow with depth parallax; opacity stays restrained so ships and wakes remain readable. */
.mist-field{position:absolute;left:-12%;width:124%;pointer-events:none;opacity:0;will-change:transform,opacity;mix-blend-mode:screen;overflow:hidden}
.mist-field::before,.mist-field::after{content:"";position:absolute;inset:-20% -8%;pointer-events:none}

.mist-rear{top:42%;height:22%;z-index:1;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 24%,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 24%,#000 70%,transparent 100%)}
.mist-rear::before{background:radial-gradient(ellipse 24% 38% at 8% 51%,rgba(214,229,239,.25),transparent 72%),radial-gradient(ellipse 30% 42% at 39% 48%,rgba(194,216,230,.22),transparent 73%),radial-gradient(ellipse 27% 38% at 71% 54%,rgba(217,231,240,.22),transparent 71%),radial-gradient(ellipse 22% 34% at 96% 46%,rgba(203,222,234,.21),transparent 72%);filter:blur(10px)}
.mist-rear::after{background:linear-gradient(96deg,transparent 1%,rgba(205,224,236,.06) 15%,rgba(220,233,242,.11) 35%,transparent 53%,rgba(210,227,238,.09) 72%,transparent 98%);filter:blur(8px)}

.mist-mid{top:49%;height:30%;z-index:3;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 77%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 77%,transparent 100%)}
.mist-mid::before{background:radial-gradient(ellipse 25% 33% at 4% 53%,rgba(224,236,244,.16),transparent 72%),radial-gradient(ellipse 31% 37% at 30% 47%,rgba(201,222,235,.18),transparent 73%),radial-gradient(ellipse 28% 34% at 58% 58%,rgba(221,234,243,.17),transparent 73%),radial-gradient(ellipse 32% 36% at 88% 47%,rgba(205,225,237,.18),transparent 74%);filter:blur(13px)}
.mist-mid::after{background:linear-gradient(102deg,transparent 2%,rgba(220,234,243,.07) 23%,transparent 39%,rgba(198,220,234,.08) 61%,rgba(224,236,244,.06) 78%,transparent 98%);filter:blur(10px)}

.mist-fore{top:58%;height:29%;z-index:4;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 27%,#000 72%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 27%,#000 72%,transparent 100%)}
.mist-fore::before{background:radial-gradient(ellipse 23% 29% at 5% 58%,rgba(224,237,245,.11),transparent 73%),radial-gradient(ellipse 30% 31% at 38% 50%,rgba(203,225,238,.12),transparent 74%),radial-gradient(ellipse 27% 30% at 68% 57%,rgba(225,237,245,.105),transparent 73%),radial-gradient(ellipse 25% 28% at 96% 48%,rgba(207,226,238,.12),transparent 73%);filter:blur(15px)}

#app.title-atmosphere-active .mist-rear{animation:mistRearDrift13 27s ease-in-out infinite alternate}
#app.title-atmosphere-active .mist-mid{animation:mistMidDrift13 19s ease-in-out infinite alternate}
#app.title-atmosphere-active .mist-fore{animation:mistForeDrift13 14s ease-in-out infinite alternate}

@keyframes mistRearDrift13{0%{transform:translate3d(-4.8%,-1.0%,0) scale(1.035);opacity:.20}35%{opacity:.34}68%{opacity:.27}100%{transform:translate3d(5.3%,1.2%,0) scale(1.075);opacity:.35}}
@keyframes mistMidDrift13{0%{transform:translate3d(5.2%,1.2%,0) scale(1.055);opacity:.14}42%{opacity:.28}70%{opacity:.20}100%{transform:translate3d(-5.8%,-1.5%,0) scale(1.095);opacity:.29}}
@keyframes mistForeDrift13{0%{transform:translate3d(-6.5%,1.5%,0) scale(1.06);opacity:.07}36%{opacity:.17}72%{opacity:.11}100%{transform:translate3d(6.8%,-1.8%,0) scale(1.105);opacity:.18}}

#app:not(.title-atmosphere-active) .mist-field{animation-play-state:paused!important;opacity:0!important}