@charset "UTF-8"; /*# The coding page CSS */
/**
 * =============================================================================
 * @encoding UTF-8
 * @author [Zerohold](//zerohold.sd1.su)
 * @project [ZZ2 Ecosystem](https://docs.sd1.su)
 * @summary [Variant 07: Cyber Clay (Soft Industrial)]
 * @created 2025-12
 * @modified 2025-12
 *
 * @file D:/kz/kz-controls/sd1.su/docs.sd1.su/examples/hero-section-premium/style-07.css
 * @link https://docs.sd1.su/examples/hero-section-premium/style-07.css
 *
 * @remarks
 * - "Claymorphism" adapted for a dark, cyber context
 * - Soft, tactile 3D elements with inner shadows
 * - Matte finish surfaces
 * - Primary buttons: Extruded Pop (Both)
 * - Animations: Blob Float, Icon Breathe, Button Press (No Translate)
 * =============================================================================
 */

/* --- Layout & Background --- */

body
{
  background-color: rgb(43, 45, 66);
  color: rgb(237, 242, 244);
}

.hero-section
{
  background-color: rgb(43, 45, 66);
  /* subtle noise texture could be added here if available */
  position: relative;
  overflow: hidden;
  padding: 8rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Decorative abstract clay shapes in background */
.hero-section::before,
.hero-section::after
{
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.4;
  z-index: 1;
  animation: blob-float 10s infinite alternate ease-in-out;
}

.hero-section::before
{
  top: -10%;
  left: -10%;
  width: 600px;
  height: 600px;
  background: rgb(239, 35, 60);
  animation-delay: 0s;
}

.hero-section::after
{
  bottom: -10%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: rgb(58, 134, 255);
  animation-delay: -5s;
}

@keyframes blob-float
{
  0%
  {
    transform: translate(0, 0) scale(1);
  }
  100%
  {
    transform: translate(50px, 50px) scale(1.1);
  }
}

/* --- Content Styling --- */

.hero-content
{
  position: relative;
  z-index: 10;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  /* Clay card effect */
  background: rgba(43, 45, 66, 0.7);
  backdrop-filter: blur(20px);
  border-radius: 32px; /* Soft but controlled */
  padding: 5rem 3rem;
  box-shadow: 20px 20px 60px rgb(35, 37, 54),
  -20px -20px 60px rgb(51, 53, 78),
  inset 0 0 0 rgba(255, 255, 255, 0.05); /* Subtle inner highlight */
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.hero-icon
{
  margin-bottom: 2.5rem;
  display: inline-flex;
  padding: 2rem;
  background: rgb(43, 45, 66);
  border-radius: 50%;
  /* Soft convex shape */
  box-shadow: 8px 8px 16px rgb(35, 37, 54),
  -8px -8px 16px rgb(51, 53, 78);
  color: rgb(141, 153, 174);
  animation: clay-breathe 4s ease-in-out infinite;
}

@keyframes clay-breathe
{
  0%, 100%
  {
    box-shadow: 8px 8px 16px rgb(35, 37, 54), -8px -8px 16px rgb(51, 53, 78);
    transform: scale(1);
  }
  50%
  {
    box-shadow: 12px 12px 24px rgb(35, 37, 54), -12px -12px 24px rgb(51, 53, 78);
    transform: scale(1.05);
  }
}

.hero-icon svg
{
  width: 90px;
  height: 90px;
  color: rgb(237, 242, 244);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
}

.hero-title
{
  font-weight: 800;
  color: rgb(237, 242, 244);
  margin-bottom: 1.5rem;
  letter-spacing: -0.5px;
}

.hero-subtitle
{
  color: rgb(141, 153, 174);
  font-size: 1.25rem;
  margin-bottom: 4rem;
  font-weight: 500;
}

/* --- Buttons --- */

.hero-buttons
{
  display: flex;
  gap: 2rem;
  justify-content: center;
}

.btn-primary
{
  padding: 1.2rem 3rem;
  border-radius: 50px; /* Pill shape common in claymorphism */
  font-weight: 700;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  border: none;
  background: rgb(239, 35, 60);
  color: rgb(255, 255, 255);
  box-shadow: 6px 6px 12px rgb(32, 26, 34),
  -6px -6px 12px rgb(62, 56, 72),
  inset 2px 2px 5px rgba(255, 255, 255, 0.2),
  inset -2px -2px 5px rgba(0, 0, 0, 0.2);
}

.btn-primary:hover
{
  /* No Translate */
  box-shadow: 8px 8px 16px rgb(32, 26, 34),
  -8px -8px 16px rgb(62, 56, 72),
  inset 2px 2px 5px rgba(255, 255, 255, 0.2);
  filter: brightness(1.1);
}