/* =========================================================
   ANIZA LADIES TAILOR — Coming Soon
   Custom styles layered on top of Tailwind
   ========================================================= */

:root {
  --ivory:    #F6F1E7;
  --burgundy: #651F2B;
  --plum:     #4F1721;
  --gold:     #B08A57;
  --charcoal: #2B2724;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: #191113;      /* matches overlay, avoids white flash */
  overflow: hidden;               /* single, non-scrolling screen */
}

/* True viewport height on mobile browsers (--vh is set in main.js);
   modern browsers use svh instead. */
.hero {
  min-height: calc(var(--vh, 1vh) * 100);
}

@supports (min-height: 100svh) {
  .hero { min-height: 100svh; }
}

/* Allow scrolling only on very short viewports so nothing is ever cut off */
@media (max-height: 620px) {
  body { overflow: auto; }
  .hero { min-height: 620px; }
}

::selection {
  background: var(--burgundy);
  color: var(--ivory);
}

/* ---------------------------------------------------------
   Hero photograph
   --------------------------------------------------------- */

.hero__media {
  /* 24px blurred placeholder — paints instantly, hidden once the photo loads */
  background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDABIMDRANCxIQDhAUExIVGywdGxgYGzYnKSAsQDlEQz85Pj1HUGZXR0thTT0+WXlaYWltcnNyRVV9hnxvhWZwcm7/2wBDARMUFBsXGzQdHTRuST5Jbm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm7/wAARCAASACADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDaF45ztx1AGRUCa0DPJD0eNwhG3uTipbVQ0m3bznNYNq6R6rLvJZhd/NjocZNcttLnWkm7G3BrC3MqRocl22jjvUlxJJb293Iy8rCWA+mKxtK2fbYXPCiZiPy/+vW5qCNNBcxxgFmt3A+uRTS1FPTREMJIuRgkfOf51zic3d2f+ntv60UVS2HD4maOkAbYuP8Alu3/AKAtdBF/x8/8Ab+YoopRJqbn/9k=");
  background-size: cover;
  background-position: 50% 50%;
}

.hero__img {
  opacity: 0;
  transform: scale(1.045);
  transition: opacity 1.4s ease, transform 1.4s ease;
}

.is-loaded .hero__img {
  opacity: 1;
  /* very slow drift — barely perceptible, keeps the photo alive */
  animation: heroDrift 46s ease-in-out 1.4s infinite alternate;
}

@keyframes heroDrift {
  from { transform: scale(1.045); }
  to   { transform: scale(1);     }
}

/* ---------------------------------------------------------
   Entrance reveals
   --------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
}

.is-loaded .reveal {
  animation: reveal 1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

.reveal--1 { animation-delay: 0.15s; }
.reveal--2 { animation-delay: 0.40s; }
.reveal--3 { animation-delay: 0.55s; }
.reveal--4 { animation-delay: 0.72s; }
.reveal--5 { animation-delay: 0.88s; }
.reveal--6 { animation-delay: 1.05s; }

@keyframes reveal {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------
   Actions
   --------------------------------------------------------- */

.btn-primary {
  border-radius: 1px;
  transition: background-color 0.45s ease, border-color 0.45s ease,
              color 0.45s ease, transform 0.45s ease;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--plum);
  border-color: var(--gold);
  transform: translateY(-1px);
}

.btn-primary svg {
  transition: transform 0.45s ease;
}

.btn-primary:hover svg {
  transform: scale(1.06);
}

/* hairline underline that draws in on hover */
.link-underline {
  position: relative;
  transition: color 0.4s ease;
}

.link-underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -5px;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  opacity: 0.35;
  transform: scaleX(0.34);
  transform-origin: center;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.4s ease;
}

.link-underline:hover,
.link-underline:focus-visible {
  color: var(--gold);
}

.link-underline:hover::after,
.link-underline:focus-visible::after {
  transform: scaleX(1);
  opacity: 0.75;
}

/* ---------------------------------------------------------
   Focus + accessibility
   --------------------------------------------------------- */

a:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 5px;
}

@media (prefers-reduced-motion: reduce) {
  .hero__img,
  .is-loaded .hero__img {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }

  .reveal,
  .is-loaded .reveal {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .btn-primary,
  .btn-primary:hover,
  .link-underline::after {
    transition: none;
    transform: none;
  }
}