/* FRIENDZ AND TRENDZ BRAND SYSTEM
   PSEUDOCODE: Keep the approved logo images unchanged; use layout, light, and
   separate overlays to make them feel at home in the existing dark website. */
:root {
  --silver: #e8e1f1;
  --matrix-purple: #b587f7;
  --matrix-deep: #180d25;
}

body {
  background:
    radial-gradient(ellipse at 82% 4%, #562a8128, transparent 34rem),
    radial-gradient(ellipse at 5% 53%, #26143b45, transparent 42rem),
    var(--paper);
}

/* PSEUDOCODE: Pair a sharp monogram with a readable company name in the header. */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-decoration: none;
}
.header-monogram {
  display: block;
  width: 53px;
  height: 48px;
  flex: 0 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 0 12px #a96df733);
}
.brand-lockup-copy { display: block; min-width: 0; }
.brand-lockup-name {
  display: block;
  color: var(--silver);
  font-family: var(--serif);
  font-size: clamp(17px, 1.7vw, 22px);
  letter-spacing: -.035em;
  line-height: 1.05;
  white-space: nowrap;
}
.brand-lockup-name i, .footer-brand i { color: var(--lavender); font-weight: 400; }
.brand-lockup .wordmark-sub { margin-top: 8px; font-size: 7px; }

/* PSEUDOCODE: Use the supplied vertical artwork in the footer with clear space. */
.footer-brand {
  position: relative;
  display: flex;
  width: fit-content;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  color: var(--silver);
  text-decoration: none;
}
.footer-brand img {
  display: block;
  width: 178px;
  height: auto;
  filter: drop-shadow(0 0 18px #9566cf2e);
}
.footer-brand > span {
  color: var(--silver);
  font: 18px/1.15 var(--serif);
  letter-spacing: .015em;
}
.footer-brand + p { margin-top: 14px; }

/* PSEUDOCODE: The hidden grid copy holds each link's width while its visible
   accessible-to-sight-only copy briefly cycles through symbols. */
.decode-text {
  display: inline-grid;
  vertical-align: baseline;
  white-space: pre;
}
.decode-text::before, .decode-text {
  grid-area: 1 / 1;
}
.decode-text::before {
  content: attr(data-label);
  visibility: hidden;
  pointer-events: none;
}
.header nav a, .footer-bottom nav a { min-height: 24px; }

/* PSEUDOCODE: Give the hero artwork a calm purple stage. The real supplied
   logo stays visible before, during, and after the optional reveal. */
.brand-hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px 26px;
  border: 1px solid #6d4b8d;
  border-radius: 95px 5px 5px 5px;
  background:
    radial-gradient(ellipse at 50% 35%, #9e65df30, transparent 55%),
    linear-gradient(145deg, #180e24, #0b0a10 70%);
  box-shadow: inset 0 0 75px #9e65df12, 0 28px 80px #0007;
}
.brand-hero::before {
  content: '';
  position: absolute;
  inset: 12px;
  pointer-events: none;
  border: 1px solid #d0aff51a;
  border-radius: inherit;
}
.logo-stage {
  position: relative;
  display: grid;
  width: 100%;
  place-items: center;
  isolation: isolate;
}
.primary-brand-logo {
  display: block;
  width: min(100%, 620px);
  height: auto;
  max-height: 365px;
  object-fit: contain;
  border-radius: 2px;
  box-shadow: 0 0 45px #8e54d32b;
  animation: logo-arrive 1.05s cubic-bezier(.2,.8,.2,1) both;
}
.matrix-rain {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, transparent 35%, #000 78%);
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 35%, #000 78%);
}
.matrix-rain[hidden] { display: none; }
.logo-light-trace {
  position: absolute;
  z-index: 3;
  inset: 3% 1%;
  width: 98%;
  height: 94%;
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke: #d1a4ff;
  stroke-width: 1.3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px #bd83ff) drop-shadow(0 0 12px #7e34cb);
}
.logo-light-trace path {
  stroke-dasharray: 1550;
  stroke-dashoffset: 1550;
  animation: trace-brand 1.4s .48s ease-out forwards;
}
.logo-light-trace path + path { animation-delay: .82s; }
.diamond-glint {
  position: absolute;
  z-index: 4;
  top: 9%;
  left: 50%;
  color: #f1ddff;
  font-size: clamp(14px, 2.2vw, 24px);
  text-shadow: 0 0 8px #fff, 0 0 22px #bd72ff, 0 0 40px #7333c4;
  transform: translateX(-50%);
  animation: diamond-light 1.8s .6s ease-out both;
  pointer-events: none;
}
.brand-hero-caption {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: #c3b4d3;
  font-size: 8px;
  letter-spacing: .14em;
}
.brand-hero-caption span:first-child { color: var(--silver); }
@keyframes logo-arrive { from { opacity: .3; filter: brightness(.58); transform: scale(.985); } to { opacity: 1; filter: brightness(1); transform: scale(1); } }
@keyframes trace-brand { to { stroke-dashoffset: 0; opacity: .78; } }
@keyframes diamond-light { 0% { opacity: .08; scale: .6; } 55% { opacity: 1; scale: 1.25; } 100% { opacity: .76; scale: 1; } }

/* PSEUDOCODE: Carry purple light and small brand details into existing scenes. */
.journey-stage, .experience-stage, .service-demo, .own-site-art, .studio-story,
.contact-details, .form-panel, .gallery-frame {
  box-shadow: 0 22px 62px #0005, 0 0 36px #8f54cc12;
}
.journey-stage { background-image: radial-gradient(ellipse at 50% 12%, #8d50d52b, transparent 55%); }
.service-demo { position: relative; isolation: isolate; }
.service-demo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 80% 8%, #8c4cc32b, transparent 58%);
  pointer-events: none;
}
.demo-search .demo-query { border-color: #a982d2; box-shadow: 0 0 24px #9849d526; }
.demo-ad .campaign-node { border-color: #735095; }
.demo-ad .campaign-node span { color: var(--lavender); text-shadow: 0 0 16px #b78cfa77; }
.canvas-header { display: flex; align-items: center; gap: 8px; }
.prototype-monogram { width: 31px; height: 23px; object-fit: contain; border-radius: 2px; }
.prototype-brand-logo { display: block; width: 34px; height: 34px; object-fit: contain; border-radius: 2px; }
.work-brand-logo { display: block; width: 52px; height: 52px; object-fit: contain; }
.prototype-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.contact-layout { position: relative; }
.contact-layout::before { content: ''; position: absolute; inset: 0 auto 0 -5vw; width: 24vw; pointer-events: none; background: radial-gradient(ellipse, #7c4dcc14, transparent 72%); }
.footer-top { position: relative; }
.footer-brand::after { content: '✧'; color: var(--lavender); font-size: 14px; position: absolute; margin: 10px 0 0 152px; }

/* PSEUDOCODE: Simplify the artwork and stop decorative movement for visitors
   who request less motion or use a compact phone screen. */
html[data-motion="paused"] .matrix-rain { display: none !important; }
@media (prefers-reduced-motion: reduce) { .matrix-rain { display: none !important; } }
html[data-motion="paused"] .logo-light-trace path { animation: none; stroke-dashoffset: 0; opacity: .55; }
html[data-motion="paused"] .primary-brand-logo { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .logo-light-trace path, .primary-brand-logo, .diamond-glint { animation: none !important; }
  .logo-light-trace path { stroke-dashoffset: 0; opacity: .45; }
}
@media (max-width: 900px) {
  .header-monogram { width: 48px; height: 43px; }
  .brand-lockup { gap: 9px; }
  .brand-lockup-name { font-size: 18px; }
  .brand-hero { max-width: 620px; padding: 42px 18px 20px; }
  .primary-brand-logo { max-height: 300px; }
  .footer-brand img { width: 160px; }
}
@media (max-width: 600px) {
  .header-monogram { width: 42px; height: 38px; }
  .brand-lockup-name { font-size: 16px; }
  .brand-lockup .wordmark-sub { font-size: 6px; letter-spacing: .07em; }
  .brand-hero { height: 340px; padding: 40px 12px 16px; border-radius: 66px 4px 4px 4px; }
  .primary-brand-logo { max-height: 235px; }
  .logo-light-trace { inset: 4% 0; }
  .brand-hero-caption { font-size: 6px; letter-spacing: .08em; gap: 8px; }
  .brand-hero-caption span:last-child { text-align: right; }
  .matrix-rain { opacity: .55; }
  .prototype-brand-logo { width: 30px; height: 30px; }
  .work-brand-logo { width: 46px; height: 46px; }
  .footer-brand img { width: 142px; }
  .footer-brand::after { margin-left: 126px; }
}