/* ==========================================================================
   Markital "Do Not Touch" experiment
   ========================================================================== */

html.dnt-html,
.dnt-body {
	background: #070A08;
	overflow: hidden;
	height: 100%;
	overscroll-behavior: none;
}
.dnt-body .skip-link { display: none; }

.dnt {
	--rk-h: min(58vh, 560px);
	--rk-w: calc(var(--rk-h) * .46);
	--spot-x: 50%;
	--spot-y: 62%;
	--spot-c: rgba(124, 224, 42, .10);
	position: fixed;
	inset: 0;
	overflow: hidden;
	background: #070A08;
	color: var(--ink);
	font-family: var(--font-body);
	user-select: none;
	-webkit-user-select: none;
	touch-action: none;
	isolation: isolate;
}
.admin-bar .dnt { top: 32px; }
.dnt em { font-style: normal; color: var(--accent); }

/* Atmosphere */
.dnt-dust { position: absolute; inset: 0; z-index: 0; }
.dnt-spot {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(34vmax 30vmax at var(--spot-x) var(--spot-y), var(--spot-c), transparent 70%),
		radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0, 0, 0, .7) 100%);
	transition: background .8s ease;
}
.dnt[data-state="warning"] { --spot-c: rgba(255, 190, 90, .10); }
.dnt[data-state="chase"] { --spot-c: rgba(124, 224, 42, .16); }
.dnt[data-state="chaos"] { --spot-c: rgba(124, 224, 42, .28); }
.dnt-grain {
	position: fixed;
	inset: -50%;
	z-index: 70;
	pointer-events: none;
	opacity: .08;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	animation: dnt-grain 1.1s steps(5) infinite;
}
@keyframes dnt-grain {
	0%, 100% { transform: translate(0, 0); }
	25% { transform: translate(-3%, 2%); }
	50% { transform: translate(2%, -2%); }
	75% { transform: translate(-1%, 3%); }
}
.dnt-flash {
	position: fixed;
	inset: 0;
	z-index: 90;
	pointer-events: none;
	background: var(--accent);
	opacity: 0;
}
.dnt-flash.is-on { animation: dnt-flash .9s cubic-bezier(.2, .8, .2, 1); }
@keyframes dnt-flash {
	0% { opacity: 0; }
	12% { opacity: 1; }
	100% { opacity: 0; }
}

/* Top bar */
.dnt-bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px clamp(16px, 3vw, 32px);
}
.dnt-mark img { width: 36px; height: auto; opacity: .85; transition: opacity .2s; }
.dnt-mark:hover img { opacity: 1; }
.dnt-bar__right { display: flex; gap: 8px; }
.dnt-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 34px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid rgba(242, 246, 241, .14);
	background: rgba(10, 15, 11, .55);
	color: var(--muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	transition: color .2s, border-color .2s;
}
.dnt-chip:hover { color: var(--ink); border-color: rgba(124, 224, 42, .5); }
.dnt-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: #3C4E42; transition: background .2s, box-shadow .2s; }
.dnt-chip[aria-pressed="true"] .dnt-chip__dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(124, 224, 42, .2); }
.dnt[data-state="reveal"] [data-skip],
.dnt[data-state="complete"] [data-skip] { display: none; }

/* Title */
.dnt-title {
	position: absolute;
	top: clamp(64px, 11vh, 110px);
	left: 0;
	right: 0;
	z-index: 20;
	text-align: center;
	pointer-events: none;
	padding: 0 16px;
	transition: opacity .6s ease, transform .6s ease;
}
.dnt-title__big {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2.6rem, 9vw, 8.4rem);
	line-height: .92;
	letter-spacing: -.06em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(20px);
	filter: blur(10px);
	transition: opacity .8s ease, transform .9s cubic-bezier(.2, .8, .2, 1), filter .8s ease, color .3s;
}
.dnt.is-ready .dnt-title__big { opacity: 1; transform: none; filter: none; }
.dnt-title__big.is-shake { animation: dnt-shake .6s; }
@keyframes dnt-shake {
	0%, 100% { translate: 0 0; }
	10%, 70% { color: var(--accent); }
	20% { translate: -8px 0; }
	40% { translate: 7px 0; }
	60% { translate: -5px 0; }
	80% { translate: 3px 0; }
}
.dnt-title__sub { margin: 14px 0 0; font-size: clamp(.95rem, 1.4vw, 1.15rem); color: var(--muted); }
.dnt-title__sub span { display: inline-block; opacity: 0; transform: translateY(8px); transition: opacity .6s ease, transform .6s ease; }
.dnt-title__sub span.is-in { opacity: 1; transform: none; }
.dnt-title__hint {
	display: none;
	margin: 14px auto 0;
	width: max-content;
	padding: 8px 16px;
	border-radius: 999px;
	border: 1px solid rgba(124, 224, 42, .45);
	color: var(--accent);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity .6s ease;
}
.dnt.is-touch .dnt-title__hint { display: block; }
.dnt.is-ready .dnt-title__hint { opacity: 1; animation: dnt-pulse 1.8s infinite 1s; }
@keyframes dnt-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(124, 224, 42, .45); }
	70% { box-shadow: 0 0 0 14px rgba(124, 224, 42, 0); }
}
.dnt:not([data-state="intro"]):not([data-state="watching"]) .dnt-title__hint { opacity: 0; animation: none; }
.dnt[data-state="chaos"] .dnt-title,
.dnt[data-state="silence"] .dnt-title,
.dnt[data-state="point"] .dnt-title,
.dnt[data-state="final_button"] .dnt-title,
.dnt[data-state="reveal"] .dnt-title,
.dnt[data-state="complete"] .dnt-title { opacity: 0; transform: translateY(-20px); }

/* Stage + Rakesh */
.dnt-stage { position: absolute; inset: 0; z-index: 10; }
.dnt-rk {
	position: absolute;
	left: 0;
	top: 0;
	width: var(--rk-w);
	height: var(--rk-h);
	cursor: none;
	outline: none;
	will-change: transform;
	transform: translate3d(-999px, -999px, 0);
	-webkit-tap-highlight-color: transparent;
}
.dnt-rk:focus-visible .dnt-rk__body { filter: drop-shadow(0 0 0 2px var(--accent)); }
.dnt-rk__body {
	position: absolute;
	inset: 0;
	transform-origin: 50% 100%;
	transform: rotate(var(--lean, 0deg)) scaleX(var(--face, 1));
	transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .25s ease, filter .3s;
	animation: dnt-breathe 3.4s ease-in-out infinite;
	opacity: 0;
}
.dnt.is-ready .dnt-rk__body { opacity: 1; }
@keyframes dnt-breathe {
	0%, 100% { translate: 0 0; scale: 1 1; }
	50% { translate: 0 -6px; scale: 1 1.012; }
}
.dnt-rk__img {
	position: absolute;
	left: 50%;
	bottom: 0;
	height: 100%;
	width: auto;
	max-width: none;
	transform: translateX(-50%) scale(.96);
	opacity: 0;
	pointer-events: none;
	filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .55));
	transition: opacity .16s ease, transform .3s cubic-bezier(.3, 1.5, .5, 1);
}
.dnt-rk__img.is-on { opacity: 1; transform: translateX(-50%) scale(1); }
.dnt-rk__img[data-pose="pointing"] { height: 88%; }
.dnt-rk__shadow {
	position: absolute;
	left: 50%;
	bottom: -8px;
	width: 90%;
	height: 22px;
	border-radius: 50%;
	transform: translateX(-50%);
	background: radial-gradient(closest-side, rgba(0, 0, 0, .65), transparent);
	opacity: 0;
	transition: opacity .3s;
}
.dnt.is-ready .dnt-rk__shadow { opacity: 1; }
.dnt-rk.is-hidden .dnt-rk__body,
.dnt-rk.is-hidden .dnt-rk__shadow { opacity: 0; transition-duration: .12s; }
.dnt-rk.is-pop .dnt-rk__body { animation: dnt-pop .5s cubic-bezier(.3, 1.6, .5, 1), dnt-breathe 3.4s ease-in-out infinite .5s; }
@keyframes dnt-pop {
	0% { scale: .4; opacity: 0; }
	100% { scale: 1; opacity: 1; }
}
.dnt-rk.is-flinch .dnt-rk__body { animation: dnt-flinch .45s cubic-bezier(.2, .8, .2, 1); }
@keyframes dnt-flinch {
	0% { translate: 0 0; }
	25% { translate: 0 -24px; scale: 1.04 .96; }
	60% { translate: 0 4px; scale: .98 1.02; }
	100% { translate: 0 0; }
}

/* Speech bubble */
.dnt-bubble {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 6px);
	z-index: 2;
	margin: 0;
	padding: 10px 16px;
	border-radius: 18px 18px 18px 4px;
	background: var(--ink);
	color: #0A0F0B;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(.85rem, 1.25vw, 1.1rem);
	letter-spacing: -.02em;
	line-height: 1.2;
	white-space: nowrap;
	transform: translate(-10%, 10px) scale(.8);
	transform-origin: 0 100%;
	opacity: 0;
	pointer-events: none;
	box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .8);
	transition: opacity .18s ease, transform .35s cubic-bezier(.3, 1.6, .5, 1);
}
.dnt-bubble.is-on { opacity: 1; transform: translate(-10%, 0) scale(1); }
.dnt-bubble.is-loud { background: var(--accent); font-size: clamp(1.1rem, 1.8vw, 1.6rem); text-transform: uppercase; letter-spacing: -.03em; }
.dnt-bubble.is-left { border-radius: 18px 18px 4px 18px; transform-origin: 100% 100%; }
.dnt-bubble.is-left.is-on { transform: translate(-90%, 0) scale(1); }
.dnt-bubble.is-left:not(.is-on) { transform: translate(-90%, 10px) scale(.8); }

/* Clones */
.dnt-rk.is-clone { pointer-events: auto; }
.dnt-rk.is-clone .dnt-rk__body { opacity: 1; }
.dnt-rk.is-clone .dnt-rk__shadow { opacity: 1; }
.dnt.is-glitch .dnt-stage {
	filter: drop-shadow(-4px 0 rgba(255, 60, 90, .7)) drop-shadow(4px 0 rgba(60, 200, 255, .7));
	translate: var(--gx, 0) var(--gy, 0);
}
.dnt.is-glitch .dnt-dust { clip-path: polygon(0 10%, 100% 10%, 100% 40%, 0 40%, 0 55%, 100% 55%, 100% 62%, 0 62%); }

/* Silence */
.dnt-silence {
	position: absolute;
	inset: 0;
	z-index: 30;
	display: grid;
	place-content: center;
	gap: 14px;
	text-align: center;
	background: #000;
	opacity: 0;
	pointer-events: none;
	transition: opacity .12s linear;
	padding: 0 20px;
}
.dnt[data-state="silence"] .dnt-silence { opacity: 1; }
.dnt-silence p {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(1.1rem, 2.4vw, 2rem);
	letter-spacing: -.02em;
	color: var(--muted);
	opacity: 0;
	transition: opacity 1s ease;
}
.dnt-silence p:first-child { color: var(--ink); font-size: clamp(1.6rem, 4vw, 3.2rem); }
.dnt-silence p.is-in { opacity: 1; }
.dnt[data-state="silence"] .dnt-stage,
.dnt[data-state="silence"] .dnt-dust { opacity: 0; }

/* Twist button */
.dnt-twist {
	position: absolute;
	right: clamp(24px, 12vw, 220px);
	top: 50%;
	z-index: 25;
	transform: translateY(-50%);
	pointer-events: none;
}
.dnt-touch {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 76px;
	padding: 0 36px;
	border-radius: 999px;
	background: var(--accent);
	color: #0A0F0B;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1rem, 1.6vw, 1.35rem);
	letter-spacing: -.02em;
	text-transform: uppercase;
	cursor: none;
	opacity: 0;
	transform: scale(.4);
	transition: opacity .4s ease, transform .6s cubic-bezier(.3, 1.6, .5, 1);
	box-shadow: 0 0 0 0 rgba(124, 224, 42, .6), 0 0 80px rgba(124, 224, 42, .45);
}
.dnt-touch b { font-size: 1.3em; transition: transform .3s; }
.dnt-touch:hover b { transform: translateX(5px); }
.dnt[data-state="final_button"] .dnt-twist { pointer-events: auto; }
.dnt[data-state="final_button"] .dnt-touch { opacity: 1; transform: scale(1); animation: dnt-beacon 1.6s infinite .6s; }
@keyframes dnt-beacon {
	0% { box-shadow: 0 0 0 0 rgba(124, 224, 42, .55), 0 0 80px rgba(124, 224, 42, .45); }
	100% { box-shadow: 0 0 0 28px rgba(124, 224, 42, 0), 0 0 80px rgba(124, 224, 42, .45); }
}

/* Reveal */
.dnt-reveal {
	position: absolute;
	inset: 0;
	z-index: 35;
	display: grid;
	place-items: center;
	padding: 80px clamp(16px, 5vw, 64px) 40px;
	pointer-events: none;
	visibility: hidden;
}
.dnt[data-state="reveal"] .dnt-reveal,
.dnt[data-state="complete"] .dnt-reveal { visibility: visible; }
.dnt[data-state="complete"] .dnt-reveal { pointer-events: auto; }
.dnt[data-state="reveal"],
.dnt[data-state="complete"] { --spot-x: 50%; --spot-y: 45%; --spot-c: rgba(124, 224, 42, .22); }

.dnt-reveal__lines {
	grid-area: 1 / 1;
	text-align: center;
}
.dnt-reveal__lines p {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.8rem, 6vw, 5.6rem);
	line-height: 1;
	letter-spacing: -.055em;
	text-transform: uppercase;
	opacity: 0;
	transform: translateY(30px);
	transition: opacity .5s ease, transform .7s cubic-bezier(.2, .8, .2, 1);
}
.dnt-reveal__lines p + p { margin-top: .2em; }
.dnt-reveal__lines p.is-in { opacity: 1; transform: none; }
.dnt-reveal__lines p.is-good { color: var(--accent); font-size: clamp(3rem, 12vw, 11rem); }
.dnt-reveal__lines.is-out { opacity: 0; transform: scale(1.06); transition: opacity .5s ease, transform .6s ease; }

.dnt-reveal__brand,
.dnt-final { grid-area: 1 / 1; }
.dnt-reveal__brand {
	display: grid;
	justify-items: center;
	text-align: center;
	align-self: center;
	margin-top: -8vh;
}
.dnt-logo { display: flex; align-items: center; gap: clamp(12px, 2vw, 24px); }
.dnt-logo img { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .9s cubic-bezier(.2, .8, .2, 1); }
.dnt-logo__mark { width: clamp(64px, 9vw, 120px); height: auto; }
.dnt-logo__word { width: clamp(220px, 40vw, 560px); height: auto; transition-delay: .12s !important; }
.dnt-tag,
.dnt-story p,
.dnt-claim {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .7s ease, transform .8s cubic-bezier(.2, .8, .2, 1);
}
.dnt-tag {
	margin: 18px 0 0;
	font-size: clamp(.75rem, 1.1vw, .95rem);
	font-weight: 800;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--muted);
}
.dnt-story { margin-top: clamp(18px, 3vh, 30px); }
.dnt-story p {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: clamp(1rem, 1.8vw, 1.5rem);
	letter-spacing: -.02em;
	line-height: 1.35;
	color: var(--muted);
}
.dnt-story p.is-accent { color: var(--ink); }
.dnt-claim {
	margin: clamp(18px, 3vh, 28px) 0 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.8rem, 5vw, 4.6rem);
	line-height: .98;
	letter-spacing: -.055em;
	text-transform: uppercase;
}
.dnt-reveal__brand.is-in .dnt-logo img,
.dnt-reveal__brand.is-in .dnt-tag,
.dnt-reveal__brand.is-in .dnt-story p.is-in,
.dnt-reveal__brand.is-in .dnt-claim.is-in { opacity: 1; transform: none; }
.dnt-reveal__brand.is-in .dnt-tag { transition-delay: .35s; }
.dnt-reveal__brand.is-up { transform: translateY(-9vh) scale(.82); transition: transform .9s cubic-bezier(.2, .8, .2, 1); }

.dnt-final {
	align-self: end;
	display: grid;
	justify-items: center;
	gap: 14px;
	text-align: center;
	opacity: 0;
	transform: translateY(30px);
	transition: opacity .8s ease, transform .9s cubic-bezier(.2, .8, .2, 1);
}
.dnt[data-state="complete"] .dnt-final { opacity: 1; transform: none; }
.dnt-final__big {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1.3rem, 3vw, 2.4rem);
	letter-spacing: -.04em;
	text-transform: uppercase;
	color: var(--accent);
}
.dnt-final__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.dnt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 58px;
	padding: 0 30px;
	border-radius: 999px;
	font-weight: 800;
	font-size: 15px;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: none;
	transition: transform .25s cubic-bezier(.2, .8, .2, 1), background-color .25s, color .25s, border-color .25s;
}
.dnt-btn--primary { background: var(--accent); color: #0A0F0B; box-shadow: 0 16px 40px -14px rgba(124, 224, 42, .7); }
.dnt-btn--primary:hover { background: #8FEA45; }
.dnt-btn--ghost { border: 1px solid rgba(242, 246, 241, .25); color: var(--ink); background: rgba(10, 15, 11, .5); }
.dnt-btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.dnt-replay {
	margin-top: 4px;
	padding: 6px 4px;
	font-size: 13px;
	font-weight: 600;
	color: var(--muted);
	text-decoration: underline;
	text-underline-offset: 4px;
	cursor: none;
}
.dnt-replay:hover { color: var(--accent); }

/* Rakesh during reveal: steps aside */
.dnt[data-state="reveal"] .dnt-rk,
.dnt[data-state="complete"] .dnt-rk { transition: transform 1s cubic-bezier(.2, .8, .2, 1); }

/* Custom cursor */
.dnt-cursor { display: none; }
.dnt-has-cursor .dnt-cursor { display: block; }
.dnt-has-cursor .dnt,
.dnt-has-cursor .dnt a,
.dnt-has-cursor .dnt button { cursor: none; }
.dnt-cursor__dot,
.dnt-cursor__ring {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
	pointer-events: none;
	border-radius: 50%;
}
.dnt-cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--accent); }
.dnt-cursor__ring {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin: -17px 0 0 -17px;
	border: 1px solid rgba(242, 246, 241, .45);
	transition: width .3s cubic-bezier(.2, .8, .2, 1), height .3s cubic-bezier(.2, .8, .2, 1), margin .3s cubic-bezier(.2, .8, .2, 1), background-color .3s, border-color .3s;
}
.dnt-cursor__ring span {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	color: #0A0F0B;
	opacity: 0;
	transition: opacity .2s;
}
.dnt-cursor.has-label .dnt-cursor__ring { width: 78px; height: 78px; margin: -39px 0 0 -39px; background: var(--ink); border-color: var(--ink); }
.dnt-cursor.has-label .dnt-cursor__ring span { opacity: 1; }
.dnt-cursor.is-nope .dnt-cursor__ring { background: #FF5A5F; border-color: #FF5A5F; }
.dnt-cursor.is-ok .dnt-cursor__ring { background: var(--accent); border-color: var(--accent); }
.dnt-cursor.is-link .dnt-cursor__ring { width: 58px; height: 58px; margin: -29px 0 0 -29px; border-color: var(--accent); background: rgba(124, 224, 42, .1); }

.dnt-noscript { position: absolute; inset: 0; display: grid; place-content: center; gap: 16px; text-align: center; z-index: 50; background: #070A08; }
.dnt-noscript a { color: var(--accent); font-weight: 700; }

/* Mobile */
@media (max-width: 760px) {
	.dnt { --rk-h: min(46vh, 430px); }
	.dnt-title { top: 70px; }
	.dnt-twist { right: 50%; top: auto; bottom: 18vh; transform: translateX(50%); }
	.dnt-touch { height: 64px; padding: 0 28px; }
	.dnt-bubble { white-space: normal; width: max-content; max-width: 58vw; }
	.dnt-reveal { padding-top: 70px; }
	.dnt-reveal__brand { margin-top: -18vh; }
	.dnt-reveal__brand.is-up { transform: translateY(-12vh) scale(.9); }
	.dnt-final__cta { flex-direction: column; width: min(320px, 86vw); }
	.dnt-btn { width: 100%; height: 54px; }
}
@media (max-width: 782px) {
	.admin-bar .dnt { top: 46px; }
}

@media (prefers-reduced-motion: reduce) {
	.dnt-grain, .dnt-rk__body, .dnt-title__hint, .dnt-touch { animation: none !important; }
	.dnt-flash { display: none; }
}