/* ============================================================
   Ali Abbaszadeh Cheragheali — Design tokens & signature motion
   ============================================================ */

:root{
  --navy:        #0B1F3A;
  --navy-soft:   #142c52;
  --navy-deep:   #071527;
  --gold:        #D4AF37;
  --gold-soft:   #e8cd7a;
  --white:       #FFFFFF;
  --gray-light:  #F5F5F5;

  --font-fa: 'IRANYekanX', 'Vazirmatn', sans-serif;
  --font-en: 'Poppins', sans-serif;
}

html{ scroll-behavior:smooth; }
[x-cloak]{ display:none !important; }

body{
  font-family: var(--font-fa);
  background: var(--gray-light);
  color: var(--navy);
}

.font-en{ font-family: var(--font-en); }
.font-signature{ font-family: 'Yellowtail', cursive; }

/* ---------- Hero portrait: global-reach glow ---------- */
.hero-portrait-glow{
  background:
    radial-gradient(circle at 70% 30%, rgba(212,175,55,.20), transparent 55%),
    radial-gradient(circle at 30% 80%, rgba(212,175,55,.10), transparent 45%);
}
.hero-arrow{
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.hero-arrow:hover{ background: rgba(212,175,55,.15); border-color: rgba(212,175,55,.6); transform: translateY(-50%) scale(1.06); }

@keyframes bounce-y{
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
.scroll-indicator{ animation: bounce-y 2s ease-in-out infinite; }

/* ---------- Signature element: drifting research-network canvas ---------- */
#network-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:.55;
}

.hero-grid{
  background-image:
    linear-gradient(rgba(212,175,55,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,55,.08) 1px, transparent 1px);
  background-size: 42px 42px;
}

/* ---------- Gold medal cards ---------- */
.medal-card{
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-soft) 100%);
  border: 1px solid rgba(212,175,55,.35);
}

.gold-card{
  background: var(--white);
  border: 1px solid rgba(212,175,55,.35);
  box-shadow: 0 1px 0 rgba(212,175,55,.25);
  transition: transform .25s ease, box-shadow .25s ease;
}
.gold-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 30px -18px rgba(11,31,58,.35), 0 1px 0 rgba(212,175,55,.4);
}

/* ---------- Counter number ---------- */
.stat-number{
  font-family: var(--font-en);
  font-weight: 700;
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-soft) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Timeline rail ---------- */
.timeline-rail{
  border-inline-start: 2px solid rgba(212,175,55,.5);
}
.timeline-dot{
  background: var(--gold);
  box-shadow: 0 0 0 4px rgba(212,175,55,.18);
}

/* ---------- Switzerland flag accent for international honours ---------- */
.swiss-accent{
  background:
    radial-gradient(circle at 12% 20%, rgba(212,175,55,.10), transparent 40%),
    radial-gradient(circle at 85% 75%, rgba(212,175,55,.08), transparent 45%),
    var(--navy-deep);
}
.swiss-cross{
  position: relative; width: 26px; height: 26px;
}
.swiss-cross::before, .swiss-cross::after{
  content:''; position:absolute; background: var(--gold);
}
.swiss-cross::before{ inset-inline-start:44%; inset-block:14%; width:12%; }
.swiss-cross::after{ inset-block-start:44%; inset-inline:14%; height:12%; }

/* ---------- Stats bar: icon pop-in + hover wiggle ---------- */
.stat-item{
  opacity:0; transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.stat-item.is-visible{ opacity:1; transform:none; }
.stat-item:nth-child(1){ transition-delay: .05s; }
.stat-item:nth-child(2){ transition-delay: .12s; }
.stat-item:nth-child(3){ transition-delay: .19s; }
.stat-item:nth-child(4){ transition-delay: .26s; }
.stat-item:nth-child(5){ transition-delay: .33s; }
.stat-item:nth-child(6){ transition-delay: .40s; }

.stat-icon{ display:inline-block; }
.stat-item.is-visible .stat-icon{
  animation: icon-pop .7s cubic-bezier(.34,1.56,.64,1) both;
}
.stat-item:nth-child(1).is-visible .stat-icon{ animation-delay: .05s; }
.stat-item:nth-child(2).is-visible .stat-icon{ animation-delay: .12s; }
.stat-item:nth-child(3).is-visible .stat-icon{ animation-delay: .19s; }
.stat-item:nth-child(4).is-visible .stat-icon{ animation-delay: .26s; }
.stat-item:nth-child(5).is-visible .stat-icon{ animation-delay: .33s; }
.stat-item:nth-child(6).is-visible .stat-icon{ animation-delay: .40s; }
@keyframes icon-pop{
  0%{ transform: scale(0) rotate(-15deg); opacity:0; }
  60%{ transform: scale(1.18) rotate(6deg); opacity:1; }
  100%{ transform: scale(1) rotate(0deg); }
}
.stat-item:hover .stat-icon{ animation: icon-wiggle .5s ease; }
@keyframes icon-wiggle{
  0%, 100%{ transform: rotate(0); }
  25%{ transform: rotate(-10deg) scale(1.08); }
  75%{ transform: rotate(10deg) scale(1.08); }
}
@media (prefers-reduced-motion: reduce){
  .stat-item{ opacity:1; transform:none; transition:none; }
  .stat-item.is-visible .stat-icon, .stat-item:hover .stat-icon{ animation:none; }
}
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  #network-canvas{ display:none; }
}

/* Scrollbar accent (non-critical, cosmetic) */
::selection{ background: rgba(212,175,55,.35); }