/* PMG — Home page. Static styles stay inline in templates/home.php; this file holds hover states, width-dependent
   layout (replacing the design's width checks) and the states home.js toggles. */

@keyframes pmgHomeDraw { from { stroke-dashoffset: 4000; } to { stroke-dashoffset: 0; } }
@keyframes pmgToastFlat { 0%, 8% { opacity: 0; transform: translateY(10px); } 16%, 72% { opacity: 1; transform: none; } 84%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes pmgToast { 0%, 8% { opacity: 0; transform: translateZ(70px) translateY(10px); } 16%, 72% { opacity: 1; transform: translateZ(70px) translateY(0); } 84%, 100% { opacity: 0; transform: translateZ(70px) translateY(-8px); } }

/* ---------- Hero ---------- */
.pmg-home-draw { stroke-dashoffset: 4000; animation: pmgHomeDraw 2.2s .3s cubic-bezier(.33, 1, .68, 1) both; }

.pmg-home-hero-grid { grid-template-columns: minmax(0, 1fr); }
.pmg-home-h1 { font-size: clamp(56px, 12vw, 150px); }
.pmg-home-deck { transform: none; }
.pmg-home-toast { display: none; inset-inline-end: 14px; bottom: 14px; animation: pmgToastFlat 6s ease-in-out infinite; }
.pmg-home-dash-grid { grid-template-columns: minmax(0, 1fr); }
.pmg-home-rail { display: none; }

@media (min-width: 700px) {
	.pmg-home-dash-grid { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
	.pmg-home-rail { display: grid; }
}
@media (min-width: 720px) {
	.pmg-home-toast { display: block; }
}
@media (max-width: 959px) {
	.pmg-home-tab:nth-child(n + 3) { display: none; } /* phones and tablets: two tabs */
}
@media (min-width: 1080px) {
	.pmg-home-hero-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
	.pmg-home-h1 { font-size: clamp(54px, 6.4vw, 118px); }
	.pmg-home-deck { transform: rotateY(-11deg) rotateX(4deg) scale(1.01); }
	.pmg-home-toast { inset-inline-end: -4%; bottom: -7%; transform: translateZ(70px); animation-name: pmgToast; }
}

.pmg-home-btn { color: #000; box-shadow: 0 0 50px rgba(248, 57, 0, .35); }
.pmg-home-btn:hover, .pmg-home-btn:focus-visible { color: #000; transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 60px rgba(248, 57, 0, .5); }
.pmg-home-ghost { color: #fff; border: 1px solid rgba(255, 255, 255, .25); }
.pmg-home-ghost:hover, .pmg-home-ghost:focus-visible { color: #fff; border-color: #F83900; }
.pmg-home-deck-link, .pmg-home-deck-link:hover { color: #fff; }

/* ---------- Shared text link ---------- */
.pmg-home-link { color: #AEA7A6; transition: color .25s; }
.pmg-home-link:hover, .pmg-home-link:focus-visible { color: #F83900; }

/* ---------- 01 Problem: sticky headline and staggered fragments on desktop only ---------- */
.pmg-home-problem-head { position: static; }
@media (min-width: 960px) {
	.pmg-home-problem-head { position: sticky; }
	.pmg-home-frag { margin-left: var(--pmg-off, 0); }
}

/* ---------- 02 System (desktop) ---------- */
.pmg-home-panel { opacity: 0; visibility: hidden; transition: opacity .4s, visibility .4s; }
.pmg-home-panel.is-cur { opacity: 1; visibility: visible; }
.pmg-home-stage { transform: translateY(0); }
.pmg-home-stage.is-cur { transform: translateY(-10px); }
.pmg-home-stage-label { color: #AEA7A6; }
.pmg-home-stage.is-cur .pmg-home-stage-label { color: #fff; }
.pmg-home-stage-dot {
	width: 40px; height: 40px; background: #000; border: 1px solid rgba(255, 255, 255, .2); box-shadow: none; color: #AEA7A6;
	transition: color .5s cubic-bezier(.2, .7, .2, 1), background .5s cubic-bezier(.2, .7, .2, 1), border-color .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s cubic-bezier(.2, .7, .2, 1), width .5s cubic-bezier(.2, .7, .2, 1), height .5s cubic-bezier(.2, .7, .2, 1);
}
.pmg-home-stage.is-on .pmg-home-stage-dot { border-color: #F83900; box-shadow: 0 0 14px rgba(248, 57, 0, .5); color: #F83900; }
.pmg-home-stage.is-cur .pmg-home-stage-dot { width: 56px; height: 56px; background: #F83900; box-shadow: 0 0 40px rgba(248, 57, 0, .9); color: #000; }

/* ---------- 03 Performance: the stage word stacks above its bar on phones ---------- */
.pmg-home-flow { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) {
	.pmg-home-flow { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}

/* ---------- 04 Data ---------- */
.pmg-home-toggle {
	font: inherit; font-size: 13px; font-weight: 500; padding: 9px 18px; border-radius: 999px; border: 0; cursor: pointer;
	background: transparent; color: #AEA7A6; transition: color .3s, background .3s, box-shadow .3s, transform .3s, opacity .3s;
}
.pmg-home-toggle::before { inset: -8px 0; } /* keep the taller hit area without overlapping the neighbouring button */
.pmg-home-toggle:hover { color: #fff; }
.pmg-home-toggle[data-pmg-mode="after"][aria-pressed="true"] { background: #F83900; color: #000; }
.pmg-home-toggle[data-pmg-mode="before"][aria-pressed="true"] { background: #fff; color: #000; }
.pmg-home-before { opacity: .6; transition: opacity .6s; }
.pmg-home-with { opacity: 1; transition: opacity .6s; }
.pmg-home-with-fx { opacity: 1; transition: opacity .6s; }
path.pmg-home-with-draw.pmg-home-with-fx { opacity: .35; }
.pmg-home-data.is-before .pmg-home-before { opacity: 1; }
.pmg-home-data.is-before .pmg-home-with { opacity: .18; }
.pmg-home-data.is-before .pmg-home-with-fx { opacity: 0; }

/* ---------- 06 Proof ---------- */
.pmg-home-cases::-webkit-scrollbar { display: none; }
.pmg-home-case { color: #fff; border: 1px solid rgba(255, 255, 255, .1); }
.pmg-home-case:hover, .pmg-home-case:focus-visible { color: #fff; border-color: rgba(248, 57, 0, .7); transform: translateY(-6px); }
.pmg-home-all { color: #fff; border: 1px dashed rgba(255, 255, 255, .2); transition: border-color .3s; }
.pmg-home-all:hover, .pmg-home-all:focus-visible { color: #fff; border-color: #F83900; }
@media (max-width: 759px) {
	.pmg-home-case-note { display: none; } /* photo placeholder captions crowd small cards */
}

/* ---------- 07 Next move ---------- */
.pmg-home-magnet { color: #000; box-shadow: 0 0 60px rgba(248, 57, 0, .45); }
.pmg-home-magnet:hover, .pmg-home-magnet:focus-visible { color: #000; box-shadow: 0 20px 80px rgba(248, 57, 0, .6); }

@media (prefers-reduced-motion: reduce) {
	.pmg-home-draw { animation: none; stroke-dashoffset: 0; }
	.pmg-home-btn:hover, .pmg-home-btn:focus-visible, .pmg-home-case:hover, .pmg-home-case:focus-visible { transform: none; }
}