/* Shared, decorative PCB layers; existing page backgrounds stay intact. */
body{
  isolation:isolate;
}
body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-repeat:repeat;
}
body::before{
  opacity:.16;
  background-size:min(1774px, 105vw) auto, 640px 520px;
  background-position:calc(50% + var(--circuit-x, 0px)) calc(12% + var(--circuit-y, 0px)), var(--circuit-x, 0px) var(--circuit-y, 0px);
  background-repeat:no-repeat, repeat;
  background-image:url("../assets/circuit-logo-amber.png"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='520' viewBox='0 0 640 520'%3E%3Cg fill='none' stroke='%232d858b' stroke-width='1'%3E%3Cpath d='M0 86H92L122 116V206L158 242H232M640 346H550L518 314V236L482 200H414M62 520V436L94 404H178L214 368V312M356 0V62L322 96V152H270M640 46H592L560 78V132M344 520V462L378 428H430'/%3E%3Ccircle cx='236' cy='242' r='4'/%3E%3Ccircle cx='410' cy='200' r='4'/%3E%3Ccircle cx='214' cy='308' r='4'/%3E%3Ccircle cx='266' cy='152' r='4'/%3E%3Ccircle cx='560' cy='136' r='4'/%3E%3Ccircle cx='434' cy='428' r='4'/%3E%3C/g%3E%3C/svg%3E");
}
body::after{
  opacity:.14;
  background-size:min(1774px, max(700px, 125vw)) auto, 860px 680px;
  background-position:calc(50% + var(--circuit-x, 0px)) calc(18% + var(--circuit-y, 0px)), calc(var(--circuit-x, 0px) * -.45) calc(var(--circuit-y, 0px) * -.45);
  background-repeat:no-repeat, repeat;
  background-image:url("../assets/circuit-board-amber.png"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='860' height='680' viewBox='0 0 860 680'%3E%3Cg fill='none' stroke='%23d59a4c' stroke-width='1'%3E%3Cpath d='M0 356H84L112 328V252L140 224H188M860 104H754L718 140V194M348 680V582L382 548H468L498 518V472'/%3E%3Ccircle cx='192' cy='224' r='3'/%3E%3Ccircle cx='718' cy='198' r='3'/%3E%3Ccircle cx='498' cy='468' r='3'/%3E%3C/g%3E%3C/svg%3E");
}
@media (hover:none), (pointer:coarse){
  body::before{opacity:.10}
  body::after{opacity:.10}
}
@media (prefers-reduced-motion:reduce){
  body::before,
  body::after{background-position:0 0}
  body .module::after,
  body .hero-panel::after,
  body .card::after,
  body .hero-card::after,
  body .meta-card::after,
  body .project-module::after,
  body .about-panel::after,
  body .subpanel::after,
  body .policy-card::after,
  body .link-panel::after,
  body .screenshot-card::after,
  body .feature-section::after{
    animation:none;
    opacity:0;
  }
}

/* Reuse the same glass HUD surface across every page while keeping each
   page's own palette through its existing --panel/--product-panel/--card
   variable.  The circuit layers can therefore remain visible behind content. */
body .topbar,
body .shell,
body .card,
body .hero-card,
body .meta-card,
body .hero-panel,
body .module,
body .link-panel,
body .screenshot-card,
body .feature-section{
  background:color-mix(in srgb, var(--panel, var(--product-panel, var(--card, #2a190f))) 82%, transparent);
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
}

/* A single restrained amber sweep travels around module/card frames. */
@property --frame-energy-angle{
  syntax:"<angle>";
  inherits:false;
  initial-value:-18deg;
}
body .module,
body .hero-panel,
body .card,
body .hero-card,
body .meta-card,
body .project-module,
body .about-panel,
body .subpanel,
body .policy-card,
body .link-panel,
body .screenshot-card,
body .feature-section{
  position:relative;
  overflow:hidden;
}
body .module::after,
body .hero-panel::after,
body .card::after,
body .hero-card::after,
body .meta-card::after,
body .project-module::after,
body .about-panel::after,
body .subpanel::after,
body .policy-card::after,
body .link-panel::after,
body .screenshot-card::after,
body .feature-section::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:inherit;
  padding:2px;
  pointer-events:none;
  background:conic-gradient(
    from var(--frame-energy-angle),
    transparent 0 78%,
    rgba(213,154,76,.12) 82%,
    rgba(240,179,91,.72) 86%,
    rgba(255,220,145,.95) 88%,
    rgba(213,154,76,.24) 91%,
    transparent 95% 100%
  );
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:.46;
  animation:frame-energy-sweep 9s linear infinite;
}
body .hero-primary::after,
body .project-module-featured::after{
  opacity:.62;
}
body .module:nth-child(2n)::after,
body .card:nth-child(2n)::after,
body .project-module:nth-child(2n)::after,
body .about-panel:nth-child(2n)::after,
body .subpanel:nth-child(2n)::after{
  animation-delay:-2.25s;
}
body .module:nth-child(3n)::after,
body .card:nth-child(3n)::after,
body .project-module:nth-child(3n)::after,
body .about-panel:nth-child(3n)::after,
body .subpanel:nth-child(3n)::after{
  animation-delay:-4.5s;
}
@keyframes frame-energy-sweep{
  0%{--frame-energy-angle:-18deg;opacity:0}
  6%{--frame-energy-angle:0deg;opacity:.46}
  70%{--frame-energy-angle:324deg;opacity:.46}
  82%{--frame-energy-angle:342deg;opacity:0}
  100%{--frame-energy-angle:342deg;opacity:0}
}

/* Compact Antalya system clock for the shared home-page navigation. */
.system-clock{
  margin-left:auto;
  display:grid;
  grid-template-columns:auto auto;
  grid-template-areas:
    "label time"
    "location location";
  align-items:baseline;
  column-gap:10px;
  row-gap:1px;
  min-width:max-content;
  padding:2px 4px 2px 16px;
  color:var(--accent-soft, #f0c588);
  text-align:right;
  white-space:nowrap;
}
.system-clock-label{
  grid-area:label;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.14em;
  opacity:.82;
}
.system-clock-time{
  grid-area:time;
  font-family:'Audiowide','Orbitron',ui-monospace,monospace;
  font-size:1.05rem;
  line-height:1.1;
  letter-spacing:.08em;
  text-shadow:0 0 8px rgba(240,197,136,.22);
}
.system-clock-location{
  grid-area:location;
  font-size:.62rem;
  letter-spacing:.13em;
  opacity:.7;
}

@media (hover:none), (pointer:coarse), (max-width:1180px){
  body .topbar,
  body .shell,
  body .card,
  body .hero-card,
  body .meta-card,
  body .hero-panel,
  body .module,
  body .link-panel,
  body .screenshot-card,
  body .feature-section{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}

@media (max-width:1180px){
  .system-clock{
    margin-left:0;
    padding-left:0;
    text-align:left;
  }
}
@media (max-width:780px){
  .system-clock{
    grid-template-columns:auto;
    grid-template-areas:
      "time"
      "location";
    row-gap:0;
  }
  .system-clock-label{
    display:none;
  }
  .system-clock-time{
    font-size:.95rem;
  }
  .system-clock-location{
    font-size:.56rem;
  }
}
@media (max-width:520px){
  .system-clock-location{
    display:none;
  }
  .system-clock-time{
    font-size:.88rem;
    letter-spacing:.04em;
  }
}

/* Match the 16:9 video's contained frame, including when it is letterboxed.
   Hide only its bottom 8%; the source file and central logo stay intact. */
.hero-banner-logo.primary-brand{
  overflow:hidden;
}
.hero-banner-logo.primary-brand video{
  --logo-edge-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1280' height='720' viewBox='0 0 1280 720'%3E%3Cpath fill='white' d='M0 0H1280V662.4H0Z'/%3E%3C/svg%3E");
  transform:translate(-50%,-50%) scale(1.07);
  transform-origin:center;
  -webkit-mask:var(--logo-edge-mask) center / contain no-repeat;
  mask:var(--logo-edge-mask) center / contain no-repeat;
}

/* A light outer frame avoids stacking two nearly opaque hero surfaces. */
.shell.hero{
  background:rgba(42,25,15,.12);
}
.hero-panel,
.module{
  background:linear-gradient(180deg,rgba(52,31,19,.72),rgba(37,23,14,.75));
}
.hero-primary{
  background:linear-gradient(180deg,rgba(52,31,19,.80),rgba(37,23,14,.82));
}
/* Let the circuit layer through the nested logo frames as well. */
.hero-panel.hero-banner-card{
  background:rgba(52,31,19,.16);
}
.hero-banner{
  background:rgba(35,21,13,.18);
}
.hero-banner-logo.primary-brand,
.hero-banner-logo.secondary-brand{
  background:rgba(32,19,12,.60);
}
.hero-banner-logo.primary-brand{
  /* Blend the complete logo panel so masked video edges stay seamless. */
  background:#20130c;
  isolation:isolate;
  mix-blend-mode:lighten;
}
.shell.hero,
.module{
  -webkit-backdrop-filter:blur(1px);
  backdrop-filter:blur(1px);
}
@media (max-width:1180px), (hover:none), (pointer:coarse){
  .hero-panel,
  .module{
    background:linear-gradient(180deg,rgba(52,31,19,.84),rgba(37,23,14,.84));
  }
  .hero-banner-logo.secondary-brand{
    background:rgba(32,19,12,.72);
  }
  .shell.hero,
  .module{
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}