/* Giftable Crypto — Redeem Celebration Theme v3
   Filename: /styles/gc-theme-redeem-v3.css
   Updates:
   - Vibrant animated background (orange → gold → pink), low-CPU and mobile-safe
   - Keeps deep-navy panels, brighter labels, big BTC balance, warm buttons
   - Respects prefers-reduced-motion
*/

:root{
  --gc-orange: #ff7a1a;
  --gc-orange-2: #ff8f3a;
  --gc-gold:   #ffc46b;
  --gc-pink:   #ff8ab3;
  --gc-navy-1: #0d1929;
  --gc-navy-2: #09131f;
  --gc-text:   #102027;
  --gc-light:  #ffffff;
  --gc-muted:  #6e7b84;
  --gc-radius: 20px;
}

/* ===== Animated “sunrise” gradient background ===== */
body.gc{
  margin:0;
  color:var(--gc-text);
  font: 17px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial;

  /* Base color so it still looks good before paint */
  background-color:#fff3e9;

  /* Layered gradients for luminous depth; sized larger than viewport
     so we can gently pan the layers for a living, shifting feel.
  */
  background-image:
    radial-gradient(1200px 900px at 18% 110%,  rgba(255,122,26,.33), rgba(255,122,26,0) 62%),
    radial-gradient(1300px 1000px at 88% -10%, rgba(255,196,107,.42), rgba(255,196,107,0) 64%),
    radial-gradient(1400px 1100px at -10% -10%, rgba(255,138,179,.28), rgba(255,138,179,0) 62%),
    linear-gradient(135deg, #ffb27a 0%, #ffd28f 45%, #ff9fca 100%);
  background-repeat:no-repeat;
  background-attachment: fixed;
  background-size: 140% 135%, 140% 135%, 140% 135%, 140% 140%;
  background-position: 10% 110%, 90% -10%, -10% -10%, 50% 50%;

  /* Animation */
  animation: gcSunrise 28s ease-in-out infinite alternate;
}

/* Smooth, subtle motion by panning the background layers */
@keyframes gcSunrise{
  0%   { background-position: 10% 110%, 90% -10%, -10% -10%, 50% 50%; }
  50%  { background-position: 0% 100%, 80% -6%, -6% -6%, 52% 48%; }
  100% { background-position: 14% 120%, 92% -14%, -12% -8%, 48% 52%; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  body.gc{ animation: none; background-attachment: scroll; }
}

/* ===== Header ===== */
body.gc header{
  background: linear-gradient(180deg, var(--gc-navy-1), var(--gc-navy-2));
  color:var(--gc-light);
  border-radius: var(--gc-radius);
  padding:28px 22px 20px;
  text-align:center;
  position:relative;
  box-shadow: 0 22px 44px rgba(0,0,0,.30);
}
body.gc header::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:12px;
  background: linear-gradient(180deg, var(--gc-orange), var(--gc-gold), var(--gc-orange));
  border-top-left-radius: var(--gc-radius); border-bottom-left-radius: var(--gc-radius);
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 8px 0 24px rgba(255,122,26,.25);
}
body.gc header h1{ margin:0; font-weight:1000; font-size:30px; letter-spacing:.6px; color:#f7fbfa; }
body.gc header p{ margin:10px 0 0; color:rgba(255,255,255,.88); }


/* ===== Brand link (logo click) ===== */
body.gc .brand-link,
body.gc .brand-link:visited {
  color: inherit !important;
  text-decoration: none;
  display: inline-block;
}
body.gc .brand-link:hover {
  opacity: .95;
}
body.gc .brand-link:focus-visible {
  outline: 3px solid rgba(255,122,26,.5);
  outline-offset: 3px;
  border-radius: 6px;
}


/* ===== Card + ribbon ===== */
body.gc .card{
  background:#fff; border-radius: var(--gc-radius);
  margin-top:24px; position:relative; overflow:hidden;
  box-shadow: 0 18px 36px rgba(0,0,0,.10);
}
body.gc .card::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:12px;
  background: linear-gradient(180deg, var(--gc-orange), var(--gc-orange-2), var(--gc-gold), var(--gc-orange));
  border-top-left-radius: var(--gc-radius); border-bottom-left-radius: var(--gc-radius);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}

/* ===== Labels & values ===== */
body.gc .label{
  text-align:center; font-weight:1000; letter-spacing:.3px;
  background: linear-gradient(180deg,#ffffff,#fff0df);
  padding:18px;
  border-bottom:1px solid rgba(0,0,0,.08);
  font-size:19px; color:#183038;
}
body.gc .value{
  padding:22px 18px;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  border-bottom:1px solid rgba(0,0,0,.06);
  background: linear-gradient(180deg,#ffffff,#fff9f2);
}
body.gc .value:last-of-type{ border-bottom:none; }

/* ===== Address pill ===== */
body.gc .address-box{
  background:#fff; color:#0f1720;
  border:3px solid rgba(255,122,26,.50);
  border-radius:16px;
  padding:14px 16px;
  font: 900 16px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  box-shadow: 0 6px 16px rgba(255,122,26,.16);
  word-break: break-all;
}

/* ===== Balance & private key (deep navy) ===== */
body.gc .value.balance{ 
  background: linear-gradient(180deg, var(--gc-navy-1), var(--gc-navy-2));
  color:#fff;
}
body.gc #balance{
  font: 1000 26px/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing:.6px;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
@media (min-width: 540px){ body.gc #balance{ font-size:30px; } }


/* Balance amount — slightly reduced for visual balance */
body.gc .value.balance {
  text-align: center;
}

body.gc .value.balance code#balance{
  display: block;
  font-size: 26px;          /* smaller on mobile */
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--gc-light);
  text-shadow: 0 1px 0 rgba(0,0,0,.55);
  font-variant-numeric: tabular-nums;
  font-family: inherit;
}

@media (min-width: 420px){
  body.gc .value.balance code#balance{ font-size: 38px; }
}

body.gc .pw{
  background: linear-gradient(180deg, var(--gc-navy-1), var(--gc-navy-2));
  color:#fff;
}
body.gc #priv{
  display:inline-block; max-width:100%;
  padding:10px 14px; border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.12);
  font: 800 16px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ===== Destination input ===== */
body.gc input[type="text"]#dest{
  width:100%; height:58px;
  border-radius:16px; border:2px solid rgba(255,122,26,.45);
  padding:12px 16px; font-size:17px; font-weight:800; color:#0f1720;
  background:#fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 6px 14px rgba(255,122,26,.10);
}
body.gc input#dest::placeholder{ color:#9fb0b7; font-weight:700; }
body.gc input#dest:focus{ outline:none; border-color:var(--gc-orange); box-shadow:0 0 0 4px rgba(255,138,52,.18); }

/* ===== Buttons ===== */
body.gc .controls{ display:flex; gap:12px; padding:16px; background: linear-gradient(180deg,#fff0df,#ffffff); }
body.gc .btn{
  flex:1; border:0; border-radius:16px; padding:13px 0; cursor:pointer;
  background: linear-gradient(180deg,#ff9447,#ff6d06);
  color:#1b1006; font-weight:1000; text-shadow:0 1px 0 rgba(255,255,255,.5);
  box-shadow: 0 8px 22px rgba(255,122,26,.34), inset 0 1px 0 rgba(255,255,255,.78);
  transition: transform .06s ease, filter .15s ease, box-shadow .15s ease;
}
body.gc .btn:hover{ filter:brightness(1.06); }
body.gc .btn:active{ transform:translateY(1px); box-shadow: 0 6px 16px rgba(255,122,26,.36), inset 0 1px 0 rgba(255,255,255,.66); }

/* ===== Directions block ===== */
body.gc .directions{
  background: linear-gradient(180deg, var(--gc-navy-1), var(--gc-navy-2));
  color: rgba(255,255,255,.92);
  border-radius:16px; padding:18px; margin-top:20px;
  box-shadow: 0 12px 28px rgba(0,0,0,.25); position:relative;
}
body.gc .directions::before{
  content:""; position:absolute; left:12px; top:12px; bottom:12px; width:4px;
  background: linear-gradient(180deg, var(--gc-gold), var(--gc-orange));
  border-radius:4px;
}
body.gc .directions strong{ color: var(--gc-gold); }


body.gc .note {
  margin-top: 20px;
  background: #ffffff;
  border: var(--gc-border);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 8px 24px rgba(22,20,15,.10);
  color: #222;
}

body.gc .note strong {
  color: #e46c1a; /* subtle warm orange to match theme */
}


/* ===== Footer ===== */
body.gc .footer{ text-align:center; margin:26px 0 10px; }
body.gc .footer a{ color: var(--gc-orange); font-weight:700; text-decoration:none; }




body.gc .footer a:hover{ text-decoration:underline; }