/* ===========================================================================
   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; }
}