/* =========================
   HOME (index.html only)
   ========================= */

body.home{
  background:#000;
  color:#fff;
}

.hero{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  display:flex;
  align-items:center;
  background:#000;
  isolation: isolate;
}

.hero-bg{
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.88)),
    url("./assets/castro-bg.png") center / cover no-repeat;
  filter:saturate(1.05);
}

/* пульсуюче червоне світіння по краях */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background: radial-gradient(
    circle at center,
    transparent 55%,
    rgba(180,0,0,.45) 100%
  );

  opacity:.65;
  animation: bloodPulse 4s ease-in-out infinite;
}
@keyframes bloodPulse{
  0%{opacity:.35;}
  50%{opacity:.70;}
  100%{opacity:.35;}
}

/* POPIL / JAR U POVITRI */
.hero::after{
  content:"";
  position:absolute;
  inset:-20%;
  z-index:2;
  pointer-events:none;
  mix-blend-mode: screen;

  background:
  radial-gradient(circle at 3% 12%,  rgba(255,190,120,.9) 0 1px, transparent 3px),
  radial-gradient(circle at 7% 44%,  rgba(255,150,80,.85)  0 1px, transparent 3px),
  radial-gradient(circle at 11% 78%, rgba(255,220,150,.9) 0 1px, transparent 3px),
  radial-gradient(circle at 16% 26%, rgba(255,170,100,.85) 0 1px, transparent 3px),
  radial-gradient(circle at 19% 60%, rgba(255,210,140,.9) 0 1px, transparent 3px),
  radial-gradient(circle at 23% 90%, rgba(255,160,90,.85)  0 1px, transparent 3px),

  radial-gradient(circle at 28% 18%, rgba(255,200,120,.9) 0 1px, transparent 3px),
  radial-gradient(circle at 31% 52%, rgba(255,140,80,.85)  0 1px, transparent 3px),
  radial-gradient(circle at 35% 83%, rgba(255,230,160,.9) 0 1px, transparent 3px),
  radial-gradient(circle at 39% 34%, rgba(255,170,100,.85) 0 1px, transparent 3px),
  radial-gradient(circle at 42% 67%, rgba(255,210,140,.9) 0 1px, transparent 3px),
  radial-gradient(circle at 46% 95%, rgba(255,150,90,.85)  0 1px, transparent 3px),

  radial-gradient(circle at 50% 10%, rgba(255,200,120,.9) 0 1px, transparent 3px),
  radial-gradient(circle at 54% 48%, rgba(255,170,100,.85) 0 1px, transparent 3px),
  radial-gradient(circle at 58% 78%, rgba(255,230,160,.9) 0 1px, transparent 3px),
  radial-gradient(circle at 62% 30%, rgba(255,160,90,.85)  0 1px, transparent 3px),
  radial-gradient(circle at 66% 63%, rgba(255,210,140,.9) 0 1px, transparent 3px),
  radial-gradient(circle at 70% 92%, rgba(255,150,90,.85)  0 1px, transparent 3px),

  radial-gradient(circle at 74% 16%, rgba(255,200,120,.9) 0 1px, transparent 3px),
  radial-gradient(circle at 78% 50%, rgba(255,170,100,.85) 0 1px, transparent 3px),
  radial-gradient(circle at 82% 84%, rgba(255,230,160,.9) 0 1px, transparent 3px),
  radial-gradient(circle at 86% 36%, rgba(255,160,90,.85)  0 1px, transparent 3px),
  radial-gradient(circle at 90% 68%, rgba(255,210,140,.9) 0 1px, transparent 3px),
  radial-gradient(circle at 95% 94%, rgba(255,180,110,.85) 0 1px, transparent 3px),

  radial-gradient(circle at 12% 98%, rgba(255,200,120,.95) 0 2px, transparent 6px),
  radial-gradient(circle at 28% 96%, rgba(255,170,100,.95) 0 2px, transparent 6px),
  radial-gradient(circle at 44% 99%, rgba(255,230,160,.95) 0 2px, transparent 6px),
  radial-gradient(circle at 61% 97%, rgba(255,160,90,.95)  0 2px, transparent 6px),
  radial-gradient(circle at 78% 98%, rgba(255,210,140,.95) 0 2px, transparent 6px),
  radial-gradient(circle at 92% 96%, rgba(255,180,110,.95) 0 2px, transparent 6px);

  background-size: 120% 120%;
  background-position: 0 0;

  opacity:.95;
  filter: blur(.25px);

  animation:
    sparksUp 2.2s linear infinite,
    sparksDrift 7.5s ease-in-out infinite alternate;
}

@keyframes sparksUp{
  from{ transform: translate3d(0,160px,0); }
  to  { transform: translate3d(-80px,-420px,0); }
}

@keyframes sparksDrift{
  from{ transform: translate3d(-40px,0,0); }
  to  { transform: translate3d( 40px,0,0); }
}

.hero-content{
  position:relative;
  z-index:1;
  width:100%;
  padding:80px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}

.logo { width:110px; height:110px; margin-bottom:20px; }
.logo--gif{ background: url("./assets/hero.gif") center / cover no-repeat; color:transparent; }

h1{
  font-size:56px;
  margin:0;
  line-height:1.05;
  letter-spacing:.2px;
}
h1 span{
  color:var(--red);
  text-shadow:0 0 24px rgba(224,24,45,.35);
}

.subtitle{ opacity:.85; margin:10px 0 34px; }

.actions{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  max-width:900px;
  width:100%;
}

.card{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 20px;
  color:#fff;
  transition:.2s;
}
.card:hover{
  transform: translateY(-4px);
  background: rgba(255,255,255,.12);
}

.card strong{display:block; margin-top:6px}
.card small{display:block; opacity:.75; margin-top:6px;}

.card.red{
  background: linear-gradient(135deg, var(--red), var(--red2));
  border:none;
}

@media (max-width:900px){
  .actions{grid-template-columns:1fr;}
  h1{font-size:42px;}
  .hero-content{padding:70px 18px;}
  .logo{width:96px;height:96px;}
}