@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

@font-face {
  font-family: 'Alliance No.2';
  src: url('font/alliance-no2.woff2') format('woff2');
  font-display: swap;

  font-weight: normal;
  font-style: normal;
}


:root{
	
	
	--main-font: "Alliance no.2", Georgia, serif;
	--catchy-font:"Bebas Neue";
	--card-font: "Bebas Neue";
	--card-font-size: 30px; 
	/* colors */
	--blood-red: #880000;
	--grey-af: #999999af;
	--blacktransp-h2: #888888a5;
	--blackgrey-h1: #101010;
	
	/* component colors  var( -- ); 
	--background: #ffffff;
	--main-h1:  #333333af;
	--main-h2: var(--blacktransp-h2);
	--main-h3:
	*/
	
	
	/* TestMode*/
	--background: #111111;/* #780116;#ffffff/* */
  --nav: #ffffff01;
	--main-h1: #dfdfdf; /* #F7b538;*/
  --main-glow: 0 0 5px rgba(255, 255, 255, 0.3),
    0 0 10px rgba(255, 255, 255, 0.3),
    0 0 20px rgba(255, 255, 255, 0.3),
    0 0 40px rgba(255, 255, 255, 0.3);
	--faint-blink: #ff4444; /* #ff4444;*/
	--main-h2: #aaaaaaa5;	/*  #ff4444;*/
	--main-h3: ; /* #000000;*/
	
	--nav-logo: #969696af; /* #F7b538;*/
	--nav-items:  #969696af;/* #ff4444 ;*/
	--nav-items-hover: #ffffff;/* #C32f27;*/
	--nav-hamburger: #969696af;/* #ff4444;*/
	
	--card-text: #ffffff;/* #F7b538; */
}
/*++++++++++ dev ++++++++++++++ */
.text-button {
  all: unset;            /* remove all default styles */
  padding: 0;            /* no padding */
  margin: 0;             /* no margin */
  display: inline;  
  width: auto;           /* no fixed width */
  height: auto;   
	  line-height: normal;   /* normal line height */
	  cursor: pointer;   
  color: var(--main-h1);        /* style text color */

  font-family: inherit;      /* inherit font from parent */
	font-size: 16px;
}

/* dev panel container (dev only) */
.dev-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10001;
}

#colorMenu {
	color: black;
  max-width: 300px;
  width: 90vw;
}
/*++++++++++ dev ++++++++++++++ */


	/* _______________NAV BAR________________*/
nav {

	font-family: var(--main-font);
    width: 100%;         /* be explicit */
  max-width: 100vw;    /* never get wider than viewport */
  box-sizing: border-box;
  display: flex;
  justify-content: space-between; /* space brand and links */
  align-items: center;
	height: 65px; 
  padding: 1vw 1.2vw;
  background-color: var(--nav); /* white bg */

	
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* subtle shadow */
  position: sticky;
  top: 0;
  z-index: 1000;
	color: transparent;
}

nav .logo {
  transform: translate(20%, 0%);
  font-weight: bold;
  font-size: 1.5rem;
  color: var(--nav-logo);
  text-decoration: none;
}

nav .logo-burger {
  display: none;
  font-weight: bold;
  font-size: 1.5rem;
  color: var(--nav-logo);
  text-decoration: none;
}

nav .menu-list{
	font-family: var(--main-font);
	
}
nav ul {
  display: flex;
  list-style: none;
  gap: 2rem;
  margin: 0;
  padding: 3%;
	opacity: 1;
}
/* */
nav ul li a {
  text-decoration: none;
  color: var(--nav-items);
  font-weight: 600;
  transition: color 0.3s ease;
}

nav ul li a:hover {
  color: var(--nav-items-hover);
}



nav.active ul li a.active {
  color: var(--nav-items-hover);
}

nav.active ul {
/*  position: fixed;
  
  top: 0;
  right: 0;      /* change left -> right /
  height: 50vh;
  width: 60vw; /* 60% of viewport width /
  padding-top: 1vw; /* space top relative to viewport /
  background: white;
  z-index: 9999;

  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: -2px 0 5px rgba(0,0,0,0.3); */



	position: fixed;
  top: 0;
  left: 0;       /* cover from left */
  width: 100vw;  /* full viewport width */
  height: 100vh; /* full height */
  background: white;
  box-sizing: border-box;
  flex-direction: column;
  align-items: flex-start; /* text left */
  box-shadow: none;
  z-index: 9999;
  display: flex;
  overflow-y: auto; /* scroll if long */
	transition: background-color 1s ease, opacity 1.5s ease, transform 0.5s ease;

}

nav.active ul li {
  
	font: var(--main-font);
	
  text-align: left;
  font-size: 1.2rem; /* bigger touch area */
}

nav.active .logo-burger {
  display: inline;
  font-weight: bold;
  font-size: 1.5rem;
  color: var(--nav-logo);
  text-decoration: none;
}



.hamburger {
	
	background: none;   /* <button> reset */
	border: 0;
	padding: 0;
	appearance: none;
	position:absolute;
top: 50%;
  right: 7%; /* place on right */
	width: 25px;

  z-index: 1000;
	transform: translateY(-50%);
  cursor: pointer;
 /* enough for 3 bars */
   display: none; 
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
	
}
.hamburger span {
	background: var(--nav-hamburger);
	transition: all 0.3s ease;
  width: 25px;
  height: 3px;
	border-radius: 2px;
}

/* active state */
/*===========Turn hamburger to X===============*/

.scene {
  width: 100vw;
  overflow: hidden;
  position: relative;
  transform: translateY(-50px);
  /* push content up, hide top 50px */
  	}

nav.active .hamburger span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
nav.active .hamburger span:nth-child(2) {
  transform: scaleX(0);
  opacity: 0;
}
nav.active .hamburger span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

nav.active .hamburger span:nth-child(1),
nav.active .hamburger span:nth-child(3) {
  background: var(--nav-hamburger); /* color when hamburger is X */
}

/*+++++++++======= Mobile styles =======++++++++*/


@media (max-width: 600px) {

	/*===========Turn hamburger to X===============*/

	
	
  nav ul {
		
    display: none;
    flex-direction: column;
		background-color: #ffffff;
		transition: background-color 1.5s ease, display 1.5s ease, opacity 1s ease;
		opacity:100%;
			font-size: 100px;
		
		
  }
  .hamburger {
		
    display: flex !important;
		z-index: 11000; /* higher than nav ul's 9999 */
  }
	
  nav.active ul {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 90px 24px 24px; /* clear the sticky bar, breathing room */
    background: #151515;
    background-color: #151515;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    overflow-y: auto;
  }

  nav.active .logo-burger {
    font-size: 50px;
  }

	nav.active .menu-list {
    
		text-decoration: none;
		color: #333;
		font-weight: 500;
		transition: color 0.3s ease in;
		
	}

}
/*===========Turn hamburger to X end===============*/
/*======================NAV BAR end=========================*/


/*======================independent effects=========================*/
/* visually hidden but exposed to assistive tech (typewriter live region) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.faint-blink{
	color: var(--faint-blink);
	animation: flickerAnimationcore 1.3s infinite ease;
	
}
@keyframes flickerAnimationcore { /* flame pulses */
  0%   { opacity:1; }
  60%  { opacity:.40; }
80%  { opacity:.9; }
90%  { opacity:.5; }
  100% { opacity:1; }
}
/*======================independent effects=========================*/


/*======================Heading Title STart=========================*/
.heading_title{
  margin: 0; /* reset UA h1 margin now that this is a real <h1> */
	
	  position: static; /* or absolute */
	/*text-shadow: 2px 2px 4px rgba(0,0,0,0.5);*/
	color: var(--main-h1);

	
  top: 500%; 

	

text-shadow: var(--main-glow);
 	transform: translate(0%, -50%); /* clamp(2vw, 8vw, 20px);
		*/
	font-family: var(--catchy-font);
  font-size: clamp(56px, 7.5vw, 64px);
	


  font-weight: bold;
  letter-spacing: 1.5vw;
  text-transform: uppercase;
  text-align: center; 
	box-sizing: border-box;
	z-index: 120;
	background-color: transparent;
	
}



.heading_liner{
  margin: 0; /* reset UA h2 margin now that this is a real <h2> */
	position: static; /* or absolute */
	/*text-shadow: 2px 2px 4px rgba(0,0,0,0.5);*/
	color: var(--main-h2);
		filter:blur(0.5px);
	/*filter: invert(1); */
	
  transform: translate(0%, -140px); 
  /* clamp(2vw, 8vw, 20px);*/
	font-family: var(--main-font);
  font-size: clamp(12px, 2vw, 40px); /* clamp(2vw, 8vw, 20px);*/
  font-weight: bold;
  letter-spacing: 0.5vw;
  text-transform: uppercase;
	text-align: center; 
	box-sizing: border-box;
	z-index: 120;
	background-color: transparent;
	
}

@media (max-width: 600px) {
  .heading_title {
    text-shadow: var(--main-glow);

    position: static;
    margin-top: -5vh;
    /* move down 20px */
    filter: invert(1);
    top: 500%;

 
  
 
    transform: translate(0%, -05%); 
    /* clamp(2vw, 8vw, 20px);*/
    font-family: var(--catchy-font);
    font-size: clamp(48px, 7.5vw, 64px);
  
    filter: blur(0.5px);
  
    font-weight: bold;
    letter-spacing: 1.5vw;
    text-transform: uppercase;
    text-align: center;
    box-sizing: border-box;
    z-index: 120;
    background-color: transparent;
  }



  .heading_liner {
    position: static;
    /* or absolute */
    /*text-shadow: 2px 2px 4px rgba(0,0,0,0.5);*/


    /*filter: invert(1); */

    transform: translate(0%, -80%);
    font-family: var(--main-font);
    font-size: clamp(12px, 2vw, 40px);
    /* clamp(2vw, 8vw, 20px);*/
    font-weight: bold;
    letter-spacing: 0.5vw;
    text-transform: uppercase;
    text-align: center;
    box-sizing: border-box;
    z-index: 120;
    background-color: transparent;

  }
}



/*======================Heading Title End=========================*/

/* Tablet portrait: the desktop liner lift (-140px) rides up over the title;
   lower it so it clears the heading. Phones (<=600px) and desktop untouched. */
@media (min-width: 601px) and (max-width: 1024px) and (orientation: portrait) {
  .heading_liner {
    transform: translate(0%, -60px);
  }
}



/* ========================= SCENE CSS ========================= */
.scene, .a3d { display: grid; }

.scene {
	
	/* prevent scrollbars */
  pointer-events: auto;
	overflow: hidden;
	/* for 3D look; smaller = more extreme effect */
	perspective: 35em;
	mask: /* lateral fade */
		linear-gradient(90deg, 
				#0000, red 20% 80%, #0000);
		
} 

.scene .scene-overlay{
  
	position: absolute ;
	 background :var(--background);
	  pointer-events: none;/* makes the items behind clickable and hoverable*/
		inset: 0; /* fills parent*/
	backdrop-filter: blur(10px);
		  -webkit-mask-image: linear-gradient(to top, var(--background), transparent 10%);
  mask-image: linear-gradient(to top, var(--background), transparent 10%);
	
}
@media (max-width: 600px){
    .scene {

      width: 100vw;
      margin-top: -10vh;
      overflow: hidden;
      position: relative;
      transform: translateY(0px);
      /* push content up, hide top 50px */
    }
    .scene .scene-overlay {
      /* border: dotted 5px red;*/
      position: absolute;
      background: var(--background);
      pointer-events: none;
      /* makes the items behind clickable and hoverable*/
      inset: 0;
      /* fills parent*/
      z-index:50;
      -webkit-mask-image: linear-gradient(to top, var(--background), transparent 10%);
      mask-image: linear-gradient(to top, var(--background), transparent 10%);



  }}

.a3d {
	overflow: visible;
	place-self: center /* middle align */;
	/* don't flatten 3D transformed children 
	 * of this parent having its own 3D transform */
	transform-style: preserve-3d;
	animation: ry 60s linear infinite;
  
pointer-events: none;


	

}


/* pause on hover: only where a real pointer exists, otherwise the
   sticky :hover state would leave the carousel frozen on touch */
@media (hover: hover) and (pointer: fine) {
  .a3d:hover { animation-play-state: paused; }
}
/*
.a3d::after {
    z-index:1;

    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px; /* height of blur 
    pointer-events: none;
    backdrop-filter: blur(5px);
    /* or 
    filter: blur(5px);
    background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255,0));
} */


/* simplest y axis rotation */
@keyframes ry { to { rotate: y 1turn } }


/* =============card CSS start============ */
.card {
	z-index: 25;
	
  pointer-events: auto;

	--w: 15.5em;	/* base card width */
        /* compute base angle corresponding to a card */
	        --ba: 1turn/var(--n); /* in the future: sibling-count() */
	          grid-area: 1/ 1 /* stack in same one grid cell */;
	width: var(--w);
	aspect-ratio: 8/ 13; /*h/w */
	object-fit: cover;
	border-radius: 1.5em;
            /* don't want to see back of cards in front of screen plane */
	backface-visibility: hidden;
            /* need to use a transform chain here, cannot use separate 
            * rotate & translate properties because they'd be applied 
            * in wrong order (translate, then rotate) for what we need */
	transform: 
          /* rotate around y axis; in the future: sibling-index() */
		rotatey(calc(var(--i)*var(--ba)))
          /* only after that translate along z axis with minus */
		translatez(calc(-1*(.5*var(--w) + .5em)/tan(.5*var(--ba))));
	
	filter: grayscale(90%) blur(3px);
				opacity: 0.25;

	transition:  filter 5s ease, opacity 5s ease;

	
} 
.card:hover {
	position: absolute;
	scale: 1.01;
  border: .5px solid grey; /* or any color and thickness */
  filter: grayscale(0%);
	opacity: 1;
	transition: opacity 0.5s ease , filter 1s linear;
  box-shadow: var(--main-glow);
  z-index: 999;
}

.card.active:hover {
  position: absolute;
  scale: 1.01;
  border: .5px solid grey;
  /* or any color and thickness */
  filter: grayscale(0%);
  opacity: 1;
  transition: opacity 0.5s ease, filter 1s linear;
  box-shadow: var(--main-glow);
  z-index: 999;
}

.card.active {
  /*border-color: white;*/
	transition: border-color 1s ease,opacity 4s ease, filter 5s ease;
  filter: grayscale(00%);
	opacity: 1;

}

.card .card-text {
	
  position: absolute;
	font-family: var(--card-font);
	font-size: var(--card-font-size);
  top: 1em;
  left: 10%;
  right: 1em;
  color: var(--card-text);

  text-shadow: 1px 1px 5px black;
  pointer-events: none;
  user-select: none;
  opacity: 0.1;
	transition: opacity 3s ease;
}

.card.active .card-text {
	
	opacity: 1.0;
		transition: opacity 0.5s ease , filter 1s ease-out;
}

.card:hover .card-text{
  
	opacity: 1.0;
		transition: opacity 1s ease , filter 1s linear;
	
}

.card {
  position: relative;
  /* Ensure z-index works */
  }

.card.selected {
  scale: 1.1;
  z-index: 100;
  box-shadow: 0 0 30px rgba(247, 181, 56, 0.7);
  border: 2px solid #F7b538;
  transition: scale 0.3s ease, box-shadow 0.3s ease;
  }

@keyframes card-pulse {
  0% {scale: 1.05;}
  50% {scale: 1.08;}
  100% {scale: 1.05;}
  }

.card.selected {
  animation: card-pulse 2s infinite;

  }

.a3d scene card.selected {
  animation-play-state: paused;
  transition: transform 3s ease;
}  

.card.selected .reflection {
  opacity: 0.8;
  filter: brightness(1.2);
  }



.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.card video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}





.video-blocker {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: transparent;
}

 .reflection {

  position: fixed;
  top: 100%; /* below card */
  left: 0;
  width: 100%;
  height: 50%; /* adjust height as needed */
  overflow: hidden;
  transform: scaleY(-1.5);
	filter: opacity(1) blur(10px);
  mask-image: linear-gradient(to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.8) 10%,
    transparent 70%
    );
  pointer-events: none;
	transition: mask-image 2s ease, filter 2s ease, grayscale 2s ease, opacity 2s ease, transform 2s ease;
	
	}

 .reflection.active {
  
  position: absolute;
  top: 100%; /* below card */
  left: 0;
  width: 100%;
  height: 50%; /* adjust height as needed */
  overflow: hidden;

  filter: opacity(0.6) blur(10px);
  mask-image: linear-gradient(to bottom,
      transparent 0%,
      rgba(0,0,0,1) 10%,
      transparent 90%
        );
  pointer-events: none;
	transition: mask-image 4s ease, filter 4s ease, grayscale 4s ease, opacity .1s ease, transform 2s ease;
	
}

 .card:hover .reflection {
  
  filter: opacity(1) blur(10px);
  mask-image: linear-gradient(to bottom,
    transparent 0%,
    rgba(0,0,0,1) 10%,
    transparent 70%
    );
  box-shadow: var(--main-glow); 
	
  pointer-events: none;
	transition: mask-image 4s ease, filter 4s ease, grayscale 4s ease, opacity .1s ease;
	
}
.reflection img {
  width: 100%;
  height: 100%;
  object-fit: cover;
	
}

.bounding-box {
	  position: fixed;
  top: 0;
  left: 34.2%; /* center area, since width is 20% */
  width: 40vw; /* 20% of viewport width */
  height: 100vh; /* full viewport height */
  pointer-events: none; /* so it does not block clicks */
 /* outline: 2px solid blue; /* show bounding box */
}
/* ================= foreground (lifted) card ================= */
#focus-layer {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
}

.focus-clone {
  position: fixed;
  overflow: hidden;
  background: #000;
  border-radius: 1.5em;
  pointer-events: none;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  will-change: left, top, width, height, border-radius;
}

.focus-clone.open {
  pointer-events: auto;
  cursor: pointer;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65), 0 0 45px rgba(247, 181, 56, 0.35);
}

.focus-clone > video,
.focus-clone > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* ============= card CSS end ============ */
/* ===================content blockk =========================*/
.contentblock{
	overflow: visible;
	background-color:grey;
	  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns equal width */
  grid-template-rows: repeat(2, 100px); /* 2 rows, 100px height */
  gap: 10px; /* space between grid items */
	z-index:2000;
}


@media (prefers-reduced-motion: reduce) {
	.a3d { animation: none }
}



/* ========================= SCENE CSS end ========================= */


/* ====== General page prettifying and layout ====== */
html, body { 
  
  display: grid;

    margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;

  overscroll-behavior-x: contain;
    overflow-x: hidden; 
    touch-action: pan-y;
      -webkit-tap-highlight-color: transparent;
  }
    
html { height: 100% }

body {
	z-index: -1;
	/*background: #aa0000 background: #ffffff aa1144*/
	background-color: var(--background) ;
}