@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,opsz,wght@0,8..144,300;0,8..144,400;1,8..144,300&family=Tenor+Sans&display=swap');

:root {
  --bg:        #0D0D0D;
  --ivory:     #EDEDE8;
  --ivory-dim: #6A6A64;
  --gold:      #C8973C;
  --gold-dim:  #7A5C22;
  --gold-glow: rgba(200,151,60,.45);
}

/* ── Overlay ── */
.preloader-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity .9s cubic-bezier(.4,0,.2,1),
              visibility .9s cubic-bezier(.4,0,.2,1);
  background: transparent;
}
.preloader-overlay.fade-out {
  opacity: 0;
  visibility: hidden;
}

/* ── Blurred monochrome bg ── */
.preloader-bg {
  position: absolute;
  inset: 0;
  background: transparent;
  z-index: 0;
}
/* Soft radial blur blobs — greyscale only */
.preloader-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 30% 40%, rgba(255,255,255,.04) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 75% 65%, rgba(255,255,255,.03) 0%, transparent 65%),
    radial-gradient(ellipse 80% 40% at 50% 90%, rgba(255,255,255,.025) 0%, transparent 60%);
  filter: blur(40px);
}
/* Film grain */
.preloader-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23g)' opacity='0.045'/%3E%3C/svg%3E");
  opacity: .7;
}

/* ── Content wrapper ── */
.preloader-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Emblem area ── */
.preloader-emblem {
  position: relative;
  width: 220px;
  height: 240px;
  margin-bottom: 36px;
}

/* fork & spoon share absolute positioning, pivot at bottom-centre */
.utensil {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform-origin: bottom center;
  opacity: 0;
}

.utensil--fork {
  animation: uFade .6s ease .2s forwards,
             uForkSwing .95s cubic-bezier(.34,1.46,.64,1) .2s forwards;
}
.utensil--spoon {
  animation: uFade .6s ease .35s forwards,
             uSpoonSwing .95s cubic-bezier(.34,1.46,.64,1) .35s forwards;
}

@keyframes uFade       { to { opacity: 1; } }
@keyframes uForkSwing  {
  from { transform: translateX(-50%) rotate(0deg);   }
  to   { transform: translateX(-50%) rotate(-42deg); }
}
@keyframes uSpoonSwing {
  from { transform: translateX(-50%) rotate(0deg);  }
  to   { transform: translateX(-50%) rotate(42deg); }
}

.utensil svg {
  filter: drop-shadow(0 0 6px var(--gold-glow));
  animation: goldPulse 2.8s ease-in-out infinite;
}
.utensil--spoon svg { animation-delay: .7s; }
@keyframes goldPulse {
  0%,100% { filter: drop-shadow(0 0 5px  rgba(200,151,60,.35)); }
  50%      { filter: drop-shadow(0 0 14px rgba(200,151,60,.75)); }
}

/* ── Centre badge: plate + toque ── */
.preloader-badge {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  animation: badgeReveal .8s cubic-bezier(.16,1,.3,1) .9s forwards;
}
@keyframes badgeReveal {
  from { opacity:0; transform: translateX(-50%) scale(.7) translateY(10px); }
  to   { opacity:1; transform: translateX(-50%) scale(1)  translateY(0);    }
}

/* glow ring behind badge */
.preloader-badge::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(200,151,60,.12) 0%, transparent 70%);
  animation: ringBreath 3s ease-in-out infinite;
}
@keyframes ringBreath {
  0%,100% { transform: translate(-50%,-50%) scale(1);    opacity: .6; }
  50%      { transform: translate(-50%,-50%) scale(1.15); opacity: 1;  }
}

/* ── Brand ── */
.preloader-brand {
  text-align: center;
  margin-bottom: 24px;
}
.preloader-brand__name {
  display: block;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  letter-spacing: .2em;
  color: var(--ivory);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(18px);
  animation: rise .85s cubic-bezier(.16,1,.3,1) 1.2s forwards;
}
.preloader-brand__sub {
  display: block;
  font-family: 'Tenor Sans', sans-serif;
  font-size: .57rem;
  letter-spacing: .46em;
  color: var(--gold-dim);
  text-transform: uppercase;
  margin-top: 8px;
  opacity: 0;
  transform: translateY(10px);
  animation: rise .7s ease 1.45s forwards;
}
@keyframes rise { to { opacity:1; transform: translateY(0); } }

/* ── Ornament divider ── */
.preloader-ornament {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  opacity: 0;
  animation: rise .6s ease 1.65s forwards;
}
.preloader-ornament__line {
  width: 52px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim));
}
.preloader-ornament__line:last-child {
  background: linear-gradient(90deg, var(--gold-dim), transparent);
}
.preloader-ornament__gem {
  width: 5px;
  height: 5px;
  border: 1px solid var(--gold);
  transform: rotate(45deg);
}

/* ── Pulse dots ── */
.preloader-dots {
  display: flex;
  gap: 7px;
  opacity: 0;
  animation: rise .5s ease 1.8s forwards;
}
.preloader-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold-dim);
  animation: dotBeat 1.5s ease-in-out infinite;
}
.preloader-dots span:nth-child(2) { animation-delay: .25s; }
.preloader-dots span:nth-child(3) { animation-delay: .5s;  }
@keyframes dotBeat {
  0%,80%,100% { transform: scale(.6); opacity: .3; }
  40%          { transform: scale(1.1); opacity: 1;  }
}