/* ===========================================================================
   css/grid/cyber.css  -  styles for earthgrid.com/cyber, the Cyber Week offer
   (Viktor, 2026-11-05). grid.php links this file automatically for /cyber.
   Prefix: cy-. Colors from STYLE-GUIDE.md: green #5cb85c, orange #f0932b,
   blue #4a90d9. Same bones as gift.css. Every animation stops when the
   visitor asks for reduced motion.
   =========================================================================== */

/* ---- the band: where we are in time, or a reservation ---- */
.cy-band { max-width:46em; margin:6px auto 14px; padding:12px 16px; border-radius:12px; text-align:center;
           background:rgba(74,144,217,.16); border:1px solid rgba(74,144,217,.5); color:#e7edf4; line-height:1.45; }
.cy-band a { color:#cfe3fb; }
.cy-band-live { background:rgba(92,184,92,.16); border-color:rgba(92,184,92,.6); }
.cy-band-ok   { background:rgba(92,184,92,.22); border-color:#5cb85c; animation:cy-pop .6s ease-out 1; }
.cy-band-off  { background:rgba(255,138,122,.12); border-color:rgba(255,138,122,.5); }
@keyframes cy-pop { 0%{transform:scale(.96);opacity:0} 100%{transform:none;opacity:1} }

/* ---- the two cards ---- */
.cy-cards { display:grid; grid-template-columns:1fr 1fr; gap:16px; max-width:46em; margin:12px auto; }
.cy-card { position:relative; border-radius:16px; padding:20px 20px 18px; text-align:left;
           background:rgba(8,14,26,.6); border:1px solid rgba(255,255,255,.16); }
.cy-card-pro { border-color:#f0932b; box-shadow:0 0 0 1px rgba(240,147,43,.35), 0 0 28px rgba(240,147,43,.18); }
.cy-flag { position:absolute; top:-12px; right:16px; background:#f0932b; color:#111; font-weight:700; font-size:.78em;
           letter-spacing:.08em; text-transform:uppercase; padding:4px 10px; border-radius:999px; }
.cy-card h3 { margin:0 0 4px; font-size:1.3em; color:#fff; }
.cy-list  { margin:0; font-size:.88em; color:#9fb0c4; }
.cy-list s { text-decoration-color:#ff8a7a; }
.cy-price { margin:8px 0 0; font-size:1.05em; color:#e7edf4; }
.cy-price b { font-size:2.6em; line-height:1; color:#7fd17f; font-weight:900; letter-spacing:-.02em; }
.cy-or    { margin:6px 0 10px; color:#e7edf4; }
.cy-or b  { color:#fff; font-size:1.25em; }
.cy-bonus { list-style:none; margin:10px 0; padding:0; }
.cy-bonus li { position:relative; padding-left:70px; margin:6px 0; line-height:1.4; color:#e7edf4; }
.cy-bonus span { position:absolute; left:0; top:.15em; background:#5cb85c; color:#111; font-size:.72em; font-weight:700;
                 letter-spacing:.08em; text-transform:uppercase; padding:2px 8px; border-radius:999px; }
.cy-bonus em { color:#9fb0c4; font-style:normal; white-space:nowrap; }
.cy-fine { margin:6px 0 12px; font-size:.82em; color:#9fb0c4; line-height:1.4; }
.cy-btns { display:flex; flex-direction:column; gap:8px; }
.cy-btn { display:block; text-align:center; padding:12px 14px; border-radius:10px; text-decoration:none; font-weight:700;
          background:rgba(255,255,255,.08); color:#fff; border:1px solid rgba(255,255,255,.22); }
.cy-btn:hover { background:rgba(255,255,255,.14); }
.cy-btn-strong { background:#f0932b; color:#111; border-color:#f0932b; }
.cy-btn-strong:hover { background:#ffa94d; }
.cy-btn-off { opacity:.5; cursor:default; }

/* ---- the price lock figure ---- */
.cy-stage { max-width:34em; margin:14px auto 6px; padding:14px 12px 10px; border-radius:16px;
            background:rgba(8,14,26,.55); border:1px solid rgba(255,255,255,.14); }
.cy-stage svg { display:block; width:100%; height:auto; overflow:visible; }
.cy-stage figcaption { margin-top:8px; text-align:center; font-size:.9em; color:#c9d4e0; }
.cy-ts  { font:500 12px/1.2 -apple-system,Segoe UI,Roboto,sans-serif; fill:#9fb0c4; letter-spacing:.06em; }
.cy-big { font:900 30px/1 -apple-system,Segoe UI,Roboto,sans-serif; }
.cy-strike { stroke-dasharray:100; stroke-dashoffset:100; animation:cy-strike 8s ease-out infinite; }
@keyframes cy-strike { 0%,15%{stroke-dashoffset:100} 30%,90%{stroke-dashoffset:0} 100%{stroke-dashoffset:100} }
.cy-tag-old { animation:cy-dim 8s ease-in-out infinite; }
@keyframes cy-dim { 0%,30%{opacity:1} 45%,90%{opacity:.45} 100%{opacity:1} }
.cy-arrow { opacity:0; animation:cy-show 8s ease-in-out infinite; }
@keyframes cy-show { 0%,30%{opacity:0} 40%,90%{opacity:1} 100%{opacity:0} }
.cy-tag-new { transform-box:fill-box; transform-origin:50% 50%; opacity:0; animation:cy-rise 8s cubic-bezier(.2,.9,.3,1) infinite; }
@keyframes cy-rise { 0%,36%{opacity:0;transform:translateY(24px)} 50%,90%{opacity:1;transform:none} 100%{opacity:0;transform:translateY(24px)} }
.cy-lock { opacity:0; animation:cy-show 8s ease-in-out infinite; animation-delay:1.2s; }
.cy-shackle { transform-box:fill-box; transform-origin:0 100%; animation:cy-shackle 8s ease-out infinite; }
@keyframes cy-shackle { 0%,60%{transform:translateY(-6px)} 70%,100%{transform:none} }

/* ---- the bonuses ---- */
.cy-bonuses { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; max-width:46em; margin:12px auto; text-align:left; }
.cy-b { border-radius:14px; padding:14px 16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); }
.cy-b h4 { margin:0 0 4px; font-size:1.05em; color:#fff; }
.cy-val { margin:0 0 8px; font-size:.85em; color:#7fd17f; font-weight:700; }
.cy-b p { margin:0; line-height:1.45; color:#e7edf4; font-size:.95em; }
.cy-b a { color:#cfe3fb; }

/* ---- three steps ---- */
.cy-steps { max-width:40em; margin:12px auto; padding:0 0 0 1.4em; text-align:left; color:#e7edf4; line-height:1.5; }
.cy-steps li { margin:8px 0; }
.cy-steps b { color:#fff; }

.cy-src { max-width:46em; margin:8px auto 0; padding:0 0 0 18px; font-size:.85em; color:#aab8c8; line-height:1.45; text-align:left; }
.cy-src li { margin:4px 0; } .cy-src a { color:#cfe3fb; }

@media (max-width:700px) { .cy-cards, .cy-bonuses { grid-template-columns:1fr; } .cy-flag { top:-10px; } }
@media (prefers-reduced-motion: reduce) {
  .cy-stage *, .cy-band-ok { animation:none !important; }
  .cy-strike { stroke-dashoffset:0 !important; }
  .cy-tag-old { opacity:.45 !important; }
  .cy-arrow, .cy-tag-new, .cy-lock { opacity:1 !important; transform:none !important; }
  .cy-shackle { transform:none !important; }
}

/* ===========================================================================
   2026-11-13: the book's art (from aiassemblylanguage.com, in /images/aial/)
   and the green rule: GREEN means you can buy something there.
   =========================================================================== */

/* Hero: the cover scene. Sky and stones as backgrounds, the sphere breathes. */
.egl-hero { min-height: 460px; padding: 50px 18px 120px; border-radius: 14px; margin-top: 8px;
  background: url('/images/aial/sky.svg') 50% 50% / cover no-repeat, #070d1a;
  box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.egl-hero .egl-tri-field { display: none; }
.egl-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('/images/aial/sphere.svg') 50% 50% / cover no-repeat;
  transform: translateY(22%) scale(.85); opacity: .8; animation: cy-breathe 9s ease-in-out infinite; }
.egl-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url('/images/aial/stones.svg') 50% 100% / cover no-repeat; transform: translateY(15%); }
.egl-hero > *:not(svg) { z-index: 2; }
.egl-hero h1, .egl-hero p, .egl-hero .egl-sig, .egl-hero .egl-kicker { text-shadow: 0 2px 14px rgba(0,0,0,.9); }
@keyframes cy-breathe {
  0%, 100% { transform: translateY(22%) scale(.85); opacity: .75; }
  50%      { transform: translateY(21%) scale(.88); opacity: .95; }
}

/* The assembly-code ribbon above the band */
.cy-band-art { overflow: hidden; max-width: 46em; margin: 0 auto 10px; opacity: .85;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.cy-band-run { display: flex; width: max-content; animation: cy-run 60s linear infinite; }
.cy-band-run img { height: 30px; width: auto; display: block; }
@keyframes cy-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Green = buy. The Reserve buttons are offers, so they are green. */
.cy-btn-strong, .cy-btn-buy, .egl-wrap a.cy-btn-strong, .egl-wrap a.cy-btn-buy { background: #5cb85c; color: #fff !important; border-color: #5cb85c;
  box-shadow: 0 0 0 2px rgba(92,184,92,.3); }
.cy-btn-strong:hover, .cy-btn-buy:hover { background: #4a9d4a; }
.cy-card-pro { border-color: #5cb85c; box-shadow: 0 0 0 1px rgba(92,184,92,.35), 0 0 28px rgba(92,184,92,.18); }
.cy-flag { background: #f0932b; color: #fff; }

/* Neon icons on the bonus cards */
.cy-b { text-align: center; }
.cy-b-ico { width: 78px; height: 78px; display: block; margin: 2px auto 10px; transition: transform .2s ease; }
.cy-b:hover .cy-b-ico { transform: scale(1.08) rotate(-3deg); }
.cy-b p { text-align: left; }

/* The fallback: the book keeps both offers open */
.cy-book { display: flex; align-items: center; gap: 28px; max-width: 46em; margin: 22px auto 8px; padding: 22px 24px;
  border-radius: 16px; text-align: left;
  background: linear-gradient(135deg, rgba(39,112,227,.20), rgba(7,13,26,.65) 55%, rgba(247,121,10,.14));
  border: 1px solid rgba(76,198,247,.35); }
.cy-book-cover { flex: 0 0 150px; perspective: 800px; display: block; }
.cy-book-cover img { width: 150px; height: auto; display: block; border-radius: 3px 6px 6px 3px;
  box-shadow: -8px 12px 26px rgba(0,0,0,.6), 0 0 24px rgba(76,198,247,.25);
  transform: rotateY(-14deg); transition: transform .35s ease; }
.cy-book-cover:hover img { transform: rotateY(0) translateY(-3px); }
.cy-book-eye { display: block; font-size: .78em; letter-spacing: .18em; text-transform: uppercase; color: #ffb35c; font-weight: 700; }
.cy-book h3 { margin: 4px 0 8px; color: #fff; font-size: 1.45em; }
.cy-book p { margin: 0 0 8px; color: #e7edf4; line-height: 1.5; }
.cy-book .cy-book-sub { font-size: .9em; color: #b9c7d6; }
.cy-book .cy-btn { display: inline-block; padding: 12px 22px; margin-top: 4px; }

@media (max-width: 700px) {
  .egl-hero { min-height: 430px; padding-bottom: 110px; }
  .egl-hero::before { background-size: 160% auto; background-position: 50% 100%; transform: none; animation: none; }
  .egl-hero::after { background-size: 210% auto; }
  .cy-book { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .egl-hero::before, .cy-band-run { animation: none; }
}

/* The book as the next step: copies list, and the band after a reservation */
.cy-copies { list-style: none; margin: 8px 0 6px; padding: 0; }
.cy-copies li { margin: 6px 0; padding-left: 96px; position: relative; color: #e7edf4; line-height: 1.4; }
.cy-copies b { position: absolute; left: 0; top: 0; color: #7fd17f; white-space: nowrap; }
.cy-next { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(92,184,92,.4); }
.cy-next .cy-btn { display: inline-block; margin: 8px 0 4px; padding: 10px 20px; }
.cy-next small { display: block; color: #c9d4e0; }
.cy-next small a { color: #cfe3fb; }
@media (max-width: 700px) { .cy-copies li { padding-left: 0; } .cy-copies b { position: static; display: block; } }
.cy-copies-big li { font-size: 1.12em; margin: 10px 0; padding-left: 110px; color: #fff; }
.cy-copies-big b { font-size: .9em; top: .1em; }