/*
 * Phosphor motion layer for the member-facing UI.
 * Static information icons remain still; only icons inside usable links and
 * buttons animate on hover or keyboard focus.
 */
.oneclub-app .oc-icon__glyph {
	transform-box: fill-box;
	transform-origin: center;
}

@media (hover: hover) and (pointer: fine) {
	.oneclub-app :is(a[href], button:not(:disabled)):is(:hover, :focus-visible) .oc-icon .oc-icon__glyph {
		animation: oc-phosphor-pop 440ms cubic-bezier(.22, 1, .36, 1) both;
		will-change: transform;
	}

	.oneclub-app :is(a[href], button:not(:disabled)):is(:hover, :focus-visible) .oc-icon:is([data-phosphor="arrow-right"], [data-phosphor="caret-right"], [data-phosphor="sign-out"]) .oc-icon__glyph {
		animation-name: oc-phosphor-nudge-right;
	}

	.oneclub-app :is(a[href], button:not(:disabled)):is(:hover, :focus-visible) .oc-icon[data-phosphor="arrow-left"] .oc-icon__glyph {
		animation-name: oc-phosphor-nudge-left;
	}

	.oneclub-app :is(a[href], button:not(:disabled)):is(:hover, :focus-visible) .oc-icon[data-phosphor="arrow-up-right"] .oc-icon__glyph {
		animation-name: oc-phosphor-nudge-up-right;
	}

	.oneclub-app :is(a[href], button:not(:disabled)):is(:hover, :focus-visible) .oc-icon[data-phosphor="bell"] .oc-icon__glyph {
		animation-name: oc-phosphor-ring;
		transform-origin: 50% 12%;
	}

	.oneclub-app :is(a[href], button:not(:disabled)):is(:hover, :focus-visible) .oc-icon[data-phosphor="house"] .oc-icon__glyph {
		animation-name: oc-phosphor-home;
	}

	.oneclub-app :is(a[href], button:not(:disabled)):is(:hover, :focus-visible) .oc-icon[data-phosphor="book-open-text"] .oc-icon__glyph {
		animation-name: oc-phosphor-book;
	}

	.oneclub-app :is(a[href], button:not(:disabled)):is(:hover, :focus-visible) .oc-icon[data-phosphor="ticket"] .oc-icon__glyph {
		animation-name: oc-phosphor-tickets;
	}

	.oneclub-app :is(a[href], button:not(:disabled)):is(:hover, :focus-visible) .oc-icon[data-phosphor="coins"] .oc-icon__glyph {
		animation-name: oc-phosphor-coins;
	}

	.oneclub-app :is(a[href], button:not(:disabled)):is(:hover, :focus-visible) .oc-icon:is([data-phosphor="user-circle"], [data-phosphor="users"]) .oc-icon__glyph {
		animation-name: oc-phosphor-person;
	}

	.oneclub-app :is(a[href], button:not(:disabled)):is(:hover, :focus-visible) .oc-icon[data-phosphor="play-circle"] .oc-icon__glyph {
		animation-name: oc-phosphor-play;
	}

	.oneclub-app :is(a[href], button:not(:disabled)):is(:hover, :focus-visible) .oc-icon:is([data-phosphor="check-circle"], [data-phosphor="seal-check"]) .oc-icon__glyph {
		animation-name: oc-phosphor-confirm;
	}

	.oneclub-app :is(a[href], button:not(:disabled)):is(:hover, :focus-visible) .oc-icon:is([data-phosphor="warning-circle"], [data-phosphor="warning"]) .oc-icon__glyph {
		animation-name: oc-phosphor-alert;
	}

	.oneclub-app :is(a[href], button:not(:disabled)):is(:hover, :focus-visible) .oc-icon[data-phosphor="calendar-dots"] .oc-icon__glyph {
		animation-name: oc-phosphor-calendar;
	}

	.oneclub-app :is(a[href], button:not(:disabled)):is(:hover, :focus-visible) .oc-icon[data-phosphor="map-pin"] .oc-icon__glyph {
		animation-name: oc-phosphor-pin;
	}

	.oneclub-app :is(a[href], button:not(:disabled)):is(:hover, :focus-visible) .oc-icon[data-phosphor="currency-jpy"] .oc-icon__glyph {
		animation-name: oc-phosphor-value;
	}

	.oneclub-app :is(a[href], button:not(:disabled)):is(:hover, :focus-visible) .oc-icon[data-phosphor="bed"] .oc-icon__glyph {
		animation-name: oc-phosphor-rest;
	}

	.oneclub-app :is(a[href], button:not(:disabled)):is(:hover, :focus-visible) .oc-icon[data-phosphor="buildings"] .oc-icon__glyph {
		animation-name: oc-phosphor-rise;
	}

	.oneclub-app :is(a[href], button:not(:disabled)):is(:hover, :focus-visible) .oc-icon[data-phosphor="lock"] .oc-icon__glyph {
		animation-name: oc-phosphor-lock;
	}

	.oneclub-app :is(a[href], button:not(:disabled)):is(:hover, :focus-visible) .oc-icon[data-phosphor="eye"] .oc-icon__glyph {
		animation-name: oc-phosphor-blink;
	}

	.oneclub-app :is(a[href], button:not(:disabled)):is(:hover, :focus-visible) .oc-icon[data-phosphor="eye-slash"] .oc-icon__glyph {
		animation-name: oc-phosphor-eye-off;
	}

	.oneclub-app :is(a[href], button:not(:disabled)):is(:hover, :focus-visible) .oc-icon[data-phosphor="caret-down"] .oc-icon__glyph {
		animation-name: oc-phosphor-nudge-down;
	}

	.oneclub-app :is(a[href], button:not(:disabled)):is(:hover, :focus-visible) .oc-icon[data-phosphor="magnifying-glass-plus"] .oc-icon__glyph {
		animation-name: oc-phosphor-zoom;
	}
}

@keyframes oc-phosphor-pop {
	0%, 100% { transform: scale(1); }
	45% { transform: scale(1.1); }
	72% { transform: scale(.98); }
}

@keyframes oc-phosphor-nudge-right {
	0%, 100% { transform: translateX(0); }
	42% { transform: translateX(2.5px); }
	72% { transform: translateX(-.5px); }
}

@keyframes oc-phosphor-nudge-left {
	0%, 100% { transform: translateX(0); }
	42% { transform: translateX(-2.5px); }
	72% { transform: translateX(.5px); }
}

@keyframes oc-phosphor-nudge-up-right {
	0%, 100% { transform: translate(0, 0); }
	42% { transform: translate(2px, -2px); }
	72% { transform: translate(-.4px, .4px); }
}

@keyframes oc-phosphor-nudge-down {
	0%, 100% { transform: translateY(0); }
	42% { transform: translateY(2px); }
	72% { transform: translateY(-.4px); }
}

@keyframes oc-phosphor-ring {
	0%, 100% { transform: rotate(0deg); }
	24% { transform: rotate(-11deg); }
	48% { transform: rotate(9deg); }
	68% { transform: rotate(-6deg); }
	84% { transform: rotate(3deg); }
}

@keyframes oc-phosphor-home {
	0%, 100% { transform: translateY(0) scale(1); }
	42% { transform: translateY(-1.8px) scale(1.04); }
	72% { transform: translateY(.4px) scale(.99); }
}

@keyframes oc-phosphor-book {
	0%, 100% { transform: scaleX(1); }
	42% { transform: scaleX(1.08); }
	72% { transform: scaleX(.99); }
}

@keyframes oc-phosphor-tickets {
	0%, 100% { transform: rotate(0deg); }
	35% { transform: rotate(-4deg) translateY(-1px); }
	68% { transform: rotate(3deg); }
}

@keyframes oc-phosphor-coins {
	0%, 100% { transform: translateY(0) scale(1); }
	40% { transform: translateY(-1.5px) scale(1.06); }
	70% { transform: translateY(.4px) scale(.99); }
}

@keyframes oc-phosphor-person {
	0%, 100% { transform: translateY(0); }
	38% { transform: translateY(-1.8px); }
	68% { transform: translateY(.5px); }
}

@keyframes oc-phosphor-play {
	0%, 100% { transform: scale(1); }
	42% { transform: scale(1.1); }
	68% { transform: scale(.98); }
}

@keyframes oc-phosphor-confirm {
	0%, 100% { transform: scale(1) rotate(0deg); }
	40% { transform: scale(1.09) rotate(-3deg); }
	72% { transform: scale(.99) rotate(1deg); }
}

@keyframes oc-phosphor-alert {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-1.5px); }
	50% { transform: translateX(1.5px); }
	75% { transform: translateX(-.7px); }
}

@keyframes oc-phosphor-calendar {
	0%, 100% { transform: translateY(0) scaleY(1); }
	38% { transform: translateY(-1.5px) scaleY(1.04); }
	68% { transform: translateY(.5px) scaleY(.99); }
}

@keyframes oc-phosphor-pin {
	0%, 100% { transform: translateY(0); }
	38% { transform: translateY(-2.2px); }
	66% { transform: translateY(.7px); }
}

@keyframes oc-phosphor-value {
	0%, 100% { transform: scale(1); }
	35% { transform: scale(1.08); }
	64% { transform: scale(.98); }
}

@keyframes oc-phosphor-rest {
	0%, 100% { transform: translateY(0); }
	40% { transform: translateY(1.3px); }
	70% { transform: translateY(-.3px); }
}

@keyframes oc-phosphor-rise {
	0%, 100% { transform: translateY(0); }
	38% { transform: translateY(-1.8px); }
	68% { transform: translateY(.4px); }
}

@keyframes oc-phosphor-lock {
	0%, 100% { transform: translateY(0) scale(1); }
	38% { transform: translateY(-1.2px) scale(1.04); }
	68% { transform: translateY(.4px) scale(.99); }
}

@keyframes oc-phosphor-blink {
	0%, 30%, 100% { transform: scaleY(1); }
	48% { transform: scaleY(.18); }
	66% { transform: scaleY(1); }
}

@keyframes oc-phosphor-eye-off {
	0%, 100% { transform: translateX(0); }
	30% { transform: translateX(-1.2px); }
	58% { transform: translateX(1.2px); }
	78% { transform: translateX(-.4px); }
}

@keyframes oc-phosphor-zoom {
	0%, 100% { transform: scale(1) translate(0, 0); }
	42% { transform: scale(1.1) translate(-.4px, -.4px); }
	72% { transform: scale(.99) translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.oneclub-app .oc-icon .oc-icon__glyph {
		animation: none !important;
		transform: none !important;
	}
}