/* The home page, variant E's: a dealer's account summary beside the speed entry pad (the pad's own rules are the cart's),
   a visitor's hero, then the categories and the brands. Never restyles a shell class. */

@property --a { syntax: '<angle>'; inherits: true; initial-value: 0deg; }

@layer site {
  /* a dealer: the pad (left) beside the account summary */
  .home-top { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; margin-bottom: 24px; }
  .acct { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
  .acct__nums { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--dove); }
  .acct__nums div { padding: 10px 14px; display: grid; }
  .acct__nums div + div { border-left: 1px solid var(--dove); }
  .acct__nums small { font-size: 12px; color: var(--steel); }
  .acct__nums b { font: 700 18px/24px var(--mono); letter-spacing: -.02em; }
  .acct__nums span { font-size: 12px; color: var(--fog); }
  .acct__empty { padding: 12px 14px; font-size: 13px; color: var(--steel); }

  /* a visitor: the hero, edge to edge, the ringed planet cropped to a band with the heading over its dark left half, in the page's column */
  .hero { position: relative; display: grid; align-items: center; min-height: 570px; margin-bottom: 28px; overflow: hidden; background: #000; color: var(--white); isolation: isolate; }
  .hero__pic { position: absolute; inset: 0; z-index: -1; }
  .hero > .wrap { width: 100%; }
  /* the band is wider than the photo, so the photo is laid larger than the band and pushed right: the planet sits at about 70% across, the left stays black for the words */
  .hero__pic img { position: absolute; top: -20%; left: 25%; width: 85%; height: 140%; object-fit: cover; object-position: 50% 46%; display: block; }
  .hero__pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, 0) 68%); }
  .hero__text { display: grid; gap: 12px; justify-items: start; padding: 36px 0; max-width: 560px; }
  .hero h1 { font-size: 34px; line-height: 40px; font-weight: 500; letter-spacing: -.025em; color: var(--white); }
  .hero p { font-size: 15px; line-height: 22px; color: rgba(255, 255, 255, .78); }
  .hero__cta { display: inline-block; margin-top: 40px; padding: 14px 26px; border-radius: var(--r); background: var(--accent); color: var(--on-accent); font-weight: 600; font-size: 16px; line-height: 20px; text-decoration: none; }
  .hero__cta:hover { background: var(--accent-hover); }
  /* the orbit: a tilted ellipse laps the button clockwise like the planet's rings, a faint track with a bright orange comet on it;
     the back half (::before) paints behind the button, the front half (::after) over it, each the same ellipse clipped to its half before the tilt */
  .hero__cta { position: relative; --orbit: #ec6c00; --a: 0deg; animation: hero-orbit 3.6s linear infinite; }
  .hero__cta::before, .hero__cta::after { content: ""; position: absolute; inset: -14px -40px; border-radius: 50%; padding: 2px; pointer-events: none; transform: rotate(12deg);
    background: conic-gradient(from var(--a), transparent 0 250deg, rgba(236, 108, 0, 0) 250deg, var(--orbit) 360deg), conic-gradient(rgba(236, 108, 0, .28) 0 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
  .hero__cta::before { z-index: -1; clip-path: inset(0 0 50% 0); }
  .hero__cta::after { z-index: 1; clip-path: inset(50% 0 0 0); }
  @keyframes hero-orbit { to { --a: 360deg; } }
  @media (prefers-reduced-motion: reduce) {
    .hero__cta { animation: none; }
    .hero__cta::before, .hero__cta::after { background: conic-gradient(rgba(236, 108, 0, .45) 0 360deg); }
  }

  /* everyone: the categories as a dense list, the brands as a grid of logos */
  .cats { columns: 4 200px; column-gap: 24px; border-top: 1px solid var(--dove); }
  .cats li { break-inside: avoid; border-bottom: 1px solid var(--dove); }
  .cats a { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 8px 2px; text-decoration: none; font-weight: 500; }
  .cats a:hover { background: var(--cream); }
  .cats small { font: 400 12px var(--mono); color: var(--fog); }
  .brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); border-top: 1px solid var(--dove); border-left: 1px solid var(--dove); }
  .brands a { display: grid; place-items: center; height: 64px; padding: 10px 14px; border-right: 1px solid var(--dove); border-bottom: 1px solid var(--dove); text-decoration: none; font-weight: 600; font-size: 13px; text-align: center; }
  .brands a:hover { background: var(--cream); }
  .brands img { max-height: 34px; max-width: 100%; object-fit: contain; filter: grayscale(1); opacity: .8; }
  .brands a:hover img { filter: none; opacity: 1; }
  /* in the dark a brand's cell stays a white plate with its words in ink, since the logos are drawn for white */
  :root[data-parts-theme="dark"] .brands a { --ink: #1a1613; --cream: #f9f8f6; --white: #fff; color: var(--ink); }
  :root[data-parts-theme="dark"] .brands a:not(:hover, :focus-visible) { background: var(--plate); }

  @media (max-width: 1024px) {
    .home-top { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 720px) {
    /* a phone stacks it: the planet as a band on top, the words on the black below */
    .hero { min-height: 0; align-items: stretch; }
    .hero__pic { position: relative; z-index: 0; height: 300px; }
    .hero__pic img { top: 0; left: 0; width: 100%; height: 100%; object-position: 52% 46%; }
    .hero__pic::after { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 60%, #000 100%); }
    .hero__text { padding: 8px 0 28px; max-width: none; }
    .hero h1 { font-size: 26px; line-height: 32px; }
  }
  @media (max-width: 480px) {
    .acct__nums b { font-size: 16px; }
  }
}