/* Styles only the marketing site loads (Layouts::Marketing). */

/* Use the same layers as in application.css */
@layer theme, base, components, utilities;

/* The new marketing site at /splash (Marketing::Prototype, dev mode only): pure-CSS animations for the lifecycle loop
   and the help lanes. */
@layer components {
  /* Lifecycle loop (homepage and job pages): LifecycleLoop in app/views/components/marketing/prototype/lifecycle_loop.rb */
  .pl-loop{display:grid;grid-template-columns:minmax(0,1fr) 6rem minmax(0,1fr);grid-template-rows:auto 5.5rem auto;grid-template-areas:"a b c" "d . f" "g h i"}
  .pl-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,16rem);gap:1.25rem;align-items:center;padding:1.25rem 1.375rem;background:var(--color-white);border:1px solid var(--color-stone-300);animation:pl-card 14s infinite}
  .pl-bar{position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:var(--color-primary);transform-origin:left;animation:pl-bar 14s infinite}
  .pl-text{display:flex;flex-direction:column;gap:.5rem}
  .pl-name{font-size:1.375rem;line-height:1.1;font-weight:600;text-transform:uppercase;animation:pl-name 14s infinite}
  .pl-blurb{font-size:.95rem;line-height:1.45;color:#44403C}
  .pl-prev{height:8.25rem;padding:.75rem;display:flex;flex-direction:column;gap:.5rem;overflow:hidden;background:var(--color-stone-100);animation:pl-prev 14s infinite;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
  .pl-q{font-size:.8rem;line-height:1.3;font-weight:600;color:#0F172A;position:relative}
  .pl-chips{display:flex;gap:.375rem}
  .pl-chip{font-size:.66rem;border:1px solid #CBD5E1;padding:.125rem .375rem;color:#334155;white-space:nowrap;background:var(--color-white)}
  .pl-line{display:block;height:6px;border-radius:3px;background:var(--color-stone-300)}
  .pl-engs{display:flex;gap:.625rem}
  .pl-engs img{width:20px;height:20px}
  .pl-count{height:1.1em}
  .pl-count span{position:absolute;left:0;top:0;white-space:nowrap}
  .pl-paper{position:relative;flex:1;background:var(--color-white);border:1px solid #E7E5E4;padding:.625rem .75rem;display:flex;flex-direction:column;gap:.375rem}
  .pl-grade{position:absolute;right:.5rem;top:.5rem;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:var(--color-white)}
  .pl-gc{background:#F59E0B;animation:pl-gc 14s infinite}
  .pl-ga{background:#22C55E;opacity:0;animation:pl-ga 14s infinite}
  .pl-grow{background:#93B4EC;transform-origin:left;animation:pl-grow 14s infinite}
  .pl-mon{position:relative;flex:1}
  .pl-spark{display:block;width:100%;height:100%}
  .pl-draw{stroke:var(--color-primary);animation:pl-draw 14s infinite}
  .pl-mark{animation:pl-mark 14s infinite}
  .pl-upd{position:absolute;left:52%;top:0}
  .pl-pop1{animation:pl-pop1 14s infinite}.pl-pop2{animation:pl-pop2 14s infinite}
  .pl-e1{animation:pl-e1 14s infinite}.pl-e2{animation:pl-e2 14s infinite}.pl-e3{animation:pl-e3 14s infinite}
  .pl-n1{animation:pl-n1 14s infinite}.pl-n2{opacity:0;animation:pl-n2 14s infinite}.pl-n3{opacity:0;animation:pl-n3 14s infinite}.pl-n4{opacity:0;animation:pl-n4 14s infinite}
  .pl-arrow{position:relative;display:flex;align-items:center;justify-content:center}
  .pl-arrow::before{content:"";position:absolute;background:var(--color-stone-300);animation:pl-line 14s infinite}
  .pl-h::before{left:.75rem;right:.75rem;top:50%;height:2px}
  .pl-v::before{top:.75rem;bottom:.75rem;left:50%;width:2px}
  .pl-arrow span{position:absolute;white-space:nowrap;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;animation:pl-ink 14s infinite}
  .pl-h span{bottom:calc(50% + .5rem)}
  .pl-v span{left:calc(50% + .75rem);top:50%;transform:translateY(-50%)}
  .pl-k0,.pl-k0 .pl-anim,.pl-k0::before,.pl-k0 span{animation-delay:0s}
  .pl-k1,.pl-k1 .pl-anim,.pl-k1::before,.pl-k1 span{animation-delay:-10.5s}
  .pl-k2,.pl-k2 .pl-anim,.pl-k2::before,.pl-k2 span{animation-delay:-7s}
  .pl-k3,.pl-k3 .pl-anim,.pl-k3::before,.pl-k3 span{animation-delay:-3.5s}
  @keyframes pl-card{0%,23%{opacity:1;filter:none;transform:translateY(-6px);box-shadow:0 18px 36px rgba(12,10,9,.12);border-color:var(--color-stone-950)}26%,97%{opacity:.5;filter:grayscale(1);transform:none;box-shadow:0 0 0 rgba(12,10,9,0);border-color:var(--color-stone-300)}100%{opacity:1;filter:none;transform:translateY(-6px);box-shadow:0 18px 36px rgba(12,10,9,.12);border-color:var(--color-stone-950)}}
  @keyframes pl-bar{0%,23%{transform:scaleX(1)}26%,97%{transform:scaleX(0)}100%{transform:scaleX(1)}}
  @keyframes pl-name{0%,23%{color:var(--color-primary)}26%,97%{color:var(--color-stone-500)}100%{color:var(--color-primary)}}
  @keyframes pl-prev{0%,23%{background:#EEF2F7}26%,97%{background:var(--color-stone-100)}100%{background:#EEF2F7}}
  @keyframes pl-line{0%,23%{background:var(--color-primary)}26%,97%{background:var(--color-stone-300)}100%{background:var(--color-primary)}}
  @keyframes pl-ink{0%,23%{color:var(--color-primary)}26%,97%{color:var(--color-stone-400)}100%{color:var(--color-primary)}}
  @keyframes pl-pop1{0%,3.6%{opacity:.35}5.5%,23%{opacity:1}26%,100%{opacity:.35}}
  @keyframes pl-pop2{0%,5.4%{opacity:.35}7.3%,23%{opacity:1}26%,100%{opacity:.35}}
  @keyframes pl-e1{0%,5.4%{opacity:.25}7%,23%{opacity:1}26%,100%{opacity:.25}}
  @keyframes pl-e2{0%,7.9%{opacity:.25}9.5%,23%{opacity:1}26%,100%{opacity:.25}}
  @keyframes pl-e3{0%,10.4%{opacity:.25}12%,23%{opacity:1}26%,100%{opacity:.25}}
  @keyframes pl-n1{0%,5.3%{opacity:1}5.5%,25.9%{opacity:0}26%,100%{opacity:1}}
  @keyframes pl-n2{0%,5.3%{opacity:0}5.5%,7.8%{opacity:1}8%,100%{opacity:0}}
  @keyframes pl-n3{0%,7.8%{opacity:0}8%,10.3%{opacity:1}10.5%,100%{opacity:0}}
  @keyframes pl-n4{0%,10.3%{opacity:0}10.5%,25.9%{opacity:1}26%,100%{opacity:0}}
  @keyframes pl-gc{0%,9.2%{opacity:1}9.4%,25.9%{opacity:0}26%,100%{opacity:1}}
  @keyframes pl-ga{0%,9.2%{opacity:0;transform:scale(.6)}11%,25.9%{opacity:1;transform:none}26%,100%{opacity:0}}
  @keyframes pl-grow{0%,2.1%{transform:scaleX(.15)}8.6%,23%{transform:scaleX(1)}26%,100%{transform:scaleX(.15)}}
  @keyframes pl-draw{0%,1.4%{stroke-dashoffset:300}12.9%,100%{stroke-dashoffset:0}}
  @keyframes pl-mark{0%,5%{opacity:.3}7.1%,23%{opacity:1}26%,100%{opacity:.3}}
  .pl-static .pl-card,.pl-static .pl-anim,.pl-static .pl-arrow::before,.pl-static .pl-arrow span{animation:none!important}
  .pl-static .pl-card{opacity:.5;filter:grayscale(1)}
  .pl-static .pl-bar{transform:scaleX(0)}
  .pl-static .pl-name{color:var(--color-stone-500)}
  .pl-static .pl-prev{background:var(--color-stone-100)}
  .pl-static .pl-arrow::before{background:var(--color-stone-300)}
  .pl-static .pl-arrow span{color:var(--color-stone-400)}
  .pl-static .pl-pop1,.pl-static .pl-pop2,.pl-static .pl-e1,.pl-static .pl-e2,.pl-static .pl-e3,.pl-static .pl-mark,.pl-static .pl-n4,.pl-static .pl-ga{opacity:1}
  .pl-static .pl-n1,.pl-static .pl-n2,.pl-static .pl-n3,.pl-static .pl-gc{opacity:0}
  .pl-static .pl-grow{transform:none}
  .pl-static .pl-draw{stroke-dashoffset:0}
  .pl-static .pl-card.pl-on{opacity:1;filter:none;transform:translateY(-6px);box-shadow:0 18px 36px rgba(12,10,9,.12);border-color:var(--color-stone-950)}
  .pl-static .pl-on .pl-bar{transform:scaleX(1)}
  .pl-static .pl-on .pl-name{color:var(--color-primary)}
  .pl-static .pl-on .pl-prev{background:#EEF2F7}
  .pl-static .pl-arrow.pl-on::before{background:var(--color-primary)}
  .pl-static .pl-arrow.pl-on span{color:var(--color-primary)}
  @media (max-width:1199px){.pl-card{grid-template-columns:1fr}}
  @media (max-width:899px){.pl-loop{grid-template-columns:1fr;grid-template-rows:none;grid-template-areas:"a" "c" "i" "g";gap:1.5rem}.pl-arrow{display:none}}
  @media (prefers-reduced-motion:reduce){.pl-loop *,.pl-loop *::before,.pl-card{animation:none!important}.pl-name{color:var(--color-primary)}}

  /* Help lanes (A content strategist, not a ticket queue): HelpLanes in app/views/components/marketing/prototype/help_lanes.rb */
  .ph-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto 2rem auto;margin:0 -1rem}
  .ph-col{position:relative;display:grid;grid-row:1 / 4;grid-template-rows:subgrid;padding:1rem;animation:ph-col 14s infinite}
  .ph-card{background:var(--color-white);border:1px solid var(--color-stone-300);padding:.875rem;opacity:.6;animation:ph-card 14s infinite}
  .ph-us{animation-name:ph-us}
  .ph-step{font-size:1.1rem;font-weight:600;text-transform:uppercase;animation:ph-name 14s infinite}
  .ph-text{font-size:.9rem;line-height:1.4;color:#44403C;margin-top:.375rem}
  .ph-link{justify-self:center;width:0;border-left:2px dashed var(--color-primary);transform-origin:top;animation:ph-link 14s infinite}
  .ph-who{display:flex;align-items:center;gap:.625rem}
  .ph-who img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none}
  .ph-help{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.2}
  .ph-name{display:block;font-size:.8rem;color:#57534E;letter-spacing:0;text-transform:none;margin-top:2px}
  .ph-k0,.ph-k0 .ph-anim{animation-delay:0s}
  .ph-k1,.ph-k1 .ph-anim{animation-delay:-10.5s}
  .ph-k2,.ph-k2 .ph-anim{animation-delay:-7s}
  .ph-k3,.ph-k3 .ph-anim{animation-delay:-3.5s}
  @keyframes ph-col{0%,23%{background:#EEF3FC}26%,97%{background:rgba(238,243,252,0)}100%{background:#EEF3FC}}
  @keyframes ph-card{0%,23%{opacity:1;border-color:var(--color-stone-950)}26%,97%{opacity:.6;border-color:var(--color-stone-300)}100%{opacity:1;border-color:var(--color-stone-950)}}
  @keyframes ph-us{0%,23%{opacity:1;border-color:var(--color-primary)}26%,97%{opacity:.6;border-color:var(--color-stone-300)}100%{opacity:1;border-color:var(--color-primary)}}
  @keyframes ph-name{0%,23%{color:var(--color-primary)}26%,97%{color:var(--color-stone-500)}100%{color:var(--color-primary)}}
  @keyframes ph-link{0%,23%{opacity:1;transform:scaleY(1)}26%,97%{opacity:0;transform:scaleY(0)}100%{opacity:1;transform:scaleY(1)}}
  @media (max-width:899px){.ph-grid{grid-template-columns:1fr;grid-template-rows:none}.ph-col{grid-row:auto!important;grid-column:auto!important;grid-template-rows:auto 2rem auto}}
  @media (prefers-reduced-motion:reduce){.ph-grid *,.ph-col{animation:none!important}.ph-card{opacity:1}.ph-link{opacity:0}}
}