/*
 * The Shift pages (page-the-shift.php = the Message, page-the-shift-letter.php
 * = the Letter). Converted from design-source/Marketing Mockups/The Shift
 * (Message).dc.html and (Letter).dc.html — shared, since both pages use the
 * same dark design language and the same responsive vocabulary.
 *
 * Both designs ship their own responsive layer (`.rsp-*` + @media), kept
 * verbatim. Shared machinery is global and reused, not duplicated: shell
 * (`.atarim-page` min-width), nav hamburger, footer recolumn, scroll-reveal
 * (`[data-rev]`/`.hp-on`), grain, dark scrollbar — all in tokens.css/site.css.
 * The dc's `.rsp-page{min-width:0}` is dropped (the global `.atarim-page` rule
 * covers it). No mockups on these pages, so no mockup-fit.
 */

/* Typing-dot loop in the reactive-agency bridge. */
@keyframes shiftDot { 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-3px); opacity: 1; } }

/* Buttons converted from style-hover (mint uses the global .btn-mint). */
.sh-ghost-dark { color: #fff; border: 1px solid rgba(255, 255, 255, 0.22); transition: border-color .16s ease, color .16s ease; }
.sh-ghost-dark:hover { border-color: #9385FF; color: #9385FF; }
.sh-outline-violet { color: #16042E; border: 1.5px solid #6D5DF3; transition: background .16s ease, color .16s ease; }
.sh-outline-violet:hover { background: #6D5DF3; color: #fff; }

/* ===== RESPONSIVE OVERRIDE LAYER · desktop (>=1280px) is the inline spec, untouched ===== */
@media (max-width: 1279px) {
	.rsp-hero { padding-left: 32px !important; padding-right: 32px !important; }
	.rsp-sec { padding-left: 32px !important; padding-right: 32px !important; }
}
@media (max-width: 1023px) {
	.rsp-hero { padding-left: 24px !important; padding-right: 24px !important; padding-top: 150px !important; }
	.rsp-sec { padding-left: 24px !important; padding-right: 24px !important; }
	.rsp-2col { grid-template-columns: 1fr !important; gap: 16px !important; }
}
@media (max-width: 767px) {
	.rsp-hero { padding-left: 16px !important; padding-right: 16px !important; padding-top: 120px !important; padding-bottom: 56px !important; }
	.rsp-sec { padding-left: 16px !important; padding-right: 16px !important; padding-top: 56px !important; padding-bottom: 56px !important; }
	.rsp-bridge { grid-template-columns: 1fr !important; }
	.rsp-bridge > .rsp-arrow { transform: rotate(90deg); justify-self: center; margin: 8px 0; }
	.rsp-barrier { grid-template-columns: 1fr !important; }
	.rsp-barrier > .rsp-arrow { transform: rotate(90deg); justify-self: center; margin: 8px 0; }
}