/* The announcement banner and popup (Epic 12, client-editable through the
   Announcements screen): the gold banner above the header with the ringing
   bell, and the native <dialog> popup. Enqueued only while an announcement
   is live (or previewed). Carried over from the 2026-10 theme-era include
   with its review history intact. Motion rule: the
   panel, the staggered reveals and the sheen move by transform/opacity
   only, the beam rides the same registered-angle conic as the dealer
   marquee, and reduced motion stops every one of them. */

/* ==========================================================================
   BANNER: a normal-flow gold slab that scrolls away above the sticky nav
   ========================================================================== */
.alloway-announce {
	background: var(--bold-gold);
	color: var(--bold-dark);
	font-family: var(--bold-cond);
}

.alloway-announce__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.5rem;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0.35rem clamp(1rem, 4vw, 2rem);
}

.alloway-announce__label {
	display: inline-flex;
	gap: 0.6rem;
	align-items: center;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* The ringing bell (Jack 2026-10-02, replacing the arrow): an inline SVG
   whose timing is traced from Jack's reference GIF frame by frame (90
   frames at 33 fps, a 2.7s loop): a slow lean left, five fast swings of
   about 20 degrees each way, settled by 1.6s, still for the rest of the
   loop. Body, knob and sound arcs ring as one group about the knob; the
   clapper swings 1.6x further on its own; the arcs shrink in the wind-up
   and grow while the bell rings hard. Red is the forms plugin's error red
   (the palette has no red); 4.6:1 on the gold slab. */
.alloway-announce__bell {
	flex: none;
	width: 20px;
	height: 18px;
	overflow: visible;
	color: #b3261e;
}

.alloway-announce__bell-ring,
.alloway-announce__bell-clapper,
.alloway-announce__bell-arcs {
	transform-box: view-box;
}

/* The knob is the pivot (viewBox units). */
.alloway-announce__bell-ring,
.alloway-announce__bell-clapper {
	transform-origin: 13px 2.3px;
}

.alloway-announce__bell-ring {
	animation: alloway-announce-ring 2.7s ease-in-out infinite;
}

.alloway-announce__bell-clapper {
	animation: alloway-announce-clapper 2.7s ease-in-out infinite;
}

/* The arcs breathe about the bell's centre, inside the ringing group. */
.alloway-announce__bell-arcs {
	transform-origin: 13px 10.6px;
	animation: alloway-announce-arcs 2.7s ease-in-out infinite;
}

.alloway-announce__lines {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.25rem;
}

.alloway-announce__tel {
	display: inline-flex;
	gap: 0.45rem;
	align-items: center;
	min-height: 36px;
	color: var(--bold-dark);
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.alloway-announce__tel:hover,
.alloway-announce__tel:focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.alloway-announce__tel:focus-visible,
.alloway-announce__details:focus-visible {
	outline: 2px solid var(--bold-dark);
	outline-offset: 2px;
}

.alloway-announce__role {
	padding: 0.15rem 0.45rem;
	border-radius: 4px;
	background: var(--bold-dark);
	color: var(--bold-gold);
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.alloway-announce__details {
	margin-left: auto;
	padding: 0.4rem 0.95rem;
	border: 2px solid var(--bold-dark);
	border-radius: 999px;
	color: var(--bold-dark);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition:
		background var(--alloway-transition),
		color var(--alloway-transition);
}

.alloway-announce__details:hover,
.alloway-announce__details:focus-visible {
	background: var(--bold-dark);
	color: var(--bold-gold);
}

/* Touch widths: 44px rows keep the numbers tappable. */
@media (max-width: 905px) {
	.alloway-announce__tel {
		min-height: 44px;
	}
}

@media (max-width: 600px) {
	.alloway-announce__inner {
		gap: 0 0.75rem;
		padding-top: 0.4rem;
		padding-bottom: 0.25rem;
	}

	/* Label and Details share line one; the two numbers split line two
	   as fixed halves so they never stack into a third line. */
	.alloway-announce__details {
		order: 1;
	}

	.alloway-announce__lines {
		display: grid;
		flex-basis: 100%;

		/* Two columns from 360px up; below that (320px floor) the links
		   stack, so a full number never runs past the screen edge. */
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
		gap: 0 0.5rem;
		order: 2;
	}

	.alloway-announce__tel {
		gap: 0.35rem;
		font-size: 0.8rem;
	}

	.alloway-announce__role {
		padding: 0.1rem 0.35rem;
		font-size: 0.58rem;
	}
}

/* ==========================================================================
   DIALOG: native top layer. The element itself is the full-viewport dim
   and a scroll container with overscroll containment, so wheel and touch
   over it never chain to the page. No overflow:hidden anywhere in this
   file: html never gets one (worklog patterns 7 and 25: that unsticks the
   header and shifts the gutter) and decorative clipping uses overflow:
   clip, which makes no scroll container.
   ========================================================================== */
.alloway-announce-dialog {
	position: fixed;
	inset: 0;
	width: auto;
	max-width: none;
	height: auto;
	max-height: none;
	margin: 0;
	padding: 16px;
	border: 0;
	background: rgb(19 17 17 / 72%);
	color: #fff;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	overflow: auto;
	overscroll-behavior: contain;
}

.alloway-announce-dialog::backdrop {
	background: transparent;
}

/* Flex + auto margins (not grid centering): when the panel is taller than
   a short screen, auto margins collapse to 0 so its TOP stays reachable
   and the dialog scrolls to the rest; centered-overflow would clip it. */
.alloway-announce-dialog[open] {
	display: flex;
	animation: alloway-announce-fade 260ms var(--bold-ease) both;
}

.alloway-announce-dialog.is-closing {
	animation: alloway-announce-fade-out 180ms var(--bold-ease) forwards;
}

.alloway-announce-dialog__panel {
	/* The footer dialog sits outside the block wrapper's border-box reset
	   (review 2026-10-01): size the panel INCLUDING its padding or 100%
	   plus padding bleeds 12px past each phone edge. */
	box-sizing: border-box;
	position: relative;
	width: 100%;
	max-width: 560px;
	margin: auto;
	padding: clamp(1.5rem, 4vw, 2.75rem);
	border-radius: var(--bold-radius);
	background: var(--bold-dark);
	box-shadow:
		inset 0 0 0 1px rgb(251 214 74 / 28%),
		0 30px 80px rgb(0 0 0 / 55%);
	animation: alloway-announce-panel-in 560ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.alloway-announce-dialog.is-closing .alloway-announce-dialog__panel {
	animation: alloway-announce-panel-out 180ms var(--bold-ease) forwards;
}

/* Popup photo (Jack 2026-10-02). The JS hands the URL in through
   --alloway-announce-photo once it is preloaded; the CSS owns both masks.
   Base (through 905px, the touch widths): FULL, the photo sits behind
   everything under a heavy veil and the panel keeps its 560px. From 906px
   up: SPLIT, the panel widens to 820px, the text column keeps solid black
   and the photo fades in on the right. The split starts only where the
   panel is always its full 820px, so the 54% text column is wider than the
   contact rows' minimum (review 2026-10-02: at 601px the capped column was
   23px narrower than the rows). */
.alloway-announce-dialog__panel--photo {
	background-image:
		linear-gradient(
			180deg,
			rgb(19 17 17 / 70%) 0,
			rgb(19 17 17 / 90%) 55%,
			rgb(19 17 17 / 96%) 100%
		),
		var(--alloway-announce-photo, none);
	background-position: center;
	background-size: cover;
}

@media (min-width: 906px) {
	/* The opaque stop (56%) sits past the text column's right edge (54% of
	   the content box = about 53.6% of the panel), so the photo contributes
	   only under empty padding, never under text (review 2026-10-02). */
	.alloway-announce-dialog__panel--photo {
		max-width: 820px;
		background-image:
			linear-gradient(
				90deg,
				var(--bold-dark) 0 56%,
				rgb(19 17 17 / 92%) 62%,
				rgb(19 17 17 / 55%) 72%,
				rgb(19 17 17 / 12%) 100%
			),
			var(--alloway-announce-photo, none);
		background-position: 78% center;
	}

	.alloway-announce-dialog__panel--photo > .alloway-announce-dialog__reveal {
		max-width: 54%;
	}
}

/* Staggered reveal of the panel's content, top to bottom. */
.alloway-announce-dialog__reveal {
	animation: alloway-announce-rise 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.alloway-announce-dialog__reveal--1 {
	animation-delay: 80ms;
}

.alloway-announce-dialog__reveal--2 {
	animation-delay: 160ms;
}

.alloway-announce-dialog__reveal--3 {
	animation-delay: 240ms;
}

.alloway-announce-dialog__reveal--4 {
	animation-delay: 320ms;
}

.alloway-announce-dialog__reveal--5 {
	animation-delay: 400ms;
}

/* ---- The border beam: the marquee's rotating conic comet under a ring
   mask, riding the panel's hairline. Unsupported browsers keep the static
   inset hairline on the panel and never see a broken beam. ---- */
@property --alloway-announce-beam-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

@supports (mask-composite: exclude) and
	(background: conic-gradient(from 0deg, #000, #fff)) {
	.alloway-announce-dialog__beam {
		position: absolute;
		inset: 0;
		padding: 1.5px;
		border-radius: var(--bold-radius);
		pointer-events: none;
		mask:
			linear-gradient(#fff 0 0) content-box,
			linear-gradient(#fff 0 0);
		mask-composite: exclude;
		-webkit-mask-composite: xor;
	}

	.alloway-announce-dialog__beam::after {
		content: "";
		position: absolute;
		inset: 0;
		background: conic-gradient(
			from var(--alloway-announce-beam-angle),
			transparent 0deg,
			transparent 300deg,
			var(--bold-gold-deep) 330deg,
			var(--bold-gold) 356deg,
			transparent 358deg
		);
		animation: alloway-announce-beam 6s linear infinite;
	}
}

.alloway-announce-dialog__close {
	position: absolute;
	top: 12px;
	right: 12px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 8%);
	color: #fff;
	cursor: pointer;
	transition:
		background var(--alloway-transition),
		color var(--alloway-transition),
		transform var(--alloway-transition);
}

.alloway-announce-dialog__close:hover,
.alloway-announce-dialog__close:focus-visible {
	background: var(--bold-gold);
	color: var(--bold-dark);
	transform: rotate(90deg);
}

.alloway-announce-dialog__line:focus-visible,
.alloway-announce-dialog__close:focus-visible {
	outline: 2px solid var(--bold-gold);
	outline-offset: 2px;
}

.alloway-announce-dialog__eyebrow {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	margin: 0 0 1rem;
	color: var(--bold-gold);
	font-family: var(--bold-cond);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.alloway-announce-dialog__eyebrow::before {
	content: "";
	flex: none;
	width: 1.6rem;
	height: 3px;
	background: var(--bold-gold);
}

.alloway-announce-dialog__title {
	margin: 0 0 1.1rem;
	color: #fff;
	font-family: var(--bold-display);
	font-weight: 800;
	line-height: 1;
	letter-spacing: 0.005em;
	text-transform: uppercase;
}

.alloway-announce-dialog__figure {
	position: relative;
	display: block;
	margin-bottom: 0.35rem;
	overflow: clip; /* clips the sheen without creating a scroll container */
	color: var(--bold-gold);
	font-size: clamp(4.4rem, 14vw, 6.8rem);
	font-weight: 900;
	line-height: 0.88;
	letter-spacing: -0.015em;
}

/* One-shot sheen: a translating highlight band, blended so it brightens
   only the gold glyphs and leaves the dark panel alone. */
.alloway-announce-dialog__figure::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		105deg,
		transparent 38%,
		rgb(255 255 255 / 70%) 50%,
		transparent 62%
	);
	mix-blend-mode: overlay;
	pointer-events: none;
	transform: translateX(-120%);
	animation: alloway-announce-sheen 900ms cubic-bezier(0.22, 1, 0.36, 1) 760ms 1
		forwards;
}

.alloway-announce-dialog__title-text {
	display: block;
	font-size: clamp(1.3rem, 3.2vw, 1.85rem);
	line-height: 1.04;
}

.alloway-announce-dialog__body,
.alloway-announce-dialog__closing {
	margin: 0;
	color: rgb(255 255 255 / 82%);
	font-size: 1rem;
	line-height: 1.55;
}

.alloway-announce-dialog__body {
	margin-bottom: 1.35rem;
}

.alloway-announce-dialog__lines {
	display: grid;
	gap: 0.6rem;
	margin-bottom: 1.35rem;
}

/* The two direct lines ARE the calls to action: whole-row tel links. */
.alloway-announce-dialog__line {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 0.9rem;
	align-items: center;
	padding: 0.85rem 1rem;
	border: 1px solid rgb(255 255 255 / 10%);
	border-radius: var(--bold-radius-sm);
	background: rgb(255 255 255 / 6%);
	color: #fff;
	text-decoration: none;
	transition:
		background var(--alloway-transition),
		border-color var(--alloway-transition),
		transform var(--alloway-transition);
}

.alloway-announce-dialog__line:hover,
.alloway-announce-dialog__line:focus-visible {
	border-color: rgb(251 214 74 / 55%);
	background: rgb(255 255 255 / 10%);
	transform: translateY(-1px);
}

.alloway-announce-dialog__role {
	padding: 0.2rem 0.5rem;
	border-radius: 4px;
	background: var(--bold-gold);
	color: var(--bold-dark);
	font-family: var(--bold-cond);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

.alloway-announce-dialog__who {
	font-family: var(--bold-cond);
	font-size: 1rem;
	font-weight: 600;
}

.alloway-announce-dialog__num {
	color: var(--bold-gold);
	font-family: var(--bold-cond);
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.alloway-announce-dialog {
		padding: 12px;
	}

	.alloway-announce-dialog__line {
		grid-template-columns: auto 1fr;
	}

	.alloway-announce-dialog__num {
		grid-column: 1 / -1;
		font-size: 1.45rem;
	}
}

@keyframes alloway-announce-ring {
	0%,
	4% {
		transform: rotate(0deg);
	}

	14.5% {
		transform: rotate(7deg);
	}

	18% {
		transform: rotate(2deg);
	}

	22% {
		transform: rotate(-20deg);
	}

	28% {
		transform: rotate(20deg);
	}

	34.5% {
		transform: rotate(-19deg);
	}

	40% {
		transform: rotate(20deg);
	}

	45.5% {
		transform: rotate(-19deg);
	}

	51% {
		transform: rotate(5deg);
	}

	54.5% {
		transform: rotate(-2deg);
	}

	59%,
	100% {
		transform: rotate(0deg);
	}
}

@keyframes alloway-announce-clapper {
	0%,
	4% {
		transform: rotate(0deg);
	}

	14.5% {
		transform: rotate(8deg);
	}

	18% {
		transform: rotate(2deg);
	}

	22% {
		transform: rotate(-32deg);
	}

	29% {
		transform: rotate(31deg);
	}

	34.5% {
		transform: rotate(-32deg);
	}

	40% {
		transform: rotate(32deg);
	}

	46.5% {
		transform: rotate(-32deg);
	}

	51% {
		transform: rotate(7deg);
	}

	54.5% {
		transform: rotate(-1deg);
	}

	59%,
	100% {
		transform: rotate(0deg);
	}
}

@keyframes alloway-announce-arcs {
	0%,
	4% {
		transform: scale(1);
	}

	14.5% {
		transform: scale(0.87);
	}

	20% {
		transform: scale(1);
	}

	28%,
	46% {
		transform: scale(1.1);
	}

	59%,
	100% {
		transform: scale(1);
	}
}

@keyframes alloway-announce-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes alloway-announce-fade-out {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

@keyframes alloway-announce-panel-in {
	from {
		opacity: 0;
		transform: translateY(28px) scale(0.94);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes alloway-announce-panel-out {
	from {
		opacity: 1;
		transform: none;
	}

	to {
		opacity: 0;
		transform: scale(0.96);
	}
}

@keyframes alloway-announce-rise {
	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes alloway-announce-sheen {
	from {
		transform: translateX(-120%);
	}

	to {
		transform: translateX(120%);
	}
}

@keyframes alloway-announce-beam {
	from {
		--alloway-announce-beam-angle: 0deg;
	}

	to {
		--alloway-announce-beam-angle: 360deg;
	}
}

/* ---- Reduced motion: everything appears in place, nothing moves, the
   decorative beam and sheen never run. ---- */
@media (prefers-reduced-motion: reduce) {
	.alloway-announce__bell-ring,
	.alloway-announce__bell-clapper,
	.alloway-announce__bell-arcs,
	.alloway-announce-dialog[open],
	.alloway-announce-dialog.is-closing,
	.alloway-announce-dialog__panel,
	.alloway-announce-dialog.is-closing .alloway-announce-dialog__panel,
	.alloway-announce-dialog__reveal {
		animation: none;
	}

	.alloway-announce-dialog__beam::after,
	.alloway-announce-dialog__figure::after {
		display: none;
		animation: none;
	}

	.alloway-announce-dialog__close:hover,
	.alloway-announce-dialog__close:focus-visible,
	.alloway-announce-dialog__line:hover,
	.alloway-announce-dialog__line:focus-visible {
		transform: none;
	}
}

/* ==========================================================================
   PLUGIN-ERA ADDITIONS: the editor's preview ribbon and the optional CTA
   ========================================================================== */
.alloway-announce__preview {
	flex: none;
	padding: 0.15rem 0.5rem;
	border-radius: 4px;
	background: #fff;
	color: var(--bold-dark);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.alloway-announce-dialog__actions {
	margin: 1.1rem 0 0;
}

/* One gold primary CTA per view (DESIGN.md); the dialog has no other. */
.alloway-announce-dialog__button {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0.55rem 1.3rem;
	border-radius: 999px;
	background: var(--bold-gold);
	color: var(--bold-dark);
	font-family: var(--bold-cond);
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-decoration: none;
	text-transform: uppercase;
	transition: background var(--alloway-transition);
}

.alloway-announce-dialog__button:hover,
.alloway-announce-dialog__button:focus-visible {
	background: var(--wp--preset--color--primary-hover);
}

.alloway-announce-dialog__button:focus-visible {
	outline: 2px solid var(--bold-gold);
	outline-offset: 3px;
}

/* The editor's preview bar (review 2026-10-02 finding 3): fixed at the
   bottom, under the popup's top layer, with the one opener a popup-only
   announcement would otherwise lack. */
.alloway-announce-preview {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 9000;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1rem;
	align-items: center;
	max-width: calc(100vw - 32px);
	padding: 0.7rem 1rem;
	border-radius: var(--bold-radius-sm);
	background: var(--bold-dark);
	color: #fff;
	font-family: var(--bold-cond);
	font-size: 0.86rem;
	box-shadow: 0 10px 30px rgb(0 0 0 / 35%);
}

.alloway-announce-preview__label {
	font-weight: 700;
	letter-spacing: 0.04em;
}

.alloway-announce-preview__open {
	min-height: 36px;
	padding: 0.35rem 0.9rem;
	border: 0;
	border-radius: 999px;
	background: var(--bold-gold);
	color: var(--bold-dark);
	font: inherit;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}

.alloway-announce-preview__open:focus-visible,
.alloway-announce-preview__exit:focus-visible {
	outline: 2px solid var(--bold-gold);
	outline-offset: 3px;
}

.alloway-announce-preview__note {
	color: rgb(255 255 255 / 75%);
}

.alloway-announce-preview__exit {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}