@charset "UTF-8";
/* CSS Document */
 .strawbox {  
  position: fixed;
  bottom: calc(25% - 337px);
  left: calc(50% - 693px);
/*width: 1200px;
  height: 880px; x0.8*/
  width: 960px;
  height: 704px;
  pointer-events: none;  /* keep container inert */
  transition: all 0.6s ease-in-out;
}

#language {
    position: fixed;
    left: calc(50% + 40px);
    transform: translateX(0%) translateY(-50%);
    top: calc(50% + 140px);
    
    width: 324px;
    height: 524px;
    background-color: transparent;
    z-index: 1;   /* below the video, above the backpic */
    pointer-events: auto;   /* clickable even though parent is inert */
   /* background-color: rgba(63,109,246,0.0);*/
}
#english {
    position: relative;
   font-family:
    -apple-system,          /* iOS/macOS: SF */
    BlinkMacSystemFont,     /* older Chrome on macOS */
    "Segoe UI",             /* Windows */
    Roboto,                 /* Android/ChromeOS */
    "Helvetica Neue",       /* older macOS */
    Arial,                  /* common fallback */
    sans-serif;             /* generic fallback */
    font-size: 1em;
     display: flex;
    align-items: center;  /* vertical alignment */
    justify-content: center; /* optional: horizontal alignment */
    left: 0px;
    top: 0;
     width: 100px;
  height: 100px;
    border-radius: 50%;
    pointer-events: auto;   /* clickable even though parent is inert */
    cursor: pointer;
    color: #FFFFFF;
     background-color:#20201C;
    text-align: center; 
 opacity: 0;
  transform: scale(0);              /* start tiny */
  transition: transform 0.3s ease-in, opacity 0.6s ease;
  transform-origin: center center;  /* make sure it scales from center */
    }  

#french {
    position: relative;
    font-family:
    -apple-system,          /* iOS/macOS: SF */
    BlinkMacSystemFont,     /* older Chrome on macOS */
    "Segoe UI",             /* Windows */
    Roboto,                 /* Android/ChromeOS */
    "Helvetica Neue",       /* older macOS */
    Arial,                  /* common fallback */
    sans-serif;             /* generic fallback */
     font-size: 1em;
     display: flex;
    align-items: center;  /* vertical alignment */
    justify-content: center; /* optional: horizontal alignment */
    left: 0px;
    top: 30px;
    width: 100px;
  height: 100px;
    border-radius: 50%;
    color: #FFFFFF;
    pointer-events: auto;   /* clickable even though parent is inert */
    cursor: pointer;
    background-color: #52C2AD;
    text-align: center; 
 opacity: 0;
  transform: scale(0);              /* start tiny */
  transition: transform 0.4s ease-out, opacity 0.6s ease;
  transform-origin: center center;  /* make sure it scales from center */
}  

/* final state */
#french.show, #english.show {
  opacity: 1;
  transform: scale(1); /* full size */
}
#french {
  transition-delay: 0.1s; /* add delay for English */
}

/* start hidden & non-interactive */
#backcolor {
    position: fixed;
    inset: 0;         
    background: #e4ebe6;
    opacity: 0; 
    pointer-events: none;
    transition: opacity .25s ease; 
    z-index: 8; 
}

#backcolorvideo {
    position: fixed;
    inset: 0;         
    background: #e4ebe6;
    opacity: 0; 
    pointer-events: none;
    transition: opacity .4s ease; 
    z-index: 8; 
}
/* visible & blocks clicks */
#backcolor.is-active {
  opacity: 1;
  pointer-events: auto; 
}

#backcolorvideo.is-active {
  opacity: 1;
  pointer-events: auto; 
}

#farbackcolor {
    position: fixed;
    inset: 0;         
    background: #e4ebe6;
    opacity: 0; 
    pointer-events: none;
    transition: opacity .55s ease; 
    z-index: -1; 
}
#farbackcolor.is-active {
  opacity: 1;
}
    


.namepos {
    background-image: url("../img/nameA.svg");
    background-repeat: no-repeat;
    background-size: 100%;
    left: 0px;
    top: 0;
    width: 324px;
    height: 70px;
    z-index: 1;   /* below the video, above the backpic */
    pointer-events: auto;   /* clickable even though parent is inert */
    background-color: rgba(246,180,63,0.0);
}
.menulist{
    position: fixed;
    left: calc(50% + 10px);
    transform: translate(0, -50%);
    top: calc(20% + 228px);
    width: 324px;
    height: 524px;
    background-color: transparent;
    mix-blend-mode: multiply;
  /*  will-change: mix-blend-mode;*/
    z-index: 1;   /* below the video, above the backpic */
    pointer-events: auto;   /* clickable even though parent is inert */
  /*  background-color: rgba(63,109,246,0.0);*/
}

.rulepos {
    position: fixed;
    top: calc(20% + 337px); 
    transform:  translateX(0%) translateY(-50%);
    left: calc(50% + 8px);
    height: 100px;
    pointer-events: none; 
    border-top: thin solid #01b3c0;
    transition: width 1.5s ease-out;
}

#rule.expanded {
    width: 100%;
    }
#work.highlighted{
    filter: grayscale(100%)  brightness(0%) contrast(200%);
    }

/* Base sizes & shared button styling */
.workA, .btn1, .btn2, .btn3, .btn4{
  position: relative;
  top: 0;
  left: 0;
  cursor: pointer;
  pointer-events: all;
  background-repeat: no-repeat;
  background-size: contain;  /* optional: ensures nice scaling */
}
/* Sizes for the small layout */
.workA{ width:291px; height:54px; }
.btn1{ width:210px; height:97px; }
.btn2{ width:210px; height:101px; }
.btn3{ width:186px; height:52px;  }
.btn4{ width:186px; height:39px;  }

/* Bind background-images to variables */
.workA{ background-image: var(--menu-img1); }
 .btn1{ background-image: var(--menu-img2); }
 .btn2{ background-image: var(--menu-img3); }
 .btn3{ background-image: var(--menu-img4); }
 .btn4{ background-image: var(--menu-img5); }

/* Default: ENGLISH (small) */
#menu{
    --menu-img1: url("../img/menuA1.svg");
    --menu-img2: url("../img/menuA2.svg");
    --menu-img3: url("../img/menuA3.svg");
    --menu-img4: url("../img/menuA4.svg");
    --menu-img5: url("../img/menuA5.svg");
}
/* FRENCH override (small) */
.lang-fr #menu{
    --menu-img1: url("../img/menuA1F.svg");
    --menu-img2: url("../img/menuA2F.svg");
    --menu-img3: url("../img/menuA3F.svg");
    --menu-img4: url("../img/menuA4F.svg");
    --menu-img5: url("../img/menuA5F.svg");
}

#back {
    will-change: filter; 
    transition: filter 0.9s ease-out;   
}
/* bottom layer */
.backpic {
    position: absolute;
  inset: 0;
  background-image: url(../img/strawman.webp);
  background-repeat: no-repeat;
  background-size: 90% 90%;
  z-index: 0;
}
/* top layer: alpha areas reveal .menulist and .backpic */
#strawvid {
    position: absolute;
    inset: 0;
    object-fit: fill;
    height: 90%;
    width: 90%;/* match your layout choice */
    z-index: 2;                        
    pointer-events: none;              /* so the menu can be clicked */
    background-color: transparent;     /* just explicit */
    will-change: filter; 
    transition: filter 0.9s ease-out; 
}




#roadbox{
    position: absolute;  
    box-sizing: border-box;
    top: calc(25% - 30px);
    left: 50%;
    transform: translateX(-40%);
    padding: var(--gutter);
    width: 100%;
    max-width: 100vw;  
    z-index: 35;
}
.roadvidholder{
  position: relative;
  width: 100%;
  aspect-ratio: var(--ratio-w) / var(--ratio-h); 
  background: #000;      
  border-radius: var(--radius);
  overflow: hidden;
}
/* Make the video fill the holder without distortion */
.roadvidholder video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;        /* keep the 3857×1800 frame w/ letterbox if needed */
  display: block;
}
/* --- Control Buttons --- */
#roadcontrols {
  margin: 0px 0;
  text-align: center;
  display: flex;
  justify-content: bottom;
  gap: 0px;   
}

#roadcontrols img {
  width: 48px;            /* scale icons as needed */
  height: 48px;
  cursor: pointer;
  transition: transform 0.2s ease;
  user-select: none;
}
/*#roadcontrols img:hover {
  transform: scale(1.1);
}*/

/* optional: hide pause initially */
#roadpause {
  display: none;
}
.rdplay {
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.0;
  margin-bottom: -10px;
letter-spacing: 0.02em;
    color: #02A275;
text-transform: uppercase;
}







@media screen and (orientation: portrait) {
 .rdplay {
    padding-left: 0;
}   
#roadbox{   
    top: calc(25% - 80px);
    max-width: 100vw;  
    left: 50%;
    transform: translateX(-50%);
    }
#roadbox .inforoad {  
position: absolute;
  inset-block-end: 0;      /* bottom: 0 */
  inset-inline-start: 0;   /* left: 0 */
  translate: 0 100%;      /* sit exactly one-width to the left */
  z-index: 10;

display: flex;
flex-direction: column;
justify-content: flex-start;  /* content starts at the TOP */
align-items: flex-start;      /* content aligned to the LEFT */
text-align: left;             /* align text inside the box */
padding-top: 0px;            /* breathing room at the top */
margin-inline-start: 70px;       /* no offset unless you need one */
inline-size: clamp(8ch, 32vw, 55ch); 

}
.closeroad {
    background-image: url("../img/closeX.svg");
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    top: -40px;
    right: 30px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 10; /* make sure it's above everything */
}
}




@media screen and (orientation: portrait) and (min-width: 580px) and (min-height: 600px){
    #roadbox{   
    top: calc(25% - 100px);
    max-width: 90vw;  
    left: 50%;
    transform: translateX(-50%);
    }
.closeroad {
    width: 40px;
    height: 40px;
}
}







@media (orientation: landscape) {  

.rdplay {
    padding-left: 10%;
}
#roadbox{   
    top: calc(33% - 125px);
	width: 75%;
 /*   max-width: calc(50% + 190px);*/
	 max-width: 530px; 
    left: 50%;
    transform: translateX(-44%);
	 
    }
    
#roadbox .inforoad {  
  position: absolute;
  inset-block-end: 0;      /* bottom: 0 */
  inset-inline-start: 0px;   /* left: 0 */
  translate: -100% -20px;      /* sit exactly one-width to the left */
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  text-align: right;
  padding-bottom: 0px;
  /* optional: gap from the wrapper edge */
  margin-inline-start: 0px; /* tweak to taste */
 inline-size: clamp(8ch, 16vw, 64ch); 
  
}   
.closeroad {
    background-image: url("../img/closeX.svg");
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    top: 20px;
    right: -40px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 10; /* make sure it's above everything */
}
}

@media (orientation: landscape) and (min-height: 600px) { 
    
#roadbox{   
    top: calc(25% - 90px);
	width: 60%;
	max-width: 700px; 
    left: 50%;
    transform: translateX(-40%);
    }
}

@media (orientation: landscape) and (min-height: 900px) { 
    
#roadbox{   
    top: calc(25% - 90px);
		width: 70%;
   max-width: 800px; 
    left: 50%;
    transform: translateX(-40%);
    }
 
}







@media (orientation: landscape) and (min-width: 1366px) { 

#roadbox{   
    top: calc(25% - 100px);
	width: 57%;
     max-width: 550px; 
    left: 50%;
    transform: translateX(-45%);
    }
    
}



@media (orientation: landscape) and (min-width: 1366px) and (min-height: 600px) { 

#roadbox{   
    top: calc(25% - 110px);
		width: 70%;
     max-width: 700px; 
    left: 50%;
    transform: translateX(-45%);
    }
    
}

@media (orientation: landscape) and (min-width: 1366px) and (min-height: 900px) { 

#roadbox{   
    top: calc(25% - 130px);
		width: 70%;
     max-width: 900px; 
    left: 50%;
    transform: translateX(-45%);
    }
    
}


@media screen and (min-width: 580px) {	

.strawbox {
  position: fixed;
  bottom: calc(25% - 538px);
  left: calc(50% - 670px);
  width: 1200px;
  height: 880px;
  pointer-events: none;  /* keep container inert */
  transition: all 0.6s ease-in-out;
}

/* middle layer: visible through the video’s transparent pixels */
.menulist{
    left: calc(50% + 30px);
    top: calc(50% - 0px);
    transform: translate(0%, -50%);
    width: 408px;
    height: 320px;
}
.rulepos {
    top: calc(50% + 108px); 
    transform: translateX(0%) translateY(-50%);
    left: calc(50% + 25px);
    width: 0;
    height: 100px;
}
.namepos {
    position: relative;
    background-image: url("../img/nameB.svg");
    background-repeat: no-repeat;
    left: 0px;
    top: 0;
    width: 346px;
    height: 34px;
    z-index: 1;   /* below the video, above the backpic */
    pointer-events: auto;   /* clickable even though parent is inert */
    background-color: rgba(229,63,246,0.0);
}
    

 /* Sizes for the med layout */
.workA{ width:408px; height:60px; }
.btn1{ width:408px; height:65px; }
.btn2{ width:408px; height:68px; }
.btn3{ width:347px; height:41px;  }
.btn4{  width:347px; height:52px;  }


/* Default: ENGLISH (med) */
#menu{
    --menu-img1: url("../img/menuB1.svg");
    --menu-img2: url("../img/menuB2.svg");
    --menu-img3: url("../img/menuB3.svg");
    --menu-img4: url("../img/menuB4.svg");
    --menu-img5: url("../img/menuB5.svg"); 
}
/* FRENCH override (med) */
.lang-fr #menu{
    --menu-img1: url("../img/menuB1F.svg");
    --menu-img2: url("../img/menuB2F.svg");
    --menu-img3: url("../img/menuB3F.svg");
    --menu-img4: url("../img/menuB4F.svg");
    --menu-img5: url("../img/menuB5F.svg"); 
}
  .lang-fr #menu .btn2{
    top: -7px;  /* moves the whole button up */
  }
    
.backpic {
  inset: 0;
  background-image: url(../img/strawman.webp);
  background-repeat: no-repeat;
  background-size: 68% 68%;
  z-index: 0;
}
/* top layer: alpha areas reveal .menulist and .backpic */
#strawvid {
    inset: 0;
    object-fit: fill;
    height: 68%;
    width: 68%;/* match your layout choice */
    z-index: 2;                        
    pointer-events: none;              /* so the menu can be clicked */
    background-color: transparent;     /* just explicit */
    will-change: filter; 
    transition: filter 0.9s ease-out; 
}


	
} /*min-width: 540*/



@media screen and (min-width: 580px) and (min-height: 600px) {

 
#language {
    left: calc(50% + 130px);
    transform: translateX(0%) translateY(-50%);
    top: calc(50% + 140px);
}
 .strawbox {  
  position: fixed;
  bottom: calc(25% - 337px);
  left: calc(50% - 900px);
  width: 1200px;
  height: 880px;
  pointer-events: none;  /* keep container inert */
  transition: all 0.6s ease-in-out;
}
.namepos {
    background-image: url("../img/nameA.svg");
    background-repeat: no-repeat;
    background-size: 100%;
    left: 0px;
    top: 0;
    width: 324px;
    height: 70px;
    z-index: 1;   /* below the video, above the backpic */
    pointer-events: auto;   /* clickable even though parent is inert */
    background-color: rgba(246,180,63,0.0);
}
.menulist{
    left: calc(50% + 90px);
    top: calc(70% - 55px);
    transform: translate(0, -50%);
    width: 324px;
    height: 524px;
}
.rulepos {
    top: calc(70% + 75px); 
    transform: translateX(0%) translateY(-50%);
     left: calc(50% + 90px);
    height: 100px;
}
    
 /* Sizes for the large layout */
.workA{ width:324px; height:60px; }
.btn1{ width:227px; height:105px; }
.btn2{ width:227px; height:109px; }
.btn3{ width:202px; height:56px;  }
.btn4{ width:202px; height:42px; }

/* Default: ENGLISH (large) */
#menu{
    --menu-img1: url("../img/menuA1.svg");
    --menu-img2: url("../img/menuA2.svg");
    --menu-img3: url("../img/menuA3.svg");
    --menu-img4: url("../img/menuA4.svg");
    --menu-img5: url("../img/menuA5.svg");
}
/* FRENCH override (large) */
.lang-fr #menu{
    --menu-img1: url("../img/menuA1F.svg");
    --menu-img2: url("../img/menuA2F.svg");
    --menu-img3: url("../img/menuA3F.svg");
    --menu-img4: url("../img/menuA4F.svg");
    --menu-img5: url("../img/menuA5F.svg");
}

    .lang-fr #menu .btn2{
    top: 0px;  /* moves the whole button up */
  }  
.backpic {
  inset: 0;
  background-image: url(../img/strawman.webp);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: 0;
}
/* top layer: alpha areas reveal .menulist and .backpic */
#strawvid {
    inset: 0;
    object-fit: fill;
    height: 100%;
    width: 100%;/* match your layout choice */
    z-index: 2;                        
    pointer-events: none;              /* so the menu can be clicked */
    background-color: transparent;     /* just explicit */
    will-change: filter; 
    transition: filter 0.9s ease-out; 
}


}/*min-width: 580 and min height 680*/






@media screen and (min-width: 736px) {

.namepos {
    position: relative;
    background-image: url("../img/nameB.svg");
    background-repeat: no-repeat;
    left: 0px;
    top: 0;
    width: 408px;
    height: 40px;
    z-index: 1;   /* below the video, above the backpic */
    pointer-events: auto;   /* clickable even though parent is inert */
    background-color: rgba(229,63,246,0.0);
}
.rulepos {
    top: calc(50% + 114px); 
    transform: translateX(0%) translateY(-50%);
    left: calc(50% + 25px);
    width: 0;
    height: 100px;
}

}










@media screen and (min-width: 736px) and (min-height: 600px) {
.namepos {
    background-image: url("../img/nameA.svg");
    background-repeat: no-repeat;
    background-size: 100%;
    left: 0px;
    top: 0;
    width: 324px;
    height: 70px;
    z-index: 1;   /* below the video, above the backpic */
    pointer-events: auto;   /* clickable even though parent is inert */
    background-color: rgba(246,180,63,0.0);
}  
.menulist{
    left: calc(50% + 90px);
    top: calc(70% - 130px);
    transform: translate(0, -50%);
    width: 324px;
    height: 544px;
}
.rulepos {
    top: calc(70% + 66px); 
    transform: translateX(0%) translateY(-50%);
    left: calc(50% + 90px);
    height: 100px;
}

/* Sizes for the large layout */
.workA{ width:324px; height:60px; }
.btn1{ width:307px; height:142px; }
.btn2{ width:307px; height:148px; }
.btn3{ width:275px; height:76px;  }
.btn4{ top: 0px; width:275px; height:58px;  }


/* Default: ENGLISH (large) */
#menu{
    --menu-img1: url("../img/menuA1.svg");
    --menu-img2: url("../img/menuA2.svg");
    --menu-img3: url("../img/menuA3.svg");
    --menu-img4: url("../img/menuA4.svg");
    --menu-img5: url("../img/menuA5.svg");
}
/* FRENCH override (large) */
.lang-fr #menu{
    --menu-img1: url("../img/menuA1F.svg");
    --menu-img2: url("../img/menuA2F.svg");
    --menu-img3: url("../img/menuA3F.svg");
    --menu-img4: url("../img/menuA4F.svg");
    --menu-img5: url("../img/menuA5F.svg");
}
   .lang-fr #menu .btn2{
    top: 0px;  /* moves the whole button up */
  }
    
}/*screen and (min-width: 736px) and (min-height: 600px)*/
    
 
@media screen and (min-width: 960px) and (min-height: 600px) {

}
    
@media screen and (min-height: 1320px) {
.strawbox {
  bottom: 0;
}


}/*min-width: 767 and mon height 540*/