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

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

body {
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  overflow: hidden;
}

#preloader {
  position: fixed;
  inset: 0;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 36px;
  z-index: 9999;
  overflow: hidden;
}

/* ── Corner brackets ── */
.pl-corner {
  position: absolute;
  width: 18px;
  height: 18px;
  opacity: 0;
  animation: pl-fade-in 0.6s ease 2.8s forwards;
}

.pl-corner--tl { 
  top: 24px; 
  left: 24px; 
  border-top: 1px solid rgba(43,133,138,0.4); 
  border-left: 1px solid rgba(43,133,138,0.4); 
}

.pl-corner--tr { 
  top: 24px; 
  right: 24px; 
  border-top: 1px solid rgba(43,133,138,0.4); 
  border-right: 1px solid rgba(43,133,138,0.4); 
}

.pl-corner--bl { 
  bottom: 24px; 
  left: 24px; 
  border-bottom: 1px solid rgba(43,133,138,0.4); 
  border-left: 1px solid rgba(43,133,138,0.4); 
}

.pl-corner--br { 
  bottom: 24px; 
  right: 24px; 
  border-bottom: 1px solid rgba(43,133,138,0.4); 
  border-right: 1px solid rgba(43,133,138,0.4); 
}

/* ── Scan line ── */
.scan-line {
  position: absolute;
  top: 0; 
  left: 0; 
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(43,133,138,0.15) 25%, rgba(43,133,138,0.45) 50%, rgba(43,133,138,0.15) 75%, transparent 100%);
  animation: scanMove 3.5s cubic-bezier(0.4, 0, 0.6, 1) 0.5s infinite;
}

/* ── Logo ── */
.logo-wrapper {
  position: relative;
  width: 180px; /* Scaled to 180px */
  height: 180px; /* Scaled to 180px */
  opacity: 0;
  animation: logoEnter 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

.logo-container {
  width: 180px; /* Scaled to 180px */
  height: 180px; /* Scaled to 180px */
  background: #ffffff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
  box-shadow: 0 14px 35px rgba(43, 133, 138, 0.12); 
}

.loader-logo { 
  width: 120px; /* Scaled cleanly inside the 180px circular background canvas */
  height: auto; 
}

.draw-border {
  position: absolute;
  inset: -10px; /* Keeps the ring neatly layered just outside the circle rim */
  z-index: 1;
}

.draw-border svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg); /* Rings start trace seamlessly from top center */
}

.draw-border circle {
  fill: none;
  stroke: #2b858a;
  stroke-width: 1;
  /* 616 is the mathematically precise perimeter length of the updated r=98 path */
  stroke-dasharray: 616; 
  stroke-dashoffset: 1232;
  animation: drawCircleLoop 2.5s linear infinite;
}

/* ── Divider ── */
.loader-divider {
  width: 1px;
  height: 0;
  background: rgba(43,133,138,0.3);
  animation: growLine 0.8s ease 1.8s forwards;
}

/* ── Text ── */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.loading-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: rgba(43, 133, 138, 0.7);
  opacity: 0;
  animation: fadeUp 1s ease 2s forwards;
}

.loading-brand {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: 5px;
  color: #2b858a;
  opacity: 0;
  animation: fadeUp 1s ease 2.2s forwards;
}

.loading-tagline {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(43, 133, 138, 0.7);
  opacity: 0;
  animation: fadeUp 1s ease 2.5s forwards;
}

/* ── Progress ── */
.loader-line-wrap {
  width: 80px;
  height: 1px;
  background: rgba(43, 133, 138, 0.15);
  position: relative;
  overflow: hidden;
  opacity: 0;
  animation: pl-fade-in 0.6s ease 2.4s forwards;
}

.loader-line {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  background: #2b858a;
  transform: scaleX(0);
  transform-origin: left;
  animation: fillBar 1.8s cubic-bezier(0.4, 0, 0.2, 1) 2.4s forwards;
}

/* ── Socials ── */
.socials {
  display: flex;
  align-items: center;
  gap: 20px;
  opacity: 0;
  animation: pl-fade-in 1s ease 3.2s forwards;
}

.social-link {
  color: rgba(43, 133, 138, 0.4);
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: color 0.4s ease;
}

.social-link:hover { 
  color: #2b858a; 
}

/* ── Keyframes ── */
@keyframes logoEnter {
  0%   { opacity: 0; transform: scale(0.94) translateY(8px); filter: blur(2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}

/* Calibrated layout transformation offset loop */
@keyframes drawCircleLoop {
  0% {
    stroke-dashoffset: 1232;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes growLine {
  0%   { height: 0; opacity: 0; }
  100% { height: 32px; opacity: 1; }
}

@keyframes fadeUp {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes pl-fade-in {
  to { opacity: 1; }
}

@keyframes scanMove {
  0%   { top: 0%; opacity: 0; }
  5%   { opacity: 1; }
  95%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

@keyframes fillBar {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}