/* ===================================
   WUP — story.css
=================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --purple:#7C5CFC;
  --purple2:#9B7FFF;
  --purple3:#C4B2FF;
  --dark:#0C0A1A;
  --white:#fff;
  --light-bg:#F7F6FF;
  --gray:#888;
  --text:#1A1530;
  --highlight-bg:#BEF3FF;
}

html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--white);color:var(--text);overflow-x:hidden}

/* ── ANIMATIONS ── */
.fade-up{opacity:0;transform:translateY(28px);transition:opacity .65s ease,transform .65s ease}
.fade-up.in{opacity:1;transform:translateY(0)}
.fade-left{opacity:0;transform:translateX(-32px);transition:opacity .65s ease,transform .65s ease}
.fade-left.in{opacity:1;transform:translateX(0)}
.fade-right{opacity:0;transform:translateX(32px);transition:opacity .65s ease,transform .65s ease}
.fade-right.in{opacity:1;transform:translateX(0)}

/* ── NAV (light) ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 48px;height:64px;
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(0,0,0,0.07);
}
.nav-logo-text{font-family:'Geologica',sans-serif;font-weight:900;font-size:22px;color:var(--dark)}
.nav-logo-text span{color:var(--purple2)}
.nav-socials{display:flex;align-items:center;gap:10px}
.nav-socials a{
  width:36px;height:36px;border-radius:9px;
  background:rgba(0,0,0,0.05);border:1px solid rgba(0,0,0,0.08);
  display:flex;align-items:center;justify-content:center;
  color:var(--dark);text-decoration:none;transition:all .2s;
}
.nav-socials a:hover{background:var(--purple);color:#fff;border-color:var(--purple)}
.nav-socials svg{width:15px;height:15px}
.nav-right{display:flex;align-items:center;gap:12px}
.btn-login{
  padding:9px 24px;border-radius:9px;
  background:transparent;border:1.5px solid rgba(0,0,0,0.18);
  color:var(--dark);font-size:14px;font-weight:500;font-family:'Inter',sans-serif;
  cursor:pointer;transition:all .2s;
}
.btn-login:hover{border-color:var(--purple);color:var(--purple)}
.nav-hamburger{display:flex;flex-direction:column;gap:5px;cursor:pointer;padding:6px}
.nav-hamburger span{width:22px;height:2px;background:var(--dark);border-radius:2px;display:block}

/* ── HERO ── */
.story-hero{
  padding:140px 72px 80px;
  text-align:center;
  background:var(--white);
}
.story-hero h1{
  font-family:'Geologica',sans-serif;
  font-size:52px;font-weight:800;line-height:1.1;color:var(--text);
  max-width:700px;margin:0 auto 60px;
}

/* ── MYTHS INTRO BLOCK ── */
.myths-intro{
  display:flex;
  flex-direction:column;
  gap:40px;
  max-width:1100px;margin:0 auto 100px;
  padding:0 72px;
}

/* Meme row: two images side by side */
.photo-strip{
  display:flex;flex-direction:row;gap:24px;
  justify-content:center;
}
.photo-item{
  flex:1;max-width:440px;
  border-radius:18px;overflow:hidden;
  background:var(--light-bg);
  border:1.5px solid rgba(124,92,252,0.1);
  box-shadow:0 4px 20px rgba(0,0,0,0.07);
  transition:transform .32s cubic-bezier(.34,1.56,.64,1), box-shadow .3s;
  cursor:pointer;
  display:flex;flex-direction:column;
}
.photo-item:hover{
  transform:scale(1.025) translateY(-4px);
  box-shadow:0 16px 48px rgba(124,92,252,0.16);
}
/* meme: natural proportions, no crop */
.photo-item img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
}
.photo-placeholder{
  padding:10px 14px;
  background:rgba(124,92,252,0.05);
  border-top:1px solid rgba(124,92,252,0.07);
  font-size:12px;color:rgba(124,92,252,0.55);
  font-weight:600;text-align:center;line-height:1.5;
}
.photo-label{
  padding:8px 14px;font-size:11px;color:var(--gray);
  line-height:1.45;font-style:italic;
}

/* Right: highlighted callout */
.myth-callout{
  background:linear-gradient(135deg,rgba(190,243,255,0.6),rgba(180,200,255,0.4));
  border-radius:20px;padding:36px 40px;
  border:1.5px solid rgba(124,92,252,0.15);
  position:relative;overflow:hidden;
}
.myth-callout::before{
  content:'';position:absolute;top:-40px;right:-40px;
  width:200px;height:200px;
  background:radial-gradient(circle,rgba(124,92,252,0.12) 0%,transparent 70%);
  pointer-events:none;
}
.myth-callout p{
  font-family:'Geologica',sans-serif;
  font-size:22px;font-weight:700;line-height:1.5;color:var(--text);
  text-decoration:underline;text-decoration-color:rgba(124,92,252,0.4);
  text-underline-offset:4px;
}

/* ── STORIES SECTION ── */
.stories-section{
  padding:80px 72px 100px;
  background:var(--white);
}

.story-block{
  display:grid;gap:60px;
  max-width:1100px;margin:0 auto;
}

/* alternating left/right layout */
.story-item{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;
  align-items:start;
  padding:48px 0;
  border-top:1px solid rgba(0,0,0,0.06);
}
.story-item:first-child{border-top:none;padding-top:0}
.story-item.reverse{direction:rtl}
.story-item.reverse > *{direction:ltr}

/* Path card (the "Мій шлях" infographic) */
.path-card{
  background:#fff;border-radius:20px;
  border:1.5px solid rgba(0,0,0,0.08);
  box-shadow:0 4px 28px rgba(0,0,0,0.07);
  overflow:hidden;
  transition:transform .35s, box-shadow .35s;
}
.path-card:hover{transform:translateY(-5px);box-shadow:0 16px 56px rgba(124,92,252,0.12)}

.path-card-header{
  padding:14px 18px 12px;
  border-bottom:1px solid rgba(0,0,0,0.05);
  display:flex;align-items:center;justify-content:space-between;
}
.path-card-title{
  font-family:'Geologica',sans-serif;font-size:14px;font-weight:800;color:var(--text);
}
.path-card-logo{font-family:'Geologica',sans-serif;font-weight:900;font-size:13px;color:var(--text)}
.path-card-logo span{color:var(--purple2)}

.path-card-body{padding:20px 18px}

/* Timeline nodes */
.timeline{position:relative;padding-left:24px}
.timeline::before{
  content:'';position:absolute;left:7px;top:8px;bottom:8px;
  width:1.5px;background:rgba(124,92,252,0.2);
}
.tl-node{
  position:relative;margin-bottom:20px;
}
.tl-node:last-child{margin-bottom:0}
.tl-dot{
  position:absolute;left:-24px;top:5px;
  width:15px;height:15px;border-radius:50%;
  background:linear-gradient(135deg,var(--purple),var(--purple2));
  border:2px solid #fff;
  box-shadow:0 0 0 2px rgba(124,92,252,0.25);
}
.tl-label{font-size:10px;font-weight:700;color:rgba(124,92,252,0.7);margin-bottom:3px;text-transform:uppercase;letter-spacing:.8px}
.tl-text{font-size:11.5px;color:#444;line-height:1.6}

.path-footer{
  padding:12px 18px;background:var(--light-bg);
  border-top:1px solid rgba(0,0,0,0.05);
  font-size:11px;color:var(--gray);text-align:center;
  font-style:italic;
}

/* Story text side */

.story-person-name{
  font-family:'Geologica',sans-serif;
  font-size:22px;font-weight:800;color:var(--text);
  margin-bottom:12px;line-height:1.2;
}
.story-quote{
  font-size:15px;color:#555;line-height:1.75;margin-bottom:24px;
}

/* Photo placeholder for person photo */
.person-photo{
  width:160px;height:160px;border-radius:16px;
  background:linear-gradient(135deg,rgba(124,92,252,0.06),rgba(155,127,255,0.1));
  border:1.5px solid rgba(124,92,252,0.1);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:rgba(124,92,252,0.4);font-weight:600;
  margin-bottom: 40px;
}

/* ── FOOTER ── */
footer{
  background:#0C0B1A;padding:28px 72px;
  display:flex;align-items:center;justify-content:space-between;
  border-top:1px solid rgba(255,255,255,0.05);
}
.footer-logo{height: 60px; width: 60px;}
.footer-logo span{color:var(--purple2)}
.footer-links{display:flex;gap:28px;flex-wrap:wrap}
.footer-links a{font-size:13px;color:rgba(255,255,255,0.3);text-decoration:none;transition:color .2s}
.footer-links a:hover{color:rgba(255,255,255,0.8)}

/* ── RESPONSIVE ── */
@media(max-width:900px){
  .story-hero{padding:110px 24px 60px}
  .story-hero h1{font-size:36px}
  .myths-intro{flex-direction:column;padding:0 24px;margin-bottom:60px}
  .photo-strip{flex-direction:row;gap:14px}
  .photo-item{max-width:none}
  .photo-item img{height:180px}
  .stories-section{padding:60px 24px}
  .story-item,.story-item.reverse{grid-template-columns:1fr;direction:ltr}
  nav{padding:0 24px;height:56px}
  footer{flex-direction:column;gap:18px;padding:24px;text-align:center}
  .footer-links{justify-content:center}
}