@use './variables' as *;

// ========== Reusable SCSS mixins for layout and styling ==========

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@mixin gradient-text($from: $accent-orange, $to: $accent-orange-light) {
  background: linear-gradient(135deg, $from, $to);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@mixin card-style {
  background: $neutral-white;
  border-radius: $radius-lg;
  box-shadow: $shadow-md;
  transition: transform $transition-normal, box-shadow $transition-normal;

  &:hover {
    transform: translateY(-2px);
    box-shadow: $shadow-lg;
  }
}

@mixin section-padding($top: $spacing-3xl, $bottom: $spacing-3xl) {
  padding-top: $top;
  padding-bottom: $bottom;
}

@mixin responsive($breakpoint) {
  @if $breakpoint == sm { @media (max-width: ($bp-sm - 1px)) { @content; } }
  @if $breakpoint == md { @media (max-width: ($bp-md - 1px)) { @content; } }
  @if $breakpoint == lg { @media (max-width: ($bp-lg - 1px)) { @content; } }
  @if $breakpoint == xl { @media (max-width: ($bp-xl - 1px)) { @content; } }
}

@mixin button-style($bg: $accent-orange, $text: $neutral-white, $hover-bg: $accent-orange-dark) {
  background: $bg;
  color: $text;
  border: none;
  border-radius: $radius-md;
  padding: $spacing-sm $spacing-lg;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background $transition-fast, transform $transition-fast;

  &:hover {
    background: $hover-bg;
    transform: translateY(-1px);
  }

  &:active {
    transform: translateY(0);
  }
}

@mixin mountain-divider($color: $primary-blue, $height: 80px) {
  content: '';
  display: block;
  width: 100%;
  height: $height;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%231a3a5c' fill-opacity='1' d='M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,218.7C672,235,768,245,864,234.7C960,224,1056,192,1152,186.7C1248,181,1344,203,1392,213.3L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") no-repeat center bottom;
  background-size: cover;
  margin-top: -$height;
}

@mixin flowery-border($color: $accent-orange) {
  position: relative;

  &::after {
    content: '';
    display: block;
    width: 60px;
    height: 60px;
    margin: $spacing-md auto 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='35' r='12' fill='%23e87a2e'/%3E%3Ccircle cx='35' cy='50' r='12' fill='%23e87a2e'/%3E%3Ccircle cx='65' cy='50' r='12' fill='%23e87a2e'/%3E%3Ccircle cx='40' cy='62' r='12' fill='%23e87a2e'/%3E%3Ccircle cx='60' cy='62' r='12' fill='%23e87a2e'/%3E%3Ccircle cx='50' cy='50' r='8' fill='%23f0a86a'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    opacity: 0.6;
  }
}

@mixin fade-in {
  animation: fadeIn 0.6s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}