/* ============================================================
   ShinobiKage — theme.css
   Decorative: leaf-fall particles, ninja silhouette, hero motion
   ============================================================ */

/* ── Sakura petals overlay ──────────────────────────────── */
./* ── Gold brush headings site-wide ────────────────────── */
h1, h2, h3, h4, h5, h6,
.sk-page-title,
.sk-card__title,
.sk-hero__title,
.page-title {
  background: linear-gradient(180deg,
    #FFFFFF 0%,
    #FFF8DC 5%,
    #FFD700 15%,
    #DAA520 25%,
    #B8860B 35%,
    #8B6914 45%,
    #FFC125 55%,
    #F0C040 65%,
    #DAA520 75%,
    #B8860B 85%,
    #FFD700 95%,
    #FFC125 100%
  );
  background-size: 100% 200%;
  animation: sk-gold-shift 4s ease-in-out infinite alternate;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter:
    drop-shadow(2px 3px 4px rgba(0,0,0,0.6))
    drop-shadow(0 0 8px rgba(255,215,0,0.35))
    drop-shadow(0 0 2px rgba(255,255,200,0.5));
}
@keyframes sk-gold-shift {
  0%   { background-position: 0% 0%; }
  100% { background-position: 0% 100%; }
}

.sk-hero__eyebrow {
  background: linear-gradient(180deg, #FFF3C0, #DAA520 50%, #8B6508);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Sakura petals overlay ──────────────────────────────── */
.sk-leaves {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* ── Remove white backgrounds from content images ───── */
.sk-article__body img,
.sk-wind-char img,
article img,
.sk-wind-char {
  mix-blend-mode: multiply;
}
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.sk-article__body p,
.sk-article__body h1, .sk-article__body h2, .sk-article__body h3,
.sk-article__body h4, .sk-article__body h5, .sk-article__body h6,
.sk-article__body li,
.sk-article__body blockquote,
.sk-article__body figcaption,
.sk-article__hero,
.sk-author-box {
  background: var(--bg-base);
}

.sk-petal {
  position: absolute;
  width: 22px;
  height: 24px;
  background: radial-gradient(ellipse at 40% 20%, #FFF5F8, #FCA5C3 30%, #E84878 90%);
  border-radius: 70% 0 70% 0 / 45% 0 45% 0;
  clip-path: polygon(
    34% 0%,  66% 0%,
    50% 16%,
    100% 10%,
    96% 60%,
    80% 85%,
    58% 98%,
    50% 100%,
    42% 98%,
    20% 85%,
    4% 60%,
    0% 10%
  );
  box-shadow: 0 0 12px rgba(255, 100, 140, 0.4);
  opacity: 0;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  top: -60px;
}

/* Pattern 1: right-dominant sway */
.sk-petal--1, .sk-petal--4, .sk-petal--7, .sk-petal--10, .sk-petal--13, .sk-petal--16, .sk-petal--19, .sk-petal--22, .sk-petal--25, .sk-petal--28 {
  animation-name: sk-petal-fall-1;
}
/* Pattern 2: left-dominant sway */
.sk-petal--2, .sk-petal--5, .sk-petal--8, .sk-petal--11, .sk-petal--14, .sk-petal--17, .sk-petal--20, .sk-petal--21, .sk-petal--27, .sk-petal--30 {
  animation-name: sk-petal-fall-2;
}
/* Pattern 3: zigzag sway */
.sk-petal--3, .sk-petal--6, .sk-petal--9, .sk-petal--12, .sk-petal--15, .sk-petal--18, .sk-petal--23, .sk-petal--26, .sk-petal--29 {
  animation-name: sk-petal-fall-3;
}

.sk-petal--1  { left: 2%;   animation-delay: 0s;    animation-duration: 13s;   width: 24px; height: 28px; }
.sk-petal--2  { left: 7%;   animation-delay: 0.8s;  animation-duration: 10s;   width: 17px; height: 19px; }
.sk-petal--3  { left: 13%;  animation-delay: 1.6s;  animation-duration: 15s;   width: 27px; height: 31px; }
.sk-petal--4  { left: 19%;  animation-delay: 2.4s;  animation-duration: 11s;   width: 15px; height: 17px; }
.sk-petal--5  { left: 25%;  animation-delay: 3.2s;  animation-duration: 9s;    width: 21px; height: 24px; }
.sk-petal--6  { left: 31%;  animation-delay: 4.0s;  animation-duration: 14s;   width: 23px; height: 26px; }
.sk-petal--7  { left: 37%;  animation-delay: 4.8s;  animation-duration: 12s;   width: 19px; height: 22px; }
.sk-petal--8  { left: 43%;  animation-delay: 0.4s;  animation-duration: 10.5s; width: 17px; height: 19px; }
.sk-petal--9  { left: 49%;  animation-delay: 1.2s;  animation-duration: 8.5s;  width: 26px; height: 30px; }
.sk-petal--10 { left: 55%;  animation-delay: 2.0s;  animation-duration: 13.5s; width: 20px; height: 23px; }
.sk-petal--11 { left: 61%;  animation-delay: 2.8s;  animation-duration: 11.5s; width: 16px; height: 18px; }
.sk-petal--12 { left: 67%;  animation-delay: 3.6s;  animation-duration: 9.5s;  width: 25px; height: 28px; }
.sk-petal--13 { left: 73%;  animation-delay: 4.4s;  animation-duration: 14.5s; width: 22px; height: 25px; }
.sk-petal--14 { left: 79%;  animation-delay: 5.2s;  animation-duration: 10s;   width: 18px; height: 20px; }
.sk-petal--15 { left: 84%;  animation-delay: 0.6s;  animation-duration: 12.5s; width: 26px; height: 30px; }
.sk-petal--16 { left: 89%;  animation-delay: 1.4s;  animation-duration: 8s;    width: 14px; height: 16px; }
.sk-petal--17 { left: 93%;  animation-delay: 2.2s;  animation-duration: 11s;   width: 19px; height: 22px; }
.sk-petal--18 { left: 10%;  animation-delay: 3.0s;  animation-duration: 15.5s; width: 25px; height: 28px; }
.sk-petal--19 { left: 30%;  animation-delay: 3.8s;  animation-duration: 9s;    width: 17px; height: 19px; }
.sk-petal--20 { left: 58%;  animation-delay: 4.6s;  animation-duration: 13s;   width: 21px; height: 24px; }
.sk-petal--21 { left: 5%;   animation-delay: 1.0s;  animation-duration: 12s;   width: 20px; height: 23px; }
.sk-petal--22 { left: 15%;  animation-delay: 3.5s;  animation-duration: 9.5s;  width: 16px; height: 18px; }
.sk-petal--23 { left: 28%;  animation-delay: 6.0s;  animation-duration: 11s;   width: 24px; height: 27px; }
.sk-petal--24 { left: 40%;  animation-delay: 0.3s;  animation-duration: 14s;   width: 26px; height: 30px; }
.sk-petal--25 { left: 50%;  animation-delay: 2.5s;  animation-duration: 8s;    width: 15px; height: 17px; }
.sk-petal--26 { left: 64%;  animation-delay: 5.0s;  animation-duration: 10.5s; width: 19px; height: 22px; }
.sk-petal--27 { left: 76%;  animation-delay: 0.7s;  animation-duration: 13.5s; width: 23px; height: 26px; }
.sk-petal--28 { left: 86%;  animation-delay: 3.0s;  animation-duration: 9s;    width: 17px; height: 19px; }
.sk-petal--29 { left: 95%;  animation-delay: 4.2s;  animation-duration: 12.5s; width: 25px; height: 28px; }
.sk-petal--30 { left: 22%;  animation-delay: 1.8s;  animation-duration: 15s;   width: 28px; height: 32px; }

@keyframes sk-petal-fall-1 {
  0%   { transform: translateY(0)     translateX(0)     rotate(0deg);    opacity: 0; }
  5%   { transform: translateY(5vh)   translateX(0)     rotate(8deg);    opacity: 0.7; }
  20%  { transform: translateY(20vh)  translateX(18px)  rotate(60deg);   opacity: 0.65; }
  40%  { transform: translateY(40vh)  translateX(28px)  rotate(135deg);  opacity: 0.55; }
  60%  { transform: translateY(60vh)  translateX(8px)   rotate(210deg);  opacity: 0.42; }
  80%  { transform: translateY(80vh)  translateX(-22px) rotate(300deg);  opacity: 0.25; }
  95%  { transform: translateY(95vh)  translateX(-10px) rotate(370deg);  opacity: 0.08; }
  100% { transform: translateY(105vh) translateX(0)     rotate(420deg);  opacity: 0; }
}

@keyframes sk-petal-fall-2 {
  0%   { transform: translateY(0)     translateX(0)     rotate(0deg);    opacity: 0; }
  5%   { transform: translateY(5vh)   translateX(0)     rotate(-10deg);  opacity: 0.7; }
  20%  { transform: translateY(20vh)  translateX(-15px) rotate(-55deg);  opacity: 0.65; }
  40%  { transform: translateY(40vh)  translateX(-30px) rotate(-140deg); opacity: 0.55; }
  60%  { transform: translateY(60vh)  translateX(-5px)  rotate(-220deg); opacity: 0.42; }
  80%  { transform: translateY(80vh)  translateX(20px)  rotate(-310deg); opacity: 0.25; }
  95%  { transform: translateY(95vh)  translateX(8px)   rotate(-380deg); opacity: 0.08; }
  100% { transform: translateY(105vh) translateX(0)     rotate(-430deg); opacity: 0; }
}

@keyframes sk-petal-fall-3 {
  0%   { transform: translateY(0)     translateX(0)     rotate(0deg);    opacity: 0; }
  5%   { transform: translateY(5vh)   translateX(0)     rotate(5deg);    opacity: 0.7; }
  25%  { transform: translateY(25vh)  translateX(12px)  rotate(40deg);   opacity: 0.6; }
  50%  { transform: translateY(50vh)  translateX(25px)  rotate(160deg);  opacity: 0.5; }
  70%  { transform: translateY(70vh)  translateX(-18px) rotate(260deg);  opacity: 0.35; }
  90%  { transform: translateY(90vh)  translateX(-6px)  rotate(350deg);  opacity: 0.15; }
  100% { transform: translateY(105vh) translateX(0)     rotate(400deg);  opacity: 0; }
}

/* ── Ninja silhouette (hero foreground) ──────────────────── */
.sk-ninja-silhouette {
  position: absolute;
  bottom: 0;
  right: 0;
  max-height: 90%;
  width: auto;
  z-index: 2;
  filter: drop-shadow(0 0 18px rgba(201, 168, 76, 0.18));
  opacity: 0.85;
  display: none;
}
@media (min-width: 768px) { .sk-ninja-silhouette { display: block; } }

/* ── Hero motion (slow drift) ─────────────────────────────── */
.sk-hero__bg { animation: sk-hero-drift 60s ease-in-out infinite alternate; }
@keyframes sk-hero-drift {
  0% { transform: scale(1) translateX(0); }
  100% { transform: scale(1.04) translateX(-2%); }
}

/* ── Loading spinner (swirl) ─────────────────────────────── */
.sk-loader {
  width: 40px; height: 40px;
  margin: 24px auto;
  color: var(--brand-orange);
  animation: sk-spin 1.6s linear infinite;
}
@keyframes sk-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── Visible Voters: scroll hint ──────────────────────────── */
.sk-scroll-hint {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-muted);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  animation: sk-pulse 2s ease-in-out infinite;
}
@keyframes sk-pulse {
  0%, 100% { opacity: 0.4; transform: translate(-50%, 0); }
  50% { opacity: 0.85; transform: translate(-50%, 4px); }
}

/* ── Hover micro-motion on cards ──────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .sk-card { transition: transform 220ms ease, box-shadow 220ms ease; }
  .sk-card__thumb img { transition: transform 280ms ease; }
  .sk-btn { transition: background 160ms ease, box-shadow 160ms ease, transform 80ms ease; }
}

/* ── McKinsey gradient text utility ─────────────────────── */
.sk-text-gradient {
  background: linear-gradient(120deg, var(--brand-orange) 0%, var(--ember) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ── Section heading variants ─────────────────────────────── */
.sk-section--bare {
  padding: 64px 0;
  border-top: 1px solid var(--border-subtle);
}
.sk-section--dark {
  background: var(--bg-inset);
  padding: 64px 0;
  margin: 32px -16px;
}
@media (min-width: 768px) {
  .sk-section--dark { margin-left: -24px; margin-right: -24px; }
}

/* ── Hero typography ─────────────────────────────────────── */
.sk-hero__eyebrow {
  font-family: var(--font-display);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--brand-orange);
  margin-bottom: 12px;
}
.sk-hero__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 7vw, 64px);
  letter-spacing: 2px;
  color: var(--text-strong);
  margin-bottom: 16px;
  line-height: 1.05;
  max-width: 720px;
}
.sk-hero__deck {
  font-size: clamp(16px, 2.2vw, 20px);
  color: var(--text-muted);
  max-width: 620px;
  line-height: 1.55;
  margin-bottom: 24px;
}
.sk-hero__cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Page title (interior pages) ──────────────────────────── */
.sk-page-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 48px);
  margin-bottom: 8px;
  color: var(--text-strong);
}
.sk-page-lead {
  font-size: 18px;
  color: var(--text-muted);
  max-width: 620px;
  margin-bottom: 32px;
}
/* ── Wind effect on character images ─────────────────────── */
.sk-wind-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin: 32px 0;
}
@media (min-width: 768px) {
  .sk-wind-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

.sk-wind-char {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: var(--bg-surface);
  padding: 8px;
}
.sk-wind-char img {
  max-width: 100%;
  max-height: 500px;
  object-fit: contain;
  animation: sk-wind-sway 4s ease-in-out infinite;
  transform-origin: center bottom;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.5));
}

@keyframes sk-wind-sway {
  0% { transform: translateX(0) rotate(0deg) scale(1); }
  15% { transform: translateX(-4px) rotate(-0.8deg) scale(1.01); }
  35% { transform: translateX(3px) rotate(0.4deg) scale(0.99); }
  50% { transform: translateX(-2px) rotate(-0.3deg) scale(1.005); }
  65% { transform: translateX(4px) rotate(0.7deg) scale(0.995); }
  85% { transform: translateX(-1px) rotate(-0.2deg) scale(1.0); }
  100% { transform: translateX(0) rotate(0deg) scale(1); }
}

/* Animace jednotlivych postav s ruznym zpozdenim */
.sk-wind-char:nth-child(1) img { animation-delay: 0s; animation-duration: 3.8s; }
.sk-wind-char:nth-child(2) img { animation-delay: 0.6s; animation-duration: 4.2s; }
.sk-wind-char:nth-child(3) img { animation-delay: 1.2s; animation-duration: 3.5s; }
.sk-wind-char:nth-child(4) img { animation-delay: 0.3s; animation-duration: 4.5s; }

/* Floating particles around characters (chakra/wind) */
.sk-wind-char::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(201,168,76,0.08) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(248,165,183,0.05) 0%, transparent 40%);
  pointer-events: none;
}