@tailwind base;
@tailwind components;
@tailwind utilities;

/* Legasi Theme Base Layer - Force zoom and colors */
@layer base {
  html {
    font-size: 18px;     /* Increase base size from 16px */
    zoom: 1.15;          /* Force 115% zoom simulation */
    background-color: #FAF9F6;
    color: #1A1A1A;
  }
  
  body {
    @apply bg-background text-text-main;
  }
  
  /* Scale up base spacing for better readability */
  section {
    @apply py-16;
  }
  
  @media (min-width: 768px) {
    section {
      @apply py-24;
    }
  }
  
  /* Main container constraints */
  .container,
  [class*="max-w-"] {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }
}

@keyframes introPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.06);
    opacity: 0.86;
  }
}

@keyframes introTextIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.intro-overlay {
  opacity: 1;
  transition: opacity 650ms ease;
}

.intro-overlay--hide {
  opacity: 0;
  pointer-events: none;
}

.intro-logo {
  animation: introPulse 2s ease-in-out infinite;
  will-change: transform, opacity;
}

.intro-text {
  opacity: 0;
  animation: introTextIn 850ms ease forwards;
  animation-delay: 180ms;
}

.abstract-illustration {
  background:
    radial-gradient(800px 320px at 30% 20%, rgba(232, 93, 63, 0.22), transparent 60%),
    radial-gradient(760px 360px at 70% 60%, rgba(26, 26, 26, 0.12), transparent 55%),
    repeating-linear-gradient(
      120deg,
      rgba(26, 26, 26, 0.08) 0px,
      rgba(26, 26, 26, 0.08) 2px,
      transparent 2px,
      transparent 16px
    ),
    repeating-linear-gradient(
      30deg,
      rgba(232, 93, 63, 0.10) 0px,
      rgba(232, 93, 63, 0.10) 2px,
      transparent 2px,
      transparent 20px
    );
}

.islamic-pattern {
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='120'%20viewBox='0%200%20120%20120'%3E%3Cg%20fill='none'%20stroke='%23E85D3F'%20stroke-opacity='0.10'%20stroke-width='1'%3E%3Cpath%20d='M60%200%20L75%2030%20L110%2030%20L82%2050%20L92%2082%20L60%2064%20L28%2082%20L38%2050%20L10%2030%20L45%2030%20Z'/%3E%3Cpath%20d='M60%20120%20L75%2090%20L110%2090%20L82%2070%20L92%2038%20L60%2056%20L28%2038%20L38%2070%20L10%2090%20L45%2090%20Z'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(800px 320px at 30% 20%, rgba(232, 93, 63, 0.10), transparent 60%),
    radial-gradient(760px 360px at 70% 60%, rgba(26, 26, 26, 0.06), transparent 55%);
  background-size: 140px 140px, auto, auto;
  background-position: center;
  background-repeat: repeat, no-repeat, no-repeat;
}