/*
ENGINE LAW:
logoVideo is renderer only.
No interaction permitted.
*/

/* =========================
   BASE
========================= */

html {
  background: #000;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: #000;
  }

 /* =========================
   GLOBAL (desktop default)
========================= */
@font-face {
  font-family: 'Russo One';
  src: url('/assets/fonts/RussoOne-Regular.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Philosopher Regular';
  src: url('/assets/fonts/Philosopher-Regular.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Philosopher Bold';
  src: url('/assets/fonts/Philosopher-Bold.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'OrbitronExtraBold';
  src: url('/assets/fonts/Orbitron-ExtraBold.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: 'Ephesis Regular';
  src: url('/assets/fonts/Ephesis-Regular.ttf') format('truetype');
  font-display: swap;
}


/*___Header-Logos___*/

#siteHeader {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
  visibility: visible;
}

  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
}

#slideMenu {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 10020;   
  pointer-events: none;
}

#slideMenu .menu-item {
  position: relative;
  z-index: 10022;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

#slideMenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#slideMenu .menu-item {
  position: absolute;
  left: 50%;
  transform-origin: center center;
  opacity: 0;
  transform:
    translateX(-50%)
    rotateY(-90deg);
  will-change: transform, opacity;
  z-index: 10022;
}
#slideMenu .menu-item:nth-child(1) {
  top: 140px;
}
#slideMenu .menu-item:nth-child(2) {
  top: 180px;
}
#slideMenu .menu-item:nth-child(3) {
  top: 220px;
}
#slideMenu .menu-item:nth-child(4) {
  top: 260px;
}

#slideMenu a {
  text-decoration: none;
  color: #fff0b3;
  font-family: "Russo One", serif;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-shadow:
    0 0 8px rgba(255,240,179,0.5);
  transition: color 0.25s ease;
}

#slideMenu a:hover {
  color: #d4a437;
  text-shadow:
    0 0 8px rgba(212,164,55,0.6);
}


/* =========================
   ANCHOR + LOGO
========================= */

#menuAnchor {
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 500px;
  pointer-events: auto;
  z-index: 10020;
}

.logo-video {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 380px;
  z-index: 10001;
  pointer-events: none;
}

#logoSub {
  position: fixed;
  top: 20px;
  left: 20px;
  height: 120px;
  width: auto;
  z-index: 10003;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#angelLayer{
  opacity: 0;
  pointer-events: none;
}
/*<<<<<<<<<<<<<PAGE1-FOYER>>>>>>>>>>>>>> */


		
#page1{
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.page1-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  max-width: none;
  z-index: 0;
}

	/*----FX-section---*/
#page1::before{
  content:"";
  position:absolute;
  inset:0;

  background: radial-gradient(
    circle at 50% 35%,          /* center slightly above middle */
    rgba(0,0,0,0.0) 0%,        /* light center */
    rgba(0,0,0,0.0) 55%,       /* mid fade */
    rgba(0,0,0,0.0) 100%       /* darker edges */
  );

  pointer-events:none;
  z-index:1;
}


#page1-anchor {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 56vh; 
  pointer-events: none;
  z-index: 2;
}


#page1-text .headline {
  font-family: 'OrbitronExtraBold', sans-serif; 
  font-weight: normal;
  font-size: 3.0rem;
  line-height: 1.2;
 letter-spacing: 0.05em;
  text-align: center;
background: linear-gradient(to bottom,
    #5b3307 8%,
    #c8993c 25%,
    #ffe571 100%
   );
   

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
text-shadow:
  0 3px 6px rgba(0,0,0,0.5);
}


#page1-text .headline-llc {
    font-family: 'OrbitronExtraBold', sans-serif;   
  display: block;
  font-size: 0.40em;
  margin-top: 0;
  letter-spacing: 0.22em;
  opacity: 0.88;
  background: linear-gradient(
  to top,
    #ffc942 0%,
    #ff9d1a 30%,
    #663701 100%
);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow:
    0 1px 1px rgba(0, 0, 0, 0.45);
}

#page1-text .tagline {
  font-family: 'Ephesis Regular', cursive;
  font-size: 2.0rem; 
  letter-spacing: 0.1em;           
  text-align: center;
  color: #4b55ff;              
   background: linear-gradient(
    to bottom,
    #5a77f9 10%,
    #0006a5 30%,
    hsl(232, 100%, 64%) 100%
  );


-webkit-background-clip: text;
background-clip: text;

-webkit-text-fill-color: transparent;
color: transparent;
  text-shadow:
    0 2px 3px rgba(0,0,0,0.45);
}

#page1 .services {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
#page1 .services.left {
  display: flex;
  flex-direction: column;
  gap: 22px;

  text-align: right;
  align-items: flex-end;
}

#page1 .services.right {
  display: flex;
  flex-direction: column;
  gap: 22px;

  text-align: left;
  align-items: flex-start;
}

#page1 .services .service{
  font-family:'Russo One', sans-serif;
  font-size:1.3rem;       
  letter-spacing:0.06em;
background: linear-gradient(to bottom,
    #5b3307 20%,
    #cb962d 50%,
    #ffe571 100%
    );

-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
  text-shadow:
    0 2px 3px rgba(0,0,0,0.45);
}

#page1 .services-grid {
  display: grid;
  grid-template-columns: 1fr 100px 1fr;
  column-gap: 22px;
  row-gap: 30px;
  align-items: center;
  margin-top: 15px;
}

#page1 .portraits{
  display: flex;
  flex-direction: column;  
  align-items: center;
  gap: 10px;
}

#page1 .portraits img {
  width: 60px;
  filter: drop-shadow(0 0 8px rgba(247,190,73,0.25));
}

/* =========================
   PAGE1 ENTRY TRANSITIONS
========================= */
#blackout{
  position: fixed;
  inset: 0;
  background: #000;
  opacity: 0;
  z-index: 999999;
}

.section-overlay,
.section-fx,
#blackout {
  pointer-events: none;
}

/*<<<<<<<<<<<<<SCALER-CINIMATIC>>>>>>>>>>>>>> */

#scaler {
  position: fixed;
  inset: 0;
  z-index: 9;
  display: none;
  pointer-events: none;
}

body.scaler-active #scaler {
  display: block;
  pointer-events: auto;
}

body.scaler-active #page1 {
  display: none;
}

body.static-active #page1 {
  display: none;
}

#scalerVideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

#scaler .section-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 45%, 
      rgba(0,0,0,0.00) 0%,
      rgba(0,0,0,0.00) 45%,
      rgba(0,0,0,0.00) 75%,
      rgba(0,0,0,0.15) 100%
    );
}

#scaler h2 {
  font-family: 'OrbitronExtraBold', sans-serif;
  font-weight: normal;

  font-size: 2.2rem;
  letter-spacing: 0.03em;
  line-height: 1.15;

background: linear-gradient(
  to top,
  #f7e7b5 0%,   
  #f0cf81 30%,
  #d9a93d 65%,
  #7a5716 100%   
);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow:
    0 1px 1px rgba(0,0,0,0.45);
}

#scaler p {
  font-family: 'Philosopher Regular', serif;
  font-size: 1.15rem;
  line-height: 1.6;
  color: #e8e8e8;
  text-shadow:
    0 1px 2px rgba(0,0,0,0.7);
}


/*___Starwars-Crawl___*/
.crawl-scene {
    margin-bottom: 400px; 
}

#crawlWrapper {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  perspective: 1800px;
}

#crawlStage {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 60%;
  perspective: 900px;
  transform: translateX(-50%);
  transform-origin: 50% 0%;
}

#crawlContent {
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
}

.content-wrap {
  max-width: 900px;
  margin: 140px auto 80px;
  padding: 0 20px;
  color: #e8e8e8;
}

.content-wrap h1,
.content-wrap h2,
.content-wrap h3 {
  font-family: 'OrbitronExtraBold', sans-serif;
  color: #e0b247;
}

.content-wrap p {
  font-family: 'Philosopher Regular', serif;
  line-height: 1.7;
  margin-bottom: 20px;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 30px;
}

.btn-row {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 50px;
}

.btn{
  padding:10px 24px;
  font-family:'Russo One', sans-serif;
  font-size:0.95rem;
  letter-spacing:0.05em;
  color:#FFA500; 
  text-decoration:none;
  border-radius:6px;
  border:2px solid rgba(255,165,0,0.85));
    background:linear-gradient(
    to bottom,
    #0B05eb 0%,
    #0500B4 15%,
    #040542 65%,
    #020238 100%
  );
  box-shadow:
    0 3px 8px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.15);
  transition:all .18s ease;
}

/*___Time-Wheel___*/
.tw-action {
  opacity: 0;
  transform: translateY(14px);
  margin-top: 18px;
  padding: 8px 18px;
  font-family: 'Philosopher Bold';
  font-size: 0.9rem;
  color: #000;
  background: #e0b247;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.tw-item.linger .tw-action {
  opacity: 1;
  transform: translateY(0);
}
#debugHUD {
  position: fixed;
  top: 50%;
  left: 20px;
  padding: 12px 16px;
  font-family: monospace;
  font-size: 14px;
  background: red;
  color: white;
  z-index: 999999;
  pointer-events: none;
}

/*___Crawl-Typography___*/
.services.scaler {
  text-align: left;
  align-items: flex-end;
}

#scaler .crawl-scene {
  max-width: 688px;
  margin: 0 auto 350px auto;
  text-align: left;
}

#scaler .scene-title span {
  display: block;
  background: linear-gradient(
    to bottom,
   #f0b211 0%,
    #f6d778 35%,
    #d4a93f 65%,
    #473400 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
 text-shadow:
  0 2px 8px rgba(0,0,0,0.6);
}

#scaler .scene-accent {
  font-family: 'Ephesis Regular', cursive;
  font-size: 1.4rem;
  color: #4b55ff;
  margin: 18px 0 24px;
  text-shadow:
    0 0 4px rgba(75,85,255,0.25),
    0 2px 4px rgba(0,0,0,0.75);
}

#scaler .scene-subtitle {
  font-size: 1.9rem;
  margin-bottom: 20px;
  color: #e0b247;
}

#scaler .scene-body {
  font-family: 'Philosopher Regular', serif;
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.2;
  color: #e6b84a;   /* brighter than list */
  margin-top: 40px;
  max-width: 500px;
}

#scaler .scene-title {
  margin-bottom: 32px;
}

#scaler .scene-list {
  font-family: 'Russo One', sans-serif;
  font-weight: 400; 
  line-height: 2.2;
  text-transform: uppercase;
  font-size: 1.10rem;
  letter-spacing: 0.06em;
  margin-top: 40px;
 background: linear-gradient(
  to bottom,
  #efd27a 0%,
  #d4a93f 45%,
  #b4832f 85%
);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 3px rgba(0,0,0,0.5);
}
#scaler .scene-cta {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 4px;
  letter-spacing: 0.08em;
  font-family: 'OrbitronExtraBold', sans-serif;
  background: linear-gradient(
    to bottom,
    #070963 0%,
    #040542 50%,
    #020238 85%
  );

  color: #e0b247;
  margin-top: 24px;
  margin-bottom: 36px;
  border: 1px solid rgba(224,178,71,0.35);
  text-shadow:
    0 1px 1px rgba(0,0,0,0.6);
}

/*<<<<<<<<<<<<<STATIC-PAGE-GLOBALS>>>>>>>>>>>>>> */

.static-section{
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.static-section.active{
  opacity: 1;
  pointer-events: auto;
}

.section-fx{
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
}

.static-content h1 {
  font-family: 'Russo One', sans-serif;
  font-weight: normal;
  font-size: 3.4rem;
  line-height: 1.05;
 letter-spacing: 0.06em;
  text-align: center;
background: linear-gradient(
  to bottom,
  #fbdf92 0%,
  #ffc745 25%,
  #ffc765 45%,
  #eaad43 70%,
  #b4903e  100%
);

  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
text-shadow:
  0 3px 6px rgba(0,0,0,0.5);
}

.static-content h2{
  font-family:'Russo One', sans-serif;
  font-size:1.6rem;
  letter-spacing:0.03em;
  margin-top:40px;
  margin-bottom:14px;
  color:#b4903e;
  text-shadow:0 0 6px rgba(224,178,71,.35);
}

.static-content p{
  font-family:'Philosopher Regular', serif;
  color:#e6e6e6;
  line-height:1.5;
  margin-bottom:14px;
}

body.static-active #slideMenu {
  opacity: 0;
}

.about-media{
  position: relative;
}

/* =========================
   STATIC DOMAIN BASE
========================= */

.static-section{
  display: none;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
body.static-active .static-section.active{
  display: flex;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* =========================
   ABOUT ROOT AUTHORITY
========================= */

#pageAbout{
  position: fixed;
  inset: 0;
  z-index: 40;
  justify-content: center;
  align-items: center;
  background: #000;
  overflow: hidden;
}

/* =========================
   ABOUT TWO-COLUMN LAYOUT
========================= */

#pageAbout .about-layout{
  position: relative;
  width: min(1240px, 88vw);
  height: 100vh;
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 56px;
  align-items: center;
}

/* =========================
   LEFT MEDIA COLUMN
========================= */

#pageAbout .about-media{
  position: relative;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 9 / 16;
}

#pageAbout .about-media .angelAnim{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================
   RIGHT CONTENT COLUMN
========================= */
#pageAbout .about-content{
  position: relative;
  height: 78vh;
  overflow: hidden;
}

/* =========================
   SCROLLABLE CONTENT AREA
========================= */
#pageAbout .section-content{
  height: 100%;
  overflow-y: auto;
  padding-right: 24px;
  scrollbar-width: thin;
  scrollbar-color: rgba(212,169,63,0.45) rgba(0,0,0,0.25);
}

/* =========================
   TYPOGRAPHY
========================= */
#pageAbout h1,
#pageAbout h2,
#pageAbout h3,
#pageAbout p,
#pageAbout ul{
  text-align: left;
}

#pageAbout .section-content h1{
  font-size: 3.2rem;
  margin-bottom: 30px;
}

#pageAbout .section-content h2{
  font-size: 1.2rem;
  margin-bottom: 18px;
}

#pageAbout .section-content h3{
  margin-top: 28px;
  margin-bottom: 10px;
}

#pageAbout .section-content p{
  font-size: 0.95rem;
  line-height: 1.7;
  color: #d6d6d6;
  margin-bottom: 24px;
}

/* =========================
   SERVICES LIST
========================= */

#pageAbout ul{
  padding-left: 20px;
  margin: 20px 0 30px 0;
  list-style: none;
}

#pageAbout ul li{
  position: relative;
  padding-left: 18px;
  margin-bottom: 12px;
  color: #d6d6d6;
  line-height: 1.6;
}

#pageAbout ul li::before{
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #d4a93f;
  font-size: 1.2rem;
}

/* =========================
   SECTION DIVIDER
========================= */

#pageAbout .section-divider{
  width: 120px;
  height: 2px;
  margin: 50px auto;
  background:
    linear-gradient(
      90deg,
      transparent,
      #d4a93f,
      transparent
    );
}

/* =========================
   ABOUT SCROLLBAR
========================= */

#pageAbout .section-content::-webkit-scrollbar{
  width: 8px;
}

#pageAbout .section-content::-webkit-scrollbar-track{
  background: rgba(0,0,0,0.25);
}

#pageAbout .section-content::-webkit-scrollbar-thumb{
  background: rgba(212,169,63,0.45);
  border-radius: 20px;
}

#pageAbout .section-content::-webkit-scrollbar-thumb:hover{
  background: rgba(248,222,138,0.75);
}
/* =========================
   FLOATING ORCHESTRATION CONTROLS
========================= */

#pageAbout .btn-row{
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  gap: 18px;
  z-index: 30;
}

/* =========================
   SOCIAL FLOAT
========================= */

.social-float{
  position: fixed;
  right: 22px;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 20000;
}

.social-float a{
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,0.22);
  transition:
    transform .22s ease,
    filter .22s ease;
  flex-shrink: 0;
}

.social-float img{
  width: 42px;
  height: 42px;
}

.social-float a:first-child img{
  width: 34px;
  height: 34px;
}
  object-fit: contain;
  display: block;
}
/* subtle orchestration hierarchy */
.social-float a:first-child img{
  width: 108%;
  height: 108%;
}

/* hover */
.social-float a:hover{
  transform: scale(1.08);
  filter: brightness(1.08);
}