/* Crown Creative Suite — Shared Header Module
   File: Core/css/crown-header.css
   Purpose: standardized app header, crown branding, Citadel return button, and shared gold/glass button styling.
*/

:root{
  --crown-bg:#05060a;
  --crown-text:#f7e8c8;
  --crown-muted:#c9b990;
  --crown-gold:#f2c14e;
  --crown-gold-2:#d39a31;
  --crown-line:rgba(242,193,78,.22);
  --crown-glass:rgba(5,7,12,.68);
  --crown-glass-deep:rgba(8,10,18,.84);
  --crown-shadow:0 18px 46px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.05);
  --crown-radius:22px;
}

.crown-header{
  position:sticky;
  top:0;
  z-index:3000;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px 20px;
  color:var(--crown-text);
  background:
    linear-gradient(180deg, rgba(14,10,4,.74), rgba(5,7,12,.74)),
    rgba(5,7,12,.78);
  border-bottom:1px solid var(--crown-line);
  box-shadow:var(--crown-shadow);
  backdrop-filter:blur(18px) saturate(1.12);
  -webkit-backdrop-filter:blur(18px) saturate(1.12);
  font-family:Georgia, "Times New Roman", serif;
}

.crown-header *{
  box-sizing:border-box;
}

.crown-brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.crown-logo-wrap{
  position:relative;
  width:73px;
  height:73px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border-radius:18px;
  background:
    radial-gradient(circle at center, rgba(242,193,78,.12), rgba(5,7,12,.06) 62%, transparent 76%);
  overflow:visible;
}

.crown-logo{
  width:73px;
  height:73px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 0 14px rgba(242,193,78,.38));
}

.crown-logo-wrap::before,
.crown-logo-wrap::after{
  content:"✦";
  position:absolute;
  color:#fff4bf;
  text-shadow:0 0 6px rgba(255,244,191,.95), 0 0 12px rgba(212,175,55,.55);
  pointer-events:none;
  opacity:0;
  z-index:3;
}

.crown-logo-wrap::before{
  font-size:10px;
  top:8px;
  left:12px;
  animation:crownLogoTwinkleA 5.2s ease-in-out infinite;
}

.crown-logo-wrap::after{
  font-size:8px;
  top:17px;
  right:12px;
  animation:crownLogoTwinkleB 6.1s ease-in-out infinite;
}

@keyframes crownLogoTwinkleA{
  0%,82%,100%{opacity:0;transform:scale(.4) rotate(0deg);}
  86%{opacity:1;transform:scale(1.15) rotate(14deg);}
  90%{opacity:.35;transform:scale(.7) rotate(22deg);}
}

@keyframes crownLogoTwinkleB{
  0%,68%,100%{opacity:0;transform:scale(.45) rotate(0deg);}
  72%{opacity:1;transform:scale(1.1) rotate(-12deg);}
  76%{opacity:.28;transform:scale(.72) rotate(-18deg);}
}

.crown-brand-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  min-width:0;
}

.crown-suite-name{
  color:var(--crown-gold);
  font-size:clamp(1.05rem, 1.45vw, 1.65rem);
  line-height:1.05;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-shadow:0 0 18px rgba(242,193,78,.32);
  white-space:nowrap;
}

.crown-app-name{
  color:#f8d987;
  font-size:clamp(.74rem, .95vw, .92rem);
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.95;
  white-space:nowrap;
}

.crown-app-subtitle{
  color:var(--crown-muted);
  font-size:.78rem;
  letter-spacing:.08em;
  opacity:.9;
}

.crown-header-center{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.crown-header-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
  flex:0 0 auto;
}

.crown-btn{
  min-height:42px;
  border:1px solid rgba(242,193,78,.18);
  border-radius:12px;
  padding:9px 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:var(--crown-text);
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
    rgba(5,7,12,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 10px 24px rgba(0,0,0,.18);
  font:inherit;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.crown-btn:hover{
  transform:translateY(-1px);
  background:rgba(242,193,78,.12);
  border-color:rgba(242,193,78,.42);
  box-shadow:0 12px 24px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.04);
}

.crown-btn svg,
.crown-btn [data-lucide]{
  width:17px;
  height:17px;
  stroke-width:1.7;
  color:var(--crown-gold);
  flex:0 0 auto;
}

.crown-btn-primary{
  color:#fff4d3;
  background:linear-gradient(135deg, rgba(166,106,28,.78), rgba(242,193,78,.25));
  border-color:rgba(242,193,78,.46);
  box-shadow:0 12px 32px rgba(0,0,0,.30), 0 0 20px rgba(242,193,78,.08), inset 0 1px 0 rgba(255,255,255,.05);
}

.crown-btn-citadel{
  position:relative;
  overflow:hidden;
  color:#fff1cf;
  background:
    linear-gradient(135deg, rgba(166,106,28,.78), rgba(242,193,78,.25)),
    rgba(5,7,12,.55);
  border-color:rgba(242,193,78,.50);
  box-shadow:0 12px 32px rgba(0,0,0,.30), 0 0 20px rgba(242,193,78,.08), inset 0 1px 0 rgba(255,255,255,.05);
}

.crown-btn-citadel::after{
  content:"";
  position:absolute;
  top:-45%;
  bottom:-45%;
  left:-38%;
  width:32%;
  transform:translateX(-230%) skewX(-18deg);
  background:linear-gradient(
    110deg,
    rgba(255,255,255,0) 0%,
    rgba(255,248,212,.12) 24%,
    rgba(255,255,255,.88) 49%,
    rgba(255,250,190,.92) 53%,
    rgba(255,248,212,.12) 78%,
    rgba(255,255,255,0) 100%
  );
  filter:blur(.6px);
  mix-blend-mode:screen;
  animation:crownCitadelGlint 5.8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes crownCitadelGlint{
  0%,58%,100%{
    transform:translateX(-230%) skewX(-18deg);
    opacity:0;
  }
  64%{opacity:.22;}
  70%{opacity:.78;}
  76%{opacity:.16;}
  88%{
    transform:translateX(430%) skewX(-18deg);
    opacity:0;
  }
}

.crown-pill{
  min-height:42px;
  border:1px solid rgba(242,193,78,.18);
  border-radius:999px;
  padding:8px 12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)),
    rgba(5,7,12,.42);
  color:var(--crown-muted);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035), 0 10px 24px rgba(0,0,0,.16);
}

.crown-pill-label{
  color:#f4d483;
  font-size:.74rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  white-space:nowrap;
}

@media(max-width:980px){
  .crown-header{
    align-items:flex-start;
    flex-direction:column;
    padding:12px 14px;
  }

  .crown-brand{
    width:100%;
  }

  .crown-logo-wrap,
  .crown-logo{
    width:60px;
    height:60px;
  }

  .crown-header-center,
  .crown-header-actions{
    width:100%;
    justify-content:flex-start;
  }

  .crown-suite-name,
  .crown-app-name{
    white-space:normal;
  }
}

@media(prefers-reduced-motion:reduce){
  .crown-logo-wrap::before,
  .crown-logo-wrap::after,
  .crown-btn-citadel::after{
    animation:none !important;
  }

  .crown-btn{
    transition:none !important;
  }
}