/* /Components/PageSimpleWrapper.razor.rz.scp.css */
/* Container */
/*.page_wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 1rem 2rem;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(180deg, #2b3cff 0%, #071029 72%);
  min-height: 520px;
}*/

/* Intro text sits above waves */
/*.intro-text {
  position: relative;
  z-index: 20;
  max-width: 940px;
  padding: 0 1rem;
}*/

/* Wave animation wrapper */
/*.wave-animation {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48%;
  pointer-events: none;
  overflow: hidden;
  z-index: 10;
}*/

/* Base for all svg waves
   Important: start at left:0 so the visible edge is aligned with page left.
   Width intentionally >100% to ensure continuity when animating. */
/*.wave {
  position: absolute;
  left: 0;*/                 /* come�a alinhado ao canto esquerdo � requisito */
  /*bottom: 0;
  width: 260%;*/             /* maior que a tela para continuidade */
  /*height: 160%;
  transform: translateX(0);
  will-change: transform;
}*/

/* Path styles; fills control final visual */
/*.wave path {
  vector-effect: non-scaling-stroke;
  transition: none;
  shape-rendering: geometricPrecision;
}*/

/* Individual depth, opacity and animation timing to create parallax */
/*.wave1 {*/ /* front - most visible */
  /*z-index: 30;
  opacity: 0.95;
  fill: #ffffff;
  animation: wave1Anim 7.2s cubic-bezier(.33,.66,.66,.34) infinite;
}

.wave2 {*/ /* middle */
  /*z-index: 20;
  opacity: 0.78;
  fill: rgba(255,255,255,0.92);
  animation: wave2Anim 11.6s cubic-bezier(.25,.5,.5,.75) infinite;
  filter: blur(.2px);
}

.wave3 {*/ /* back */
  /*z-index: 15;
  opacity: 0.62;
  fill: rgba(255,255,255,0.88);
  animation: wave3Anim 20s linear infinite;
  filter: blur(.8px) saturate(1.02);
}*/

/* Animations:
   - Start at translateX(0) (left:0 visible)
   - Move left (negative translateX) so waves flow from right to left
   - Distinct distances and durations for natural parallax */
/*@keyframes wave1Anim {
  0%   { transform: translateX(0) translateY(0)   ; }
  25%  { transform: translateX(-18%) translateY(6px) ; }
  50%  { transform: translateX(-36%) translateY(0)   ; }
  75%  { transform: translateX(-18%) translateY(-6px); }
  100% { transform: translateX(0) translateY(0)     ; }
}

@keyframes wave2Anim {
  0%   { transform: translateX(0) translateY(0); }
  50%  { transform: translateX(-28%) translateY(10px); }
  100% { transform: translateX(0) translateY(0); }
}

@keyframes wave3Anim {
  0%   { transform: translateX(0) translateY(0); }
  50%  { transform: translateX(-42%) translateY(-12px); }
  100% { transform: translateX(0) translateY(0); }
}*/

/* Small vertical breathing on the group for extra realism */
/*@keyframes wavesGroupFloat {
  0% { transform: translateY(0); }
  50% { transform: translateY(6px); }
  100% { transform: translateY(0); }
}
.wave-animation { animation: wavesGroupFloat 20s ease-in-out infinite; }*/

/* Responsive adjustments */
/*@media (max-width: 992px) {
  .page_wrapper { padding-top: 5rem; min-height: 480px; }
  .wave { width: 320%; height: 200%; }
  .intro-text h1 { font-size: 1.9rem; }
}

@media (max-width: 576px) {
  .page_wrapper { padding-top: 4rem; min-height: 420px; }
  .wave { width: 380%; height: 240%; }
  .intro-text h1 { font-size: 1.6rem; }
}*/
/* /Components/PageWrapper.razor.rz.scp.css */
/* Container */
/*.page_wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 1rem 2rem;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(180deg, #2b3cff 0%, #071029 72%);
  min-height: 520px;
}*/

/* Intro text sits above waves */
/*.intro-text {
  position: relative;
  z-index: 20;
  max-width: 940px;
  padding: 0 1rem;
}*/

/* Wave animation wrapper */
/*.wave-animation {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48%;
  pointer-events: none;
  overflow: hidden;
  z-index: 10;
}*/

/* Base for all svg waves
   Important: start at left:0 so the visible edge is aligned with page left.
   Width intentionally >100% to ensure continuity when animating. */
/*.wave {
  position: absolute;
  left: 0;*/                 /* come�a alinhado ao canto esquerdo � requisito */
  /*bottom: 0;
  width: 260%;*/             /* maior que a tela para continuidade */
  /*height: 160%;
  transform: translateX(0);
  will-change: transform;
}*/

/* Path styles; fills control final visual */
/*.wave path {
  vector-effect: non-scaling-stroke;
  transition: none;
  shape-rendering: geometricPrecision;
}*/

/* Individual depth, opacity and animation timing to create parallax */
/*.wave1 {*/ /* front - most visible */
  /*z-index: 30;
  opacity: 0.95;
  fill: #ffffff;
  animation: wave1Anim 7.2s cubic-bezier(.33,.66,.66,.34) infinite;
}

.wave2 {*/ /* middle */
  /*z-index: 20;
  opacity: 0.78;
  fill: rgba(255,255,255,0.92);
  animation: wave2Anim 11.6s cubic-bezier(.25,.5,.5,.75) infinite;
  filter: blur(.2px);
}

.wave3 {*/ /* back */
  /*z-index: 15;
  opacity: 0.62;
  fill: rgba(255,255,255,0.88);
  animation: wave3Anim 20s linear infinite;
  filter: blur(.8px) saturate(1.02);
}*/

/* Animations:
   - Start at translateX(0) (left:0 visible)
   - Move left (negative translateX) so waves flow from right to left
   - Distinct distances and durations for natural parallax */
/*@keyframes wave1Anim {
  0%   { transform: translateX(0) translateY(0)   ; }
  25%  { transform: translateX(-18%) translateY(6px) ; }
  50%  { transform: translateX(-36%) translateY(0)   ; }
  75%  { transform: translateX(-18%) translateY(-6px); }
  100% { transform: translateX(0) translateY(0)     ; }
}

@keyframes wave2Anim {
  0%   { transform: translateX(0) translateY(0); }
  50%  { transform: translateX(-28%) translateY(10px); }
  100% { transform: translateX(0) translateY(0); }
}

@keyframes wave3Anim {
  0%   { transform: translateX(0) translateY(0); }
  50%  { transform: translateX(-42%) translateY(-12px); }
  100% { transform: translateX(0) translateY(0); }
}*/

/* Small vertical breathing on the group for extra realism */
/*@keyframes wavesGroupFloat {
  0% { transform: translateY(0); }
  50% { transform: translateY(6px); }
  100% { transform: translateY(0); }
}
.wave-animation { animation: wavesGroupFloat 20s ease-in-out infinite; }*/

/* Responsive adjustments */
/*@media (max-width: 992px) {
  .page_wrapper { padding-top: 5rem; min-height: 480px; }
  .wave { width: 320%; height: 200%; }
  .intro-text h1 { font-size: 1.9rem; }
}

@media (max-width: 576px) {
  .page_wrapper { padding-top: 4rem; min-height: 420px; }
  .wave { width: 380%; height: 240%; }
  .intro-text h1 { font-size: 1.6rem; }
}*/