/* ---------- tier colors (change these to match each corner image) ---------- */
.sp-premier {
  --shine: rgba(122, 46, 62, .30);   /* shine stripe, burgundy */
  --c1: #5c2a36;                     /* dark burgundy (stripe body) */
  --c2: #9a5563;                     /* lighter burgundy (stripe highlight) */
  --corner: url("https://ciet-turkmenistan.com/storage/app/media/events/ciet2026/sponsors/premier_design.png");
}
.sp-platinum {--shine: rgba(63,106,158,.35); --c1:#3f6a9e36; --c2:#9fc0e636; --corner:url("https://ciet-turkmenistan.com/storage/app/media/events/ciet2026/sponsors/platinum_design.png"); }
.sp-silver   {--shine: rgba(110,125,140,.35); --c1:#bec7d142; --c2:#bec7d142; --corner:url("https://ciet-turkmenistan.com/themes/demo/assets/ciet2026/silver.png"); }

/* ---------- layout ---------- */
.sponsor-sec { padding: 40px 20px; }
.sp-group    { margin-bottom: 50px; }

.sp-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* works for 1 card or many */
  gap: 60px;
}

/* ---------- header with tier gradient ---------- */
.sp-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
}
.sp-title::before,
.sp-title::after {
  content: "";
  flex: 1;
  max-width: 100px;
  height: 3px;
  border-radius: 3px;
}
.sp-title::before { background: linear-gradient(90deg, transparent, #dddddd, #cecece); }
.sp-title::after  { background: linear-gradient(90deg, #cecece, #dddddd, transparent); }

.sp-title h3 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  white-space: nowrap;
  background: linear-gradient(90deg, #6b737e, #a0a0a0);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.sp-premier h3 {
  background: linear-gradient(90deg, #5c2a36, #9a5563);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.sp-platinum h3{
  background: linear-gradient(90deg, #547286, #5d8daa);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- card ---------- */
.sp-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 210px;
  padding: 0 40px;
  box-sizing: border-box;
  background: #849eaf1c;
  border: 1px solid #e3e3e3;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  overflow: hidden;
  text-decoration: none;
  transition: transform .18s, box-shadow .3s;
}

.sp-logo {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* two corners: top-left + bottom-right */
.sp-card::before,
.sp-card::after {
  content: "";
  position: absolute;
  width: 159px;
  height: 100px;
  background: var(--corner) no-repeat center / contain;
  pointer-events: none;
}
.sp-card::before { top: -5px;    left: -5px; transform: rotate(180deg); }
.sp-card::after  { bottom: -5px; right: -5px;  }
.sp-premier .sp-title::before { background: linear-gradient(90deg, transparent, #9a5563, #5c2a36); }
.sp-premier .sp-title::after  { background: linear-gradient(90deg, #5c2a36, #9a5563, transparent); }
/* ---------- loading stick animation ---------- */
/* ---------- slow, continuous shine ---------- */
.sp-shine {
  position: absolute;
  top: -300px;
  left: -300px;
  width: calc(100% + 300px);
  height: calc(100% + 300px);
  z-index: 2;
  pointer-events: none;
  will-change: transform;

  /* one stripe every 424px; left side long and soft, right side short */
  background: repeating-linear-gradient(135deg,
      transparent 0px,
      color-mix(in srgb, var(--shine) 8%, transparent) 40px,
      color-mix(in srgb, var(--shine) 22%, transparent) 100px,
      color-mix(in srgb, var(--shine) 45%, transparent) 160px,
      color-mix(in srgb, var(--shine) 70%, transparent) 208px,
      color-mix(in srgb, var(--shine) 8%, transparent) 224px,
      transparent 240px,
      transparent 424px);

  /* a new stripe arrives every 3s; negative delay keeps cards out of sync */
  animation: sp-flow var(--flow, 4s) linear calc(var(--delay, 0s) * -1) infinite;
}
@keyframes sp-flow {
  from { transform: translate(0, 0); }
  to   { transform: translate(300px, 300px); }
}
@keyframes sp-sheen {
  0%   { transform: translate(-120%, -120%); }
  40%  { transform: translate(120%, 120%); } 
  100% { transform: translate(120%, 120%); }  
}

@keyframes sp-sweep {
  0%   { left: -40px;  opacity: 0;   }
  15%  { opacity: .35; }
  70%  { opacity: .35; }
  100% { left: 110%;   opacity: 0;   }
}

@media (max-width: 700px) {
  .sp-list  { gap: 30px; }
  .sp-title h3 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .sp-shine { animation: none; }
}
/* ================= CIET 2026 HOME ANIMATIONS ================= */
@media (prefers-reduced-motion: no-preference) {
  :root {
    --ciet-ease: cubic-bezier(.22, 1, .36, 1);
    --ciet-out: cubic-bezier(.16, 1, .3, 1);
  }

  @keyframes ciet-rise {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes ciet-mask {
    from { opacity: 0; transform: translateY(22px); filter: blur(10px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
  }
  @keyframes ciet-slide-up {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes ciet-kenburns {
    from { transform: scale(1.04); }
    to   { transform: scale(1.12); }
  }
  @keyframes ciet-sheen {
    0%   { transform: translate(-120%, -120%); }
    38%  { transform: translate(120%, 120%); }
    100% { transform: translate(120%, 120%); }
  }
  @keyframes ciet-btn-sheen {
    0%   { transform: translateX(-140%) skewX(-14deg); }
    22%  { transform: translateX(140%) skewX(-14deg); }
    100% { transform: translateX(140%) skewX(-14deg); }
  }
  @keyframes ciet-line {
    from { transform: scaleX(0); opacity: 0; }
    to   { transform: scaleX(1); opacity: 1; }
  }
  @keyframes ciet-glow {
    0%, 100% { box-shadow: 0 10px 30px rgba(0,0,0,.08); }
    50%      { box-shadow: 0 16px 40px rgba(84,114,134,.22); }
  }

  .ciet-hero-class,
  .ciet-hero { overflow: hidden; }

  .ciet-hero-video {
    transform-origin: center center;
    animation: ciet-kenburns 28s ease-in-out infinite alternate;
  }

  .ciet-hero__eyebrow { animation: ciet-rise .7s var(--ciet-ease) .12s both; }
  .ciet-hero__text h1 { animation: ciet-mask 1s var(--ciet-out) .22s both; }
  .ciet-hero__text > p { animation: ciet-rise .8s var(--ciet-ease) .38s both; }
  .ciet-hero__meta .meta-item:nth-child(1) { animation: ciet-rise .7s var(--ciet-ease) .5s both; }
  .ciet-hero__meta .meta-item:nth-child(2) { animation: ciet-rise .7s var(--ciet-ease) .62s both; }
  .ciet-hero__actions .btn:nth-child(1) { animation: ciet-rise .7s var(--ciet-ease) .74s both; }
  .ciet-hero__actions .btn:nth-child(2) { animation: ciet-rise .7s var(--ciet-ease) .86s both; }
  .ciet-hero__bottom { animation: ciet-slide-up .9s var(--ciet-ease) .95s both; }

  html.ciet-fx .ciet-r {
    opacity: 0;
    will-change: opacity, transform, filter;
    transition:
      opacity .75s var(--ciet-ease),
      transform .85s var(--ciet-ease),
      filter .85s var(--ciet-ease);
    transition-delay: var(--d, 0ms);
  }
  html.ciet-fx .ciet-up   { transform: translateY(28px); }
  html.ciet-fx .ciet-side { transform: translateX(32px); }
  html.ciet-fx .ciet-left { transform: translateX(-32px); }
  html.ciet-fx .ciet-zoom { transform: scale(.94); filter: blur(6px); }
  html.ciet-fx .ciet-r.ciet-in {
    opacity: 1;
    transform: none;
    filter: none;
  }
  .sp-card {
    transition: transform .28s var(--ciet-out), box-shadow .28s ease;
  }
  .sp-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 48px rgba(0,0,0,.14);
    animation: ciet-glow 2.4s ease-in-out infinite;
  }
  .sp-card:hover .sp-logo {
    transform: scale(1.04);
    transition: transform .35s var(--ciet-out);
  }

  .highlight-card,
  .feature-item,
  .speaker-card,
  .sector-card,
  .org-card,
  .news-card,
  .feedback-card,
  .co-card {
    transition: transform .32s var(--ciet-out), box-shadow .32s ease;
  }
  .highlight-card:hover,
  .speaker-card:hover,
  .org-card:hover,
  .news-card:hover,
  .feedback-card:hover {
    transform: translateY(-8px);
  }
  .sector-card:hover { transform: translateY(-6px) scale(1.01); }

  .speaker-image img,
  .news-image img,
  .about-image,
  .hero-image img {
    transition: transform .7s var(--ciet-out);
  }
  .speaker-card:hover .speaker-image img,
  .news-card:hover .news-image img { transform: scale(1.08); }

  .about-visual:hover .about-image { transform: scale(1.04); }

  .btn-primary,
  .speaker-btn,
  .btn-hover {
    position: relative;
    overflow: hidden;
  }
  .btn-primary::after,
  .speaker-btn::after,
  .btn-hover::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      105deg,
      transparent 28%,
      rgba(255,255,255,.35) 50%,
      transparent 72%
    );
    animation: ciet-btn-sheen 4.6s var(--ciet-ease) 1.4s infinite;
  }

  .ciet-line-in {
    transform-origin: left center;
    animation: ciet-line .8s var(--ciet-ease) both;
  }

  .ciet-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 99999;
    pointer-events: none;
    transform-origin: 0 50%;
    transform: scaleX(0);
    background: linear-gradient(90deg, #5c2a36, #547286, #9fc0e6);
  }
}