/* ===========================================================
   cheskygo.com — design system  (v2: motion + polish)
   Edit THIS file to change the look. The pipeline never touches it.
   =========================================================== */

:root{
  --void:#0A0C0B;--ink:#ECF2EE;--dim:#62736B;--current:#1FD6A0;
  --green-deep:#0C3527;--green-mid:#1A6A4E;--hair:rgba(236,242,238,.10);
  --paper:#FFFFFF;--black:#0A0A0A;--paper-dim:#7C857F;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{min-height:100vh;overflow-x:hidden}
a{text-decoration:none;color:inherit}

/* ---------- motion primitives ---------- */
@keyframes riseIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes travel{0%{top:-2%;opacity:0}8%{opacity:1}72%{opacity:1}88%{opacity:0}100%{top:102%;opacity:0}}
@keyframes wireBreath{0%,100%{box-shadow:0 0 13px rgba(31,214,160,.30)}50%{box-shadow:0 0 24px rgba(31,214,160,.6)}}
@keyframes accentPulse{0%,100%{text-shadow:0 0 0 transparent}50%{text-shadow:0 0 20px rgba(31,214,160,.55)}}

/* =====================================================
   LANDING  (lights out)
   ===================================================== */
body.page-landing{
  background:var(--void);color:var(--ink);
  font-family:"Space Grotesk",system-ui,sans-serif;
  background-image:radial-gradient(120% 55% at 88% 0%, rgba(31,214,160,.07), transparent 60%);
}

.cursor-glow{position:fixed;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(260px circle at var(--mx,50%) var(--my,12%), rgba(31,214,160,.12), transparent 55%),
    radial-gradient(620px circle at var(--mx,50%) var(--my,12%), rgba(31,214,160,.05), transparent 60%)}

.wire{position:fixed;top:0;right:0;width:2px;height:100%;
  background:linear-gradient(to bottom,var(--current) 0%,var(--green-mid) 45%,#123 80%,#0b0d0c 100%);
  box-shadow:0 0 13px rgba(31,214,160,.30);z-index:5;animation:wireBreath 5s ease-in-out infinite}
.charge{position:fixed;top:0;right:-2px;width:6px;height:6px;border-radius:50%;
  background:var(--current);box-shadow:0 0 12px 3px rgba(31,214,160,.8);z-index:6;animation:travel 6.5s linear infinite}

.wrap{position:relative;z-index:2;max-width:1000px;margin-inline:auto;padding:0 28px}

.topnav{display:flex;align-items:center;justify-content:space-between;
  padding:22px 0;border-bottom:1px solid var(--hair);
  font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.04em}
.topnav .logo{color:var(--ink);font-weight:700}
.topnav .spark{color:var(--current);font-size:14px}

.hero{padding:84px 0 60px}
.hero .eyebrow,.hero h1,.hero p,.section-label,.card{opacity:0;animation:riseIn .75s cubic-bezier(.2,.7,.2,1) forwards}
.hero .eyebrow{font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--current);margin-bottom:22px;animation-delay:.05s}
.hero h1{font-weight:700;font-size:clamp(42px,9vw,86px);line-height:.98;letter-spacing:-.02em;max-width:13ch;animation-delay:.16s}
.hero h1 em{font-style:normal;color:var(--current);animation:accentPulse 4.5s ease-in-out infinite;animation-delay:1.4s}
.hero p{margin-top:24px;max-width:50ch;color:#B8C2BC;font-size:clamp(15px,2.4vw,18px);line-height:1.65;animation-delay:.30s}

.section-label{display:flex;align-items:baseline;gap:14px;margin:34px 0 22px;
  font-family:"Space Mono",monospace;font-size:13px;letter-spacing:.08em;color:var(--dim);animation-delay:.42s}
.section-label .z{color:var(--current)}
.section-label .rule{flex:1;height:1px;background:var(--hair)}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.card{border:1px solid var(--hair);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;
  background:#0b0e0d;transition:border-color .25s, transform .25s}
.card:nth-child(1){animation-delay:.52s}.card:nth-child(2){animation-delay:.60s}
.card:nth-child(3){animation-delay:.68s}.card:nth-child(4){animation-delay:.76s}
.card:nth-child(5){animation-delay:.84s}.card:nth-child(6){animation-delay:.92s}
.card:nth-child(7){animation-delay:1.0s}.card:nth-child(8){animation-delay:1.08s}
.card:hover{border-color:rgba(31,214,160,.5);transform:translateY(-3px)}
.card .thumb{aspect-ratio:16/10;position:relative;overflow:hidden;
  background:radial-gradient(80% 120% at 78% 18%, rgba(31,214,160,.34), transparent 60%),
    radial-gradient(90% 90% at 18% 96%, rgba(12,53,39,.95), transparent 70%),
    linear-gradient(135deg,#0c100e 0%, #103a2b 55%, #0a0d0c 100%)}
.card .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.card:hover .thumb img{transform:scale(1.05)}
.card .thumb::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}
.card .body{padding:20px 22px 24px}
.card .tag{font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--current);margin-bottom:12px}
.card .ptitle{font-family:"Arimo","Noto Sans Hebrew",sans-serif;direction:rtl;text-align:right;
  font-weight:700;font-size:clamp(28px,5vw,40px);line-height:1.05;color:var(--ink)}
.card .snip{font-family:"Arimo","Noto Sans Hebrew",sans-serif;direction:rtl;text-align:right;
  margin-top:12px;color:#9FB0A8;font-weight:400;font-size:16px;line-height:1.7}

.lfoot{margin-top:70px;padding:26px 0 70px;border-top:1px solid var(--hair);
  display:flex;justify-content:space-between;font-family:"Space Mono",monospace;font-size:12px;color:var(--dim)}
.lfoot .out{color:var(--ink)}

/* =====================================================
   POEM PAGE  (lights on)
   ===================================================== */
body.page-poem{background:var(--paper);color:var(--black);font-family:"Arimo","Noto Sans Hebrew",sans-serif}

.rwrap{max-width:680px;margin-inline:auto;padding:0 26px}
.rtop{display:flex;align-items:center;justify-content:space-between;padding:20px 0;border-bottom:1px solid #ECECEC;
  font-family:"Space Mono",monospace;font-size:12px;letter-spacing:.03em;color:var(--paper-dim)}
.back{display:flex;align-items:center;gap:8px;color:var(--black);
  font-family:"Space Mono",monospace;font-size:12px}
.back .ar{color:var(--green-mid)}
.rtop .bsd{font-family:"Arimo","Noto Sans Hebrew",sans-serif;opacity:.5;font-size:13px}

/* poem entrance plays on page load */
body.page-poem .rplate,body.page-poem .rkicker,body.page-poem .rtitle,
body.page-poem .rtitle-rule,body.page-poem .rstanza{opacity:0;animation:riseIn .7s cubic-bezier(.2,.7,.2,1) forwards}

.rplate{margin-top:28px;aspect-ratio:16/9;border-radius:2px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,#EFF3F1 0%, #E2EEE8 60%, #EFEFEC 100%);animation-delay:.05s}
.rplate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rplate::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.015) 0 1px,transparent 1px 3px)}
.rplate .cap{position:absolute;bottom:10px;left:12px;direction:ltr;
  font-family:"Space Mono",monospace;font-size:10.5px;letter-spacing:.05em;color:#9AA8A1}
.rplate .cap b{color:var(--green-mid);font-weight:400}

.rhead{padding-top:40px}
.rkicker{font-family:"Space Mono",monospace;direction:ltr;text-align:right;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--paper-dim);margin-bottom:14px;animation-delay:.14s}
.rtitle{direction:rtl;text-align:right;font-weight:700;font-size:clamp(40px,11vw,68px);line-height:1.02;color:var(--black);animation-delay:.20s}
.rtitle-rule{width:46px;height:2px;background:var(--green-mid);margin-top:18px;float:right;clear:both;animation-delay:.28s}

.rpoem{clear:both;direction:rtl;text-align:right;padding:44px 0 10px;font-weight:400;font-size:clamp(20px,5.2vw,24px);line-height:1.8;color:#171717}
.rstanza{margin-bottom:1.5em}
.rstanza:nth-child(1){animation-delay:.36s}.rstanza:nth-child(2){animation-delay:.44s}
.rstanza:nth-child(3){animation-delay:.52s}.rstanza:nth-child(4){animation-delay:.60s}
.rstanza:nth-child(5){animation-delay:.68s}.rstanza:nth-child(6){animation-delay:.76s}
.rstanza:nth-child(7){animation-delay:.84s}.rstanza:nth-child(8){animation-delay:.92s}
.rstanza:nth-child(9){animation-delay:1.0s}.rstanza:nth-child(10){animation-delay:1.08s}
.rline{display:block}
.rstanza.volta{color:#3A3A3A}

.rfoot{direction:ltr;margin-top:56px;padding:24px 0 70px;border-top:1px solid #ECECEC;
  display:flex;justify-content:space-between;font-family:"Space Mono",monospace;font-size:12px;color:var(--paper-dim)}

@media (max-width:760px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.wrap,.rwrap{padding-left:20px;padding-right:20px}.cards{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){
  .charge{display:none}
  .wire{animation:none}
  *{animation-duration:.001s!important;opacity:1!important}
}