/*
 * novità, site.css
 *
 * This file carries only what cannot be written inline on an element, and nothing else:
 *
 *   1. the design's @keyframes, copied from its <helmet> block;
 *   2. the handful of base rules in that same block (box-sizing, link colour), which apply to
 *      every element and so have nowhere else to live;
 *   3. the design's style-hover and style-focus attributes, which are hover and focus states;
 *   4. the app cards' flex behaviour, which the design drives from JavaScript state;
 *   5. the responsive rules, which the design derives from its own `wide = w > 900` test;
 *   6. the reduced-motion guard.
 *
 * Everything else is an inline style on the element, exactly as the design writes it. That is
 * deliberate: it is how the design is authored, and it means no stylesheet loaded after this one,
 * from a plugin or anywhere else, can recolour a heading or re-centre a flex box.
 *
 * Bump the ?v= on the enqueue when this changes. (functions.php does it from the file's mtime.)
 */

/* ── 1. keyframes, from the design's helmet ─────────────────────────────── */

@keyframes nvDrift1 { 0%, 100% { transform: translate(-10%, -6%) scale(1); }   50% { transform: translate(12%, 8%) scale(1.25); } }
@keyframes nvDrift2 { 0%, 100% { transform: translate(10%, 10%) scale(1.1); }  50% { transform: translate(-14%, -4%) scale(0.9); } }
@keyframes nvSpin   { to { transform: rotate(360deg); } }
@keyframes nvSpinR  { to { transform: rotate(-360deg); } }
@keyframes nvDash   { 0% { stroke-dashoffset: 880; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -880; } }
@keyframes nvPulse  { 0% { transform: scale(.8); opacity: .6; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes nvFloatA { 0%, 100% { transform: translateY(0) rotate(-6deg); }     50% { transform: translateY(-18px) rotate(-4deg); } }
@keyframes nvFloatB { 0%, 100% { transform: translateY(-10px) rotate(6deg); }  50% { transform: translateY(12px) rotate(8deg); } }
@keyframes nvWord   { 0%, 22% { transform: translateY(0); } 25%, 47% { transform: translateY(-25%); } 50%, 72% { transform: translateY(-50%); } 75%, 97% { transform: translateY(-75%); } 100% { transform: translateY(-75%); } }
@keyframes nvScan   { 0% { transform: translateY(-120%); } 100% { transform: translateY(520%); } }
@keyframes nvBar    { 0%, 100% { transform: scaleX(.3); } 50% { transform: scaleX(1); } }
@keyframes nvIn     { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ── 2. the design's base rules ─────────────────────────────────────────── */

* { box-sizing: border-box; }

a { color: #A78BFA; text-decoration: none; }
a:hover { color: #C4B1FC; }

input, select, textarea { font-family: inherit; }

/* The skip link is not in the design, which has no keyboard target to skip to. It is here because
   a fixed header over a full-height hero is otherwise a long tab through motion to reach content. */
.nv-skip {
	position: absolute;
	left: -9999px;
	z-index: 40;
	padding: 12px 18px;
	border-radius: 0 0 999px 0;
	background: #6633FF;
	color: #FFFFFF;
	font-weight: 600;
}
.nv-skip:focus { left: 0; top: 0; color: #FFFFFF; }

/* ── 3. the design's hover and focus states ─────────────────────────────── */

.nv-nav-link:hover { color: #FFFFFF; }

.nv-btn:hover { background: #5225E0; color: #FFFFFF; }

.nv-btn-alt:hover { border-color: #A78BFA; color: #F3F1F8; }

.nv-btn-outline:hover { border-color: #A78BFA; color: #F3F1F8; }

.nv-link:hover { color: #C4B1FC; }

.nv-foot-link:hover { color: #FFFFFF; }

/* Cards keep their text colour on hover: the design moves the border, not the type. */
.nv-card:hover,
.nv-app:hover,
.nv-row:hover,
.nv-tile:hover { color: #F3F1F8; }

.nv-app:hover,
.nv-app:focus-visible,
.nv-row:hover,
.nv-tile:hover,
.nv-slab:hover { border-color: #4A3D7A; }

.nv-plan-btn:hover { color: #FFFFFF; border-color: #A78BFA; }

.nv-field:focus { border-color: #A78BFA; }

/* The accordion's + turns into a x when the row opens. */
.nv-faq[open] > summary .nv-faq-sign { transform: rotate(45deg); }
.nv-faq > summary::-webkit-details-marker { display: none; }
.nv-faq > summary::marker { content: ""; }

/* ── 4. the app cards' flex behaviour ──────────────────────────────────────
   The design keeps the open card in state (S.app) and gives it flex 2.4 against the others' 1,
   transitioning over .7s. Hover and keyboard focus do the same job here, so the first card is
   open on load and pointing at any card opens that one instead. */

.nv-apps { flex-direction: row; }

.nv-app {
	flex: 1 1 0;
	height: 560px;
	transition: flex .7s cubic-bezier(.2, .8, .2, 1);
}
.nv-app.is-open { flex: 2.4 1 0; }

.nv-apps:hover .nv-app.is-open,
.nv-apps:focus-within .nv-app.is-open { flex: 1 1 0; }

.nv-apps .nv-app:hover,
.nv-apps .nv-app:focus-within { flex: 2.4 1 0; }

.nv-app-more { display: none; }

.nv-app.is-open .nv-app-more,
.nv-apps .nv-app:hover .nv-app-more,
.nv-apps .nv-app:focus-within .nv-app-more {
	display: flex;
	animation: nvIn .5s ease both;
}

.nv-apps:hover .nv-app.is-open .nv-app-more,
.nv-apps:focus-within .nv-app.is-open .nv-app-more { display: none; }

.nv-apps .nv-app:hover .nv-app-more,
.nv-apps .nv-app:focus-within .nv-app-more { display: flex; }

/* ── 5. responsive, at the design's own 900px line ──────────────────────── */

/* Wide: the nav is links, and the Menu button and its drop-down are not rendered. */
.nv-nav-toggle,
.nv-nav-menu { display: none; }

@media (max-width: 900px) {
	.nv-nav-wide { display: none !important; }
	.nv-nav-toggle { display: block; }
	.nv-nav-menu.is-open { display: flex; }

	/* The design stacks the cards and opens every one, because there is no hover to open with. */
	.nv-apps { flex-direction: column; }
	.nv-app,
	.nv-app.is-open,
	.nv-apps:hover .nv-app.is-open,
	.nv-apps .nv-app:hover,
	.nv-apps .nv-app:focus-within { flex: 1 1 auto; height: 460px; }
	.nv-app-more,
	.nv-apps:hover .nv-app.is-open .nv-app-more { display: flex; }

	/* heroMotion: ring = min(300, w * 0.7), pushed off the right edge and dimmed.
	   --ring is declared inline on the element, where the wide formula lives, and an inline
	   custom property outranks a stylesheet one, so the narrow value has to say so. */
	.nv-hero-ring {
		--ring: min(300px, 70vw) !important;
		top: 84px !important;
		right: -22% !important;
		opacity: .85;
	}

	/* innerMotion: r = 220. */
	.nv-inner-ring {
		--ring: 220px !important;
		right: -38% !important;
	}
}

/* Our Apps alternates which side the artwork sits on, which the design does with order:2 on
   every second row. Only while the grid is actually two columns: once it stacks, the artwork
   belongs back on top, which is what order:0 at the narrow width gives. */
@media (min-width: 901px) {
	.nv-row:nth-child(even) .nv-row-art { order: 2; }
}

/* The inner hero reserves room for the ring on a wide screen, as the design's heroPadR does. */
@media (min-width: 901px) {
	.nv-inner-hero { padding-right: max(24px, 32%); }
}

/* ── 6. reduced motion ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}