/*
 * Adult OT theme — motion (SITE-6, OWNER direction: "moderately modern").
 *
 * Premium, dark, slightly alive; never flashy. Everything here rides on the
 * SHARED components (buttons, nav, panels, cards, tables, header), so every
 * page inherits it and no page template changes. Rules of the file:
 *
 *   - only opacity, transform, colour, border-colour and shadow move:
 *     nothing that changes layout, so nothing shifts;
 *   - hover-only effects live under (hover: hover) and (pointer: fine), so a
 *     phone never gets stuck "lifted" after a tap;
 *   - one continuous animation on the whole site (the hero's slow drift), on
 *     desktop only;
 *   - prefers-reduced-motion: base.css already collapses every transition and
 *     animation; on top of that the reveal never arms (js/motion.js) and the
 *     hero drift is declared only for no-preference.
 *
 * Palette: bronze for light and focus, crimson only on the danger button and
 * the jewel, exactly as VIS-0.3 uses them.
 */

:root {
	--aot-ease: cubic-bezier(.2, .7, .2, 1);
	--aot-ease-out: cubic-bezier(.16, 1, .3, 1);
	--aot-dur-1: 140ms;
	--aot-dur-2: 220ms;
	--aot-dur-3: 420ms;
	--aot-glow-bronze: 0 0 18px rgba(199, 154, 94, .16);
	--aot-lift-shadow: 0 10px 24px rgba(0, 0, 0, .55);
}

/* ---------------------------------------------------------- links ----- */

a {
	transition: color var(--aot-dur-1) var(--aot-ease);
}

/* --------------------------------------------------------- buttons ---- */

.aot-btn,
button,
input[type="submit"],
input[type="button"],
.btn {
	transition:
		background var(--aot-dur-2) var(--aot-ease),
		border-color var(--aot-dur-2) var(--aot-ease),
		color var(--aot-dur-2) var(--aot-ease),
		box-shadow var(--aot-dur-2) var(--aot-ease),
		transform var(--aot-dur-1) var(--aot-ease);
}

.aot-btn:active {
	transform: translateY(0);
	box-shadow: none;
	transition-duration: 60ms;
}

@media (hover: hover) and (pointer: fine) {
	.aot-btn:hover {
		transform: translateY(-1px);
		box-shadow: 0 6px 16px rgba(0, 0, 0, .45), 0 0 0 1px rgba(167, 123, 70, .30);
	}

	.aot-btn--primary:hover {
		box-shadow: 0 6px 16px rgba(0, 0, 0, .45), 0 0 0 1px rgba(199, 154, 94, .45), var(--aot-glow-bronze);
	}

	.aot-btn--danger:hover {
		box-shadow: 0 6px 16px rgba(0, 0, 0, .45), 0 0 16px rgba(139, 31, 46, .35);
	}
}

/* ---------------------------------------------------------- header ---- */

.aot-brand__mark {
	transition: filter var(--aot-dur-3) var(--aot-ease);
}

.aot-brand__word::after {
	transition: opacity var(--aot-dur-3) var(--aot-ease), left var(--aot-dur-3) var(--aot-ease-out), right var(--aot-dur-3) var(--aot-ease-out);
}

.aot-brand__word::before {
	transition: box-shadow var(--aot-dur-3) var(--aot-ease);
}

@media (hover: hover) and (pointer: fine) {
	/* the metal catches the light: a bronze halo, the rule widens, the jewel glows */
	.aot-brand:hover .aot-brand__mark {
		filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .55)) drop-shadow(0 0 10px rgba(199, 154, 94, .30));
	}

	.aot-brand:hover .aot-brand__word::after {
		opacity: 1;
		left: 0;
		right: .14em;
	}

	.aot-brand:hover .aot-brand__word::before {
		box-shadow: 0 0 0 1px var(--aot-bronze), 0 0 8px rgba(185, 54, 72, .65);
	}
}

/* status: a still, soft light on the dot — no pulsing */
.aot-status--online .aot-status__dot {
	box-shadow: 0 0 0 3px rgba(63, 107, 74, .18), 0 0 8px rgba(63, 107, 74, .60);
}

.aot-status {
	transition: border-color var(--aot-dur-2) var(--aot-ease);
}

/* boosted creature / boss: a bronze light gathers behind the sprite */
.aot-boosted__sprite {
	position: relative;
}

.aot-boosted__sprite::before {
	content: "";
	position: absolute;
	inset: 10% 6% 0;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(199, 154, 94, .22), transparent);
	opacity: 0;
	transition: opacity var(--aot-dur-3) var(--aot-ease);
	pointer-events: none;
}

.aot-boosted__img {
	position: relative;
}

.aot-boosted__name {
	transition: color var(--aot-dur-2) var(--aot-ease);
}

@media (hover: hover) and (pointer: fine) {
	.aot-boosted__item:hover .aot-boosted__sprite::before { opacity: 1; }
	.aot-boosted__item:hover .aot-boosted__name { color: var(--aot-bronze-hi); }
	.aot-status:hover { border-color: var(--aot-border-accent); }
}

/* ------------------------------------------------------------- nav ---- */

.aot-nav__label {
	transition:
		color var(--aot-dur-2) var(--aot-ease),
		border-color var(--aot-dur-2) var(--aot-ease),
		background var(--aot-dur-2) var(--aot-ease);
}

.aot-nav__link {
	transition:
		color var(--aot-dur-1) var(--aot-ease),
		background var(--aot-dur-1) var(--aot-ease),
		border-color var(--aot-dur-1) var(--aot-ease);
}

/* Desktop dropdowns open with a short fade and settle, instead of popping.
   Same triggers as layout.css (hover, and nav.js's --open class for keyboard
   and touch); a closed panel stays out of the tab order via visibility. */
@media (min-width: 861px) {
	.aot-nav__panel {
		display: block;
		visibility: hidden;
		opacity: 0;
		transform: translateY(6px);
		pointer-events: none;
		transition:
			opacity var(--aot-dur-2) var(--aot-ease),
			transform var(--aot-dur-2) var(--aot-ease-out),
			visibility 0s linear var(--aot-dur-2);
	}

	.aot-nav__group:hover > .aot-nav__panel,
	.aot-nav__panel--open {
		visibility: visible;
		opacity: 1;
		transform: none;
		pointer-events: auto;
		transition-delay: 0s;
	}
}

/* --------------------------------------------- panels, cards, news ---- */

.aot-panel,
.aot-news,
.aot-card {
	transition:
		border-color var(--aot-dur-2) var(--aot-ease),
		box-shadow var(--aot-dur-3) var(--aot-ease),
		transform var(--aot-dur-2) var(--aot-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	/* large blocks only warm their border: lifting a whole article reads as noise */
	.aot-panel:hover,
	.aot-news:hover {
		border-color: var(--aot-border-accent);
		box-shadow: var(--aot-shadow-md);
	}

	/* small cards rise a little */
	.aot-card:hover {
		transform: translateY(-2px);
		border-color: var(--aot-border-accent);
		box-shadow: var(--aot-lift-shadow), var(--aot-glow-bronze);
	}

	.aot-card--accent:hover { border-color: var(--aot-bronze-muted); }
}

/* ----------------------------------------------------------- tables ---- */

.aot-table tbody td,
.TableContent td {
	transition: background var(--aot-dur-1) var(--aot-ease), box-shadow var(--aot-dur-1) var(--aot-ease);
}

@media (hover: hover) and (pointer: fine) {
	/* the row under the pointer gets a bronze edge as well as the tint */
	.aot-table tbody tr:hover td:first-child {
		box-shadow: inset 2px 0 0 var(--aot-bronze);
	}
}

/* ------------------------------------------------------------- hero ---- */

/* The one continuous movement on the site: the environment art drifts in so
   slowly it reads as atmosphere, not animation. Desktop only. */
@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
	.aot-hero__img {
		transform-origin: 62% 45%;
		animation: aot-hero-drift 48s ease-in-out infinite alternate;
	}
}

@keyframes aot-hero-drift {
	from { transform: scale(1); }
	to { transform: scale(1.045) translate3d(-.6%, -.4%, 0); }
}

/* ----------------------------------------------------------- reveal ---- */

/* Content settles in as it enters the viewport. Armed only by the inline
   head script when motion is allowed (html.aot-motion), revealed by
   js/motion.js (aot-revealing carries the entrance transition and is removed
   once it has played, so later hover effects keep their own quick timing);
   if that script never runs, the head script disarms itself,
   so content can never stay hidden. */
.aot-motion .aot-main .aot-panel:not(.aot-revealed),
.aot-motion .aot-main .aot-news:not(.aot-revealed),
.aot-motion .aot-main .aot-card:not(.aot-revealed),
.aot-motion .aot-main .aot-hero__inner:not(.aot-revealed) {
	opacity: 0;
	transform: translateY(12px);
}

.aot-motion .aot-main .aot-revealing {
	transition:
		opacity var(--aot-dur-3) var(--aot-ease) var(--aot-reveal-delay, 0ms),
		transform 600ms var(--aot-ease-out) var(--aot-reveal-delay, 0ms),
		border-color var(--aot-dur-2) var(--aot-ease),
		box-shadow var(--aot-dur-3) var(--aot-ease);
}

@media (max-width: 860px) {
	/* lighter on phones: a shorter travel, nothing else */
	.aot-motion .aot-main .aot-panel:not(.aot-revealed),
	.aot-motion .aot-main .aot-news:not(.aot-revealed),
	.aot-motion .aot-main .aot-card:not(.aot-revealed),
	.aot-motion .aot-main .aot-hero__inner:not(.aot-revealed) {
		transform: translateY(6px);
	}
}

@media print {
	/* never print a page with content still waiting to be revealed */
	.aot-motion .aot-main .aot-panel,
	.aot-motion .aot-main .aot-news,
	.aot-motion .aot-main .aot-card,
	.aot-motion .aot-main .aot-hero__inner {
		opacity: 1 !important;
		transform: none !important;
	}
}