/* ============================================================
   YOHANNES CONNOR TEKLEAB — styles.css
   Deep Emerald / Black palette · Glassmorphism · Dark theme
   ============================================================ */

/* ---- Design Tokens ---- */
:root {
  --bg:          #080F0B;
  --bg-subtle:   #0C1A12;
  --accent:      #2D6A4F;
  --accent-light:#40916C;
  --accent-glow: #52B788;
  --accent-dim:  #1B4332;
  --white:       #F0F0FF;
  --white-60:    rgba(240, 240, 255, .6);
  --white-30:    rgba(240, 240, 255, .3);
  --white-12:    rgba(240, 240, 255, .12);
  --white-06:    rgba(240, 240, 255, .06);
  --glass-bg:    rgba(8, 15, 11, .65);
  --glass-border:rgba(45, 106, 79, .22);
  --radius:      1rem;
  --radius-lg:   1.5rem;
  --font-head:   'Outfit', sans-serif;
  --font-body:   'Inter', sans-serif;
  --ease:        cubic-bezier(.22, 1, .36, 1);
  --transition:  .4s var(--ease);
}

/* ---- Reset ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--white);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---- Utilities ---- */
.container { width: 90%; max-width: 1100px; margin: 0 auto; }
.text-gold { color: var(--accent-light); }
.text-accent { color: var(--accent-glow); }

/* ---- Glass Card ---- */
.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

/* ---- Scroll Reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 2rem 1rem;
}

/* Hero full-width banner */
.hero__banner {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.hero__banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(8, 15, 11, 0.45) 0%,
    rgba(8, 15, 11, 0.7) 50%,
    rgba(8, 15, 11, 0.95) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

/* Hero photo */
.hero__photo {
  width: 200px; height: 200px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--accent-dim), var(--accent));
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 4px var(--accent-glow), 0 0 60px rgba(45,106,79,.35);
  animation: float 4s ease-in-out infinite;
  overflow: hidden;
}
.hero__img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

.hero__title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 4rem);
  line-height: 1.15;
  letter-spacing: -.02em;
}

.hero__subtitle {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--white-60);
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hero__cta {
  margin-top: .75rem;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 2px solid var(--accent-glow);
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-glow);
  transition: background var(--transition), color var(--transition);
  animation: pulse-ring 2.5s ease-out infinite;
}
.hero__cta:hover {
  background: var(--accent-glow);
  color: var(--bg);
}

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(82,183,136,.45); }
  70%  { box-shadow: 0 0 0 14px rgba(82,183,136,0); }
  100% { box-shadow: 0 0 0 0 rgba(82,183,136,0); }
}

/* ============================================================
   SECTIONS — shared
   ============================================================ */
.section {
  padding: 5rem 0;
}

.section__heading {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
}
.section__heading::after {
  content: '';
  display: block;
  width: 60px; height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-glow));
  margin: .75rem auto 0;
}

/* ============================================================
   ABOUT
   ============================================================ */
.about__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.about__card {
  padding: 2rem 1.5rem;
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition);
}
.about__card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(45,106,79,.2);
}

.about__icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: .75rem;
}

.about__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--accent-glow);
  margin-bottom: .4rem;
}

.about__text {
  font-size: .95rem;
  color: var(--white-60);
  font-weight: 500;
  line-height: 1.5;
}

/* ============================================================
   GALLERY / SLIDESHOW
   ============================================================ */
.gallery { background: var(--bg-subtle); }

.slideshow-cinema { position: relative; width: 100%; max-width: 750px; margin: 0 auto; aspect-ratio: 1/1; border-radius: 24px; overflow: hidden; background: #000; box-shadow: 0 20px 60px rgba(0,0,0,0.5); border: 1px solid rgba(245, 240, 232, 0.08); }
.slideshow-track { position: absolute; inset: 0; }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease-in-out; will-change: opacity; }
.slide.active { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.slideshow-counter { position: absolute; top: 1rem; right: 1.25rem; font-size: 0.75rem; font-weight: 500; color: rgba(255,255,255,0.7); background: rgba(0,0,0,0.45); backdrop-filter: blur(8px); padding: 0.35rem 0.85rem; border-radius: 999px; z-index: 5; }
.slideshow-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,0.1); z-index: 5; }
.slideshow-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #6C63FF, #9B93FF); transition: width 0.15s linear; }
.slideshow-prev, .slideshow-next { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,0.35); backdrop-filter: blur(8px); color: rgba(255,255,255,0.8); font-size: 1.6rem; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s, background 0.3s; border: 1px solid rgba(255,255,255,0.1); cursor: pointer; }
.slideshow-cinema:hover .slideshow-prev, .slideshow-cinema:hover .slideshow-next { opacity: 1; }
.slideshow-prev { left: 0.75rem; }
.slideshow-next { right: 0.75rem; }


/* ============================================================
   MILESTONES — Vertical Timeline
   ============================================================ */
.timeline {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding-left: 2.5rem;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--accent-glow), var(--accent), var(--accent-dim));
}

.timeline__item {
  position: relative;
  margin-bottom: 2.5rem;
}
.timeline__item:last-child { margin-bottom: 0; }

.timeline__dot {
  position: absolute;
  left: -2.5rem;
  top: 1.6rem;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--accent-glow);
  border: 3px solid var(--bg);
  box-shadow: 0 0 0 3px var(--accent-glow);
  transform: translateX(-5.5px);
  z-index: 1;
}

.timeline__card {
  padding: 1.5rem 1.75rem;
  transition: transform var(--transition), box-shadow var(--transition);
}
.timeline__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 36px rgba(45,106,79,.18);
}

.timeline__emoji {
  font-size: 2rem;
  display: block;
  margin-bottom: .5rem;
}

.timeline__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--accent-glow);
  margin-bottom: .35rem;
}

.timeline__desc {
  font-size: .95rem;
  color: var(--white-60);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  padding: 3rem 0 2rem;
  border-top: 1px solid var(--white-06);
  text-align: center;
}

.footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.footer__tagline {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.15rem;
}

.footer__links {
  display: flex;
  gap: 1.5rem;
}

.footer__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 500;
  font-size: .95rem;
  color: var(--accent-glow);
  padding: .4rem .9rem;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  transition: background var(--transition), color var(--transition);
}
.footer__link:hover {
  background: var(--accent-glow);
  color: var(--bg);
}

.footer__copy {
  font-size: .8rem;
  color: var(--white-30);
}

/* ============================================================
   STAGGER DELAYS for reveal children
   ============================================================ */
.about__card:nth-child(2),
.gallery__item:nth-child(2),
.timeline__item:nth-child(2) { transition-delay: .1s; }
.about__card:nth-child(3),
.gallery__item:nth-child(3),
.timeline__item:nth-child(3) { transition-delay: .2s; }
.about__card:nth-child(4),
.gallery__item:nth-child(4),
.timeline__item:nth-child(4) { transition-delay: .3s; }
.gallery__item:nth-child(5) { transition-delay: .4s; }
.gallery__item:nth-child(6) { transition-delay: .5s; }