/* Splash: name, title, contact links, booking button. Stage classes .s1–.s4 are set on .nq-root by splash.js */

.nq-root {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: var(--c-bg);
  font-family: var(--f-serif);
  color: var(--c-text);
}
.nq-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.nq-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(16px, 4.5vh, 52px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.4vh, 18px);
  padding: 0 16px;
  pointer-events: none;
  text-align: center;
}
.nq-name {
  position: relative;
  margin: 0;
  font-family: "Cinzel", Georgia, serif;
  font-weight: 400;
  font-size: clamp(24px, min(6.4vw, 8.5vh), 86px);
  line-height: 1.05;
  letter-spacing: 0.12em;
  color: #f7eefc;
  white-space: nowrap;
  margin-right: -0.12em;
}
.nq-l {
  display: inline-block;
  opacity: 0;
  will-change: transform, filter, opacity;
}
.s1 .nq-l {
  animation-name: nqIn, nqGlint;
  animation-duration: 1.8s, 1s;
  animation-timing-function: cubic-bezier(0.16, 0.8, 0.2, 1), ease-in-out;
  animation-fill-mode: forwards, none;
}
@keyframes nqIn {
  0% {
    opacity: 0;
    filter: blur(16px);
    transform: translateY(0.4em) scale(1.5);
    text-shadow: 0 0 0 rgba(245, 200, 255, 0);
  }
  45% {
    opacity: 1;
    filter: blur(1.5px);
    text-shadow:
      0 0 30px rgba(245, 200, 255, 1),
      0 0 64px rgba(200, 90, 230, 0.6);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: none;
    text-shadow: 0 0 18px rgba(210, 140, 255, 0.38);
  }
}
@keyframes nqGlint {
  0%,
  100% {
    color: #f7eefc;
  }
  50% {
    color: #ffffff;
    text-shadow:
      0 0 22px rgba(255, 255, 255, 0.95),
      0 0 48px rgba(230, 110, 240, 0.8);
  }
}
.nq-subrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 22px);
}
.nq-rule {
  display: block;
  height: 1px;
  width: clamp(28px, 8vw, 120px);
  transform: scaleX(0);
  opacity: 0;
}
.nq-rule-l {
  background: linear-gradient(
    90deg,
    rgba(210, 150, 240, 0),
    rgba(225, 160, 245, 0.95)
  );
  transform-origin: right center;
}
.nq-rule-r {
  background: linear-gradient(
    90deg,
    rgba(225, 160, 245, 0.95),
    rgba(210, 150, 240, 0)
  );
  transform-origin: left center;
}
.s2 .nq-rule {
  animation: nqRule 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes nqRule {
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}
.nq-sub {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: clamp(13px, 1.55vw, 22px);
  text-transform: uppercase;
  letter-spacing: 1.2em;
  margin-right: -1.2em;
  color: #dccbee;
  opacity: 0;
  filter: blur(8px);
  white-space: nowrap;
}
.s2 .nq-sub {
  animation: nqSub 2.6s cubic-bezier(0.16, 0.8, 0.2, 1) 0.25s forwards;
}
@keyframes nqSub {
  0% {
    opacity: 0;
    letter-spacing: 1.2em;
    margin-right: -1.2em;
    filter: blur(8px);
  }
  60% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 1;
    letter-spacing: 0.42em;
    margin-right: -0.42em;
    filter: blur(0);
    text-shadow: 0 0 14px rgba(210, 130, 240, 0.45);
  }
}
@property --nqa {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.nq-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2vh, 20px);
  margin-top: clamp(4px, 1.2vh, 14px);
  pointer-events: auto;
}
.nq-thread {
  display: block;
  width: 1px;
  height: clamp(8px, 2vh, 22px);
  background: linear-gradient(
    180deg,
    rgba(225, 160, 245, 0),
    rgba(225, 160, 245, 0.85)
  );
  transform: scaleY(0);
  transform-origin: top center;
}
.s3 .nq-thread {
  animation: nqThread 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes nqThread {
  to {
    transform: scaleY(1);
  }
}
.nq-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px 24px;
}
.nq-ci {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 1.25vw, 18px);
  letter-spacing: 0.05em;
  color: #f4ecfa;
  text-decoration: none;
  background-image: linear-gradient(
    90deg,
    rgba(240, 150, 240, 0),
    rgba(240, 170, 245, 0.9),
    rgba(240, 150, 240, 0)
  );
  background-repeat: no-repeat;
  background-position: 50% 88%;
  background-size: 0% 1px;
  opacity: 0;
  transform: translateY(12px);
  filter: blur(6px);
  transition:
    color 0.35s,
    text-shadow 0.35s,
    background-size 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nq-ci svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: #d9a6f2;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nq-ci:hover {
  color: #ffffff;
  text-shadow: 0 0 14px rgba(230, 120, 240, 0.6);
  background-size: 100% 1px;
}
.nq-ci:hover svg {
  transform: rotate(-12deg) scale(1.12);
}
.nq-ci:focus-visible {
  outline: 2px solid #d9a6f2;
  outline-offset: 4px;
  border-radius: 4px;
}
.s3 .nq-ci {
  animation: nqRise 1.4s cubic-bezier(0.16, 0.8, 0.2, 1) forwards;
  animation-delay: calc(0.45s + var(--d));
}
@keyframes nqRise {
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}
.nq-gem {
  display: inline-flex;
  width: 12px;
  height: 12px;
  color: #e9a6f0;
  opacity: 0;
}
.nq-gem svg {
  width: 12px;
  height: 12px;
  animation: nqTwinkle 3.2s ease-in-out infinite;
}
.s3 .nq-gem {
  animation: nqRise 1s ease 0.7s forwards;
}
@keyframes nqTwinkle {
  0%,
  100% {
    transform: rotate(0) scale(0.8);
    opacity: 0.55;
  }
  50% {
    transform: rotate(90deg) scale(1.15);
    opacity: 1;
  }
}
.nq-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 0 30px;
  border-radius: 999px;
  font-family: "Cinzel", Georgia, serif;
  font-weight: 500;
  font-size: clamp(11px, 1vw, 14px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  background: radial-gradient(
    120% 170% at 50% 0%,
    rgba(190, 110, 240, 0.38),
    rgba(70, 25, 105, 0.4) 58%,
    rgba(18, 8, 30, 0.6)
  );
  box-shadow:
    inset 0 0 0 1px rgba(230, 170, 255, 0.22),
    0 12px 40px -12px rgba(215, 90, 230, 0.6),
    0 0 70px -24px rgba(160, 100, 255, 0.7);
  overflow: hidden;
  isolation: isolate;
  opacity: 0;
  transform: translateY(16px) scale(0.92);
  filter: blur(10px);
  transition:
    scale 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.45s;
}
.nq-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--nqa),
    rgba(255, 255, 255, 0) 0deg,
    rgba(255, 210, 255, 0.95) 50deg,
    rgba(190, 120, 255, 0.7) 100deg,
    rgba(255, 255, 255, 0) 170deg,
    rgba(255, 255, 255, 0) 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box exclude,
    linear-gradient(#000 0 0);
  animation: nqSpin 4.5s linear infinite;
  pointer-events: none;
}
.nq-cta::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -45%;
  width: 32%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.32),
    rgba(255, 255, 255, 0)
  );
  transform: skewX(-20deg);
  animation: nqSheen 5.5s ease-in-out 2.6s infinite;
  pointer-events: none;
  z-index: -1;
}
.nq-cta-label,
.nq-cta svg {
  position: relative;
  z-index: 1;
}
.nq-cta svg {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nq-cta:hover {
  scale: 1.04;
  box-shadow:
    inset 0 0 0 1px rgba(240, 190, 255, 0.45),
    0 16px 50px -12px rgba(230, 100, 240, 0.85),
    0 0 90px -20px rgba(170, 110, 255, 0.9);
}
.nq-cta:hover svg {
  transform: translateX(5px);
}
.nq-cta:focus-visible {
  outline: 2px solid #f0c2ff;
  outline-offset: 4px;
}
.s3 .nq-cta {
  animation: nqCtaIn 1.7s cubic-bezier(0.16, 0.8, 0.2, 1) 0.95s forwards;
}
@keyframes nqCtaIn {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.92);
    filter: blur(10px);
  }
  55% {
    opacity: 1;
    filter: blur(0) brightness(1.6);
  }
  100% {
    opacity: 1;
    transform: none;
    filter: none;
  }
}
@keyframes nqSpin {
  to {
    --nqa: 360deg;
  }
}
button.nq-cta {
  border: 0;
  cursor: pointer;
}
.nq-ci {
  --d: 0s;
}
.nq-ci:last-of-type {
  --d: 0.18s;
}

@keyframes nqSheen {
  0% {
    left: -45%;
  }
  28% {
    left: 125%;
  }
  100% {
    left: 125%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nq-l,
  .nq-sub,
  .nq-rule,
  .nq-ci,
  .nq-cta,
  .nq-thread,
  .nq-gem {
    animation: none !important;
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }
  .nq-cta::before,
  .nq-cta::after {
    animation: none !important;
  }
  .nq-sub {
    letter-spacing: 0.42em !important;
    margin-right: -0.42em !important;
  }
}

/* Phone: phone + email stack, so the little star between them is hidden */
@media (max-width: 520px) {
  .nq-gem { display: none; }
  .nq-info { flex-direction: column; gap: 0; }
}

/* Hide the name until splash.js has split it into animated letters (prevents a flash on load).
   Safety net: if the script never runs, it fades in after 4s anyway. */
.nq-name:not(.is-split) {
  opacity: 0;
  animation: nqFallback 0.8s ease 4s forwards;
}
@keyframes nqFallback {
  to { opacity: 1; }
}

/* Booking button: never wider than the screen; on phones it may wrap onto two centred lines */
.nq-cta {
  max-width: 100%;
  text-align: center;
}
@media (max-width: 520px) {
  .nq-cta {
    white-space: normal;
    padding: 12px 24px;
    font-size: 12px;
    letter-spacing: 0.16em;
    line-height: 1.4;
  }
}