/* Global resets + behavior ported from the shared inline <style> block present
   on every page of the source export (see project/home.dc.html lines 50-118). */

html, body {
	margin: 0;
	padding: 0;
	background: var(--color-cream);
	color: var(--color-text);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-family: var(--font-ui);
}

*, *::before, *::after {
	box-sizing: border-box;
}

img, video {
	max-width: 100%;
	display: block;
}

::selection {
	background: var(--color-brand-green);
	color: var(--color-cream);
}

html {
	scrollbar-width: thin;
	scrollbar-color: var(--color-brand-green) var(--color-scrollbar-track);
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--color-scrollbar-track); }
::-webkit-scrollbar-thumb {
	background: var(--color-brand-green);
	border-radius: 8px;
	border: 2px solid var(--color-scrollbar-track);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-brand-green-hover); }

@keyframes scrollcue {
	0% { transform: translateY(0); opacity: .5; }
	50% { transform: translateY(8px); opacity: 1; }
	100% { transform: translateY(0); opacity: .5; }
}
@keyframes marquee {
	0% { transform: translateX(0); }
	100% { transform: translateX(-50%); }
}
@keyframes ld-pulse {
	0%, 100% { transform: scale(1); opacity: .5; }
	50% { transform: scale(1.08); opacity: 1; }
}
@keyframes ld-spin {
	to { transform: rotate(360deg); }
}

/* Custom cursor: hover-capable pointer devices only */
@media (hover: hover) and (pointer: fine) {
	body { cursor: none; }
	body a, body button { cursor: none; }
}
@media (hover: none), (pointer: coarse) {
	#cursor-ring, #cursor-dot { display: none !important; }
	.cta-fx { background-size: 100% 1px !important; }
}

/* Custom cursor + back-to-top rail (template-parts/cursor.php).
   No dedicated component stylesheet is wired up for these in inc/enqueue.php,
   so — like the hide-on-touch rules above — they live here since they are
   sitewide chrome, not scoped to header/footer/mega-menu/loader.
   Position/follow behavior: assets/js/core/cursor.js.
   Show/hide + scroll-to-top behavior: assets/js/core/header-scroll.js. */
#cursor-ring {
	position: fixed;
	top: 0;
	left: 0;
	width: 36px;
	height: 36px;
	border: 1px solid var(--color-cream);
	border-radius: 50%;
	pointer-events: none;
	z-index: 200;
	mix-blend-mode: difference;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: width .35s cubic-bezier(.76, 0, .24, 1), height .35s cubic-bezier(.76, 0, .24, 1), background-color .35s ease, opacity .4s ease;
}
#cursor-dot {
	position: fixed;
	top: 0;
	left: 0;
	width: 6px;
	height: 6px;
	background: var(--color-cream);
	border-radius: 50%;
	pointer-events: none;
	z-index: 201;
	mix-blend-mode: difference;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: opacity .4s ease;
}

#to-top-rail {
	position: fixed;
	right: 24px;
	bottom: 32px;
	z-index: 55;
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 0;
	font-family: var(--font-ui);
	font-size: 10px;
	letter-spacing: .28em;
	text-transform: uppercase;
	mix-blend-mode: difference;
	color: var(--color-cream);
	transition: opacity .35s ease;
	opacity: 0;
	pointer-events: none;
}
#to-top-rail.is-visible {
	opacity: 1;
	pointer-events: auto;
}
@media (hover: hover) and (pointer: fine) {
	#to-top-rail:hover { opacity: .7; }
}
.to-top-rail-line {
	width: 1px;
	height: clamp(80px, 14vh, 160px);
	background: currentColor;
	display: block;
	transform: translateX(5px);
}
.to-top-rail-label {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}
@media (max-width: 879px) {
	#to-top-rail { display: none; }
}

/* Underline-reveal CTA link effect used across the whole site */
.cta-fx {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: left 100%;
	background-size: 0% 1px;
	transition: background-size .55s cubic-bezier(.76, 0, .24, 1) !important;
}
.cta-fx .cta-ar { will-change: transform; }
@media (hover: hover) and (pointer: fine) {
	.cta-fx:hover { background-size: 100% 1px; }
	.cta-fx:hover .cta-ar { transform: translateX(8px); }
}

@media (max-width: 879px) {
	[data-header-lang] { display: none !important; }
	[data-header-inner] { padding: 0 22px !important; }
}