/* The home hero's Adventure montage (2026-10-15, hero-montage.js): instead of the old fight video, the Adventure's maps one after another,
   with a camera move, weather, a foe rising at the side, a flash between scenes (no caption, 2026-10-15) */
.hm { position: absolute; inset: 0; z-index: -3; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, #1a120c, #07060a 70%); }
.hm::before { content: none; }
.hm-stage { position: absolute; inset: 0; z-index: 1; }
.hm-shot { position: absolute; inset: 0; opacity: 0; transform: scale(1.07); transition: opacity 1.5s ease, filter 1.5s ease, transform 2.6s cubic-bezier(.16, .7, .2, 1); filter: blur(6px) brightness(1.6) saturate(1.1); }
/* the push-in: each new scene comes in a little close and settles (2026-10-15, the owner: "more flashy") */
.hm-shot.is-in { opacity: 1; transform: none; filter: blur(0) brightness(1) saturate(1); }
.hm-shot.is-gone { opacity: 0; transform: scale(1.03); filter: blur(4px) brightness(1.5); transition-duration: 1.5s; }
/* the camera: the map and whoever stands on it move together */
.hm-cam { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.hm-cam > img { position: absolute; left: 0; top: 0; max-width: none; filter: saturate(.92) contrast(1.08) brightness(.72); }
/* the monsters and the villagers on the map (hero-montage.js mobsMake): the pictures as they are, a soft shadow at their feet, dimmed with the map */
.hm-mob { position: absolute; left: 0; top: 0; display: flex; align-items: flex-end; justify-content: center; filter: brightness(.82) saturate(.95); }
.hm-mob img { display: block; height: 100%; width: auto; max-width: none; transform: scaleX(var(--hm-face, 1)); }
.hm-mob.is-ghost { opacity: .85; }
.hm-mob i { position: absolute; left: 50%; bottom: -3%; width: 70%; height: 9%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); }
.hm-mob.is-ghost i { display: none; }
.hm-world { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
/* light leaks: warm and cool glows drifting slowly over the film */
.hm-leak { position: absolute; inset: 0; z-index: 6; pointer-events: none; mix-blend-mode: screen; overflow: hidden; }
.hm-leak i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; opacity: .1; filter: blur(40px); }
.hm-leak i:first-child { left: -20vmax; top: -25vmax; background: radial-gradient(closest-side, rgba(255, 170, 80, 1), rgba(255, 120, 40, 0)); animation: hm-leak1 19s ease-in-out infinite alternate; }
.hm-leak i:last-child { right: -25vmax; bottom: -30vmax; background: radial-gradient(closest-side, rgba(120, 170, 255, 1), rgba(80, 120, 255, 0)); animation: hm-leak2 23s ease-in-out infinite alternate; }
@keyframes hm-leak1 { from { transform: translate(0, 0) scale(1); opacity: .06; } to { transform: translate(18vmax, 10vmax) scale(1.2); opacity: .16; } }
@keyframes hm-leak2 { from { transform: translate(0, 0) scale(1.1); opacity: .05; } to { transform: translate(-16vmax, -8vmax) scale(.9); opacity: .13; } }
.hm.is-cut .hm-leak i:first-child { animation: hm-leak1 19s ease-in-out infinite alternate, hm-leakpop 1.4s ease-out; }
@keyframes hm-leakpop { 0% { opacity: .1; } 20% { opacity: .5; } 100% { opacity: .1; } }

/* the colour of each place */
.hm-tint { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: soft-light; transition: background 1.6s; }
.hm[data-tint="gold"] .hm-tint { background: linear-gradient(180deg, rgba(255, 196, 110, .35), rgba(40, 20, 0, .3)); }
.hm[data-tint="warm"] .hm-tint { background: linear-gradient(180deg, rgba(255, 170, 90, .35), rgba(60, 20, 10, .35)); }
.hm[data-tint="moon"] .hm-tint { background: linear-gradient(180deg, rgba(120, 160, 230, .45), rgba(10, 20, 40, .5)); }
.hm[data-tint="candle"] .hm-tint { background: radial-gradient(ellipse at 50% 60%, rgba(255, 170, 70, .4), rgba(20, 8, 0, .6) 70%); animation: hm-flicker 3.2s infinite steps(1); }
.hm[data-tint="torch"] .hm-tint { background: radial-gradient(ellipse at 40% 55%, rgba(255, 130, 40, .45), rgba(20, 6, 0, .55) 70%); animation: hm-flicker 2.4s infinite steps(1); }
.hm[data-tint="bloom"] .hm-tint { background: linear-gradient(180deg, rgba(255, 140, 210, .4), rgba(60, 10, 50, .35)); }
.hm[data-tint="void"] .hm-tint { background: linear-gradient(180deg, rgba(150, 90, 255, .45), rgba(20, 5, 40, .5)); }
.hm[data-tint="cold"] .hm-tint { background: linear-gradient(180deg, rgba(160, 190, 230, .35), rgba(10, 14, 30, .5)); }
.hm[data-tint="holy"] .hm-tint { background: linear-gradient(180deg, rgba(255, 245, 210, .5), rgba(120, 150, 210, .25)); }
.hm[data-tint="hell"] .hm-tint { background: linear-gradient(0deg, rgba(255, 70, 20, .5), rgba(40, 0, 0, .4)); }
@keyframes hm-flicker { 0% { opacity: 1; } 12% { opacity: .82; } 18% { opacity: 1; } 47% { opacity: .9; } 52% { opacity: 1; } 71% { opacity: .78; } 76% { opacity: .95; } }

/* light from above: the Heavens; drifting mist: the Graveyard */
.hm-rays { position: absolute; inset: -20% -10% 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 1.6s; mix-blend-mode: screen;
	background: repeating-linear-gradient(100deg, rgba(255, 244, 210, 0) 0 60px, rgba(255, 244, 210, .16) 90px, rgba(255, 244, 210, 0) 150px 220px);
	-webkit-mask: linear-gradient(180deg, #000, transparent 85%); mask: linear-gradient(180deg, #000, transparent 85%); animation: hm-rays 14s ease-in-out infinite alternate; }
.hm[data-fx="rays"] .hm-rays { opacity: 1; }
.hm[data-fx="motes"] .hm-rays { opacity: .35; }
@keyframes hm-rays { from { transform: translateX(-4%) skewX(-4deg); } to { transform: translateX(4%) skewX(4deg); } }
.hm-fogs { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 1.6s; }
.hm-fogs i { position: absolute; left: -40%; width: 180%; height: 55%; bottom: -8%; background: radial-gradient(ellipse at center, rgba(200, 215, 235, .32), transparent 62%); filter: blur(26px); animation: hm-fog 22s linear infinite; }
.hm-fogs i + i { bottom: 22%; opacity: .7; animation-duration: 31s; animation-direction: reverse; }
.hm[data-fx="fog"] .hm-fogs, .hm[data-fx="storm"] .hm-fogs { opacity: 1; }
.hm[data-fx="dust"] .hm-fogs { opacity: .45; }
@keyframes hm-fog { from { transform: translateX(-12%); } to { transform: translateX(12%); } }

.hm-fx { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; }
/* the foes: rise out of the dark at one side and sink away before the cut; the pictures as they are, no glow and no fade at the edges (2026-10-15, the owner) */
.hm-figs { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hm-fig { position: absolute; bottom: 7vh; height: min(58vh, 560px); opacity: 0; transform: translateY(14%) scale(.94); transition: opacity 1.4s ease, transform 2.6s cubic-bezier(.2, .7, .2, 1), filter 1.4s; filter: brightness(.55) blur(2px); }
.hm-fig.is-left { left: 4%; }
.hm-fig.is-right { right: 4%; }
.hm-fig.is-wide { height: min(48vh, 470px); }
.hm-fig.is-flip img { transform: scaleX(-1); animation-name: hm-breathe-flip; }
@keyframes hm-breathe-flip { 0%, 100% { transform: scaleX(-1) translateY(0); } 50% { transform: scaleX(-1) translateY(-1.2%); } }
.hm-fig img { height: 100%; width: auto; max-width: none; display: block; animation: hm-breathe 4.2s ease-in-out infinite; }
.hm-fig.is-in { opacity: 1; transform: translateY(0) scale(1); filter: none; }
.hm-fig.is-out { opacity: 0; transform: translateY(6%) scale(1.03); filter: brightness(1.6) blur(3px); transition-duration: 1.2s; }
@keyframes hm-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.2%); } }

/* the cut between scenes: a hot flash sweeping across; Eskiyurt's lightning */
.hm-flash { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; mix-blend-mode: screen;
	background: linear-gradient(105deg, transparent 30%, rgba(255, 226, 170, .55) 48%, rgba(255, 255, 255, .8) 50%, rgba(255, 226, 170, .55) 52%, transparent 70%); background-size: 300% 100%; }
.hm.is-cut .hm-flash { animation: hm-sweep 1.3s ease-out; }
@keyframes hm-sweep { 0% { opacity: 0; background-position: 100% 0; } 25% { opacity: 1; } 100% { opacity: 0; background-position: 0 0; } }
.hm-bolt { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at 55% 20%, rgba(220, 180, 255, .75), rgba(140, 80, 255, .25) 45%, transparent 75%); mix-blend-mode: screen; }
.hm.is-bolt .hm-bolt { animation: hm-bolt .9s ease-out; }
@keyframes hm-bolt { 0% { opacity: 0; } 8% { opacity: 1; } 16% { opacity: .2; } 24% { opacity: .9; } 100% { opacity: 0; } }

/* a film's edges: vignette, grain, thin letterbox */
.hm-vig { position: absolute; inset: 0; z-index: 7; pointer-events: none; box-shadow: inset 0 0 22vmin rgba(0, 0, 0, .85); background: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent 9%, transparent 91%, rgba(0, 0, 0, .55)); }
.hm-grain { position: absolute; inset: -50%; z-index: 7; pointer-events: none; opacity: .09; mix-blend-mode: overlay; animation: hm-grain .9s steps(4) infinite;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes hm-grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } 100% { transform: translate(1%, 3%); } }



.hm.is-paused * { animation-play-state: paused !important; }
@media (max-width: 720px) {
	.hm-fig { height: 34vh; opacity: 0; }
	.hm-fig.is-in { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.hm-grain, .hm-fx { display: none; }
}
/* phones and touch screens (2026-10-15, the owner: "pretty slow on mobile"): no film grain or light leaks, no blur on the mist or the scene fades,
   no filter on the people; full-screen blending is costly on phone graphics chips */
@media (max-width: 720px), (pointer: coarse) {
	.hm-grain, .hm-leak { display: none; }
	.hm-fogs i { filter: none; background: radial-gradient(ellipse at center, rgba(200, 215, 235, .18), transparent 62%); animation-duration: 30s; }
	.hm-shot, .hm-shot.is-in, .hm-shot.is-gone { filter: none; transition: opacity 1.5s ease, transform 2.6s cubic-bezier(.16, .7, .2, 1); }
	.hm-mob { filter: none; }
	.hm-rays { mix-blend-mode: normal; opacity: 0; }
	.hm[data-fx="rays"] .hm-rays { opacity: .5; }
	.hm-fig img { animation: none; }
}