/* HOMER Landing — plain CSS. Keyframes verbatim from the .dc prototype;
   hover/focus/state rules replace the DC runtime's style-hover / sc-if. */

html, body { margin: 0; padding: 0; background: #FFF6E9; }
html { scroll-behavior: smooth; }
* { -webkit-tap-highlight-color: transparent; }
a { color: #0E6B6B; }
a:hover { color: #C74400; }

:focus-visible { outline: 2px solid #0E6B6B; outline-offset: 2px; }

/* hidden attribute must beat inline display on the modal + its states */
[hidden] { display: none !important; }

/* ---- keyframes (verbatim) ---- */
@keyframes homer-carry-a {
  0%   { opacity: 0; transform: translate(0.35em, 0.55em) rotate(5deg); }
  62%  { opacity: 1; transform: translate(-0.03em, -0.05em) rotate(-1.2deg); }
  82%  { transform: translate(0.015em, 0.02em) rotate(0.4deg); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
}
@keyframes homer-carry-b {
  0%   { opacity: 0; transform: translate(-0.3em, 0.6em) rotate(-4deg); }
  62%  { opacity: 1; transform: translate(0.03em, -0.04em) rotate(1deg); }
  82%  { transform: translate(-0.015em, 0.02em) rotate(-0.3deg); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0deg); }
}
@keyframes homer-stamp {
  0%   { opacity: 0; transform: scale(1.9); }
  70%  { opacity: 1; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes homer-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes homer-shine {
  from { transform: translateX(-130%) skewX(-12deg); }
  to   { transform: translateX(130%) skewX(-12deg); }
}
@keyframes homer-draw {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}
@keyframes homer-vanish {
  0%   { opacity: 1; transform: scale(1); }
  70%  { opacity: 1; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(0); }
}
@keyframes homer-fold {
  0%   { opacity: 0; transform: translateX(64px) rotate(2.2deg); }
  70%  { opacity: 1; transform: translateX(-5px) rotate(-0.6deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes homer-press {
  from { transform: translateY(-140%); }
  to   { transform: translateY(140%); }
}
@keyframes homer-wipe {
  from { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(0 0 0 100%); }
}
@keyframes homer-drip {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes homer-twinkle {
  0%   { opacity: 0.15; transform: scale(0.5) rotate(-20deg); }
  55%  { opacity: 1; transform: scale(1.2) rotate(8deg); }
  100% { opacity: 0.75; transform: scale(1) rotate(0deg); }
}
@keyframes homer-spill {
  from { opacity: 0; transform: scale(0.55); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes homer-roll {
  from { opacity: 0; transform: translateY(0.55em); }
  to   { opacity: 1; transform: none; }
}
@keyframes homer-postcard {
  from { opacity: 0; transform: translate(42px, 20px) rotate(1.8deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes homer-orbit-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes homer-twinkle-loop {
  0%   { opacity: 0.15; transform: scale(0.6); }
  50%  { opacity: 0.95; transform: scale(1.1); }
  100% { opacity: 0.15; transform: scale(0.6); }
}
@keyframes homer-steam {
  0%   { opacity: 0; transform: translateY(14px) scale(0.9); }
  35%  { opacity: 0.55; }
  100% { opacity: 0; transform: translateY(-30px) scale(1.18); }
}

/* ---- hover / focus (replaces DC style-hover / style-focus) ---- */
.nav-link { transition: background 0.2s ease, color 0.2s ease; }
.nav-link:hover:not(.active) { background: rgba(14,107,107,0.14); color: #0E6B6B; }
.nav-link.active { background: #0E6B6B; color: #FFF6E9 !important; } /* !important beats inline color on .nav-link */

/* nav: inline row on desktop; hamburger dropdown on phones */
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-burger { display: none; }
@media (max-width: 700px) {
  nav[aria-label="Page sections"] { gap: 2px; }
  .nav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: none; background: transparent;
    color: #0E6B6B; font-size: 18px; line-height: 1; cursor: pointer; border-radius: 999px;
  }
  .nav-burger:hover { background: rgba(14,107,107,0.14); }
  .nav-links {
    display: none; position: absolute; top: calc(100% + 8px); right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    min-width: 210px; background: #FFF6E9; border: 2px solid #0E6B6B;
    border-radius: 22px; padding: 8px; box-shadow: 0 12px 30px rgba(43,35,32,0.2);
  }
  nav.open .nav-links { display: flex; }
  .nav-links .nav-link { text-align: left; padding: 12px 16px; }
}

.cta-orange { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.cta-orange:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(230,81,0,0.35); color: #2B2320; }

.field-input:focus { box-shadow: 0 0 0 3px rgba(14,107,107,0.35); }
.modal-close:hover { background: rgba(14,107,107,0.14); }
.btn-done:hover { transform: translateY(-2px); }

/* ---- pricing billing state (replaces DC inline knob/label/card styles) ---- */
#billing-toggle .knob {
  position: absolute; top: 4px; bottom: 4px; width: calc(50% - 6px);
  left: 4px; border-radius: 999px; background: #0E6B6B;
  transform: translateX(0); transition: transform 0.45s cubic-bezier(.34,1.6,.5,1);
}
#billing-toggle .lbl { position: relative; z-index: 1; flex: 1; text-align: center; transition: color 0.3s ease; }
#billing-toggle .lbl-m { color: #FFF6E9; }
#billing-toggle .lbl-y { color: #0E6B6B; }
.plan-wrap { transition: opacity 0.35s ease, transform 0.35s ease; }
.plan-wrap--monthly { opacity: 1; transform: scale(1.02); }
.plan-wrap--yearly  { opacity: 0.55; transform: scale(0.99); }

.billing-yearly #billing-toggle .knob { transform: translateX(calc(100% + 4px)); }
.billing-yearly #billing-toggle .lbl-m { color: #0E6B6B; }
.billing-yearly #billing-toggle .lbl-y { color: #FFF6E9; }
.billing-yearly .plan-wrap--monthly { opacity: 0.55; transform: scale(0.99); }
.billing-yearly .plan-wrap--yearly  { opacity: 1; transform: scale(1.02); }

/* ---- sticky mobile CTA: native media query instead of JS isMobile ---- */
.sticky-cta { display: none; }
@media (max-width: 719px) { .sticky-cta { display: block; } }

/* ---- no-JS graceful degradation: reveal everything statically ---- */
.no-js [data-fx],
.no-js [data-homer-anim],
.no-js #modal-form, .no-js #modal-processing, .no-js #modal-done {
  opacity: 1 !important; animation: none !important; clip-path: none !important; transform: none !important;
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-homer-anim] { animation: none !important; }
  #billing-toggle .knob, .plan-wrap { transition: none !important; }
}