/* ============================================================
   ATELIER BY ANAMI — COMING SOON PAGE
   Scope: .cs-* classes only. No global overrides.
   ============================================================ */

/* ── CSS Custom Properties ── */
:root {
  --accent: #b19470;
  --accent-dark: #967c5a;
  --dark: #0e0e0c;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-util: "Jost", system-ui, sans-serif;
}

/* ── Reset essentials ── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Body lock (full-screen layout) ──
   NOTE: min-height + auto overflow instead of a hard-locked height +
   overflow:hidden. The old rule (height:100svh; overflow:hidden) clipped
   content whenever anything didn't fit the exact viewport height
   (small laptops, browser zoom, mobile keyboard open on the email
   field, etc). This keeps the "full screen" look on normal screens but
   never eats content on shorter ones — it scrolls instead of clipping. */
.cs-body {
  min-height: 100svh;
  background: #0e0e0c;
  display: flex;
  flex-direction: column;
}

/* ── Background ── */
.cs-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.cs-bg__img {
  position: absolute;
  inset: -5%;
  width: 110%;
  height: 110%;
  background-image: url("https://res.cloudinary.com/dmnk1ca0q/image/upload/q_auto/f_auto/v1781117875/PACHPEDI_GARIMAJI_drawing_room_c8_pjygtg.webp");
  background-size: cover;
  background-position: center;
  transform: scale(1.08);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  filter: saturate(0.55) brightness(0.35);
}

.cs-bg__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 70% 60% at 50% 40%,
      rgba(14, 14, 12, 0.3) 0%,
      rgba(14, 14, 12, 0.82) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(14, 14, 12, 0.5) 0%,
      rgba(14, 14, 12, 0.2) 40%,
      rgba(14, 14, 12, 0.75) 100%
    );
}

/* Atmospheric orbs */
.cs-bg__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.12;
  animation: cs-orb-drift 18s ease-in-out infinite alternate;
}
.cs-bg__orb--1 {
  width: 500px;
  height: 500px;
  background: var(--accent);
  top: -15%;
  left: -10%;
  animation-duration: 22s;
}
.cs-bg__orb--2 {
  width: 380px;
  height: 380px;
  background: #c8a87a;
  bottom: -10%;
  right: -8%;
  animation-duration: 17s;
  animation-delay: -6s;
}
.cs-bg__orb--3 {
  width: 260px;
  height: 260px;
  background: #e8d4b0;
  top: 40%;
  left: 55%;
  animation-duration: 14s;
  animation-delay: -3s;
  opacity: 0.07;
}
@keyframes cs-orb-drift {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(40px, 30px) scale(1.12);
  }
}

/* Grain texture */
.cs-grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px;
}

/* ── Header strip ── */
.cs-header {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(16px, 3vw, 36px) clamp(20px, 5vw, 72px);
  flex-shrink: 0;
}

.cs-header__back {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-util);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  text-decoration: none;
  transition: color 0.3s;
  min-width: 0;
  flex-shrink: 1;
}
.cs-header__back:hover {
  color: var(--accent);
}
.cs-header__back svg {
  stroke: currentColor;
  flex-shrink: 0;
}

.cs-header__logo {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vw, 14px);
  flex-shrink: 0;
}
/* FIX: fixed square box + object-fit:contain so the logo never
   stretches/squishes regardless of the source PNG's real aspect ratio. */
.cs-header__logo-img {
  height: clamp(24px, 3vw, 38px);
  width: clamp(24px, 3vw, 38px);
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(177, 148, 112, 0.35));
  flex-shrink: 0;
}
.cs-header__logo-a {
  font-family: var(--font-display);
  font-size: clamp(14px, 2.2vw, 28px);
  font-weight: 300;
  color: var(--accent);
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}
.cs-header__logo-text {
  font-family: var(--font-util);
  font-size: clamp(9px, 1.1vw, 14px);
  font-weight: 500;
  letter-spacing: 0.28em;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1;
  padding-bottom: 1px;
}

.cs-header__right {
  width: 120px; /* mirrors back link width for centering */
  flex-shrink: 1;
}

/* ── Main ── */
.cs-main {
  position: relative;
  z-index: 10;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(24px, 4vw, 40px) clamp(20px, 6vw, 80px);
  gap: clamp(12px, 2vw, 28px);
}

/* Eyebrow */
.cs-eyebrow {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.5vw, 16px);
  font-family: var(--font-util);
  font-size: clamp(8px, 0.8vw, 11px);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
}
.cs-eyebrow__line {
  display: block;
  width: clamp(20px, 3vw, 36px);
  height: 1px;
  background: var(--accent);
  opacity: 0.6;
  flex-shrink: 0;
}

/* Emblem — golden monogram above the headline
   FIX: wrapped in a fixed-size square box. The <img> uses object-fit:
   contain so it always scales proportionally inside that box instead
   of stretching to fill a width-only box (which is what made it look
   squished/tiny before). */
.cs-emblem-wrap {
  width: clamp(56px, 7vw, 96px);
  height: clamp(56px, 7vw, 96px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(4px, 1vw, 10px);
  animation: cs-emblem-in 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}
.cs-emblem {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 20px rgba(177, 148, 112, 0.4));
}
@keyframes cs-emblem-in {
  from {
    opacity: 0;
    transform: translateY(-16px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cs-emblem-wrap {
    animation: none;
  }
}

/* Headline — Cormorant Garamond at maximum scale */
.cs-headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0;
  line-height: 0.9;
}
.cs-headline__line {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  color: #ffffff;
  letter-spacing: -0.01em;
}
.cs-headline__line--1 {
  font-size: clamp(60px, 10vw, 148px);
}
.cs-headline__line--2 {
  font-size: clamp(46px, 7.5vw, 116px);
  font-style: italic;
  color: var(--accent);
}
.cs-headline__line--2 em {
  font-style: italic;
}

/* Descriptor */
.cs-descriptor {
  font-family: var(--font-body);
  font-size: clamp(12px, 1.1vw, 16px);
  font-weight: 300;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.45);
  max-width: 520px;
}
.cs-br {
  display: block;
}

/* Category pills */
.cs-categories {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 4px;
}
.cs-cat {
  font-family: var(--font-util);
  font-size: clamp(8px, 0.75vw, 11px);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.28);
  padding: clamp(5px, 0.6vw, 7px) clamp(10px, 1.2vw, 16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition:
    color 0.3s,
    border-color 0.3s;
}
.cs-cat:hover {
  color: var(--accent);
  border-color: rgba(177, 148, 112, 0.3);
}
.cs-cat__sep {
  color: var(--accent);
  opacity: 0.4;
  font-size: 14px;
  line-height: 1;
}

/* Divider */
.cs-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  color: rgba(255, 255, 255, 0.1);
}
.cs-divider::before,
.cs-divider::after {
  content: "";
  display: block;
  width: 60px;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.cs-divider__mark {
  font-size: 10px;
  color: var(--accent);
  opacity: 0.6;
}

/* Notify form */
.cs-notify {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 480px;
}
.cs-notify__label {
  font-family: var(--font-util);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* FIX: bumped up from 0.25 — was nearly invisible on the dark bg */
  color: rgba(255, 255, 255, 0.45);
}
.cs-notify__form {
  width: 100%;
}
.cs-notify__field {
  display: flex;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 0.3s;
}
.cs-notify__field:focus-within {
  border-color: rgba(177, 148, 112, 0.6);
}
.cs-notify__field input {
  flex: 1;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.92);
  background: transparent;
  border: none;
  outline: none;
  padding: clamp(12px, 1.5vw, 14px) 18px;
  min-width: 0;
  -webkit-appearance: none;
}
.cs-notify__field input::placeholder {
  /* FIX: bumped up from 0.22 — was basically invisible */
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-body);
}
.cs-notify__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-util);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dark);
  background: var(--accent);
  border: none;
  padding: clamp(12px, 1.5vw, 14px) 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.3s;
  flex-shrink: 0;
  -webkit-appearance: none;
}
.cs-notify__btn:hover {
  background: var(--accent-dark);
}
.cs-notify__btn svg {
  stroke: currentColor;
  flex-shrink: 0;
}
.cs-notify__status {
  font-family: var(--font-body);
  font-size: 12px;
  min-height: 16px;
  color: rgba(177, 148, 112, 0.85);
  line-height: 1.4;
  margin-top: 4px;
  text-align: center;
}

/* Social row */
.cs-socials {
  display: flex;
  align-items: center;
  gap: 18px;
}
.cs-socials__label {
  font-family: var(--font-util);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
}
.cs-socials__icons {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cs-social {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.35);
  text-decoration: none;
  transition:
    color 0.3s,
    border-color 0.3s,
    background 0.3s;
  flex-shrink: 0;
}
.cs-social svg {
  stroke: currentColor;
}
.cs-social:hover {
  border-color: transparent;
}
.cs-social--instagram:hover {
  color: #fff;
  background: radial-gradient(
    circle at 30% 110%,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
}
.cs-social--youtube:hover {
  color: #fff;
  background: #ff0000;
}
.cs-social--whatsapp:hover {
  color: #fff;
  background: #25d366;
}

/* ── Footer strip ── */
.cs-footer {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(12px, 2vw, 22px) clamp(20px, 5vw, 72px);
  flex-shrink: 0;
  font-family: var(--font-util);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.15);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  flex-wrap: wrap;
  gap: 4px;
}
.cs-footer__name {
  color: rgba(255, 255, 255, 0.28);
}

/* ── Big watermark ── */
.cs-watermark {
  position: fixed;
  bottom: -0.1em;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: clamp(80px, 18vw, 300px);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.015);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  letter-spacing: 0.18em;
  line-height: 1;
  z-index: 2;
}

/* ============================================================
   RESPONSIVE — Tablet (768px and below)
   ============================================================ */
@media (max-width: 768px) {
  .cs-header {
    padding: 18px 20px;
  }
  .cs-header__right {
    display: none;
  }
  .cs-header__back span {
    display: none;
  } /* icon only on tablet */
  .cs-header__logo-img {
    height: 22px;
    width: 22px;
  }
  .cs-emblem-wrap {
    width: 64px;
    height: 64px;
    margin-bottom: 4px;
  }

  .cs-main {
    padding: 28px 24px 36px;
    justify-content: flex-start;
    gap: 16px;
  }

  .cs-headline__line--1 {
    font-size: clamp(60px, 16vw, 88px);
  }
  .cs-headline__line--2 {
    font-size: clamp(46px, 12vw, 68px);
  }

  .cs-descriptor br.cs-br {
    display: none;
  }

  .cs-notify {
    max-width: 100%;
  }

  .cs-watermark {
    font-size: clamp(70px, 26vw, 160px);
  }

  .cs-footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    padding: 14px 20px;
  }
}

/* ============================================================
   RESPONSIVE — Mobile (480px and below)
   ============================================================ */
@media (max-width: 480px) {
  .cs-header {
    padding: 16px 18px;
  }
  .cs-header__logo-img {
    height: 20px;
    width: 20px;
  }
  .cs-emblem-wrap {
    width: 52px;
    height: 52px;
  }
  /* Show back text again at small sizes since it's an icon-only experience anyway */
  .cs-header__back span {
    display: inline;
  }
  .cs-header__back {
    font-size: 10px;
  }
  .cs-header__logo-a {
    font-size: 13px;
    letter-spacing: 0.04em;
  }

  .cs-main {
    padding: 24px 18px 32px;
    gap: 14px;
  }

  .cs-eyebrow {
    font-size: 8px;
    letter-spacing: 0.2em;
    gap: 8px;
  }
  .cs-eyebrow__line {
    width: 18px;
  }

  .cs-headline__line--1 {
    font-size: clamp(54px, 18vw, 80px);
  }
  .cs-headline__line--2 {
    font-size: clamp(42px, 14vw, 62px);
  }

  .cs-descriptor {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.45);
  }

  .cs-cat__sep {
    display: none;
  }
  .cs-categories {
    gap: 6px;
  }
  .cs-cat {
    font-size: 8px;
    padding: 5px 10px;
  }

  .cs-divider {
    display: none;
  }

  /* FIX: on narrow phones, stack the input and button so neither
     gets squeezed — the button was competing with the input for
     space and shrinking the text/icon out of view. */
  .cs-notify__field {
    flex-direction: column;
  }
  .cs-notify__field input {
    width: 100%;
    text-align: center;
  }
  .cs-notify__btn {
    width: 100%;
  }
  .cs-notify__btn-text {
    display: inline;
  }

  .cs-socials {
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }
  .cs-socials__label {
    text-align: center;
  }

  .cs-watermark {
    font-size: clamp(60px, 30vw, 120px);
  }
}

/* ============================================================
   RESPONSIVE — Very small phones (360px and below)
   ============================================================ */
@media (max-width: 360px) {
  .cs-headline__line--1 {
    font-size: 48px;
  }
  .cs-headline__line--2 {
    font-size: 38px;
  }
  .cs-header__logo-a {
    font-size: 12px;
  }
}

/* ============================================================
   RESPONSIVE — Landscape on short screens
   ============================================================ */
@media (max-height: 680px) and (min-width: 768px) {
  .cs-main {
    gap: 10px;
  }
  .cs-headline__line--1 {
    font-size: clamp(44px, 8vw, 100px);
  }
  .cs-headline__line--2 {
    font-size: clamp(34px, 6.5vw, 80px);
  }
  .cs-categories {
    display: none;
  }
  .cs-divider {
    display: none;
  }
  .cs-descriptor {
    font-size: 13px;
  }
}

/* ── Short landscape on mobile (e.g. iPhone in landscape) ── */
@media (max-height: 500px) and (max-width: 900px) {
  .cs-main {
    justify-content: flex-start;
    padding: 16px 24px 28px;
    gap: 10px;
  }
  .cs-headline__line--1 {
    font-size: 48px;
  }
  .cs-headline__line--2 {
    font-size: 38px;
  }
  .cs-categories {
    display: none;
  }
  .cs-divider {
    display: none;
  }
  .cs-descriptor {
    font-size: 12px;
  }
}

/* ============================================================
   ACCESSIBILITY — Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .cs-bg__orb {
    animation: none;
  }
  .cs-bg__img {
    transition: none;
  }
}