/* ====================================================
   LA MER · Site Chrome
   Loading splash + Cookie consent banner — sitewide.
   ==================================================== */

/* ====================================================
   LOADING SPLASH
   Full green background. Conch fills from lighter green
   to ivory, then the whole splash fades out.
   ==================================================== */
.lm-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #143438; /* deep teal */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .9s cubic-bezier(0.22, 1, 0.36, 1);
}
.lm-splash.lm-splash-hidden {
  opacity: 0;
  pointer-events: none;
}
.lm-splash-conch {
  position: relative;
  width: clamp(120px, 16vw, 200px);
  height: clamp(140px, 18vw, 230px);
}
/* Base conch image — starts as a lighter green tint, will get overlaid by ivory fill */
.lm-splash-conch img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* lighter green silhouette */
  filter: brightness(0) saturate(100%) invert(58%) sepia(11%) saturate(560%) hue-rotate(132deg) brightness(85%) contrast(92%);
}
/* The "fill" overlay — same image as a mask, animates from 0% to 100% */
.lm-splash-conch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #faf7ee; /* ivory */
  -webkit-mask-image: url("../conch.png");
  mask-image: url("../conch.png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  clip-path: inset(100% 0 0 0);
  animation: lm-conch-fill 2.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes lm-conch-fill {
  0%   { clip-path: inset(100% 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}
/* Disable splash on revisits within the same session for speed */
.lm-no-splash .lm-splash { display: none; }

/* ====================================================
   COOKIE CONSENT BANNER
   Bottom-right, glass on warm cream, on-brand.
   ==================================================== */
.lm-cookie {
  position: fixed;
  z-index: 9000;
  right: clamp(16px, 2vw, 32px);
  bottom: clamp(16px, 2vw, 32px);
  max-width: 380px;
  padding: 22px 24px 20px;
  background: rgba(250, 247, 238, 0.96);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  border: 1px solid rgba(20, 56, 61, 0.12);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.55) inset,
    0 28px 60px -20px rgba(20, 56, 61, 0.22);
  color: var(--ink, #1f2a2c);
  transform: translateY(20px);
  opacity: 0;
  transition: transform .5s cubic-bezier(0.22, 1, 0.36, 1), opacity .5s ease;
}
.lm-cookie.lm-cookie-show {
  transform: translateY(0);
  opacity: 1;
}
.lm-cookie .eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #a37f3f;
  display: block;
  margin-bottom: 10px;
}
.lm-cookie p {
  font-family: 'EB Garamond', serif;
  font-size: 0.98rem;
  line-height: 1.5;
  color: #1f2a2c;
  margin: 0 0 14px;
}
.lm-cookie p a {
  color: #2a5e63;
  border-bottom: 1px solid #a37f3f;
  text-decoration: none;
}
.lm-cookie p a:hover { color: #a37f3f; }
.lm-cookie .lm-cookie-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.lm-cookie button {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding: 11px 18px;
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  transition: all .3s ease;
}
.lm-cookie .lm-accept {
  background: #14383d;
  color: #faf7ee;
  border-color: #14383d;
}
.lm-cookie .lm-accept:hover { background: #a37f3f; border-color: #a37f3f; }
.lm-cookie .lm-reject {
  color: #6a6359;
  border-color: rgba(20, 56, 61, 0.2);
}
.lm-cookie .lm-reject:hover { color: #14383d; border-color: #14383d; }

@media (max-width: 480px) {
  .lm-cookie {
    right: 12px;
    left: 12px;
    bottom: 12px;
    max-width: none;
  }
}

/* ====================================================
   FLOATING MAIL FAB
   Persistent enquiry CTA, bottom-left so it doesn't
   conflict with the cookie banner (bottom-right).
   ==================================================== */
.lm-fab {
  position: fixed;
  z-index: 8900;
  left: clamp(16px, 2vw, 32px);
  bottom: clamp(16px, 2vw, 32px);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #14383d;
  color: #faf7ee;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 14px 30px -8px rgba(20, 56, 61, 0.55);
  transition:
    transform .35s cubic-bezier(0.22, 1, 0.36, 1),
    background-color .3s ease,
    opacity .3s ease;
  opacity: 0;
  transform: scale(0.6) translateY(20px);
}
.lm-fab.lm-fab-show {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.lm-fab:hover {
  background: #a37f3f;
  transform: scale(1.06) translateY(0);
}
.lm-fab svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Hide tooltip label by default, show on hover (desktop only) */
.lm-fab::before {
  content: "Enquire";
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: rgba(20, 56, 61, 0.96);
  color: #faf7ee;
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding: 8px 14px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.lm-fab:hover::before { opacity: 1; }

/* Hide FAB on the Contact page itself to avoid redundancy */
.lm-fab.lm-fab-hidden { display: none; }

@media (max-width: 480px) {
  .lm-fab { left: 12px; bottom: 12px; width: 50px; height: 50px; }
  .lm-fab::before { display: none; } /* no tooltip on mobile */
}