/* diplomatic.boo - Spectral Embassy / Mid-Century Ghost Diplomacy */

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

:root{
  --diplomatic-umber:#2C1B0E;
  --embassy-walnut:#3D2B1F;
  --parchment-fog:#F5E6D3;
  --bone-white:#FAF3EB;
  --dusty-sage:#A89F91;
  --terracotta-warm:#C75B3B;
  --spectral-teal:#5BA6A6;
  --phantom-line:#7A6B5D;
  --frosted-bisque:#D4C4B0;
  --manila-tan:#C4A97D;
  --walnut-mid:#4A3728;
  --glass-bg:rgba(245,230,211,0.10);
  --glass-border:rgba(245,230,211,0.15);
  --glass-border-hover:rgba(245,230,211,0.30);
  --glass-inner:rgba(245,230,211,0.12);
  --spring:cubic-bezier(0.34,1.56,0.64,1);
}

html{scroll-behavior:smooth}

body{
  font-family:'Quicksand',sans-serif;
  background:var(--diplomatic-umber);
  color:var(--bone-white);
  overflow-x:hidden;
  line-height:1.65;
  letter-spacing:0.02em;
}

/* Split Screen */
.split-screen{
  display:flex;
  min-height:100vh;
  position:relative;
}

/* Left Panel */
.panel-left{
  width:40%;
  background:rgba(61,43,31,0.85);
  backdrop-filter:blur(12px);
  overflow-y:auto;
  position:relative;
  z-index:2;
}

/* Right Panel */
.panel-right{
  width:60%;
  background:linear-gradient(165deg,#2C1B0E 0%,#3D2B1F 40%,#4A3728 70%,#2C1B0E 100%);
  overflow-y:auto;
  position:relative;
  z-index:2;
}

/* Divider Strip */
.divider-strip{
  width:24px;
  position:fixed;
  left:40%;
  top:0;
  bottom:0;
  background:rgba(212,196,176,0.08);
  backdrop-filter:blur(20px);
  border-left:1px solid rgba(212,196,176,0.12);
  border-right:1px solid rgba(212,196,176,0.12);
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  transition:width 1.2s ease-out,left 1.2s ease-out,background 1.2s ease-out;
}

.divider-strip.expanded{
  width:100vw;
  left:0;
  background:rgba(212,196,176,0.12);
  backdrop-filter:blur(30px);
  z-index:100;
}

/* Fog layers */
.fog-layer{
  position:absolute;
  width:100%;
  height:200%;
  left:0;
  top:0;
  opacity:0.04;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 20%,var(--parchment-fog) 0%,transparent 50%),
    radial-gradient(circle at 30% 60%,var(--spectral-teal) 0%,transparent 40%),
    radial-gradient(circle at 70% 80%,var(--parchment-fog) 0%,transparent 45%);
}
.fog-1{animation:driftFog1 40s linear infinite}
.fog-2{animation:driftFog2 60s linear infinite;opacity:0.03}
.fog-3{animation:driftFog3 80s linear infinite;opacity:0.05}

@keyframes driftFog1{0%{transform:translateY(0)}100%{transform:translateY(-50%)}}
@keyframes driftFog2{0%{transform:translateY(0)}100%{transform:translateY(-30%)}}
@keyframes driftFog3{0%{transform:translateY(-50%)}100%{transform:translateY(0)}}

/* Seal Indicators */
.seal-indicators{
  display:flex;
  flex-direction:column;
  gap:32px;
  z-index:2;
}

.seal-icon{
  width:20px;
  height:20px;
  color:rgba(245,230,211,0.3);
  transition:color 0.5s ease;
}
.seal-icon.active{
  color:var(--terracotta-warm);
}
.seal-icon svg{
  width:100%;
  height:100%;
}

/* Hero Section - Left */
.section-header{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-left{
  padding:40px 32px;
}

.hero-letters{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  padding-right:24px;
}

.hero-letter{
  font-family:'Fredoka',sans-serif;
  font-size:clamp(3rem,8vw,6rem);
  font-weight:600;
  line-height:1.1;
  letter-spacing:0.05em;
  color:transparent;
  -webkit-text-stroke:2px var(--parchment-fog);
  opacity:0;
  transform:translateX(-20px);
  transition:opacity 0.4s ease,transform 0.4s var(--spring);
}
.hero-letter.visible{
  opacity:1;
  transform:translateX(0);
}

/* Hero Section - Right */
.hero-right{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:40px;
}

.boo-badge{
  background:var(--glass-bg);
  backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:120px;
  padding:40px 64px;
  animation:ghostPulse 3s ease-in-out infinite;
}

.boo-text{
  font-family:'Fredoka',sans-serif;
  font-size:clamp(3rem,8vw,6rem);
  font-weight:600;
  color:var(--bone-white);
  letter-spacing:0.05em;
}

.cable-id{
  font-family:'Space Mono',monospace;
  font-size:0.85rem;
  letter-spacing:0.08em;
  color:var(--dusty-sage);
  opacity:0.7;
  margin-top:32px;
}

@keyframes ghostPulse{
  0%,100%{box-shadow:0 0 60px rgba(91,166,166,0.15)}
  50%{box-shadow:0 0 80px rgba(91,166,166,0.25)}
}

/* Cable Metadata - Left Classification */
.section-classification{
  min-height:100vh;
  display:flex;
  align-items:center;
}

.cable-metadata{
  padding:40px 32px;
  display:flex;
  flex-direction:column;
  gap:24px;
}

.meta-item{
  opacity:0;
  transform:translateX(-40px);
  transition:opacity 0.6s ease,transform 0.6s var(--spring);
}
.meta-item.visible{
  opacity:1;
  transform:translateX(0);
}

.meta-label{
  display:block;
  font-family:'Space Mono',monospace;
  font-size:0.75rem;
  letter-spacing:0.12em;
  color:var(--dusty-sage);
  margin-bottom:4px;
  text-transform:uppercase;
}

.meta-value{
  display:block;
  font-family:'Space Mono',monospace;
  font-size:0.85rem;
  letter-spacing:0.08em;
  color:var(--terracotta-warm);
}

/* Glass Card - Base */
.glass-card{
  background:var(--glass-bg);
  backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid var(--glass-border);
  border-radius:16px;
  padding:40px;
  position:relative;
  box-shadow:inset 0 1px 0 var(--glass-inner);
  transition:border-color 0.4s ease;
  overflow:hidden;
}

.glass-card::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:16px;
  background:radial-gradient(ellipse at 50% 50%,rgba(91,166,166,0.08) 0%,transparent 70%);
  opacity:0;
  transition:opacity 0.4s ease;
  pointer-events:none;
}

.glass-card:hover{
  border-color:var(--glass-border-hover);
}
.glass-card:hover::before{
  opacity:1;
}

/* Skeleton Loading States */
.glass-card.skeleton .card-content{
  opacity:0;
  transform:translateY(12px);
  transition:opacity 0.6s ease-out,transform 0.6s ease-out;
}
.glass-card.skeleton.solid .card-content{
  opacity:1;
  transform:translateY(0);
}

.skeleton-overlay{
  position:absolute;
  inset:0;
  border-radius:16px;
  border:2px solid var(--phantom-line);
  background:transparent;
  overflow:hidden;
  transition:opacity 0.6s ease-out,border-color 0.6s ease-out;
}
.skeleton-overlay::after{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(122,107,93,0.3),transparent);
  animation:shimmer 1.8s linear infinite;
}

.glass-card.solid .skeleton-overlay{
  opacity:0;
  border-color:rgba(245,230,211,0.15);
}

@keyframes shimmer{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}

/* Skeleton Showcase */
.skeleton-showcase{
  padding:60px 40px;
  display:flex;
  flex-direction:column;
  gap:32px;
}

.card-title{
  font-family:'Fredoka',sans-serif;
  font-size:clamp(1.3rem,2.5vw,2rem);
  font-weight:500;
  letter-spacing:0.05em;
  line-height:1.3;
  margin-bottom:16px;
  color:var(--bone-white);
}

.card-body{
  font-family:'Quicksand',sans-serif;
  font-size:clamp(0.95rem,1.3vw,1.1rem);
  font-weight:400;
  line-height:1.65;
  letter-spacing:0.02em;
  color:var(--bone-white);
}

.seal-card{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.mid-century-seal{
  width:120px;
  height:120px;
}
.mid-century-seal path,
.mid-century-seal circle,
.mid-century-seal ellipse,
.mid-century-seal line{
  stroke-dasharray:300;
  stroke-dashoffset:300;
  transition:stroke-dashoffset 1.2s ease-in-out,fill 0.5s ease 0.3s;
}
.glass-card.solid .mid-century-seal path,
.glass-card.solid .mid-century-seal circle,
.glass-card.solid .mid-century-seal ellipse,
.glass-card.solid .mid-century-seal line{
  stroke-dashoffset:0;
}

.protocol-title{
  font-family:'Fredoka',sans-serif;
  font-size:1.2rem;
  font-weight:500;
  letter-spacing:0.05em;
  margin-bottom:16px;
  color:var(--bone-white);
}

.protocol-list{
  font-family:'Space Mono',monospace;
  font-size:0.85rem;
  letter-spacing:0.04em;
  line-height:1.8;
  color:var(--dusty-sage);
  padding-left:24px;
}
.protocol-list li{
  margin-bottom:8px;
}

/* Cable Cards - Body */
.cable-cards{
  padding:60px 40px;
  display:flex;
  flex-direction:column;
  gap:32px;
  align-items:center;
}

.cable-card{
  width:90%;
  max-width:700px;
  position:relative;
}

.cable-number{
  position:absolute;
  top:16px;
  right:20px;
  font-family:'Space Mono',monospace;
  font-size:0.75rem;
  letter-spacing:0.08em;
  color:var(--terracotta-warm);
  opacity:0.7;
}

/* Section Divider Seals */
.section-divider-seal{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 0;
}

.inline-seal{
  width:48px;
  height:48px;
  opacity:0;
  transition:opacity 0.8s ease;
}
.inline-seal.visible{
  opacity:1;
}
.inline-seal path,
.inline-seal circle,
.inline-seal rect,
.inline-seal ellipse,
.inline-seal line{
  stroke-dasharray:200;
  stroke-dashoffset:200;
  transition:stroke-dashoffset 1.2s ease-in-out;
}
.inline-seal.visible path,
.inline-seal.visible circle,
.inline-seal.visible rect,
.inline-seal.visible ellipse,
.inline-seal.visible line{
  stroke-dashoffset:0;
}

/* Manila Tab Navigation */
.dossier-index{
  padding:40px 0 40px 0;
  position:sticky;
  top:40px;
}

.manila-tabs{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.manila-tab{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 20px 12px 16px;
  background:rgba(196,169,125,0.08);
  border-top-right-radius:12px;
  border-bottom:none;
  border-left:2px solid transparent;
  text-decoration:none;
  color:var(--dusty-sage);
  transition:all 0.4s var(--spring);
  transform:translateX(0);
  background-image:linear-gradient(180deg,rgba(196,169,125,0.12),rgba(196,169,125,0.04));
}

.manila-tab:hover{
  background:rgba(196,169,125,0.15);
  transform:translateX(8px);
}

.manila-tab.active{
  border-left-color:var(--terracotta-warm);
  background:rgba(196,169,125,0.2);
  transform:translateX(16px);
  color:var(--bone-white);
}

.tab-number{
  font-family:'Space Mono',monospace;
  font-size:0.7rem;
  letter-spacing:0.08em;
  color:var(--terracotta-warm);
  opacity:0.7;
}

.tab-title{
  font-family:'Quicksand',sans-serif;
  font-size:0.9rem;
  font-weight:600;
  letter-spacing:0.02em;
}

/* Archive Strip */
.section-archive .section-right{
  padding:40px 0;
}

.archive-strip{
  display:flex;
  gap:20px;
  padding:40px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.archive-strip::-webkit-scrollbar{display:none}

.archive-card{
  flex:0 0 240px;
  height:320px;
  background:var(--glass-bg);
  backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid var(--glass-border);
  border-radius:20px 8px 20px 8px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  scroll-snap-align:start;
  transition:border-color 0.4s ease;
}
.archive-card:hover{
  border-color:var(--glass-border-hover);
}

.archive-photo{
  flex:1;
  background:linear-gradient(180deg,rgba(199,91,59,0.05),rgba(44,27,14,0.15));
  position:relative;
}
.archive-photo::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 40%,rgba(245,230,211,0.06) 0%,transparent 50%),
    radial-gradient(circle at 70% 60%,rgba(91,166,166,0.04) 0%,transparent 40%);
}

.archive-caption{
  padding:12px 16px;
  font-family:'Space Mono',monospace;
  font-size:0.7rem;
  letter-spacing:0.08em;
  color:var(--dusty-sage);
}

/* Archive label - left */
.archive-label{
  padding:40px 32px;
}

/* Sign-off Section */
.section-signoff{
  min-height:80vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.signoff-left-content,
.signoff-right-content{
  padding:40px;
  text-align:center;
}

/* Convergence Overlay */
.convergence-overlay{
  position:fixed;
  inset:0;
  background:rgba(212,196,176,0.12);
  backdrop-filter:blur(30px);
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity 1s ease;
}
.convergence-overlay.active{
  opacity:1;
  pointer-events:auto;
}

.convergence-content{
  text-align:center;
}

.final-seal{
  width:min(40vmin,300px);
  height:min(40vmin,300px);
  margin-bottom:40px;
}
.final-seal path,
.final-seal circle,
.final-seal ellipse,
.final-seal line{
  stroke-dasharray:600;
  stroke-dashoffset:600;
  transition:stroke-dashoffset 2.5s ease-in-out,fill 0.8s ease 0.5s;
}
.convergence-overlay.active .final-seal path,
.convergence-overlay.active .final-seal circle,
.convergence-overlay.active .final-seal ellipse,
.convergence-overlay.active .final-seal line{
  stroke-dashoffset:0;
}

.convergence-title{
  margin-bottom:24px;
}

.convergence-diplomatic{
  font-family:'Fredoka',sans-serif;
  font-size:clamp(2rem,5vw,4rem);
  font-weight:600;
  color:transparent;
  -webkit-text-stroke:2px var(--bone-white);
  letter-spacing:0.05em;
}

.convergence-boo{
  font-family:'Fredoka',sans-serif;
  font-size:clamp(2rem,5vw,4rem);
  font-weight:600;
  color:var(--spectral-teal);
  letter-spacing:0.05em;
}

.convergence-close{
  font-family:'Space Mono',monospace;
  font-size:0.85rem;
  letter-spacing:0.08em;
  color:var(--dusty-sage);
  opacity:0;
  transition:opacity 1s ease 3.5s;
}
.convergence-overlay.active .convergence-close{
  opacity:0.7;
}

/* Drawer Toggle (mobile) */
.drawer-toggle{
  display:none;
  position:fixed;
  top:16px;
  left:16px;
  z-index:50;
  width:48px;
  height:48px;
  background:rgba(61,43,31,0.9);
  backdrop-filter:blur(12px);
  border:1px solid rgba(245,230,211,0.15);
  border-radius:20px 8px 20px 8px;
  color:var(--bone-white);
  cursor:pointer;
  padding:10px;
}
.drawer-toggle svg{
  width:100%;
  height:100%;
}

/* Asymmetric border-radius for interactive elements */
.manila-tab,
.archive-card,
.drawer-toggle{
  border-radius:20px 8px 20px 8px;
}

/* Responsive */
@media(max-width:1024px){
  .panel-left{width:35%}
  .panel-right{width:65%}
  .divider-strip{left:35%}
}

@media(max-width:768px){
  .split-screen{
    flex-direction:column;
  }
  .panel-left{
    position:fixed;
    top:0;
    left:-100%;
    width:80%;
    max-width:320px;
    height:100vh;
    z-index:80;
    transition:left 0.5s var(--spring);
    overflow-y:auto;
  }
  .panel-left.open{
    left:0;
  }
  .panel-right{
    width:100%;
  }
  .divider-strip{
    display:none;
  }
  .drawer-toggle{
    display:block;
  }
  .hero-letters{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    padding-right:0;
  }
  .hero-letter{
    font-size:clamp(2rem,6vw,4rem);
  }
  .cable-cards{
    padding:40px 20px;
  }
  .cable-card{
    width:100%;
  }
  .skeleton-showcase{
    padding:40px 20px;
  }
  .glass-card{
    padding:24px;
  }
}

/* Body section specific layout */
.section-body.section-left{
  min-height:auto;
  padding-top:60px;
}