/* =====================================================
   PORTFOLIO PAGE — SOFTFLOW PREMIUM
   overrides styles.css safely
===================================================== */

/* =============== PAGE BACKGROUND =============== */

.page-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
}

.page-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.05) saturate(1.15);
}

/* ===============================
   GLOBAL SOFTFLOW BACKGROUND
================================ */

.page-bg {
  position: fixed;
  inset: 0;
  z-index: -3;

  background:
    radial-gradient(circle at 20% 30%, rgba(255,235,200,0.45), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(255,215,170,0.35), transparent 60%),
    linear-gradient(
      135deg,
      #fff7ee 0%,
      #f7e2c7 35%,
      #f2d6b2 65%,
      #fff1df 100%
    );
}

/* Искры поверх фона */
.spark-flow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;

  background-image: url("assets/star-area.png");
  background-size: cover;
  background-repeat: repeat;
  opacity: 0.45;
}

/* =============== HERO =============== */

/* ===== HERO FIX: LAYERS ===== */

.portfolio-hero {
  position: relative;
  width: 100%;
  height: clamp(420px, 55vw, 620px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  z-index: 2;
}

.portfolio-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1.05) saturate(1.15);
  z-index: 1;
}

.portfolio-hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 50% 45%,
    rgba(255,255,255,0.28) 0%,
    rgba(255,245,230,0.12) 35%,
    rgba(0,0,0,0.10) 100%
  );
  z-index: 2;
}

.portfolio-hero-content {
  position: relative;
  z-index: 6;
  text-align: center;
  padding: 0 18px;
}

/* ===== HERO FLOAT visible ALWAYS ===== */

.hero-float {
  position: absolute;
  inset: 0;
  z-index: 5;          /* ВАЖНО: выше overlay */
  pointer-events: none;
}

.hero-float img {
  position: absolute;
  opacity: 0.92;
  animation: heroFloat 14s ease-in-out infinite;
  filter:
    blur(0.6px)
    drop-shadow(0 0 14px rgba(255,220,150,0.55))
    drop-shadow(0 0 28px rgba(255,200,120,0.35));
}

/* чтобы nth-child работал предсказуемо */
.hero-float img:nth-child(1) { width: 200px; left: 14%; top: 10%; animation-duration: 18s; }
.hero-float img:nth-child(2) { width: 170px; right: 30%; top: 62%; animation-duration: 20s; }
.hero-float img:nth-child(3) { width: 160px; left: 48%; top: 6%;  animation-duration: 22s; }

.hero-float img:nth-child(4) { width: 260px; right: 4%;  top: 52%; animation-duration: 12s; }
.hero-float img:nth-child(5) { width: 190px; left: 6%;  top: 44%; animation-duration: 14s; }
.hero-float img:nth-child(6) { width: 190px; right: 14%; top: 14%; animation-duration: 16s; }
.hero-float img:nth-child(7) { width: 130px; left: 32%; top: 68%; animation-duration: 18s; }

@keyframes heroFloat {
  0% { transform: translateY(0); }
  50% { transform: translateY(-26px); }
  100% { transform: translateY(0); }
}

@media (max-width: 620px) {
  .hero-float { display: none; }
}


/* =============== SECTIONS BASE =============== */

section {
  position: relative;
  z-index: 2;
}

/* =============== PORTFOLIO BLOCKS =============== */

.portfolio-cards,
.ai-transform-section,
.case-showcase {
  padding: 120px 0;
  text-align: center;
}

/* =============== GRID (UNIFIED LIKE SOLUTIONS) =============== */

.cards-grid,
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  justify-items: center;
  margin-top: 60px;
}

/* allow +3 easily */
.cards-grid > *,
.portfolio-grid > * {
  width: 100%;
  max-width: 340px;
}

/* =============== CARD STYLE — ONE SYSTEM =============== */

.site-card,
.portfolio-card {
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(10px);
  border-radius: 36px;
  padding: 26px;
  box-shadow:
    0 0 26px rgba(255,220,180,0.45),
    inset 0 0 18px rgba(255,255,255,0.65);
  transition: 0.4s ease;
  text-align: center;
}

.site-card:hover,
.portfolio-card:hover {
  transform: translateY(-10px);
  box-shadow:
    0 0 42px rgba(255,230,190,0.75),
    inset 0 0 22px rgba(255,255,255,0.95);
}

/* =============== CARD IMAGE =============== */

.site-card__image img,
.portfolio-thumb img {
  width: 100%;
  border-radius: 28px;
  display: block;
  object-fit: cover;
}

/* =============== TEXT =============== */

.site-card h3,
.portfolio-card h3 {
  font-size: 24px;
  margin: 22px 0 12px;
  color: #5a341c;
}

.site-card p,
.portfolio-card p {
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.9;
  margin-bottom: 24px;
}

/* =============== BUTTON =============== */

.softflow-btn {
  display: inline-block;
  padding: 14px 38px;
  font-size: 16px;
  font-weight: 600;
  color: #4b2f23;
  text-decoration: none;
  border-radius: 40px;
  background: linear-gradient(
    135deg,
    #f5d7b0,
    #fff3e1,
    #f0d4a6
  );
  box-shadow:
    0 0 14px rgba(255,230,190,0.65),
    inset 0 0 12px rgba(255,255,255,0.85);
  transition: 0.35s ease;
}

.softflow-btn:hover {
  transform: translateY(-3px) scale(1.04);
}

/* =============== MOCKUP FRAME (AI + LOGO) =============== */

.mockup-frame,
.case-showcase__frame {
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(8px);
  border-radius: 28px;
  padding: 22px;
  box-shadow:
    0 0 18px rgba(255,230,200,0.65),
    inset 0 0 14px rgba(255,255,255,0.75);
  transition: 0.35s ease;
}

.mockup-frame:hover,
.case-showcase__frame:hover {
  transform: scale(1.03);
}

/* =============== ADAPTIVE =============== */

@media (max-width: 960px) {
  .cards-grid,
  .portfolio-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .cards-grid,
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
  .hero-float {
    display: none;
  }
}

/* ===== VIDEO MODAL — FIX CENTER ===== */

.video-modal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;

  display: none;              /* включается JS */
  align-items: center;        /* центр по вертикали */
  justify-content: center;    /* центр по горизонтали */

  background: rgba(0, 0, 0, 0.82);
  z-index: 999999;
}

.video-modal-content {
  position: relative;
  max-width: 90vw;
  max-height: 85vh;
}

.video-modal-content video {
  width: 100%;
  max-height: 85vh;
  border-radius: 18px;
  box-shadow: 0 0 60px rgba(255,220,170,0.55);
}

.video-close {
  position: absolute;
  top: -48px;
  right: 0;
  font-size: 42px;
  color: #fff;
  cursor: pointer;
}