/* ============================================
   AQUASTEALTH - Section Layouts v4
   Full-page snap sections, generous spacing
   ============================================ */

/* ---- Section 1: Hero ---- */
.hero {
  background: var(--bg-deepest);
}

/* Three.js Canvas */
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero__content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.hero__subtitle {
  font-size: var(--text-lg);
  color: var(--text-muted);
  margin-bottom: clamp(0.75rem, 2vh, 2rem);
  font-weight: 300;
}

.hero__title {
  margin-bottom: clamp(1rem, 3vh, 2.5rem);
  line-height: 1.05;
}

.hero__title .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s var(--ease-out);
}

.hero__title.is-revealed .word {
  opacity: 1;
  transform: translateY(0);
}

.hero__description {
  font-size: var(--text-xl);
  color: var(--text-secondary);
  margin-bottom: clamp(1.5rem, 4vh, 3rem);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero__ctas {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: center;
}

/* ---- Section 2: О Водороде ---- */
.hydrogen {
  background: var(--bg-deep);
}

.hydrogen__grid {
  display: grid;
  grid-template-columns: 60% 40%;
  gap: var(--space-xl);
  align-items: center;
}

.hydrogen__text {
  font-size: var(--text-base);
  line-height: 1.8;
}

.hydrogen__image {
  position: relative;
  opacity: 0.2;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

.hydrogen__image img {
  width: 100%;
  height: auto;
  aspect-ratio: 1683 / 1190;
  object-fit: cover;
  border-radius: var(--border-radius);
}

.hydrogen__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: clamp(2rem, 4vh, 4rem);
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.hydrogen__stats .stat-card {
  background: var(--bg-deep);
  padding: clamp(1rem, 2.5vh, 2.5rem) var(--space-sm);
}

/* ---- Section 3: Атом Водорода ---- */
.atom-section {
  background: var(--bg-deepest);
  position: relative;
}

.atom-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.atom-section__text h2 {
  margin-bottom: clamp(1rem, 2.5vh, 2rem);
}

.atom-section__description {
  font-size: var(--text-lg);
  line-height: 1.8;
  margin-bottom: clamp(1.5rem, 3.5vh, 3rem);
}

.atom-section__info-box {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  padding: clamp(1.25rem, 3vh, 2.5rem);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.7;
}

/* Atom Visualization */
.atom-viz {
  position: relative;
  width: 100%;
  max-width: min(500px, 50vh);
  aspect-ratio: 1;
  margin: 0 auto;
}

.atom-viz__ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(34, 209, 238, 0.08);
  animation: ripple-pulse 4s infinite ease-out;
}

.atom-viz__ripple:nth-child(1) { width: 60%; height: 60%; animation-delay: 0s; }
.atom-viz__ripple:nth-child(2) { width: 80%; height: 80%; animation-delay: 1.3s; }
.atom-viz__ripple:nth-child(3) { width: 100%; height: 100%; animation-delay: 2.6s; }

.atom-viz__proton {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent), var(--cyan-600));
  box-shadow: 0 0 40px var(--accent-glow), 0 0 80px rgba(34, 209, 238, 0.15);
  animation: proton-pulse 3s infinite ease-in-out;
  z-index: 3;
}

.atom-viz__orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(34, 209, 238, 0.2);
  border-radius: 50%;
  animation: orbit-spin 8s infinite linear;
}

.atom-viz__orbit--1 {
  width: 70%;
  height: 70%;
  transform: translate(-50%, -50%) rotateX(60deg);
}

.atom-viz__orbit--2 {
  width: 75%;
  height: 75%;
  transform: translate(-50%, -50%) rotateX(60deg) rotateZ(60deg);
  animation-duration: 12s;
  animation-direction: reverse;
}

.atom-viz__electron {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow), 0 0 20px var(--accent-glow);
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

/* ---- Section 4: Свободные Радикалы ---- */
.radicals {
  background: var(--bg-mid);
  position: relative;
}

.radicals__bg {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background: url('../images/molecules.png') center / cover no-repeat;
  pointer-events: none;
}

.radicals__cards {
  display: grid;
  gap: clamp(1.5rem, 3.5vh, 3rem);
  max-width: 950px;
  margin: clamp(2rem, 5vh, 5rem) auto 0;
}

/* ---- Section 5: Водород Антиоксидант ---- */
.antioxidant {
  background: var(--bg-deep);
}

.antioxidant__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vh, 2.5rem);
  margin-top: clamp(2rem, 5vh, 5rem);
}

/* ---- Section 6: Бизнес-преимущества ---- */
.business {
  background: var(--bg-deepest);
}

.business__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 2.5vh, 2.5rem);
  margin-top: clamp(2rem, 5vh, 5rem);
}

.business__revenue {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  color: var(--cta);
  text-shadow: 0 0 20px var(--cta-glow);
}

.business__cta {
  text-align: center;
  margin-top: clamp(1.5rem, 4vh, 4rem);
}

/* ---- Section 7: Показания ---- */
.indications {
  background: var(--bg-mid);
}

.indications__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.75rem, 1.5vh, 1.25rem);
  margin-top: clamp(2rem, 4vh, 4rem);
}

/* ---- Section 8: О Процедуре ---- */
.procedure {
  background: var(--bg-deep);
}

.procedure__grid {
  display: grid;
  grid-template-columns: 55% 45%;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.procedure__image {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.procedure__image img {
  width: 100%;
  max-height: 68vh;
  height: auto;
  aspect-ratio: 1409 / 1190;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(34, 209, 238, 0.08);
}

.procedure__image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10, 22, 40, 0.3) 0%, transparent 60%);
  border-radius: var(--radius-lg);
}

/* ---- Section 9: Устройство ---- */
.device-section {
  background: var(--bg-deepest);
  position: relative;
}

.device-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.device-section__image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.device-section__image img {
  width: 100%;
  max-width: 320px;
  max-height: 65vh;
  height: auto;
  aspect-ratio: 720 / 1200;
  object-fit: contain;
  border-radius: var(--border-radius);
  position: relative;
  z-index: 1;
  animation: device-float 6s ease-in-out infinite;
  filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 60px rgba(34, 209, 238, 0.15));
}

.device-section__image::before {
  content: '';
  position: absolute;
  width: 85%;
  height: 85%;
  background: radial-gradient(ellipse at center, rgba(34, 209, 238, 0.12) 0%, transparent 60%);
  border-radius: 50%;
  z-index: 0;
}

.device-section__description {
  font-size: var(--text-lg);
  line-height: 1.8;
  margin-bottom: clamp(1.5rem, 3.5vh, 3rem);
}

.device-section__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* ---- Section 10: Тех. Характеристики ---- */
.specs {
  background: var(--bg-mid);
  position: relative;
  overflow: hidden;
}

.specs__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.specs__bars {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.8vh, 1.5rem);
}

.specs__image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.specs__image img {
  width: 100%;
  max-width: 300px;
  max-height: 60vh;
  height: auto;
  aspect-ratio: 720 / 1200;
  object-fit: contain;
  border-radius: var(--border-radius);
  position: relative;
  z-index: 1;
  animation: device-float 8s ease-in-out infinite;
  filter: drop-shadow(0 15px 40px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 60px rgba(34, 209, 238, 0.15));
}

.specs__image::before {
  content: '';
  position: absolute;
  width: 75%;
  height: 75%;
  background: radial-gradient(ellipse at center, rgba(34, 209, 238, 0.08) 0%, transparent 60%);
  border-radius: 50%;
}

/* H2 Bubbles */
.specs__bubbles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.h2-bubble {
  position: absolute;
  border-radius: 50%;
  background: rgba(34, 209, 238, 0.06);
  border: 1px solid rgba(34, 209, 238, 0.1);
  animation: bubble-rise 10s infinite ease-in-out;
}

/* ---- Section 11: Где Использовать ---- */
.usage {
  background: var(--bg-deep);
}

.usage__description {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  max-width: 700px;
  margin-bottom: clamp(1.5rem, 4vh, 4rem);
}

.usage__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2.5vh, 2rem);
}

/* ---- Section 12: Контакты ---- */
.contacts {
  background: var(--bg-deepest);
  text-align: center;
  align-items: flex-end;
  padding-bottom: clamp(2rem, 4vh, 4rem);
}

.contacts__logo {
  width: min(360px, 50vw);
  height: auto;
  margin: 0 auto clamp(1.5rem, 3vh, 3rem);
  opacity: 0.9;
  filter: drop-shadow(0 0 40px rgba(34, 209, 238, 0.1));
}

.contacts__title {
  margin-bottom: clamp(1rem, 2vh, 2rem);
}

.contacts__description {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto clamp(1.5rem, 3vh, 3rem);
}

.contacts__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  color: var(--text-primary);
  margin-bottom: clamp(1.5rem, 3vh, 3rem);
  transition: color var(--duration-fast) ease;
}

.contacts__phone:hover {
  color: var(--accent);
}

.contacts__cta {
  margin-top: clamp(0.75rem, 2vh, 2rem);
}

/* Footer text within contacts */
.contacts__footer {
  margin-top: clamp(2rem, 4vh, 4rem);
  font-size: var(--text-xs);
  color: var(--text-faint);
}

/* ---- Section Title (shared) ---- */
.section__title {
  text-align: center;
  margin-bottom: clamp(1rem, 2.5vh, 2rem);
  position: relative;
  display: inline-block;
  width: 100%;
}

.section__title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--cyan-300));
  border-radius: 2px;
  margin: clamp(0.5rem, 1.2vh, 1rem) auto 0;
}

.section__title--left {
  text-align: left;
}

.section__title--left::after {
  margin-left: 0;
  margin-right: auto;
}