@charset "UTF-8"; /*# The coding page CSS */
/**
 * =============================================================================
 * @encoding UTF-8
 * @author [Zerohold](//zerohold.sd1.su)
 * @project [ZZ2 Ecosystem](https://docs.sd1.su)
 * @summary [Variant 12: Isometric Dimension (3D Depth)]
 * @created 2025-12
 * @modified 2025-12
 *
 * @file D:/kz/kz-controls/sd1.su/docs.sd1.su/examples/hero-section-premium/style-12.css
 * @link https://docs.sd1.su/examples/hero-section-premium/style-12.css
 *
 * @remarks
 * - "Isometric Dimension" & Spatial UI trend
 * - Pseudo-3D transforms for depth
 * - Isometric grid background
 * - Floating elements with layered shadows
 * - Vivid, digital-first color palette (Violet/Cyan/Pink)
 * - Primary buttons: 3D "Pressable" Block (Both)
 * - Animations: 3D Tilt on Hover, Pop-out elements, Press effect
 * =============================================================================
 */

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

body
{
  background-color: rgb(26, 26, 46);
  color: rgb(255, 255, 255);
  perspective: 1500px; /* Enable 3D space for the page */
}

.hero-section
{
  background-color: rgb(26, 26, 46);
  background-image: linear-gradient(30deg, rgb(35, 35, 66) 12%, transparent 12.5%, transparent 87%, rgb(35, 35, 66) 87.5%, rgb(35, 35, 66)),
  linear-gradient(150deg, rgb(35, 35, 66) 12%, transparent 12.5%, transparent 87%, rgb(35, 35, 66) 87.5%, rgb(35, 35, 66)),
  linear-gradient(30deg, rgb(35, 35, 66) 12%, transparent 12.5%, transparent 87%, rgb(35, 35, 66) 87.5%, rgb(35, 35, 66)),
  linear-gradient(150deg, rgb(35, 35, 66) 12%, transparent 12.5%, transparent 87%, rgb(35, 35, 66) 87.5%, rgb(35, 35, 66)),
  linear-gradient(60deg, rgb(31, 31, 58) 25%, transparent 25.5%, transparent 75%, rgb(31, 31, 58) 75%, rgb(31, 31, 58)),
  linear-gradient(60deg, rgb(31, 31, 58) 25%, transparent 25.5%, transparent 75%, rgb(31, 31, 58) 75%, rgb(31, 31, 58));
  background-size: 80px 140px;
  background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
  position: relative;
  overflow: hidden;
  padding: 8rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Floating light beams */
.hero-section::before
{
  content: '';
  position: absolute;
  top: -20%;
  left: 20%;
  width: 200px;
  height: 200%;
  background: linear-gradient(to bottom, rgba(162, 155, 254, 0.1), transparent);
  transform: rotate(35deg);
  filter: blur(20px);
}

.hero-section::after
{
  content: '';
  position: absolute;
  top: -20%;
  right: 20%;
  width: 150px;
  height: 200%;
  background: linear-gradient(to bottom, rgba(253, 121, 168, 0.08), transparent);
  transform: rotate(-35deg);
  filter: blur(30px);
}

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

.hero-content
{
  position: relative;
  z-index: 10;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  /* 3D Tilted Card */
  background: rgba(35, 35, 66, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 5rem 3rem;
  box-shadow: 20px 20px 60px rgba(0, 0, 0, 0.5),
  -5px -5px 20px rgba(255, 255, 255, 0.05);
  transform: rotateX(5deg) rotateY(-5deg); /* Slight 3D tilt */
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

.hero-content:hover
{
  transform: rotateX(0deg) rotateY(0deg) translateZ(20px);
}

.hero-icon
{
  margin-bottom: 2.5rem;
  display: inline-flex;
  padding: 1rem;
  background: rgba(162, 155, 254, 0.1);
  border-radius: 50%;
  transform: translateZ(40px); /* Pop out */
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
  border: 1px solid rgba(162, 155, 254, 0.2);
}

.hero-icon svg
{
  width: 90px;
  height: 90px;
  color: rgb(162, 155, 254); /* Soft violet */
}

.hero-title
{
  font-weight: 800;
  color: rgb(255, 255, 255);
  margin-bottom: 1.5rem;
  font-size: 3.5rem;
  text-shadow: 4px 4px 0 rgb(108, 92, 231); /* Block shadow */
  transform: translateZ(30px);
}

.hero-subtitle
{
  color: rgb(223, 230, 233);
  font-size: 1.25rem;
  margin-bottom: 4rem;
  font-weight: 400;
  transform: translateZ(20px);
}

/* --- Buttons --- */

.hero-buttons
{
  display: flex;
  gap: 2rem;
  justify-content: center;
  transform: translateZ(40px);
}

.btn-primary
{
  padding: 1rem 2.5rem;
  border-radius: 12px;
  font-weight: 700;
  transition: all 0.2s ease;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  position: relative;
  /* 3D Block Button */
  background: rgb(9, 132, 227);
  color: rgb(255, 255, 255);
  border: none;
  box-shadow: 0 6px 0 rgb(0, 86, 179),
  0 15px 20px rgba(0, 0, 0, 0.2);
  transform: translateY(0);
}

.btn-primary:hover
{
  /* Press Effect */
  transform: translateY(4px);
  box-shadow: 0 2px 0 rgb(0, 86, 179),
  0 5px 10px rgba(0, 0, 0, 0.2);
  color: rgb(255, 255, 255);
}

.btn-primary:active
{
  transform: translateY(6px);
  box-shadow: 0 0 0 rgb(0, 86, 179);
}