/*
 * Blog "story" layout (Views/Home/BlogStory.cshtml): full-bleed news story with a cinematic cover,
 * scroll progress, wind lines and photo reveals. Article blocks come from App_Data/site-content.json
 * and use the .story-* classes below. Motion: ease-out entrances, transform/opacity only,
 * everything collapses to static under prefers-reduced-motion.
 */

:root { --story-ease: cubic-bezier(0.16, 1, 0.3, 1); }

/* ---------- Reading progress ---------- */
.story-progress {
  position: fixed; inset: 0 0 auto 0; z-index: 60; height: 3px;
  background: linear-gradient(90deg, #B4863B, #E4C877);
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}

/* ---------- Hero ---------- */
.story-hero { position: relative; min-height: clamp(640px, 100svh, 980px); overflow: hidden; background: #0C2530; }
/* The content grows the cover on short screens instead of sliding under the fixed header. */
.story-hero__inner { min-height: inherit; padding-top: 7.5rem; }
.story-hero__media { position: absolute; inset: -6% 0 0 0; will-change: transform; }
.story-hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 35%;
  animation: story-kenburns 2.6s var(--story-ease) both, story-drift 26s ease-in-out 2.6s infinite alternate;
}
.story-hero__shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(12,37,48,0.55) 0%, rgba(12,37,48,0.15) 30%, rgba(12,37,48,0.55) 60%, rgba(12,37,48,0.96) 100%),
    radial-gradient(ellipse 70% 60% at 15% 90%, rgba(196,160,82,0.22), transparent 70%);
}
@keyframes story-kenburns { from { transform: scale(1.14); filter: blur(6px) brightness(0.7); } to { transform: scale(1.04); filter: none; } }
@keyframes story-drift { from { transform: scale(1.04) translate3d(0,0,0); } to { transform: scale(1.1) translate3d(-1.5%, -1%, 0); } }

/* Line-by-line mask reveal (whole lines, so the page translator still sees one sentence). */
.story-line { display: block; overflow: hidden; padding-bottom: 0.08em; }
.story-line > span { display: block; transform: translateY(105%); animation: story-rise 1s var(--story-ease) forwards; }
.story-line:nth-child(2) > span { animation-delay: 0.12s; }
.story-line:nth-child(3) > span { animation-delay: 0.24s; }
@keyframes story-rise { to { transform: translateY(0); } }

.story-fade { opacity: 0; animation: story-fade 0.9s var(--story-ease) forwards; }
@keyframes story-fade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Wind: thin gold strokes sweeping across the cover ("Çözüm Hanem rüzgârı"). */
.story-wind { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.story-wind path {
  fill: none; stroke-linecap: round;
  stroke-dasharray: 220 1400; stroke-dashoffset: 1620;
  animation: story-gust 7s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}
.story-wind path:nth-child(2) { animation-delay: 1.4s; animation-duration: 8s; }
.story-wind path:nth-child(3) { animation-delay: 2.6s; animation-duration: 6.5s; }
.story-wind path:nth-child(4) { animation-delay: 3.8s; animation-duration: 9s; }
.story-wind path:nth-child(5) { animation-delay: 5s; animation-duration: 7.5s; }
@keyframes story-gust { 0% { stroke-dashoffset: 1620; opacity: 0; } 12% { opacity: 1; } 75% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }

.story-scroll-cue span { animation: story-cue 1.8s ease-in-out infinite; }
@keyframes story-cue { 0%, 100% { transform: translateY(0); opacity: 0.4; } 50% { transform: translateY(6px); opacity: 1; } }

/* ---------- Article body ---------- */
.story-body { color: #6B6459; font-size: 1.0625rem; line-height: 1.85; }
.story-body > * + * { margin-top: 1.5rem; }
.story-body h2 {
  color: #26221D; font-family: Fraunces, Georgia, serif; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.25rem);
  font-weight: 600; line-height: 1.2; margin-top: 4rem; letter-spacing: -0.01em;
}
.story-body h2 + * { margin-top: 1rem; }
.story-body h3 { color: #26221D; font-size: 1.15rem; font-weight: 700; margin-top: 2rem; }
.story-body strong { color: #26221D; font-weight: 600; }
.story-body em { font-style: italic; }
.story-body a { color: #B4863B; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.story-body a:hover { color: #C4A052; }

.story-kicker { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #B4863B; }
.story-kicker + h2 { margin-top: 0.5rem !important; }

.story-lead { color: #26221D; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem); line-height: 1.7; }
.story-lead::first-letter {
  float: left; font-family: Fraunces, Georgia, serif; font-size: 4.4em; line-height: 0.82;
  margin: 0.08em 0.12em 0 0; color: #B4863B; font-weight: 600;
}

/* Facts strip */
.story-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (min-width: 768px) { .story-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.story-facts > div { border: 1px solid #F5EFE4; background: #FDF8F1; border-radius: 1rem; padding: 1.1rem 1.2rem; }
.story-facts b { display: block; font-family: Fraunces, Georgia, serif; font-size: 1.5rem; font-weight: 600; color: #26221D; line-height: 1.15; }
.story-facts span { display: block; margin-top: 0.3rem; font-size: 0.85rem; line-height: 1.4; }

/* Photos: wider than the text column on desktop, revealed with an expanding clip. */
.story-figure { margin-left: 0; margin-right: 0; }
@media (min-width: 1024px) { .story-figure--wide { margin-left: -7rem; margin-right: -7rem; } }
.story-figure .story-frame { overflow: hidden; border-radius: 1.25rem; background: #F5EFE4; }
.story-figure img {
  display: block; width: 100%; height: auto;
  clip-path: inset(7% 7% 7% 7% round 1.25rem); transform: scale(1.08);
  transition: clip-path 1.2s var(--story-ease), transform 1.6s var(--story-ease);
}
.is-visible .story-figure img, .story-figure.is-visible img { clip-path: inset(0 0 0 0 round 1.25rem); transform: scale(1); }
.story-figure figcaption { margin-top: 0.75rem; font-size: 0.875rem; line-height: 1.55; color: #6B6459; padding-left: 0.85rem; border-left: 2px solid #C4A052; }
.story-figure--tall img { aspect-ratio: 4 / 5; object-fit: cover; }
/* A lone portrait photo stays at a readable width instead of filling the column. */
.story-figure--narrow { max-width: 30rem; margin-left: auto; margin-right: auto; }

.story-duo { display: grid; gap: 1rem; }
@media (min-width: 640px) { .story-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .story-duo { margin-left: -4rem; margin-right: -4rem; } }
.story-duo .story-figure:nth-child(2) img { transition-delay: 0.15s; }

/* Thank-you cards (organisers, partners, sponsors) */
.story-cards { display: grid; gap: 0.85rem; }
@media (min-width: 640px) { .story-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.story-card {
  position: relative; overflow: hidden; border-radius: 1.1rem; border: 1px solid #F5EFE4; background: #fff;
  padding: 1.25rem 1.35rem; transition: transform 0.35s var(--story-ease), border-color 0.35s ease, box-shadow 0.35s ease;
}
.story-card::after {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, #B4863B, #E4C877); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.9s var(--story-ease) 0.2s;
}
.is-visible .story-card::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
  .story-card:hover { transform: translateY(-4px); border-color: rgba(196,160,82,0.45); box-shadow: 0 18px 40px -24px rgba(18,49,62,0.35); }
}
.story-card small { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #B4863B; }
.story-card b { display: block; margin-top: 0.45rem; font-family: Fraunces, Georgia, serif; font-size: 1.2rem; font-weight: 600; line-height: 1.25; color: #26221D; }
.story-card span { display: block; margin-top: 0.35rem; font-size: 0.9rem; line-height: 1.5; }
.story-card--dark { background: #12313E; border-color: #12313E; }
.story-card--dark b { color: #fff; }
.story-card--dark span { color: rgba(255,255,255,0.65); }
.story-card--dark small { color: #C4A052; }

/* Founders */
.story-people { display: grid; gap: 0.85rem; }
@media (min-width: 768px) { .story-people { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.story-person { border-radius: 1.1rem; background: #12313E; color: #fff; padding: 1.4rem; position: relative; overflow: hidden; }
.story-person::before {
  content: ""; position: absolute; width: 10rem; height: 10rem; right: -3rem; top: -4rem; border-radius: 9999px;
  background: rgba(196,160,82,0.18); filter: blur(30px);
}
.story-avatar {
  position: relative; display: flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem;
  border-radius: 9999px; border: 1px solid rgba(196,160,82,0.5); background: rgba(196,160,82,0.12);
  font-family: Fraunces, Georgia, serif; font-size: 1.15rem; font-weight: 600; color: #E4C877;
}
.story-person b { position: relative; display: block; margin-top: 1rem; font-size: 1.05rem; font-weight: 700; color: #fff; line-height: 1.3; }
.story-person span { position: relative; display: block; margin-top: 0.2rem; font-size: 0.85rem; color: #C4A052; font-weight: 600; }
.story-person p { position: relative; margin-top: 0.65rem; font-size: 0.9rem; line-height: 1.6; color: rgba(255,255,255,0.68); }

/* Pull quote */
.story-quote {
  position: relative; margin: 3rem 0; padding: 0.5rem 0 0.5rem 1.75rem; border-left: 3px solid #C4A052;
  font-family: Fraunces, Georgia, serif; font-style: italic; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.85rem);
  line-height: 1.4; color: #26221D;
}
.story-quote cite { display: block; margin-top: 0.85rem; font-family: Manrope, system-ui, sans-serif; font-style: normal; font-size: 0.85rem; font-weight: 600; color: #B4863B; }

/* Highlight box (the book gift) */
.story-note {
  display: grid; gap: 1.25rem; align-items: center; border-radius: 1.5rem; padding: 1.25rem;
  background: linear-gradient(135deg, rgba(196,160,82,0.12), rgba(196,160,82,0.03)); border: 1px solid rgba(196,160,82,0.3);
}
@media (min-width: 768px) { .story-note { grid-template-columns: 240px 1fr; padding: 1.5rem; } }
@media (min-width: 1024px) { .story-note { margin-left: -4rem; margin-right: -4rem; } }
.story-note img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 30%; border-radius: 1rem; }
@media (min-width: 768px) { .story-note img { aspect-ratio: 4 / 5; object-position: center; } }
.story-note h3 { margin-top: 0; font-family: Fraunces, Georgia, serif; font-size: 1.45rem; font-weight: 600; }
.story-note p { margin-top: 0.6rem; }

/* ---------- Gallery + lightbox ---------- */
.story-gallery { columns: 2; column-gap: 0.75rem; }
@media (min-width: 1024px) { .story-gallery { columns: 3; column-gap: 1rem; } }
.story-gallery button {
  display: block; width: 100%; margin-bottom: 0.75rem; break-inside: avoid; overflow: hidden; border-radius: 1rem;
  cursor: zoom-in; background: #F5EFE4; position: relative;
}
@media (min-width: 1024px) { .story-gallery button { margin-bottom: 1rem; } }
.story-gallery img { display: block; width: 100%; height: auto; transition: transform 0.7s var(--story-ease), filter 0.4s ease; }
@media (hover: hover) and (pointer: fine) { .story-gallery button:hover img { transform: scale(1.05); filter: saturate(1.1); } }
.story-gallery button:focus-visible { outline: 3px solid #C4A052; outline-offset: 3px; }

.story-lightbox {
  position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  background: rgba(8, 24, 31, 0.92); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}
.story-lightbox.is-open { opacity: 1; visibility: visible; transition: opacity 0.25s ease; }
.story-lightbox img {
  max-width: min(92vw, 1400px); max-height: 84vh; border-radius: 0.75rem; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
  transform: scale(0.96); transition: transform 0.3s var(--story-ease);
}
.story-lightbox.is-open img { transform: scale(1); }
.story-lightbox button {
  position: absolute; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: 9999px; color: #fff; background: rgba(255,255,255,0.1); transition: background 0.2s ease;
}
.story-lightbox button:hover { background: rgba(196,160,82,0.85); }
.story-lightbox button:active { transform: scale(0.96); }
.story-lightbox [data-lb-close] { top: 1rem; right: 1rem; }
.story-lightbox [data-lb-prev] { left: 1rem; top: 50%; margin-top: -24px; }
.story-lightbox [data-lb-next] { right: 1rem; top: 50%; margin-top: -24px; }
.story-lightbox [data-lb-count] { position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,0.7); font-size: 0.85rem; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .story-hero__media img, .story-wind path, .story-scroll-cue span { animation: none; }
  .story-wind { display: none; }
  .story-line > span, .story-fade { animation: none; transform: none; opacity: 1; }
  .story-figure img { clip-path: none; transform: none; transition: none; }
  .story-card::after { transform: scaleX(1); transition: none; }
  .story-gallery img, .story-lightbox, .story-lightbox img { transition: none; }
}