/* Open door: the homepage hero since 1.30.0 (2026-11-10). Night, one doorway of warm light with a shop sign above it,
   and seven streams of coloured light that cross the floor and go in. assets/js/doorway.js draws the scene and places
   the labels and the sign; without it the hero is the words on the night ground (in the line-up the labels show as a
   list under them).
   Two places use it: the homepage hero (Elementor container with the classes "tz tz--home od-host"; its words stay
   Elementor widgets; the shortcode widget prints the layer .od-layer) and the line-up (the whole hero is HTML:
   .tz.tzv.od). Both build on .tz in assets/css/terrazzo.css for the hero's box, type and buttons.
   The glow is the look Ahmad chose on 2026-11-10; warm light is kept for the business: the door, the sign, the phrase
   "your local business." and the senape booking tile.
   Colours are sRGB hex, contrast WCAG 2.x, measured against the ground they sit on. The ground runs from #05070F at the
   edges to #141D45 round the door:
   headline #F4EFE6 17.57:1 to 14.20:1; its warm phrase #FFD58A 14.50:1 to 11.72:1; lede #A9B3C6 9.53:1 to 7.71:1;
   booking tile #161616 on #EDB33C 9.58:1; sign text #0B1022 on #FFE3AC 15.15:1 (its pencil mark 4.65:1);
   label text #F4EFE6 on its plate (#05070F at 86% over the scene) 12.51:1 at worst, over a white strand.
   Stream colours on #141D45: web #F2F4F8 14.77, search #FF4D4D 4.97, ai #9B7BFF 5.17, local #22C77A 7.37,
   ads #FF9F1C 7.92, social #FF4FB4 5.44, email #3DA5FF 6.21 (all :1); every stream has a word label. */

.od {
	--od-web: #F2F4F8;
	--od-search: #FF4D4D;
	--od-ai: #9B7BFF;
	--od-local: #22C77A;
	--od-ads: #FF9F1C;
	--od-social: #FF4FB4;
	--od-email: #3DA5FF;
	--od-plate: rgba(5, 7, 15, .86);
}

/* The night ground; the script moves the lighter pool to the foot of the door. */
.tz.tzv.od, .e-con.tz.od-host {
	--tz-base: #05070F;
	--tz-text: #F4EFE6;
	background: radial-gradient(58% 78% at var(--hx, 71%) var(--hy, 62%), #141D45 0%, #0B1029 46%, #05070F 100%);
}
/* The phrase the door stands for takes the door's light. */
.od-you { color: #FFD58A; }

/* Line-up hero. */
.tz.tzv.od { justify-content: flex-start; padding-bottom: clamp(56px, 9vh, 110px); }
.od__copy { position: relative; z-index: 2; width: 100%; max-width: min(54%, 720px); }
.od .tzv__h { font-size: clamp(2.5rem, 1rem + 4.4vw, 5.5rem); }
.od .tzv__sub { color: #A9B3C6; }
/* Pinned so the kit's link colours never reach the hero's action labels. */
.od .tzv__btn, .od .tzv__btn:hover, .od .tzv__btn:focus { color: var(--tz-nero); }
.od .tzv__link, .od .tzv__link:hover, .od .tzv__link:focus { color: var(--tz-text); }

/* Homepage hero (Elementor): the words keep the left half above the scene. */
.e-con.tz.od-host { padding-bottom: clamp(56px, 9vh, 110px); }
.e-con.tz.od-host > .e-con.mx-hero__copy { position: relative; z-index: 2; max-width: min(54%, 720px); }
.e-con.tz.od-host .mx-h1.elementor-widget-heading .elementor-heading-title { font-size: clamp(2.5rem, 1rem + 4.4vw, 5.5rem); }
.e-con.tz.od-host .mx-lede.elementor-widget-text-editor { color: #A9B3C6; }
.e-con.tz.od-host > .tz-fieldw { z-index: 0; }
.od-layer { position: absolute; inset: 0; }

.od__cv { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; pointer-events: none; }

/* Labels: a list under the words without the script; placed on their streams with it. Each sits on a plate of the
   ground colour. Pointing at one lights its stream; clicking sends customers. */
.od__tags { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px 20px; max-width: 640px; margin: clamp(28px, 3vw, 40px) 0 0; padding: 0; list-style: none; }
.od-layer .od__tags { display: none; }
.od__tag { display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 6px 9px 5px 8px; border-radius: 3px; background: var(--od-plate); color: var(--tz-text, #F4EFE6); font: 600 16px/1.2 var(--tz-font); white-space: nowrap; }
.od__tag i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.od__tag--web { --c: var(--od-web); }
.od__tag--search { --c: var(--od-search); }
.od__tag--ai { --c: var(--od-ai); }
.od__tag--local { --c: var(--od-local); }
.od__tag--ads { --c: var(--od-ads); }
.od__tag--social { --c: var(--od-social); }
.od__tag--email { --c: var(--od-email); }
.od.is-on .od__tags { position: absolute; inset: 0; z-index: 2; display: block; max-width: none; margin: 0; pointer-events: none; }
.od.is-on .od__tag {
	position: absolute; left: 0; top: 0; opacity: 0; pointer-events: auto; cursor: pointer;
	transition: opacity .5s cubic-bezier(.16, 1, .3, 1), box-shadow .3s cubic-bezier(.16, 1, .3, 1);
}
.od.is-on .od__tag.is-in { opacity: 1; }
.od.is-on .od__tag.is-hot { box-shadow: inset 0 0 0 1.5px var(--c); }
.od.has-hot .od__tag.is-in:not(.is-hot) { opacity: .45; }

/* The sign above the door: a lit board that sits on the frame and turns with it (its light is drawn on the canvas with
   the door's). Its text is a field: type a business name and the sign carries it (nothing is sent anywhere). */
.od__sign { display: none; }
.od.is-on .od__sign {
	position: absolute; left: 0; top: 0; z-index: 3; display: block; margin: 0; padding: 0; border-radius: 3px;
	background: #FFE3AC; color: #0B1022; box-shadow: inset 0 -3px 0 #E0AE52;
	opacity: 0; pointer-events: auto; transition: opacity .6s cubic-bezier(.16, 1, .3, 1);
}
.od.is-on .od__sign.is-in { opacity: 1; }
.od .od__sign .od__name, .od .od__sign .od__name:hover, .od .od__sign .od__name:focus {
	display: block; box-sizing: content-box; width: 7.4em; min-width: 3ch; max-width: min(62vw, 300px); height: auto; margin: 0; padding: 12px 34px 11px;
	border: 0; border-radius: 0; outline: 0; background: transparent; box-shadow: none; color: inherit;
	font: 700 18px/1.15 var(--tz-font); letter-spacing: -.01em; text-align: center; cursor: text;
	-webkit-appearance: none; appearance: none; transition: none;
}
.od .od__sign:focus-within { outline: 3px solid #F4EFE6; outline-offset: 3px; }
.od__mirror { position: absolute; left: 0; top: 0; visibility: hidden; white-space: pre; font: 700 18px/1.15 var(--tz-font); letter-spacing: -.01em; pointer-events: none; }
.od__pen { position: absolute; right: 12px; top: 50%; width: 13px; height: 13px; margin-top: -7px; color: #0B1022; opacity: .6; pointer-events: none; }

/* Pause: the streams move and customers keep arriving, so the motion can be stopped (WCAG 2.2.2). */
.od .od__pause {
	position: absolute; z-index: 4; right: max(56px, calc((100% - 1328px) / 2)); bottom: 24px;
	display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0; padding: 0 16px;
	border: 0; border-radius: 3px; background: var(--od-plate); box-shadow: inset 0 0 0 2px rgba(244, 239, 230, .6);
	color: #F4EFE6; font: 700 15px/1 var(--tz-font); cursor: pointer; pointer-events: auto;
	transition: box-shadow .2s cubic-bezier(.16, 1, .3, 1);
}
.od .od__pause:hover, .od .od__pause:focus { background: var(--od-plate); color: #F4EFE6; box-shadow: inset 0 0 0 2px #F4EFE6; }
.od .od__pause:focus-visible { outline: 3px solid #F4EFE6; outline-offset: 4px; }
.od .od__pause[hidden] { display: none; }
.od__pause::before { content: ""; flex: none; box-sizing: border-box; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.od__pause.is-paused::before { width: 0; height: 0; border-right: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.od__pause-r, .od__pause.is-paused .od__pause-p { display: none; }
.od__pause.is-paused .od__pause-r { display: inline; }

@media (min-width: 900px) and (max-width: 1199px) {
	.od__copy, .e-con.tz.od-host > .e-con.mx-hero__copy { max-width: min(56%, 640px); }
}
@media (max-width: 899px) {
	.tz.tzv.od, .e-con.tz.od-host { padding-bottom: clamp(420px, 60vh, 520px); }
	.od__copy, .e-con.tz.od-host > .e-con.mx-hero__copy { max-width: none; }
	.od .od__pause { right: 20px; bottom: 16px; }
}
@media (max-width: 599px) {
	.od__tag { gap: 7px; padding: 5px 7px 4px 6px; font-size: 14px; }
	.od__tag i { width: 7px; height: 7px; }
	.od .od__sign .od__name, .od .od__sign .od__name:hover, .od .od__sign .od__name:focus { padding: 10px 30px 9px; font-size: 16px; }
	.od__mirror { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.od.is-on .od__tag, .od.is-on .od__sign { transition: none; }
}