/* ============================================================
   AsMediaHub — IPTV Service Cards
   File: assets/css/iptv-cards.css
   Theme color set on the #portfolio section via CSS variables:
     --amh-primary        (main purple)
     --amh-primary-dark   (darker purple)
   Pure CSS — no JS required. Glow border uses @property + conic-gradient.
   ============================================================ */

/* Animated angle for the rotating glow (Chrome/Edge/Safari 16.4+/Firefox latest) */
@property --amh-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* ---- Glow wrapper (draws the moving outline around all 4 sides) ---- */
#portfolio .amh-glow{
  position: relative;
  height: 100%;
  padding: 2px;                     /* border thickness */
  border-radius: 16px;
  overflow: hidden;
  background: #e7e7ee;              /* static base border colour (the "track") */
  transition: transform .35s ease, box-shadow .35s ease;
}

#portfolio .amh-glow::before{
  content: "";
  position: absolute;
  inset: -40%;                      /* big enough so rotation always covers edges */
  background: conic-gradient(
    from var(--amh-angle),
    rgba(123, 63, 228, 0)   0deg,
    rgba(123, 63, 228, 0)   250deg,
    #b388ff                 300deg,
    var(--amh-primary)      330deg,
    rgba(123, 63, 228, 0)   360deg
  );
  animation: amh-spin 4s linear infinite;
  z-index: 0;
}

@keyframes amh-spin{
  to { --amh-angle: 360deg; }
}

/* lift + glow shadow on hover, and speed up the moving light */
#portfolio .amh-glow:hover{
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(123, 63, 228, .20);
}
#portfolio .amh-glow:hover::before{
  animation-duration: 2s;
}

/* ---- Inner card ---- */
#portfolio .amh-card{
  position: relative;
  z-index: 1;                       /* sits above the rotating gradient */
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 14px;
  padding: 24px 20px 22px;
}

/* gradient icon badge */
#portfolio .amh-icon{
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 24px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--amh-primary), var(--amh-primary-dark));
  box-shadow: 0 8px 16px rgba(123, 63, 228, .28);
  margin-bottom: 16px;
  transition: transform .4s ease;
}
#portfolio .amh-glow:hover .amh-icon{
  transform: translateY(-2px) rotate(-6deg) scale(1.05);
}

#portfolio .amh-card h4{
  margin: 0 0 8px;
  font-size: 1.12rem;
  font-weight: 700;
}
#portfolio .amh-card h4 a{
  color: #1a1a2e;
  text-decoration: none;
  transition: color .3s ease;
}
#portfolio .amh-glow:hover .amh-card h4 a{
  color: var(--amh-primary);
}

#portfolio .amh-card p{
  color: #6c6c80;
  font-size: .9rem;
  line-height: 1.6;
  margin: 0 0 18px;
  flex: 1 1 auto;                   /* pushes the button to the bottom */
}

/* Order Now button */
#portfolio .amh-order-btn{
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  border-radius: 50px;
  font-size: .85rem;
  font-weight: 600;
  color: #ffffff !important;
  text-decoration: none;
  background: linear-gradient(135deg, var(--amh-primary), var(--amh-primary-dark));
  box-shadow: 0 6px 14px rgba(123, 63, 228, .25);
  transition: transform .3s ease, box-shadow .3s ease;
}
#portfolio .amh-order-btn i{ transition: transform .3s ease; }
#portfolio .amh-order-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(123, 63, 228, .38);
}
#portfolio .amh-order-btn:hover i{ transform: translateX(4px); }

/* ---- Responsive ---- */
@media (max-width: 575px){
  #portfolio .amh-card{ padding: 22px 18px 20px; }
  #portfolio .amh-card h4{ font-size: 1.08rem; }
  #portfolio .amh-order-btn{ width: 100%; justify-content: center; }
}

/* Respect reduced-motion users: stop the spinning glow */
@media (prefers-reduced-motion: reduce){
  #portfolio .amh-glow::before{ animation: none; }
}