@charset "UTF-8"; /*# The coding page CSS */
/**
 * =============================================================================
 * @encoding UTF-8
 * @author [Zerohold](//zerohold.sd1.su)
 * @project [ZZ2 Ecosystem](https://docs.sd1.su)
 * @summary [Variant 11: Liquid Metal (Chromium)]
 * @created 2025-12
 * @modified 2025-12
 *
 * @file D:/kz/kz-controls/sd1.su/docs.sd1.su/examples/hero-section-premium/style-11.css
 * @link https://docs.sd1.su/examples/hero-section-premium/style-11.css
 *
 * @remarks
 * - "Liquid Metal" & Y2K Futurism influence
 * - Dark background with flowing metallic gradients
 * - Chrome typography and glossy elements
 * - Distortion filters for "fluid" feel
 * - High contrast, sharp reflections
 * - Primary buttons: Liquid Silver Gradient (Both)
 * - Animations: Fluid Flow, Icon Rotate/Pulse, Button Scale (No Translate)
 * =============================================================================
 */

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

body
{
  background-color: rgb(5, 5, 5);
  color: rgb(224, 224, 224);
}

.hero-section
{
  background-color: rgb(0, 0, 0);
  position: relative;
  overflow: hidden;
  padding: 8rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Liquid flow simulation */
.hero-section::before
{
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(100, 100, 100, 0.15) 0%, transparent 60%);
  background-size: 50% 50%;
  animation: flow 15s linear infinite;
  pointer-events: none;
}

@keyframes flow
{
  0% { transform: rotate(0deg) translate(0, 0); }
  50% { transform: rotate(180deg) translate(50px, 50px); }
  100% { transform: rotate(360deg) translate(0, 0); }
}

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

.hero-content
{
  position: relative;
  z-index: 10;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  /* Dark Glassy Container */
  background: rgba(20, 20, 20, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 40px;
  padding: 5rem 3rem;
  box-shadow: 0 0 50px rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
}

.hero-icon
{
  margin-bottom: 2.5rem;
  display: inline-flex;
  padding: 1.5rem;
  /* Chrome effect */
  background: linear-gradient(135deg, rgb(33, 33, 33) 0%, rgb(0, 0, 0) 100%);
  border-radius: 50%;
  border: 2px solid rgb(85, 85, 85);
  box-shadow:
    0 0 15px rgba(255, 255, 255, 0.1),
    inset 0 0 20px rgba(255, 255, 255, 0.05);
  animation: pulse-chrome 4s ease-in-out infinite;
}

@keyframes pulse-chrome
{
  0%, 100% { box-shadow: 0 0 15px rgba(255, 255, 255, 0.1); border-color: rgb(85, 85, 85); }
  50% { box-shadow: 0 0 25px rgba(255, 255, 255, 0.3); border-color: rgb(153, 153, 153); }
}

.hero-icon svg
{
  width: 90px;
  height: 90px;
  color: rgb(192, 192, 192);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3));
}

.hero-title
{
  font-weight: 800;
  color: transparent;
  margin-bottom: 1.5rem;
  font-size: 4rem;
  letter-spacing: -2px;
  /* Chrome Text Gradient */
  background: linear-gradient(to bottom, rgb(255, 255, 255) 0%, rgb(160, 160, 160) 50%, rgb(64, 64, 64) 51%, rgb(255, 255, 255) 100%);
  background-clip: text;
  text-transform: uppercase;
}

.hero-subtitle
{
  color: rgb(160, 160, 160);
  font-size: 1.25rem;
  margin-bottom: 4rem;
  font-weight: 300;
  letter-spacing: 1px;
}

/* --- Buttons --- */

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

.btn-primary
{
  padding: 1rem 3rem;
  border-radius: 50px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.9rem;
  letter-spacing: 2px;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  /* Liquid Silver */
  background: linear-gradient(0deg, rgb(176, 176, 176) 0%, rgb(255, 255, 255) 50%, rgb(176, 176, 176) 100%);
  color: rgb(0, 0, 0);
  border: none;
  box-shadow:
    0 5px 15px rgba(255, 255, 255, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.btn-primary:hover
{
  /* No Translate */
  transform: scale(1.05);
  box-shadow:
    0 0 25px rgba(255, 255, 255, 0.4),
    inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  color: rgb(0, 0, 0);
}