@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,600;1,600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


:root{
  --orange:#FF8E53;
  --royal-blue:#2563EB;
  --light-blue:#3B82F6;
  --light-gold:#383837;

  --glow-orange: rgba(255, 107, 53, 0.4);
  --glow-blue: rgba(37, 99, 235, 0.4);

  --avatar-size: 100px;
  --avatar-border: 4px;
  --avatar-gap: 16px;
}

*{margin:0;padding:0;box-sizing:border-box;}

body{
  font-family:"Open Sans",sans-serif;
  font-weight:600;
  background: linear-gradient(135deg, var(--light-gold) 0%, var(--royal-blue) 50%, var(--light-blue) 100%);
  background-size: 400% 400%;
  animation: gradientShift 20s ease infinite;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
  display:flex;
  flex-direction:column;
}

@keyframes gradientShift{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

.top-menu{
  position:fixed;
  top:0;left:0;
  width:100%;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(20px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  z-index:1000;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}

.menu-container{
  max-width:1600px;
  margin:0 auto;
  padding:1.5rem 2rem;
  display:flex;
  justify-content:center;
  gap:3rem;
}

.menu-link{
  color:#000;
  text-decoration:none;
  font-weight:600;
  font-size:1.1rem;
  padding:0.5rem 1.5rem;
  border-radius:50px;
  transition: all 0.3s ease;
  position:relative;
}

.menu-link::after{
  content:'';
  position:absolute;
  bottom:0;
  left:50%;
  transform: translateX(-50%) scaleX(0);
  width:80%;
  height:2px;
  background: linear-gradient(90deg, var(--orange), var(--royal-blue));
  transition: transform 0.3s ease;
}

.menu-link:hover{
  color: var(--royal-blue);
  transform: translateY(-2px);
}

.menu-link:hover::after{
  transform: translateX(-50%) scaleX(1);
}

#particles-canvas{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
}

.hero-container{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:2rem;
  padding-top:6rem;
  position:relative;
  z-index:1;
  flex:1;
}

.profiles-wrapper{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:3rem;
  max-width:1600px;
  width:100%;
}

/* Cards */
.profile-card{
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(20px);
  border-radius: 32px;
  box-shadow: 0 32px 64px rgba(0,0,0,0.15);
  overflow:hidden;
  position:relative;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);
  border: 1px solid rgba(255,255,255,0.2);
}

.profile-card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  background: linear-gradient(90deg, var(--orange), var(--royal-blue));
  transform: scaleX(0);
  transition: transform 0.6s ease;
}

.profile-card:hover::before{ transform: scaleX(1); }

.profile-card:hover{
  transform: translateY(-20px) scale(1.02);
  box-shadow: 0 48px 96px rgba(0,0,0,0.25);
}

.hero-image{
  height:450px;
  position:relative;
  overflow:hidden;
}

.hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition: all 0.8s cubic-bezier(0.23, 1, 0.320, 1);
}

.person1 img{ transform: scaleX(-1); }
.person2 img{ transform: scaleX(1); }

[data-person="1"]:hover .hero-image img{ transform: scaleX(1) scale(1.1) rotateY(5deg); }
[data-person="2"]:hover .hero-image img{ transform: scaleX(-1) scale(1.1) rotateY(5deg); }

.image-glow{
  position:absolute;
  top:-50%;left:-50%;
  width:200%;height:200%;
  opacity:0;
  transition: opacity 0.6s ease;
  pointer-events:none;
}

.person1 .image-glow{ background: radial-gradient(circle, var(--glow-orange) 0%, transparent 70%); }
.person2 .image-glow{ background: radial-gradient(circle, var(--glow-blue) 0%, transparent 70%); }

[data-person="1"]:hover .image-glow,
[data-person="2"]:hover .image-glow{
  opacity:1;
  animation: glowPulse 2s infinite;
}

@keyframes glowPulse{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.1); }
}

.profile-info{
  padding:3rem;
  color:#000;
  position:relative;
}

.profile-info h2{
  font-size:2.5rem;
  font-weight:800;
  text-align:center;
  margin:0;
}

[data-person="1"] .profile-info h2{ color:#000; }
[data-person="2"] .profile-info h2{ color: var(--royal-blue); }

.info-grid{
  display:grid;
  gap:1.5rem;
  margin-top: 2rem;
}

.info-item{
  padding:1.5rem;
  background: rgba(255,255,255,0.7);
  border-radius:16px;
  border: 1px solid rgba(255,255,255,0.3);
  transition: all 0.3s ease;
  position:relative;
  overflow:hidden;
}

.info-item::before{
  content:'';
  position:absolute;
  top:0;left:-100%;
  width:100%;height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.6s;
}

.info-item:hover::before{ left:100%; }

.info-item:hover{
  transform: translateX(10px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.1);
}

.label{
  font-weight:700;
  color: var(--royal-blue);
  display:block;
  margin-bottom:0.5rem;
}

.info-item ul{
  margin-top:0.5rem;
  padding-left:1.5rem;
  list-style:none;
}

.info-item ul li{
  position:relative;
  margin-bottom:0.5rem;
}

.info-item ul li::before{
  content:'▸';
  color:#000;
  position:absolute;
  left:-1.5rem;
  font-weight:bold;
}

.info-item a{
  color: var(--royal-blue);
  font-weight:600;
  text-decoration:none;
}

.info-item a:hover{ color: var(--orange); }

.info-item.statement span{ font-weight:200; }

/* Quote box */
.quote-box{
  grid-column: 1 / -1;
  
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(20px);
  border-radius:24px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.12);
  padding: 2rem 2.25rem;
  text-align:center;
  border: 1px solid rgba(255,255,255,0.35);
  position:relative;
  overflow:hidden;
  cursor:pointer;
}

.quote-box::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at top, rgba(37,99,235,0.10), transparent 60%);
  pointer-events:none;
}

.quote-text{
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size:1.25rem;
  line-height:1.6;
  color:#0f172a;
  opacity:1;
  transition: opacity 220ms ease;
}

.quote-author{
  margin-top:0.75rem;
  font-size:1.5rem;
  color: rgba(15,23,42,0.75);
  opacity:1;
  transition: opacity 220ms ease;
}

.quote-hint{
  margin-top: 0.75rem;
  font-size: 0.85rem;
  color: rgba(15,23,42,0.55);
}

.quote-box.is-fading .quote-text,
.quote-box.is-fading .quote-author{
  opacity:0;
}

/* Avatar: placement + coin flip hover */
.profile-name-wrap{
  position:relative;
  margin-bottom: 2rem;
  min-height: var(--avatar-size);
  display:flex;
  align-items:center;
  justify-content:center;
  perspective: 900px;
}

.profile-name-wrap.avatar-right{
  padding-right: calc(var(--avatar-size) + var(--avatar-gap));
  padding-left: calc(var(--avatar-size) + var(--avatar-gap));
}

.profile-name-wrap.avatar-left{
  padding-left: calc(var(--avatar-size) + var(--avatar-gap));
  padding-right: calc(var(--avatar-size) + var(--avatar-gap));
}

.profile-avatar{
  width: var(--avatar-size);
  height: var(--avatar-size);
  object-fit: cover;
  border-radius: 999px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.6);
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  border: var(--avatar-border) solid transparent;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
  cursor: pointer;
}

.profile-name-wrap.avatar-right .profile-avatar{ right:0; }
.profile-name-wrap.avatar-left .profile-avatar{ left:0; }

.profile-avatar.border-blue{ border-color: var(--orange); }
.profile-avatar.border-orange{ border-color: var(--royal-blue); }

.profile-avatar:hover{
  animation: coinFlip 1900ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes coinFlip{
  0%   { transform: translateY(-50%) rotateX(0deg) rotateY(0deg); }
  20%  { transform: translateY(-50%) rotateX(10deg) rotateY(180deg) scale(1.03); }
  40%  { transform: translateY(-50%) rotateX(-10deg) rotateY(360deg) scale(1.04); }
  60%  { transform: translateY(-50%) rotateX(12deg) rotateY(540deg) scale(1.03); }
  80%  { transform: translateY(-50%) rotateX(-8deg) rotateY(660deg); }
  100% { transform: translateY(-50%) rotateX(0deg) rotateY(720deg); }
}

35%  { transform: translateY(-50%) rotateY(270deg) scale(1.03); }
  70%  { transform: translateY(-50%) rotateY(540deg) scale(1.03); }
  100% { transform: translateY(-50%) rotateY(720deg); }
}

/* Mobile */
@media (max-width: 768px){
  .menu-container{ gap:1.5rem; padding:1rem 1.5rem; }
  .menu-link{ font-size:0.95rem; padding:0.4rem 1rem; }
  .profiles-wrapper{ grid-template-columns: 1fr; gap:3rem; }
  .hero-image{ height:350px; }

  .quote-box{ padding: 1.5rem 1.25rem; }
  .quote-text{ font-size:1.1rem; }
}