/* Weather effect over the /discover hero photo. Built by assets/discover-weather-fx.js from the same London weather
   the "London right now" chip shows. Sits in front of the photo, behind the ticket label and the chip. */
.hero-fx{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;clip-path:inset(1% 0 3% 0);--fall:320px}
.hero-fx.fx-rain{background:rgba(30,42,64,.2)}
.hero-fx.fx-storm{background:radial-gradient(circle at 90% 24%,rgba(18,26,42,.4) 0,rgba(18,26,42,.22) 24%,rgba(18,26,42,0) 52%),rgba(24,34,54,.14)}
/* storm and thunder: the photo itself goes dull and heavy, so the setting sun no longer glows */
.greenwich-scene.wx-storm>img{filter:brightness(.74) saturate(.68) contrast(1.04);transition:filter .8s ease}
.hero-fx i{position:absolute;top:0;display:block;will-change:transform;animation-play-state:paused}
.hero-fx.is-moving i{animation-play-state:running}
/* rain: thin slanted streaks */
.hero-fx.fx-rain i,.hero-fx.fx-storm i{width:2px;border-radius:1px;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.95));transform:rotate(14deg);animation:heroRain .8s linear infinite}
@keyframes heroRain{from{translate:0 -40px}to{translate:-48px var(--fall)}}
/* snow: soft white dots, same look as the tile snow */
.hero-fx.fx-snow i{border-radius:50%;background:#fff;box-shadow:0 0 6px 1px rgba(255,255,255,.7);animation:heroSnow 8s linear infinite}
@keyframes heroSnow{0%{translate:0 -14px}25%{translate:10px calc(var(--fall)*.25)}50%{translate:-8px calc(var(--fall)*.5)}75%{translate:9px calc(var(--fall)*.75)}100%{translate:0 var(--fall)}}
/* wind-blown leaves (storm, thunder) */
.hero-fx s{position:absolute;left:-30px;text-decoration:none;line-height:1;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35));animation:heroLeaf 3s linear infinite;animation-play-state:paused;opacity:0}
.hero-fx.is-moving s{animation-play-state:running}
@keyframes heroLeaf{0%{translate:0 0;rotate:0deg;opacity:0}8%{opacity:.95}50%{translate:210px 26px;rotate:300deg;opacity:.95}92%{opacity:.9}100%{translate:440px 6px;rotate:640deg;opacity:0}}
/* lightning (thunder): soft double flash plus a bolt; at most two flashes in 0.7 s, peak 0.45 */
.hero-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
.hero-bolt{position:absolute;top:0;width:34px;height:70%;opacity:0;pointer-events:none;filter:drop-shadow(0 0 8px rgba(255,255,255,.95))}
.hero-bolt svg{display:block;width:100%;height:100%}
.hero-fx.zap .hero-flash{animation:heroFlash .7s linear 1}
.hero-fx.zap .hero-bolt{animation:heroBolt .7s linear 1}
@keyframes heroFlash{0%{opacity:0}6%{opacity:.45}14%{opacity:.08}26%{opacity:.35}60%,100%{opacity:0}}
@keyframes heroBolt{0%{opacity:0}5%{opacity:.95}16%{opacity:.2}26%{opacity:.9}50%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.hero-fx{display:none}}

/* Soften only the sky; retain the original autumn colour and light in the foreground. */
.greenwich-scene.wx-cloud>img{filter:none}
.hero-fx.fx-cloud{background:linear-gradient(180deg,rgba(120,132,146,.22),rgba(145,154,166,.12) 35%,transparent 55%);backdrop-filter:brightness(.94) saturate(.72);-webkit-backdrop-filter:brightness(.94) saturate(.72);mask-image:linear-gradient(#000 0%,#000 24%,transparent 58%);-webkit-mask-image:linear-gradient(#000 0%,#000 24%,transparent 58%)}
.hero-cloud{position:absolute;left:-75%;top:var(--cloud-top);width:var(--cloud-size);height:22%;border-radius:50%;background:radial-gradient(ellipse at 35% 55%,rgba(191,197,205,.66),rgba(165,174,186,.4) 44%,transparent 72%);filter:blur(8px);animation:heroCloudDrift 36s linear infinite;animation-play-state:paused;will-change:transform}
.hero-cloud::before,.hero-cloud::after{content:"";position:absolute;inset:-24% 18% 14%;border-radius:50%;background:radial-gradient(ellipse,rgba(193,198,204,.7),transparent 70%)}
.hero-cloud::after{inset:12% -12% -12% 35%;opacity:.65}
.hero-fx.is-moving .hero-cloud{animation-play-state:running}
@keyframes heroCloudDrift{from{transform:translateX(0)}to{transform:translateX(300%)}}