/* =========================================================================
   LIMAI Lab — the panel UI, adapted for the Dimension template.

   Two layers:
     .panel      the shared 85% frosted box + header/body chrome. Opt an
                 article in with class="panel".
     #solutions  the bubble graph, which only that article has.

   EVERY rule is scoped under .panel or #solutions. That is deliberate: the
   prototype stylesheet had global resets (*, html, body, button,
   :focus-visible) which fight main.css and break the rest of the site.
   Nothing here escapes an opted-in article.

   Load AFTER main.css so these win on equal specificity.
   ========================================================================= */

.panel,
.contact-pop {
	--ink:        #ffffff;
	--ink-soft:   rgba(255, 255, 255, 0.72);
	--ink-faint:  rgba(255, 255, 255, 0.42);
	--line-faint: rgba(255, 255, 255, 0.18);
	--ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* -------------------------------------------------------------------------
   The article IS the panel.

   Dimension sizes #main article at 40rem wide with 4.5rem of padding; the
   panel needs the 85% box instead. position: fixed takes it out of
   #wrapper's flow so its 4rem padding can't squeeze the height.

   Add class="panel" to any article to opt it in. Contact is deliberately NOT
   a panel — it pops onto the home screen instead, see the Contact section.
   ------------------------------------------------------------------------- */

#main article.panel {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.985);
	z-index: 4;
	display: flex;
	flex-direction: column;
	width: 85%;
	height: 85%;
	max-width: 1500px;
	max-height: calc(100vh - 6rem);
	padding: clamp(1.2rem, 3.2vh, 2.2rem) clamp(1rem, 3vw, 2.4rem);
	border: 1px solid var(--line-faint);
	border-radius: 0;
	background: rgba(16, 20, 24, 0.62);
	backdrop-filter: blur(18px) saturate(120%);
	-webkit-backdrop-filter: blur(18px) saturate(120%);
	box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
}

/* Dimension animates articles in by toggling .active. Re-point its transform
   so ours (which carries the centring) isn't overwritten. */
#main article.panel.active {
	transform: translate(-50%, -50%) scale(1);
}

/* Dimension's own close button, which main.js appends. */
#main article.panel .close {
	z-index: 5;
}

/* Articles whose content arrives via data-partial load it into this div, so
   it has to pass the flex column through rather than block it. */
#main article.panel > .partial {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

/* -------------------------------------------------------------------------
   Shared header — the thin rule, the letterspaced title, the italic line
   ------------------------------------------------------------------------- */

.panel .panel-head {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	transition: opacity 0.45s var(--ease);
}

.panel .panel-rule {
	width: 1px;
	height: 26px;
	margin-bottom: 1.1rem;
	background: var(--line-faint);
}

.panel .panel-title {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: clamp(1.1rem, 2.6vw, 1.5rem);
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.panel .panel-title:after { display: none; }

.panel .panel-tagline {
	margin: 0.7rem 0 0;
	max-width: 34ch;
	color: var(--ink-faint);
	font-size: 0.82rem;
	font-style: italic;
	line-height: 1.6;
	transition: opacity 0.35s var(--ease), transform 0.4s var(--ease);
}

/* Solutions only: both step aside when a detail card opens, because the card
   would otherwise run under them. */
#solutions.is-focused .panel-head { opacity: 0.28; }

#solutions.is-focused .panel-tagline {
	opacity: 0;
	transform: translateY(-5px);
}

/* -------------------------------------------------------------------------
   Shared body — a readable column inside a very wide panel
   ------------------------------------------------------------------------- */

.panel .panel-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(1rem, 3vh, 2rem) 0;
}

/* justify-content: center clips the top of overflowing content in flexbox;
   auto margins centre without that failure mode. */
.panel .panel-column {
	width: 100%;
	max-width: 64ch;
	margin: auto;
}

.panel .panel-column > :last-child { margin-bottom: 0; }

.panel .panel-logo {
	display: block;
	width: auto;
	max-width: min(280px, 60%);
	margin: 0 auto 2.2rem;
	opacity: 0.9;
}

#solutions .screen-hint {
	flex: 0 0 auto;
	margin: 0;
	text-align: center;
	color: var(--ink-faint);
	font-size: 0.62rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	transition: opacity 0.4s var(--ease);
}

#solutions.is-focused .screen-hint { opacity: 0; }

/* -------------------------------------------------------------------------
   Stage
   ------------------------------------------------------------------------- */

#solutions .stage {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	margin: clamp(0.6rem, 2vh, 1.4rem) 0;
}

#solutions .graph {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* -------------------------------------------------------------------------
   Bubbles

   main.css styles every <button> like a .button (background, border-radius,
   height, line-height, text-transform, padding). The reset below undoes that
   for the bubbles specifically — #solutions .bubble outranks it.
   ------------------------------------------------------------------------- */

#solutions .bubble {
	--r: 56px;
	--glow: 0;
	--hue: 258;
	position: absolute;
	top: 0;
	left: 0;
	width: calc(var(--r) * 2);
	height: calc(var(--r) * 2);
	display: grid;
	place-items: center;
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	box-shadow: none;
	color: var(--ink);
	font-family: inherit;
	font-weight: 400;
	line-height: 1;
	text-transform: none;
	text-align: center;
	cursor: pointer;
	opacity: 0;
	will-change: transform, opacity;
	transition: opacity 0.6s var(--ease);
}

#solutions .bubble.is-in { opacity: 1; }

#solutions .bubble.is-dimmed { opacity: 0.22; }

#solutions .bubble.is-dimmed .bubble-label { opacity: 0; }

/* The glass disc, shared with the contact orbs so the two panels read as one
   system. Only --hue and --glow vary. */
#solutions .bubble:before,
.contact-pop .contact-orb:before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 1px solid hsla(var(--hue), 70%, 82%, calc(0.22 + var(--glow) * 0.6));
	background: radial-gradient(120% 120% at 30% 22%, hsla(var(--hue), 80%, 78%, 0.14) 0%, hsla(var(--hue), 60%, 40%, 0.05) 45%, rgba(255, 255, 255, 0.02) 100%);
	box-shadow:
		0 0 calc(18px + var(--glow) * 46px) hsla(var(--hue), 85%, 70%, calc(0.1 + var(--glow) * 0.42)),
		inset 0 0 30px hsla(var(--hue), 80%, 80%, calc(0.05 + var(--glow) * 0.14));
	transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

/* the halo that appears on hover */
#solutions .bubble:after,
.contact-pop .contact-orb:after {
	content: "";
	position: absolute;
	inset: -9px;
	border-radius: 50%;
	border: 1px solid hsla(var(--hue), 70%, 80%, 0.16);
	opacity: 0;
	transform: scale(0.94);
	transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
}

#solutions .bubble:hover:after,
#solutions .bubble:focus-visible:after,
#solutions .bubble.is-selected:after,
.contact-pop .contact-orb:hover:after,
.contact-pop .contact-orb:focus-visible:after {
	opacity: 1;
	transform: scale(1);
}

#solutions .bubble:focus-visible {
	outline: 1px solid hsla(var(--hue), 70%, 80%, 0.8);
	outline-offset: 6px;
}

#solutions .bubble-icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 44%;
	color: hsla(var(--hue), 60%, 94%, 0.92);
	transition: transform 0.5s var(--ease);
}

#solutions .bubble-icon svg {
	width: 100%;
	height: auto;
}

#solutions .bubble:hover .bubble-icon { transform: scale(1.06); }

#solutions .bubble-label {
	position: absolute;
	top: calc(100% + 0.85rem);
	left: 50%;
	width: max(11ch, 130%);
	transform: translateX(-50%);
	color: var(--ink-soft);
	font-size: 0.6rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-align: center;
	pointer-events: none;
	transition: opacity 0.35s var(--ease), color 0.35s var(--ease);
}

#solutions .bubble:hover .bubble-label,
#solutions .bubble:focus-visible .bubble-label,
#solutions .bubble.is-selected .bubble-label {
	color: var(--ink);
}

/* -------------------------------------------------------------------------
   Detail card — positioned against the article, which is the containing
   block because it is position: fixed.
   ------------------------------------------------------------------------- */

#solutions .detail {
	position: absolute;
	z-index: 3;
	right: clamp(0.8rem, 2.5%, 1.8rem);
	top: 50%;
	width: min(500px, 46%);
	max-height: 88%;
	overflow-y: auto;
	padding: clamp(1.6rem, 3vw, 2.4rem);
	border: 1px solid var(--line-faint);
	border-radius: 4px;
	background: rgba(16, 20, 24, 0.9);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	opacity: 0;
	transform: translate(0, calc(-50% + 14px));
	transition: opacity 0.45s var(--ease), transform 0.5s var(--ease);
}

#solutions .detail[hidden] { display: none; }

#solutions .detail.is-open {
	opacity: 1;
	transform: translate(0, -50%);
}

#solutions .detail-accent {
	position: absolute;
	top: 0;
	left: 0;
	width: 64px;
	height: 2px;
	background: linear-gradient(90deg, hsl(var(--hue, 258), 85%, 72%), transparent);
}

#solutions .detail-kind {
	margin: 0 0 0.7rem;
	color: hsla(var(--hue, 258), 70%, 78%, 0.9);
	font-size: 0.6rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

#solutions .detail-title {
	margin: 0 0 1.2rem;
	padding: 0;
	border: 0;
	font-size: clamp(1.15rem, 2.2vw, 1.5rem);
	font-weight: 600;
	letter-spacing: 0.05em;
	line-height: 1.35;
	text-transform: none;
}

#solutions .detail-body p {
	margin: 0 0 1rem;
	color: var(--ink-soft);
	font-size: 0.86rem;
	line-height: 1.85;
}

#solutions .detail-body p:last-child { margin-bottom: 0; }

#solutions .detail-body .lead {
	color: var(--ink);
	font-style: italic;
}

#solutions .detail-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin: 1.2rem 0 0;
	padding: 0;
	list-style: none;
}

#solutions .detail-chips li {
	padding: 0.34rem 0.7rem;
	border: 1px solid var(--line-faint);
	border-radius: 4px;
	color: var(--ink-soft);
	font-size: 0.6rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

#solutions .detail-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 1.6rem;
}

#solutions .detail-actions:empty { display: none; }

#solutions .detail-actions a {
	padding: 0.6rem 1.2rem;
	border: 1px solid var(--line-faint);
	border-radius: 4px;
	color: var(--ink-soft);
	font-size: 0.64rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

#solutions .detail-actions a:hover {
	border-color: hsla(var(--hue, 258), 70%, 75%, 0.7);
	color: var(--ink);
}

#solutions .detail-close {
	-webkit-appearance: none;
	appearance: none;
	margin: 1.8rem 0 0;
	padding: 0;
	height: auto;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--ink-faint);
	font-family: inherit;
	font-size: 0.62rem;
	line-height: 1.6;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.3s var(--ease);
}

#solutions .detail-close:before { content: "\2190"; margin-right: 0.6rem; }

#solutions .detail-close:hover { color: var(--ink); }

/* -------------------------------------------------------------------------
   Narrow screens — detail becomes a bottom sheet inside the panel
   ------------------------------------------------------------------------- */

@media screen and (max-width: 859px) {

	#main article.panel {
		width: 92%;
		height: 92%;
	}

	#solutions .detail {
		right: 0;
		left: 0;
		top: auto;
		bottom: 0;
		width: auto;
		max-height: 58%;
		transform: translateY(18px);
	}

	#solutions .detail.is-open { transform: translateY(0); }

	#solutions .bubble-label {
		font-size: 0.54rem;
		letter-spacing: 0.14em;
	}

}

@media (prefers-reduced-motion: reduce) {

	#main article.panel,
	#solutions .bubble,
	#solutions .detail {
		transition-duration: 0.01ms;
	}

}

/* =========================================================================
   Contact — the same orbs, stacked as a pillar on the right.

   No canvas and no physics here: the pillar is deliberately ordered, so it is
   plain flexbox plus a CSS entrance. Each row is [label | orb], right
   aligned; the email row simply puts a chat bubble where its label would go.
   ========================================================================= */

/* Not a panel and not an article: a fixed pillar living on the home screen.
   The orbs fly out of the Contact nav button — contact-pop.js measures the
   button and writes --dx/--dy per row, which the launch keyframe consumes. */
.contact-pop {
	position: fixed;
	top: 50%;
	right: clamp(1rem, 5vw, 4.5rem);
	transform: translateY(-50%);
	z-index: 5;
	opacity: 0;
	transition: opacity 0.3s var(--ease);
}

.contact-pop[hidden] { display: none; }

.contact-pop.is-open { opacity: 1; }

.contact-pop:not(.is-open) { pointer-events: none; }

.contact-pop.is-open .contact-node {
	animation: orb-launch 0.68s var(--ease) backwards;
}

.contact-pop.is-open .contact-node:nth-child(1) { animation-delay: 0.02s; }
.contact-pop.is-open .contact-node:nth-child(2) { animation-delay: 0.10s; }
.contact-pop.is-open .contact-node:nth-child(3) { animation-delay: 0.18s; }

@keyframes orb-launch {
	from {
		opacity: 0;
		transform: translate(var(--dx, 0), var(--dy, 0)) scale(0.25);
	}
	to {
		opacity: 1;
		transform: translate(0, 0) scale(1);
	}
}

.contact-pop .contact-pillar {
	--orb: clamp(62px, 7vw, 84px);
	display: flex;
	flex-direction: column;
	gap: clamp(1.3rem, 4vh, 2.4rem);
	margin: 0;
	padding: 0 clamp(0.5rem, 3vw, 2.5rem) 0 0;
	list-style: none;
}

/* Fixed height, not content height: the chat bubble is taller than an orb, so
   letting it size its row would space the orb centres unevenly. It overflows
   the row instead — harmless, since the gap is wider than the overflow. */
.contact-pop .contact-node {
	position: relative;   /* the chat is absolute against ITS OWN row */
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: var(--orb);
	gap: 1.3rem;
	margin: 0;
	padding: 0;
}

.contact-pop .contact-node:before { display: none; }   /* main.css bullets */

/* --- the orb ------------------------------------------------------------ */

.contact-pop .contact-orb {
	--hue: 258;
	--glow: 0.06;
	position: relative;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: var(--orb);
	height: var(--orb);
	border: 0;
	border-bottom: 0;
	border-radius: 50%;
	color: var(--ink);
	text-decoration: none;
	animation: orb-bob 7s ease-in-out infinite;
}

.contact-pop .contact-node:nth-child(2) .contact-orb { animation-duration: 8.5s; animation-delay: -2s; }
.contact-pop .contact-node:nth-child(3) .contact-orb { animation-duration: 7.8s; animation-delay: -4s; }

.contact-pop .contact-orb:hover,
.contact-pop .contact-orb:focus-visible {
	--glow: 0.5;
}

.contact-pop .contact-orb:focus-visible {
	outline: 1px solid hsla(var(--hue), 70%, 80%, 0.8);
	outline-offset: 6px;
}

/* .icon from main.css is 5.5rem tall by default — far too big in here. */
.contact-pop .contact-icon {
	position: relative;
	display: block;
	height: auto;
	width: auto;
	font-size: calc(var(--orb) * 0.34);
	line-height: 1;
	color: hsla(var(--hue), 60%, 94%, 0.92);
	transition: transform 0.5s var(--ease);
}

.contact-pop .contact-orb:hover .contact-icon { transform: scale(1.08); }

.contact-pop .contact-label {
	color: var(--ink-soft);
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	transition: color 0.35s var(--ease);
}

.contact-pop .contact-node:hover .contact-label { color: var(--ink); }

/* On wide screens the email row's caption IS the chat bubble, so its label is
   redundant. The narrow query below brings it back. */
.contact-pop .contact-node:first-child .contact-label { display: none; }

/* --- the chat bubble ---------------------------------------------------- */

/* Revealed on hover of the email orb, so it is positioned out of flow: in flow
   it would widen the pillar and capture pointer events while invisible.
   Anchored off the orb's own width, since the orb is the row's last item and
   therefore shares the row's right edge.

   36ch, not wider: at 44ch the bubble reached across the hero's crossbar and
   crowded the wordmark. */
.contact-pop .chat {
	position: absolute;
	top: 50%;
	right: calc(var(--orb) + 1.3rem);
	width: max-content;
	max-width: 36ch;
	padding: 1.1rem 1.35rem;
	border: 1px solid var(--line-faint);
	border-radius: 4px;
	background: rgba(16, 20, 24, 0.72);
	opacity: 0;
	visibility: hidden;
	transform: translate(8px, -50%);
	transition:
		opacity 0.28s var(--ease),
		transform 0.34s var(--ease),
		visibility 0.28s;
}

/* :focus-within rather than a sibling selector on the orb — the chat comes
   first in the DOM, so ~ could never reach it. This also keeps the bubble open
   while the pointer is over the bubble itself, so the text can be read. */
.contact-pop .contact-node:hover .chat,
.contact-pop .contact-node:focus-within .chat {
	opacity: 1;
	visibility: visible;
	transform: translate(0, -50%);
}

.contact-pop .chat p {
	margin: 0;
	color: var(--ink-soft);
	font-size: 0.82rem;
	line-height: 1.8;
}

/* the pointer, aimed at the email orb */
.contact-pop .chat:after {
	content: "";
	position: absolute;
	top: 50%;
	right: -7px;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	transform: rotate(45deg);
	border-top: 1px solid var(--line-faint);
	border-right: 1px solid var(--line-faint);
	background: rgba(16, 20, 24, 0.72);
}

/* --- entrance ----------------------------------------------------------- */

@keyframes orb-bob {
	0%, 100% { transform: translateY(-4px); }
	50%      { transform: translateY(4px); }
}

/* --- narrow screens ------------------------------------------------------
   A right-hand rail collides with the wordmark and nav once the viewport gets
   narrow, so the pillar becomes a centred ROW sitting below the nav. Its top
   is measured by contact-pop.js and arrives as --pop-top; the percentage is
   only a fallback for before that runs.
   ------------------------------------------------------------------------- */

@media screen and (max-width: 859px) {

	.contact-pop {
		top: var(--pop-top, 62%);
		left: 0;
		right: 0;
		padding: 0 1rem;
		transform: none;
	}

	.contact-pop .contact-pillar {
		flex-direction: row;
		justify-content: center;
		align-items: flex-start;
		gap: clamp(1.1rem, 6vw, 2.2rem);
		padding: 0;
	}

	/* column-reverse puts the orb on top and its caption underneath, matching
	   the Solutions bubbles. static so the chat below escapes the row. */
	.contact-pop .contact-node {
		position: static;
		flex-direction: column-reverse;
		align-items: center;
		height: auto;
		gap: 0.55rem;
	}

	.contact-pop .contact-node:first-child .contact-label { display: block; }

	.contact-pop .contact-label {
		font-size: 0.54rem;
		letter-spacing: 0.16em;
	}

	/* The message drops below the whole row and stays visible: on a touch
	   screen a tap opens the mail client, so there is no hover left to
	   reveal it with. Centred under the row, so the speech pointer would be
	   aiming at nothing — hidden. */
	.contact-pop .chat {
		position: absolute;
		top: calc(100% + 1.1rem);
		right: auto;
		left: 50%;
		/* nearly full width so the message wraps to ~3 lines instead of 5 —
		   there is only ~240px between the nav and the footer to work with */
		width: calc(100vw - 2rem);
		max-width: none;
		padding: 0.9rem 1.1rem;
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%);
		text-align: center;
	}

	.contact-pop .chat p {
		font-size: 0.78rem;
		line-height: 1.7;
	}

	.contact-pop .chat:after { display: none; }

}

/* Short screens (landscape phones) genuinely have no room for the message
   below the row. Drop it rather than let it collide with the footer — the orb
   still opens the mail client. */
@media screen and (max-width: 859px) and (max-height: 700px) {

	.contact-pop .chat { display: none; }

}

/* Wide but hoverless — a tablet. Same reasoning as above: nothing to hover
   with, so the message has to start visible. Narrow touch screens are handled
   by the query above, hence the min-width. */
@media (hover: none) and (min-width: 860px) {

	.contact-pop .chat {
		opacity: 1;
		visibility: visible;
		transform: translate(0, -50%);
	}

}

@media (prefers-reduced-motion: reduce) {

	.contact-pop .contact-orb,
	.contact-pop.is-open .contact-node {
		animation: none;
	}

	.contact-pop .chat { transition-duration: 0.01ms; }

}

/* =========================================================================
   The logo mark as a button

   Clicking it already returns home (href="#" is what Dimension treats as
   "close any article"), it just had no hover feedback.

   The file is a white PNG, so `color` cannot tint it. Instead a purple box is
   masked with the image's own alpha channel and cross-faded over the white
   original — verified that the artwork is white-on-transparent, so the mask is
   exact. --primary-color is main.css's own variable, the one that makes the
   "AI" in the wordmark purple, so the two can never drift apart.
   ========================================================================= */

/* The ring stays white — only the tree inside it changes.

   The circle fills with the same faint white wash the nav buttons use on hover
   (main.css: rgba(255,255,255,0.075), and 0.175 on :active), which lifts the
   background enough for the purple tree to read against it. border-radius:100%
   on .logo clips it to the circle. :has() because the hover is on the child
   link, while the circle itself is the parent. */

#header .logo {
	/* --primary-color (#8069CB) is hsl(254 49% 60%). Same hue, deeper: lower
	   lightness, and saturation nudged up so it stays rich instead of going
	   grey. Tune the lightness here — it is the only knob. */
	--logo-mark: hsl(254 56% 44%);
	transition: background-color 0.25s ease-in-out;
}

#header .logo:has(a:hover),
#header .logo:has(a:focus-visible) {
	background-color: rgba(255, 255, 255, 0.075);
}

#header .logo:has(a:active) {
	background-color: rgba(255, 255, 255, 0.175);
}

#header .logo a {
	display: block;
	border-bottom: 0;   /* the global `a` rule adds a dotted underline */
}

#header .logo .icon {
	position: relative;
}

#header .logo img {
	transition: opacity 0.25s ease-in-out;
}

/* :after, not :before — main.css uses :before on .icon for Font Awesome. */
#header .logo .icon:after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--logo-mark);
	-webkit-mask: url("../../images/logos/araucaria_full_white.png") center / contain no-repeat;
	mask: url("../../images/logos/araucaria_full_white.png") center / contain no-repeat;
	opacity: 0;
	transition: opacity 0.25s ease-in-out;
	pointer-events: none;
}

#header .logo a:hover .icon:after,
#header .logo a:focus-visible .icon:after {
	opacity: 1;
}

#header .logo a:hover img,
#header .logo a:focus-visible img {
	opacity: 0;
}