/* ==========================================================
   Dar Hayaah — Coming Soon
   Palette taken directly from the brand logo
   ========================================================== */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-300-italic.woff2") format("woff2");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin-300-normal.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/jost-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  --sage:        #C6C9AC;   /* logo background */
  --sage-light:  #D2D5BA;
  --sage-deep:   #B8BC9C;
  --maroon:      #56151D;   /* logo ink */
  --maroon-soft: rgba(86, 21, 29, .55);
  --maroon-line: rgba(86, 21, 29, .28);

  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --sans:  "Jost", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;

  --inset: clamp(14px, 2.6vw, 30px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  color: var(--maroon);
  font-family: var(--sans);
  background:
    radial-gradient(ellipse 70% 60% at 50% 42%, var(--sage-light) 0%, transparent 70%),
    radial-gradient(ellipse 120% 100% at 50% 50%, var(--sage) 55%, var(--sage-deep) 100%);
  background-color: var(--sage);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Soft paper texture */
.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .34 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Double-ruled frame */
.frame {
  position: fixed;
  inset: var(--inset);
  border: 1px solid var(--maroon-line);
  pointer-events: none;
  animation: fade 1.6s ease both;
}
.frame::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(86, 21, 29, .14);
}
.frame__star {
  position: absolute;
  left: 50%;
  width: 11px; height: 11px;
  line-height: 0;
  transform: translateX(-50%);
}
.frame__star--top    { top: 18px; }
.frame__star--bottom { bottom: 18px; }
.frame__star svg { width: 11px; height: 11px; fill: var(--maroon-soft); }

/* Content */
.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--inset) + 48px) 28px 24px;
}

.logo { line-height: 0; }
.logo img {
  display: block;
  width: min(440px, 74vw);
  max-height: 52vh;
  height: auto;
  object-fit: contain;
}

.ornament {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: clamp(26px, 4.5vh, 44px) 0 clamp(14px, 2.4vh, 22px);
}
.ornament__line {
  display: block;
  width: clamp(42px, 9vw, 78px);
  height: 1px;
  background: var(--maroon-line);
}
.ornament__star { width: 9px; height: 9px; fill: var(--maroon-soft); }

.coming {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.6rem, 7.2vw, 4.75rem);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--maroon);
}

.note {
  margin-top: clamp(16px, 2.6vh, 24px);
  max-width: 46ch;
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(.68rem, 1.6vw, .78rem);
  letter-spacing: .28em;
  line-height: 2;
  text-transform: uppercase;
  color: var(--maroon-soft);
}

.footer {
  padding: 0 24px calc(var(--inset) + 46px);
  text-align: center;
  font-size: .64rem;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(86, 21, 29, .45);
}
@media (max-width: 420px) { .footer { letter-spacing: .2em; font-size: .6rem; } }

/* Instagram — floating round button, bottom-right */
.social {
  position: fixed;
  z-index: 2;
  right: calc(var(--inset) + 22px);
  bottom: calc(var(--inset) + 22px);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--maroon);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.social__btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  border-radius: 50%;
  border: 1px solid rgba(86, 21, 29, .55);
  background: rgba(198, 201, 172, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background .45s ease, border-color .45s ease, transform .45s cubic-bezier(.2, .7, .2, 1);
}
/* soft breathing ring */
.social__btn::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(86, 21, 29, .35);
  animation: ring 3.6s ease-out 2.6s infinite;
  pointer-events: none;
}
.social__icon {
  width: 24px; height: 24px;
  fill: none;
  stroke: var(--maroon);
  stroke-width: 1.35;
  transition: stroke .45s ease;
}
.social__icon .dot { fill: var(--maroon); stroke: none; transition: fill .45s ease; }

.social__tip {
  font-size: .64rem;
  font-weight: 400;
  letter-spacing: .26em;
  color: var(--maroon);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .45s ease, transform .45s cubic-bezier(.2, .7, .2, 1);
  pointer-events: none;
}

.social:hover .social__btn,
.social:focus-visible .social__btn {
  background: var(--maroon);
  border-color: var(--maroon);
  transform: translateY(-2px);
}
.social:hover .social__icon,
.social:focus-visible .social__icon { stroke: var(--sage-light); }
.social:hover .social__icon .dot,
.social:focus-visible .social__icon .dot { fill: var(--sage-light); }
.social:hover .social__tip,
.social:focus-visible .social__tip { opacity: 1; transform: none; }
.social:focus-visible { outline: none; }
.social:focus-visible .social__btn { box-shadow: 0 0 0 4px rgba(86, 21, 29, .18); }

@keyframes ring {
  0%   { transform: scale(1);    opacity: .8; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

@media (max-width: 560px) {
  .social { right: calc(var(--inset) + 14px); bottom: calc(var(--inset) + 14px); }
  .social__btn { width: 54px; height: 54px; }
  .social__icon { width: 22px; height: 22px; }
  .social__tip { display: none; }
  .footer { padding-bottom: calc(var(--inset) + 92px); }
}
@media (prefers-reduced-motion: reduce) {
  .social__btn::after { animation: none; opacity: 0; }
}

/* Entrance motion */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(4px);
  animation: rise 1.4s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) forwards;
}
.coming.reveal { letter-spacing: .14em; animation-name: rise-wide; }

@keyframes rise {
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes rise-wide {
  to { opacity: 1; transform: none; filter: blur(0); letter-spacing: .01em; }
}
@keyframes fade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .reveal, .frame { animation: none; opacity: 1; transform: none; filter: none; }
  .coming.reveal { letter-spacing: .01em; }
}

/* Short landscape screens */
@media (max-height: 560px) and (orientation: landscape) {
  .logo img { max-height: 46vh; }
  .stage { padding-top: calc(var(--inset) + 24px); }
  .footer { padding-bottom: calc(var(--inset) + 14px); }
}