/* style.css - updated: shard size & position tuned per request
   (Everything else preserved: splash glow, rain, hover, animations.) */

/* reset */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%;overflow:hidden;font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial}

/* background for index page */
body.index-bg{
  background-image: url('../images/home-background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color:#03030a;
  color:#fff;
}

/* subtle overlay but low so splash halo is visible */
body.index-bg::before{
  content:"";position:fixed;top:0;left:0;right:0;bottom:0;background: rgba(6,8,18,0.22);pointer-events:none;z-index:2;
}

/* app container */
#app{position:relative;width:100%;height:100%;display:flex;align-items:flex-start;justify-content:center;}

/* Splash wrapper - halo + glow pulse (no movement) */
.splash-wrap{position:relative;z-index:10;margin-top:4vh;display:flex;align-items:center;justify-content:center;pointer-events:auto}

/* halo behind splash (bright warm) */
.splash-wrap::before{
  content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-40%);
  width:calc(min(720px,60vw) + 140px);
  height:calc(min(720px,60vw) + 140px);
  border-radius:50%;
  background: radial-gradient(ellipse at center, rgba(255,235,180,0.16) 0%, rgba(138,78,255,0.04) 35%, rgba(0,0,0,0) 60%);
  filter: blur(18px);
  z-index:9;
  pointer-events:none;
}

/* splash image - purely glow-pulse (no translate/scale movement) */
.splash-wrap img{
  display:block;
  width:min(720px,60vw);
  height:auto;
  border-radius:8px;
  box-shadow: 0 0 40px rgba(255,220,120,0.14), 0 0 80px rgba(138,78,255,0.04);
  transition: box-shadow .4s ease, filter .4s ease;
  animation: pulseGlowOnly 4.8s ease-in-out infinite;
  z-index:10;
}

/* pulse glow - NO movement */
@keyframes pulseGlowOnly {
  0% { box-shadow: 0 0 36px rgba(255,220,120,0.10), 0 0 72px rgba(138,78,255,0.03); filter:brightness(1); }
  50% { box-shadow: 0 0 64px rgba(255,220,120,0.20), 0 0 120px rgba(138,78,255,0.06); filter:brightness(1.02); }
  100%{ box-shadow: 0 0 36px rgba(255,220,120,0.10), 0 0 72px rgba(138,78,255,0.03); filter:brightness(1); }
}

/* ----------------------------
   SHARDS (UPDATED: LOCATION & SIZE)
   - moved lower on screen
   - images enlarged
   - per-button vertical offsets:
       nth-child(1): left, a bit higher
       nth-child(2): center, lowest
       nth-child(3): right, a bit higher
   ---------------------------- */

/* container moved down and centered horizontally */
.shards{
  position: absolute;
  left: 50%;
  bottom: 9vh;                 /* near bottom as requested */
  transform: translateX(-50%); /* horizontally centered only */
  display: flex;
  gap: 40px;                   /* space between shards */
  z-index: 12;
  pointer-events: auto;
}

/* shard button base (unchanged behaviours) */
.shard-btn{
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: transform .28s ease, opacity .18s ease;
  opacity: 0.60;               /* default reduced opacity */
  -webkit-tap-highlight-color: transparent;
  /* use margin-top to offset vertical placement per-child */
  margin-top: 0;
}

/* larger shard images */
.shard-btn img{
  width: 200px;                /* increased size for desktop */
  height: 200px;
  object-fit: contain;
  border-radius: 8px;
  transition: filter .22s ease, transform .22s ease, opacity .18s ease;
  transform-origin: center;
  filter: drop-shadow(0 12px 26px rgba(0,0,0,0.24));
}

/* float animation applied to the image itself to preserve hover transform stability */
@keyframes floaty {
  0%{ transform: translateY(0) rotate(-1deg); }
  50%{ transform: translateY(-8px) rotate(1deg); }
  100%{ transform: translateY(0) rotate(-1deg); }
}
.shard-btn img {
  animation: floaty 4.8s ease-in-out infinite;
}

/* per-button vertical offsets (left higher, middle lowest, right higher) */
.shard-btn:nth-child(1) { margin-top: -56px; } /* left shard — higher */
.shard-btn:nth-child(2) { margin-top: 30px; }  /* middle shard — lowest  */
.shard-btn:nth-child(3) { margin-top: -44px; } /* right shard — higher */

/* label font (keeps consistent) */
.shard-label{font-family:"Inter",sans-serif;font-weight:600;font-size:13px;color:rgba(255,255,255,0.96);letter-spacing:0.2px}

/* hover / focus: full opacity, tight rounded glow, slight lift */
.shard-btn:hover, .shard-btn:focus {
  opacity: 1;
  transform: translateY(-4px) scale(1.03);
}
.shard-btn:hover img, .shard-btn:focus img {
  filter: drop-shadow(0 0 22px rgba(255,220,120,0.28)) drop-shadow(0 14px 28px rgba(138,78,255,0.08));
  transform: scale(1.07);
  opacity: 1;
}

/* small tap feedback */
.shard-btn:active img { transform: scale(0.985); }

/* ----------------------------
   end shards update
   ---------------------------- */

/* bottom-right update log */
.bottom-controls{position:fixed;right:18px;bottom:16px;z-index:20;display:flex;align-items:center;gap:12px}
.update-log{background:rgba(0,0,0,0.42);color:rgba(255,255,255,0.94);padding:8px 10px;border-radius:8px;font-size:13px;min-width:140px;text-align:right}

/* rain layer */
#rainLayer{position:fixed;top:0;left:0;right:0;bottom:0;pointer-events:none;z-index:6;overflow:hidden}

/* heavier visible drops */
.rain-drop{
  position:absolute;
  width:3px;
  border-radius:2px;
  background:linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.5) 60%, rgba(255,255,255,0.06) 100%);
  opacity:0.12;
  transform: translateY(-130vh);
  will-change:transform,opacity;
}

/* fall keyframe used by JS */
@keyframes fall {
  0%{transform: translateY(-130vh)}
  100%{transform: translateY(140vh)}
}

/* responsive adjustments */
@media (max-width:820px){
  .shard-btn img{width:140px;height:140px} /* mobile size */
  .shard-label{font-size:12px}
  .splash-wrap img{width:86vw}
  .update-log{min-width:120px;font-size:12px}
  .shards{gap:18px;bottom:7vh}
  .shard-btn:nth-child(1) { margin-top: -36px; }
  .shard-btn:nth-child(2) { margin-top: 18px;  }
  .shard-btn:nth-child(3) { margin-top: -28px; }
}