/* Fratoz town — homepage hero. Line art by day (colour on hover), lights by night. */
.fratoz-town {
	--town-bg: #fff;
	--town-line: #141414;
	--town-fill: #fff;
	--town-filler: #b9b9b9;
	--town-filler-ln: #c8c8c8;
	--town-dash: #d2d2d2;
	position: relative;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: calc(100vh - 61px);
	min-height: calc(100svh - 61px);
	margin-block: 0 !important;
	padding: 3rem clamp(1rem, 4vw, 3.5rem);
	overflow: hidden;
	background: var(--town-bg);
	color: var(--wp--preset--color--ink, #141414);
	transition: background-color .5s;
}
.fratoz-town.is-night {
	--town-bg: #0d0e12;
	--town-line: #e4e4e4;
	--town-fill: #15161b;
	--town-filler: #34363e;
	--town-filler-ln: #2a2c33;
	--town-dash: #24262c;
	color: #fff;
}

.fratoz-town__copy { position: relative; z-index: 5; width: 100%; max-width: 31rem; }
.fratoz-town__copy > :first-child { margin-top: 0; }
.fratoz-town__copy h1 { margin-top: 1.2rem; margin-bottom: 1.2rem; font-size: clamp(2.6rem, 5.4vw, 5rem) !important; line-height: .95; }
.fratoz-town__hint { font-family: var(--wp--preset--font-family--montserrat, sans-serif); font-size: .8125rem; font-weight: 700; letter-spacing: .06em; line-height: 1.4; text-transform: uppercase; color: #777; }
.fratoz-town__hint strong { color: var(--wp--preset--color--red, #ab1f24); }
.fratoz-town.is-night .fratoz-town__hint { color: #9a9aa2; }
.fratoz-town.is-night .fratoz-town__hint strong { color: #ff5a5f; }
.fratoz-town.is-night .wp-block-button.is-style-outline .wp-block-button__link { color: #fff; border-color: #fff; }

/* the city: fills the section, fades out behind the copy and under the header */
.fratoz-town .fratoz-town__stage {
	position: absolute; inset: 0; z-index: 1; overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 31%, #000 50%), linear-gradient(180deg, transparent 0, #000 9%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, transparent 0, transparent 31%, #000 50%), linear-gradient(180deg, transparent 0, #000 9%);
	mask-composite: intersect;
}
.fratoz-town .fratoz-town__svg { display: block; width: 100%; height: 100%; max-width: none; transform-origin: 0 0; transition: transform .9s cubic-bezier(.65,0,.25,1); }
.fratoz-town.is-moving .fratoz-town__svg { will-change: transform; }
.fratoz-town.is-moving .fratoz-town__svg * { filter: none !important; }
.fratoz-town__svg * { vector-effect: non-scaling-stroke; }
.fratoz-town__svg polygon, .fratoz-town__svg ellipse, .fratoz-town__svg .s { fill: var(--town-fill); stroke: var(--town-line); stroke-width: 1.25; stroke-linejoin: round; stroke-linecap: round; transition: fill .35s, stroke .5s; }
.fratoz-town__svg .ln { fill: none; stroke: var(--town-line); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; transition: stroke .5s; }
.fratoz-town__svg .frame { fill: none !important; }
.fratoz-town__svg use { stroke: none; }
.fratoz-town__svg text { stroke: none; fill: var(--town-line); }
.fratoz-town__svg .filler polygon, .fratoz-town__svg .filler .s { stroke: var(--town-filler); }
.fratoz-town__svg .filler .ln { stroke: var(--town-filler-ln); }
.fratoz-town__svg .dash { fill: none; stroke: var(--town-dash); stroke-width: 1.5; stroke-dasharray: 8 10; }
.fratoz-town__svg .rail { fill: none; stroke: var(--town-line); stroke-width: 5; stroke-linecap: round; }
.fratoz-town__svg .rail-in { fill: none; stroke: var(--town-bg); stroke-width: 2.2; stroke-linecap: round; }
.fratoz-town__cam { transition: transform .9s cubic-bezier(.65,0,.25,1); }
.fratoz-town__par { transition: transform .3s ease-out; }

/* line art by default — colour comes in on hover */
.fratoz-town .lg { color: var(--town-line); transition: color .35s; }
.fratoz-town .awake .lg { color: #ab1f24; }
.fratoz-town .awake .lg.w { color: #fff; }
.fratoz-town .awake .c-w-l { fill: #f4eee8; } .fratoz-town .awake .c-w-r { fill: #e2d8ce; }
.fratoz-town .awake .c-r-t { fill: #c9292f; } .fratoz-town .awake .c-r-l { fill: #ab1f24; } .fratoz-town .awake .c-r-r { fill: #8c171c; }
.fratoz-town .awake .c-i-t { fill: #3a3a3d; } .fratoz-town .awake .c-i-l { fill: #26262a; } .fratoz-town .awake .c-i-r { fill: #18181a; }
.fratoz-town .awake .c-s-t { fill: #f1e9e0; } .fratoz-town .awake .c-s-l { fill: #ddd0c2; } .fratoz-town .awake .c-s-r { fill: #c9b9a8; }
.fratoz-town .awake .red { fill: #ab1f24; } .fratoz-town .awake .ink, .fratoz-town .awake .led { fill: #141414; }
.fratoz-town .awake .win { fill: #34343a; } .fratoz-town .awake .sand { fill: #efe6dc; } .fratoz-town .awake .glass { fill: #f5f1ed; }
.fratoz-town .awake text.tk { fill: #fff; }
.fratoz-town .awake .bulb { fill: #ab1f24; }

/* night: dark city, white lines; hovered places light up */
.fratoz-town.is-night .awake .lg { color: #ff4148; }
.fratoz-town.is-night .awake .c-w-t { fill: #2b2c33; } .fratoz-town.is-night .awake .c-w-l { fill: #23242a; } .fratoz-town.is-night .awake .c-w-r { fill: #1b1c21; }
.fratoz-town.is-night .awake .c-s-t { fill: #221f1c; } .fratoz-town.is-night .awake .c-s-l, .fratoz-town.is-night .awake .c-s-r { fill: #1a1816; }
.fratoz-town.is-night .awake .win, .fratoz-town.is-night .awake .glass { fill: #ffcf66; filter: drop-shadow(0 0 4px rgba(255, 207, 102, .8)); }
.fratoz-town.is-night .awake .red, .fratoz-town.is-night .awake .c-r-l, .fratoz-town.is-night .awake .c-r-t { fill: #e0262d; filter: drop-shadow(0 0 5px rgba(255, 60, 66, .75)); }
.fratoz-town.is-night .awake .led { fill: #0f0f14; filter: drop-shadow(0 0 8px rgba(255, 70, 76, .55)); }
.fratoz-town.is-night .awake .bulb { fill: #ffd77a; filter: drop-shadow(0 0 4px #ffd77a); }
.fratoz-town.is-night .bulb { fill: #8a6d2e; }
.fratoz-town.is-night .awake .ink { fill: #0a0a0d; }

/* street furniture + lit windows */
.fratoz-town .halo, .fratoz-town .nw, .fratoz-town .head-l { display: none; }
.fratoz-town.is-night .halo { display: inline; fill: rgba(255, 215, 122, .16); stroke: none; }
.fratoz-town.is-night .bulbl { fill: #ffd77a; stroke: #ffd77a; }
.fratoz-town.is-night .nw { display: inline; fill: #ffcf66 !important; stroke: none !important; opacity: .85; }
.fratoz-town.is-night .nw.nf { animation: fzt-flicker 5s steps(1) infinite; }
.fratoz-town.is-night .head-l { display: inline; fill: rgba(255, 236, 170, .35); stroke: none; }
@keyframes fzt-flicker { 0%, 60% { opacity: .85; } 61%, 100% { opacity: .1; } }
.fratoz-town .signal[data-s="go"] .tl-g { fill: #3ec46d; }
.fratoz-town .signal[data-s="amber"] .tl-y { fill: #f5b331; }
.fratoz-town .signal[data-s="stop"] .tl-r { fill: #e0262d; }

.fratoz-town .spot { cursor: pointer; outline: none; transition: opacity .4s, transform .35s cubic-bezier(.34,1.6,.64,1); }
.fratoz-town .spot.awake { transform: translateY(-5px); }
.fratoz-town .zoomed .spot:not(.picked), .fratoz-town .zoomed .filler { opacity: .3; }

/* ambient life (busier when awake) */
@keyframes fzt-spin { to { transform: rotate(360deg); } }
@keyframes fzt-ride { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes fzt-bob { to { transform: translateY(-3px); } }
@keyframes fzt-cheer { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }
@keyframes fzt-blink { 50% { fill: var(--town-fill); } }
@keyframes fzt-op { 50% { opacity: .15; } }
@keyframes fzt-ball { from { transform: translateY(-2.2px); } to { transform: translateY(0); } }
@keyframes fzt-eq { from { transform: scaleY(.25); } }
@keyframes fzt-tick { to { transform: translateX(-9.6px); } }
@keyframes fzt-flag { 50% { transform: skewY(7deg) scaleX(.86); } }
.fratoz-town .wheel { transform-box: view-box; animation: fzt-spin 24s linear infinite; }
.fratoz-town .cart { offset-rotate: auto; animation: fzt-ride 9s linear infinite; }
.fratoz-town .walker { offset-rotate: 0deg; animation: fzt-walk 14s linear infinite; }
@keyframes fzt-walk { 0% { offset-distance: 0%; opacity: 0; } 6%, 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.fratoz-town .horse { animation: fzt-bob 1.4s ease-in-out infinite alternate; }
.fratoz-town .horse.h2 { animation-delay: -.7s; }
.fratoz-town .cheer { animation: fzt-cheer 1.8s ease-in-out infinite; }
.fratoz-town .awake .arw { animation: fzt-blink 1.3s steps(2) infinite; }
.fratoz-town .bulb { animation: fzt-blink 1.8s steps(2) infinite; }
.fratoz-town .bulb.b2 { animation-delay: .9s; }
.fratoz-town .star { transform-box: fill-box; transform-origin: 50% 50%; animation: fzt-spin 7s linear infinite; }
.fratoz-town .poster { opacity: 0; transition: opacity .4s; }
.fratoz-town .poster.on { opacity: 1; }
.fratoz-town .ball { animation: fzt-ball 1.3s cubic-bezier(.5,0,.5,1) infinite alternate; }
.fratoz-town .eq { transform-box: fill-box; transform-origin: 50% 100%; animation: fzt-eq .9s ease-in-out infinite alternate; }
.fratoz-town .eq.e2 { animation-delay: -.3s; } .fratoz-town .eq.e3 { animation-delay: -.6s; }
.fratoz-town .rec, .fratoz-town .beacon { animation: fzt-op 1.2s steps(2) infinite; }
.fratoz-town .ticker { animation: fzt-tick 9s linear infinite; }
.fratoz-town .flag { transform-box: fill-box; transform-origin: 0 50%; animation: fzt-flag 1.6s ease-in-out infinite; }
.fratoz-town .head { transition: transform .45s cubic-bezier(.34,1.6,.64,1); transform: translateY(40px); }
.fratoz-town .head.up { transform: none; }
.fratoz-town .bubble { opacity: 0; transition: opacity .2s; }
.fratoz-town .bubble.on { opacity: 1; }
.fratoz-town .bubble text { fill: #141414; }
.fratoz-town .bubble .s { fill: #fff; stroke: #141414; }

/* day / night switch */
.fratoz-town__switch { position: absolute; z-index: 6; top: 1.25rem; right: clamp(1rem, 4vw, 3.5rem); display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .85rem; border: 2px solid currentColor; border-radius: 999px; background: var(--town-bg); color: inherit; font: 800 .75rem/1 var(--wp--preset--font-family--montserrat, sans-serif); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.fratoz-town__switch svg { width: 16px; height: 16px; }
.fratoz-town__switch .moon, .fratoz-town.is-night .fratoz-town__switch .sun { display: inline; }
.fratoz-town__switch .sun, .fratoz-town.is-night .fratoz-town__switch .moon, .fratoz-town__switch .t-day, .fratoz-town.is-night .fratoz-town__switch .t-night { display: none; }
.fratoz-town.is-night .fratoz-town__switch .t-day { display: inline; }
.fratoz-town__switch:focus-visible { outline: 3px solid #ab1f24; outline-offset: 3px; }

/* name tag + info card */
.fratoz-town__tag { position: absolute; z-index: 6; transform: translate(-50%, -100%) scale(.8); background: #141414; color: #fff; font: 800 1rem/1 var(--wp--preset--font-family--montserrat, sans-serif); letter-spacing: .06em; text-transform: uppercase; padding: .7rem .95rem; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s, transform .25s cubic-bezier(.34,1.6,.64,1); }
.fratoz-town__tag::after { content: ""; position: absolute; left: 50%; bottom: -8px; margin-left: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: #141414; }
.fratoz-town__tag.on { opacity: 1; transform: translate(-50%, -100%); }
.fratoz-town.is-night .fratoz-town__tag { background: #fff; color: #141414; }
.fratoz-town.is-night .fratoz-town__tag::after { border-top-color: #fff; }
.fratoz-town__card { position: absolute; z-index: 7; left: 0; top: 0; width: 360px; max-width: calc(100% - 2rem); box-sizing: border-box; background: #f5f1ed; color: #141414; border: 3px solid #141414; box-shadow: 8px 8px 0 #ab1f24; padding: 1.4rem 1.5rem 1.5rem; visibility: hidden; clip-path: inset(-12px 100% -12px -12px); transition: clip-path .45s cubic-bezier(.65,0,.25,1), visibility 0s .45s; }
.fratoz-town__card.from-left { clip-path: inset(-12px -12px -12px 100%); }
.fratoz-town__card.on, .fratoz-town__card.from-left.on { visibility: visible; clip-path: inset(-12px -12px -12px -12px); transition: clip-path .55s cubic-bezier(.65,0,.25,1); }
.fratoz-town__card > *, .fratoz-town__points li { opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .4s cubic-bezier(.34,1.4,.64,1); }
.fratoz-town__card.on > *, .fratoz-town__card.on .fratoz-town__points li { opacity: 1; transform: none; }
.fratoz-town__card.on .fratoz-town__num { transition-delay: .3s; }
.fratoz-town__card.on .fratoz-town__title { transition-delay: .38s; }
.fratoz-town__card.on .fratoz-town__line { transition-delay: .48s; }
.fratoz-town__card.on .fratoz-town__points { transition-delay: .55s; }
.fratoz-town__card.on .fratoz-town__points li { transition-delay: calc(.6s + var(--n, 0) * .09s); }
.fratoz-town__card.on .fratoz-town__go { transition-delay: .9s; }
.fratoz-town__card.on .fratoz-town__x { transition-delay: .3s; }
.fratoz-town__num { display: block; font: 800 .75rem/1 var(--wp--preset--font-family--montserrat, sans-serif); letter-spacing: .12em; color: #ab1f24; }
.fratoz-town__title { font: 900 1.5rem/1.1 var(--wp--preset--font-family--montserrat, sans-serif); text-transform: uppercase; margin: .45rem 0 .65rem; }
.fratoz-town__title::after { content: ""; display: block; width: 0; height: 4px; margin-top: .6rem; background: #ab1f24; transition: width .5s .6s cubic-bezier(.65,0,.25,1); }
.fratoz-town__card.on .fratoz-town__title::after { width: 56px; }
.fratoz-town__line { margin: 0 0 .9rem; font-size: .95rem; line-height: 1.55; }
.fratoz-town__points { list-style: none; margin: 0 0 1.2rem; padding: 0; transform: none !important; opacity: 1 !important; }
.fratoz-town__points li { position: relative; padding-left: 1.5rem; margin: .35rem 0; font-size: .9rem; font-weight: 600; line-height: 1.4; }
.fratoz-town__points li::before { content: ""; position: absolute; left: 0; top: .3em; width: .85rem; height: .55rem; background: #ab1f24; clip-path: polygon(0 0, 65% 0, 100% 50%, 65% 100%, 0 100%); }
.fratoz-town__go { display: inline-block; background: #ab1f24; color: #fff; font: 800 .875rem/1 var(--wp--preset--font-family--montserrat, sans-serif); letter-spacing: .08em; text-transform: uppercase; padding: 1rem 1.3rem; text-decoration: none; }
.fratoz-town__go:hover { background: #141414; }
.fratoz-town__x { position: absolute; right: .5rem; top: .4rem; border: 0; background: none; font: 700 1.5rem/1 var(--wp--preset--font-family--montserrat, sans-serif); cursor: pointer; color: #141414; }
.fratoz-town__go:focus-visible, .fratoz-town__x:focus-visible { outline: 3px solid #141414; outline-offset: 3px; }

@media (max-width: 820px) {
	.fratoz-town { flex-direction: column; align-items: stretch; padding-bottom: 0; min-height: 0; }
	.fratoz-town .fratoz-town__stage { position: relative; inset: auto; height: 78vh; order: 2; margin: 1.5rem calc(-1 * clamp(1rem, 4vw, 3.5rem)) 0; width: calc(100% + 2 * clamp(1rem, 4vw, 3.5rem));
		-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%); mask-image: linear-gradient(180deg, transparent 0, #000 10%); }
	.fratoz-town__copy { order: 1; margin-top: 2.5rem; }
	.fratoz-town__switch { top: .9rem; }
	.fratoz-town__card { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
	.fratoz-town *, .fratoz-town__cam, .fratoz-town .spot { animation: none !important; transition: none !important; }
}