/* Public landing page. Section layout is inline in templates/landing/home.php (ported 1:1 from the design);
   this file holds the shared states, animations and the client/staff access entry points. */

:root {
  --brand: #f7941d;
  --brand-2: #f26522;
  --brand-lift: #ffb457;
  --chevron: polygon(0 0, 52% 0, 100% 50%, 52% 100%, 0 100%, 48% 50%);
}

html { scroll-behavior: smooth; }
body.landing {
  margin: 0;
  text-wrap: pretty;
  background:
    radial-gradient(1200px 720px at 82% -160px, color-mix(in srgb, var(--color-accent-900) 75%, transparent), transparent 60%),
    radial-gradient(1100px 800px at -10% 100%, color-mix(in srgb, black 30%, transparent), transparent 55%),
    var(--color-bg);
}
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-lift); }

.btn-brand { border-color: var(--brand); color: var(--brand); }
.btn-brand:hover { border-color: var(--brand-lift); color: var(--brand-lift); background: color-mix(in srgb, var(--brand) 12%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 14%, transparent); }

.image-placeholder { display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: 16px; border: 1px dashed var(--color-neutral-700); border-radius: 8px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--color-neutral-500); }
.content-image { overflow: hidden; border-radius: 8px; }
.content-image img { display: block; width: 100%; height: 100%; }

@keyframes eaPulse { 0%, 100% { opacity: .35; transform: translateX(0); } 50% { opacity: 1; transform: translateX(3px); } }
@keyframes eaDrift { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-14px, 10px, 0); } }

/* Nav entry points */
.nav-staff { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); font-size: 18px; color: var(--color-neutral-200); background: color-mix(in srgb, var(--color-section) 55%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent-400) 45%, transparent); transition: box-shadow .2s, color .2s; }
.nav-staff:hover { color: var(--color-text); box-shadow: inset 0 0 0 1px var(--color-accent-300), 0 0 18px color-mix(in srgb, var(--color-accent) 45%, transparent); }
.nav-portal { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; box-sizing: border-box; padding: 0 16px 0 12px; border-radius: 999px; white-space: nowrap; font-size: 14px; font-weight: 600; color: var(--color-bg); background: linear-gradient(100deg, var(--brand-lift), var(--brand-2)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-lift) 60%, transparent), 0 6px 22px -6px var(--brand-2); transition: transform .2s, box-shadow .2s, filter .2s; }
.nav-portal i { font-size: 18px; }
.nav-portal:hover { color: var(--color-bg); transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 0 0 1px var(--brand-lift), 0 10px 30px -6px var(--brand-2), 0 0 24px color-mix(in srgb, var(--brand) 45%, transparent); }

/* Access cards under the hero */
.access-grid { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px) clamp(40px, 6vw, 72px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 16px; }
.access-card { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; gap: clamp(14px, 2vw, 20px); padding: clamp(18px, 2.4vw, 26px); border-radius: var(--radius-lg); color: var(--color-text); transition: transform .25s, box-shadow .25s; }
.access-card:hover { color: var(--color-text); transform: translateY(-3px); }
.access-card--client { background: radial-gradient(520px 260px at 0% 0%, color-mix(in srgb, var(--brand-2) 34%, transparent), transparent 70%), var(--color-surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 55%, transparent), 0 18px 48px -22px var(--brand-2); }
.access-card--client:hover { box-shadow: inset 0 0 0 1px var(--brand-lift), 0 24px 56px -18px var(--brand-2), 0 0 40px -8px color-mix(in srgb, var(--brand) 50%, transparent); }
.access-card--staff { background: radial-gradient(520px 260px at 100% 0%, color-mix(in srgb, var(--color-section-glow) 90%, transparent), transparent 70%), var(--color-section); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent-400) 45%, transparent), 0 18px 48px -22px var(--color-section); }
.access-card--staff::before { content: ""; position: absolute; top: 0; left: 0; width: 72px; height: 2px; background: linear-gradient(to right, var(--brand-2), var(--brand-lift)); }
.access-card--staff:hover { box-shadow: inset 0 0 0 1px var(--color-accent-300), 0 24px 56px -18px var(--color-section), 0 0 40px -8px color-mix(in srgb, var(--color-accent) 55%, transparent); }
.access-card__glyph { position: absolute; right: -6%; top: -30%; z-index: -1; width: 34%; aspect-ratio: 9 / 13; background: linear-gradient(150deg, var(--brand-lift), var(--brand-2)); clip-path: var(--chevron); opacity: .12; animation: eaDrift 9s ease-in-out infinite; }
.access-card__icon { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-md); font-size: 28px; }
.access-card--client .access-card__icon { color: var(--color-bg); background: linear-gradient(150deg, var(--brand-lift), var(--brand-2)); box-shadow: 0 8px 24px -8px var(--brand-2); }
.access-card--staff .access-card__icon { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 30%, transparent); }
.access-card__text { flex: 1; min-width: 0; display: grid; gap: 4px; }
.access-card__kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.access-card--client .access-card__kicker { color: var(--brand-lift); }
.access-card--staff .access-card__kicker { color: color-mix(in srgb, var(--color-text) 80%, transparent); }
.access-card__title { font-family: var(--font-heading); font-weight: 500; font-size: clamp(19px, 2vw, 23px); line-height: 1.2; }
.access-card__desc { font-size: 14px; line-height: 1.5; color: color-mix(in srgb, var(--color-text) 84%, transparent); }
.access-card__arrow { flex: none; font-size: 22px; }
.chevrons { flex: none; display: inline-flex; gap: 3px; }
.chevrons > span { display: block; width: 9px; height: 14px; background: linear-gradient(150deg, var(--brand-lift), var(--brand-2)); clip-path: var(--chevron); }
.chevrons--pulse > span { animation: eaPulse 1.6s ease-in-out infinite; }
.chevrons--pulse > span:nth-child(2) { animation-delay: .2s; }
.chevrons--pulse > span:nth-child(3) { animation-delay: .4s; }

/* Footer entry points */
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 12px; }
.footer-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px; }
.footer-pill--client { color: var(--brand-lift); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 50%, transparent); }
.footer-pill--client:hover { color: var(--color-bg); background: linear-gradient(100deg, var(--brand-lift), var(--brand-2)); }
.footer-pill--staff { color: var(--color-neutral-200); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent-400) 45%, transparent); }
.footer-pill--staff:hover { color: var(--color-text); background: var(--color-section); }

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