/**
 * One to Z — custom cursor.
 *
 * Loaded on every page when the cursor is switched on, so the pointer does not
 * change character when a visitor leaves the homepage. This is the only part of
 * the motion layer that is site-wide; video, wheel, loader and smooth scroll
 * all live in motion.css and stay on the homepage and brand pages.
 *
 * Touch devices and visitors who ask for reduced motion keep the native cursor.
 */

.otz-cursor,
.otz-cursor-dot {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9998;
	pointer-events: none;
	will-change: transform;
	opacity: 0;
	transition: opacity .3s ease;
}

.otz-cursor.is-visible,
.otz-cursor-dot.is-visible {
	opacity: 1;
}

.otz-cursor {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--otz-cur-size, 44px);
	height: var(--otz-cur-size, 44px);
	margin: calc(var(--otz-cur-size, 44px) / -2) 0 0 calc(var(--otz-cur-size, 44px) / -2);
	border: 1.5px solid rgb(var(--otz-brand-rgb) / .85);
	border-radius: var(--otz-cur-radius, 50%);
	background: rgb(var(--otz-brand-rgb) / .06);
	backdrop-filter: blur(1px);
	transition: width .3s cubic-bezier(.22, 1, .36, 1),
	            height .3s cubic-bezier(.22, 1, .36, 1),
	            margin .3s cubic-bezier(.22, 1, .36, 1),
	            border-radius .3s cubic-bezier(.22, 1, .36, 1),
	            background-color .28s ease,
	            border-color .28s ease,
	            opacity .3s ease;
}

/* an inner element carries stretch and squash so it never fights the follow */
.otz-cursor__shape {
	position: absolute;
	inset: -1.5px;
	border-radius: inherit;
	will-change: transform;
}

/* over video and imagery the ring inverts instead of tinting */
body.otz-cursor-invert .otz-cursor {
	mix-blend-mode: difference;
	border-color: #fff;
	background: rgb(255 255 255 / .12);
}

.otz-cursor__label {
	font-family: var(--otz-font-body);
	font-size: .68rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #2a1c0a;
	opacity: 0;
	transform: scale(.7);
	transition: opacity .2s ease, transform .28s cubic-bezier(.22, 1, .36, 1);
	white-space: nowrap;
}

.otz-cursor-dot {
	width: 6px;
	height: 6px;
	margin: -3px 0 0 -3px;
	border-radius: 50%;
	background: var(--otz-orange);
	transition: opacity .3s ease, transform .2s ease;
}

/* hovering something clickable */
body.otz-cursor-hover .otz-cursor {
	--otz-cur-size: 62px;
	background: rgb(var(--otz-brand-rgb) / .14);
}

body.otz-cursor-hover .otz-cursor-dot {
	transform: scale(0);
}

/* hovering something with a label, e.g. a product card */
body.otz-cursor-label .otz-cursor {
	--otz-cur-size: 104px;
	background: var(--otz-orange);
	border-color: var(--otz-orange);
}

body.otz-cursor-label .otz-cursor__label {
	opacity: 1;
	transform: scale(1);
}

body.otz-cursor-label .otz-cursor-dot {
	transform: scale(0);
}

/* over text: collapse to a thin caret so the ring stops covering words */
body.otz-cursor-text .otz-cursor {
	--otz-cur-size: 3px;
	--otz-cur-radius: 2px;
	height: 30px !important;
	margin-top: -15px;
	background: var(--otz-orange);
	border-color: transparent;
}

body.otz-cursor-text .otz-cursor-dot { transform: scale(0); }

/* over a draggable or scrollable strip */
body.otz-cursor-drag .otz-cursor {
	--otz-cur-size: 76px;
	background: rgb(var(--otz-brand-rgb) / .18);
}

/* mouse held down: the whole thing compresses */
body.otz-cursor-down .otz-cursor {
	--otz-cur-size: 34px;
	background: var(--otz-orange);
}

body.otz-cursor-down.otz-cursor-label .otz-cursor {
	--otz-cur-size: 92px;
}

/* snapped to a button: becomes a rounded rectangle matching its footprint */
body.otz-cursor-snap .otz-cursor {
	--otz-cur-radius: 12px;
	background: rgb(var(--otz-brand-rgb) / .1);
	border-color: rgb(var(--otz-brand-rgb) / .55);
	transition: width .32s cubic-bezier(.22, 1, .36, 1),
	            height .32s cubic-bezier(.22, 1, .36, 1),
	            margin .32s cubic-bezier(.22, 1, .36, 1),
	            border-radius .32s cubic-bezier(.22, 1, .36, 1),
	            transform .18s cubic-bezier(.22, 1, .36, 1),
	            background-color .28s ease,
	            border-color .28s ease;
}

body.otz-cursor-snap .otz-cursor-dot { transform: scale(0); }

/*
 * Some moments need the real pointer back: a two-button decision, or a form
 * where precision matters. Adding .otz-cursor-off to <html> does that without
 * unloading anything.
 */
html.otz-cursor-off,
html.otz-cursor-off a,
html.otz-cursor-off button,
html.otz-cursor-off input,
html.otz-cursor-off .otz-franchise,
html.otz-cursor-off .products li.product { cursor: auto !important; }

html.otz-cursor-off .otz-cursor,
html.otz-cursor-off .otz-cursor-dot { opacity: 0 !important; }

/* hide the native cursor only once ours is actually running */
html.otz-has-cursor,
html.otz-has-cursor a,
html.otz-has-cursor button,
html.otz-has-cursor .otz-franchise,
html.otz-has-cursor .products li.product {
	cursor: none;
}

/* never hide the cursor over things people type into */
html.otz-has-cursor input,
html.otz-has-cursor textarea,
html.otz-has-cursor select {
	cursor: auto;
}

/* ==========================================================================
   Opt-outs
   ========================================================================== */
@media (hover: none), (pointer: coarse) {
	.otz-cursor,
	.otz-cursor-dot { display: none !important; }

	html.otz-has-cursor,
	html.otz-has-cursor a,
	html.otz-has-cursor button,
	html.otz-has-cursor .otz-franchise,
	html.otz-has-cursor .products li.product { cursor: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.otz-cursor,
	.otz-cursor-dot { display: none !important; }
}