/* feedback.css
   Vanilla styles for Inspire Archive
   Scoped, responsive, and Bootstrap-friendly.
*/

/* theme vars */
:root{
  --pink: #ffc0cb;
  --pink-deep: #ff92b6;
  --muted-dark: rgba(0,0,0,0.45);
  --glass: rgba(255,255,255,0.02);
}

/* page text baseline (does not change layout) */
body {
      margin: 0;
      padding: 0;
      min-height: 100vh;
      font-family: 'VT323', monospace;

      /* Multiple layers: animated dark overlay, animated gradient, mountain image */
      background:
        linear-gradient(#0400ff28, #00000040), /* Dark overlay (top) */
        linear-gradient(-45deg, 
          #b2ff5a26, 
          #ffffff23, 
          #ff00dd1e, 
          #ffee0026
        ), /* moving gradient */
        url('images/feedbackBG.png'); /* base image layer */

      /* per-layer sizes/attachments/positions (same order as layers above) */
      background-size: cover, 400% 400%, cover; 
      background-attachment: fixed, fixed, fixed;
      background-position: center, 0% 25%, center;
      
      /* Two animations: gradient shift + breathing overlay */
      animation: gradientShift 10s ease infinite, breathingOverlay 10s ease-in-out infinite;
      color: #4eb157;
}
@keyframes gradientShift {
  0% {
    background-position: center, 0% 50%, center;
    filter: hue-rotate(0deg);
  }
  50% {
    background-position: center, 100% 50%, center;
    filter: hue-rotate(180deg);
  }
  100% {
    background-position: center, 0% 50%, center;
    filter: hue-rotate(360deg);
  }
}



/* brand gradient for navbar title (keeps bootstrap behavior) */
.gradient-text {
  background: linear-gradient(90deg, #ffd6e6, var(--pink-deep), #ffd6e6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: "Press Start 2P", monospace;
  letter-spacing: 0.02em;
}

/* gentle pink accent utility (scoped) */
.text-pink {
  color: var(--pink) !important;
}

/* small decorative bar used in hero */
.border-6.starting {
  height: 6px;
  background: linear-gradient(90deg, rgba(255,192,203,0.18), rgba(255,192,203,0.40));
  border-radius: 999px;
  width: min(540px, 85%);
  margin: 0 auto;
  box-shadow: 0 6px 18px rgba(255,192,203,0.03), inset 0 -1px rgba(255,255,255,0.02);
}

/* hero heading */
.reach-me {
  font-family: "Press Start 2P", monospace;
  letter-spacing: 0.04em;
  text-transform: none;
  line-height: 1.02;
  color: var(--pink);
  text-shadow:
    0 1px 0 rgba(0,0,0,0.35),
    0 6px 18px rgba(0,0,0,0.6);
  margin-bottom: 1rem;
  font-size: clamp(1.6rem, 4.8vw, 3.4rem); /* responsive but safe */
}

/* links with the custom pink (don't touch bootstrap link layout) */
a.text-pink {
  color: var(--pink);
  transition: color .15s ease, transform .12s ease;
  text-decoration: none;
}
a.text-pink:hover,
a.text-pink:focus {
  color: var(--pink-deep);
  text-decoration: underline;
  transform: translateY(-1px);
}

/* contact list cleaning */
ul.list-unstyled li { margin-bottom: .6rem; }
ul.list-unstyled i { vertical-align: middle; margin-right: .65rem; }

/* Clock — fully responsive and contained */
/* size uses clamp so it scales with viewport but won't break layout */
.clock-border{
  --size: clamp(150px, 50vmin, 150px); /* change this to alter overall clock size */
  width: var(--size);
  aspect-ratio: 1 / 1;
  margin: 2rem auto;
  position: relative;
  border-radius: 50%;
  background:
    radial-gradient(120% 80% at 50% 40%, rgba(255,192,203,0.02), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.45));
  border: 6px solid rgba(255,192,203,0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.6), inset 0 8px 18px rgba(255,192,203,0.01);
  overflow: visible; /* numerals may extend slightly */
  display: grid;
  place-items: center;
  float: right; /* aligns clock to the right side */
  right: 2%;
}

/* numerals (positioned absolutely around the center using a --i index) */
.roman {
  position: absolute;
  left: 40%;
  top: 40%;
  transform-origin: 50% 50%;
  font-family: "VT323", monospace;
  font-size: clamp(17px, 2vmin, 15px);
  color: var(--pink);
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  /* The magic: rotate out, push radially, then rotate back so text is upright */
  --angle: calc(var(--i, 0) * 30deg);
  transform: rotate(var(--angle))
             translateY(calc(var(--size) * -0.42))
             rotate(calc(var(--angle) * -1));
}

/* make main numerals slightly larger */
.roman.num12 { font-size: clamp(15px, 2vmin, 22px); font-weight: 600; }
.roman.num3, .roman.num6, .roman.num9 { font-size: clamp(11px, 1.8vmin, 20px); font-weight: 600; }

/* clock hands container keeps hands proportional */
.hands{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 72%;
  height: 72%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* common hand styles */
.hand{
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 50% 90%;
  transform: translate(-50%, -100%) rotate(0deg);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,192,203,1), rgba(255,120,160,0.85));
  box-shadow: 0 6px 14px rgba(0,0,0,0.5);
}

/* sizes: use the clock's size */
.hour-hand{
  width: clamp(4px, 0.9vmin, 8px);
  height: calc(var(--size) * 0.22);
  border-radius: 8px;
}
.min-hand{
  width: clamp(3px, 0.75vmin, 6px);
  height: calc(var(--size) * 0.32);
  border-radius: 6px;
}
.sec-hand{
  width: clamp(2px, 0.5vmin, 4px);
  height: calc(var(--size) * 0.42);
  border-radius: 4px;
  background: transparent;
  /* a thin glowing needle for the second hand */
  box-shadow:
    0 0 6px rgba(255,192,203,0.18),
    inset 0 -10px 20px rgba(255,120,160,0.08);
}
.sec-hand::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, var(--pink), var(--pink-deep));
  border-radius: 1px;
}

/* center dot */
.center-dot{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(10px, 1.2vmin, 16px);
  height: clamp(10px, 1.2vmin, 16px);
  background: radial-gradient(circle at 35% 35%, #fff, var(--pink-deep));
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(255,192,203,0.12), 0 0 18px rgba(255,192,203,0.03);
  z-index: 5;
}

/* small adjustments for small screens (does not override grid) */
@media (max-width: 420px){
  .reach-me { font-size: 1.4rem; padding: 0 0.6rem; }
  .clock-border { margin: 1.25rem auto; }
  .roman { font-size: clamp(9px, 1.2vmin, 14px); }
}

/* accessibility: focus visible for links/buttons */
a:focus, button:focus {
  outline: 3px solid rgba(255,192,203,0.12);
  outline-offset: 3px;
  border-radius: 6px;
}

/* keep footer or other page pieces readable */
p, li { line-height: 1.5; }

/* end of file */
