/*********************************************************************/
/*********************************************************************/
/**** ----------------------------------------------------------  ****/
/****       THE HUMANE REPRESENTATION OF MODELS PROJECT           ****/
/**** ----------------------------------------------------------  ****/
/****    OPTIONAL FYRE THEME: Supplementary stylesheet for        ****/
/****    the HROM interface                                       ****/                
/****    - Made by Little Sketches                                ****/                       
/****                                                             ****/             
/*********************************************************************/
/*********************************************************************/


/****************************************************/
/*** TYPOGRAPHY | IMPORTED FONTS AND CLASS STYLES ***/
/****************************************************/

  @import url('https://fonts.googleapis.com/css?family=Nothing+You+Could+Do&display=swap');

  @font-face {
    font-family: 'Visby CF';
    src: url('../fonts/VisbyCF-Light.woff2') format('woff2'),
    url('../fonts/VisbyCF-Light.woff') format('woff');
    font-weight: normal;
  }    
  @font-face {
    font-family: 'Visby CF';
    src: url('../fonts/VisbyCF-Bold.woff2') format('woff2'),
    url('../fonts/VisbyCF-Bold.woff') format('woff');
    font-weight: bold;
  }      
  main.fyre{
    font-family: 'Visby CF';      
  }
  .fyre .strong{
    color: #EF6C26;
    font-weight: bold;
  }

/****************************************************/
/****** CONTENT LAYOUT | GRID LAYOUT STRUCTURE  *****/
/****************************************************/

    /*************************************************/
    /***  THREE-PANE LAYOUT CONFIGURATIONS         ***/
    /***  For the  main action explorer sections   ***/
    /*************************************************/
      .fyre .content-container.layout-F{
        grid-template-columns: calc(25% - 1vw) 50% calc(25% - 1vw); 
        grid-template-rows: 20% 10% 15% calc(55% - 2vw);
        grid-gap: 0vw;        
        grid-template-areas:
          " ... banner ..."
          " ... paneA  ..."
          " ... paneB  ..."
          " ... paneC  ..."        
      }

/****************************************************/
/***** PROLOGUE: "THE SETUP" SCENE / MAIN MENU  *****/
/****************************************************/

    .fyre #setupScene-container.context{
      grid-template-columns: calc(0% - 1vw) 33% calc(25% - 1vw);
      grid-template-rows: calc(100% - 2vw) 25% 15% calc(45% - 2vw);
    }
    /* .fyre #setupScene-container.context{
      grid-template-columns: calc(100% - 2vw) 25% 15% calc(45% - 2vw);
      grid-template-rows: 0% 33% 0%;
    } */
  /**************************************************/
  /** GENERAL: pane styling for overlays and title **/
  /**************************************************/
    .fyre #setup-banner-background{     
      width: calc(100% - 2rem);
      height: calc(100% - 2rem);
      filter: contrast(1.2) brightness(1) grayscale(1);
      padding: 2rem 0rem 0rem 2rem;
    }
    .fyre .setup-pane-overlay > img {
      width: 100%;
      height: 100%;
      filter: contrast(1) brightness(1) grayscale(1);
      object-fit: cover;
    }
    .fyre svg.shape-overlays{
      width: 100%;
      height: 100%;
      position: relative;
      top: 0; 
      left: 0;  
    }
    .fyre #setup-pane-1-title, 
    .fyre #setup-pane-2-title, 
    .fyre #setup-pane-3-title{
      z-index: 6;
      font-family: 'Nothing You Could Do', cursive;
      font-size: 1.5rem;
      text-shadow: none;        
    }
    .fyre .primary-header{
      font-weight: bold;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-size: 1.5rem;
      padding: 0.5rem 1.5rem;
      margin: 0rem 1rem
    }
    .fyre #baseline-label:hover,
    .fyre #action-label:hover,
    .fyre #plan-label:hover{
      background: #4a4a4a;  
    }   

  /*************************************************************/
  /** 0. TOP SECTION: "SETUP" SCENE BANNER SECTION - Problem  **/
  /*************************************************************/
    .fyre #setup-banner{
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(4, 1fr);
    }
    .fyre #setup-banner.context{
      grid-template-columns: repeat(4, 1fr) 2vw;
      grid-template-rows: repeat(4, 1fr) 2vw ;
    }    
    .fyre #setup-banner-background-container{
      grid-area: 1 / 1 / 5 / 5;
    }
    .fyre #setup-banner-background{
      filter: contrast(1.2) brightness(1) grayscale(0)
    }
    .fyre #setup-banner-background:hover{
      filter: none;
    }
    .fyre #setup-banner-introLabel{ 
      grid-area: 1 / 1 / 6 / 3;    
      width: fit-content;    
      place-self: center start;
      margin: 0;
    }        
    .fyre #setup-banner-introLabel.context{ 
      grid-area: 1 / 1 / 2 / 3;    
    }             
    .fyre #setup-banner-intro{
      background: #FFF;  
      color: #95A4D4;  
      border-radius: 0rem 4rem 4rem 0rem;
      font-size: 2rem;
      padding: 1.5rem 3rem 1.5rem 0rem;
      margin: 0rem;  
    }
    .fyre #setup-banner-intro:hover{
      background: #4a4a4a;          
    }
    .fyre #setup-banner-square{
      background: #95A4D4;    /* Fyre purple */
      height: 18vw;
      width: 18vw;
      grid-area: 5 / 3 / 6 / 6;
      align-self: end;
      mix-blend-mode: color-burn;       
      z-index: 10;
    }
    .fyre #setup-context-container {
      position: absolute;
      top: 5vw;
      left: 50vw;
      width: 40vw;
    }
    .fyre #setup-contextDescription-container{
      font-family: 'Visby CF';
      color: #95A4D4;
      font-size: 1.25rem;
      line-height: 1.5;
    }
    .fyre #setup-contextDescription-container.context{
      grid-area:  1 / 1 / 5 / 5;
    }    
    .fyre #setup-contextDescription-container:before{
      content: url(../img/svg/icons/fyreWaveDark.svg);
      height: 1rem;
      position: relative;
      top: -1rem;     
    }
    .fyre #setup-contextDescription-container  .strong{
      color: #95A4D4;
      font-weight: bold;
    }
    .fyre #setup-contextDescription-container  .written{
      color: #95A4D4 ;
      font-family: 'Nothing You Could Do', cursive;
      font-size: 1.5rem;
      transform: rotate(-4deg);
      text-align:  right;
    }

    /*************************************************************/
    /*** 1. LEFT "SETUP" SCENE PANE #1 - Baseline               **/
    /*************************************************************/
      .fyre #setup-pane-1{
        background: #95A4D4;         /* fyre purple */   
      }
      .fyre #setup-pane-1-label {
        grid-area: 2 / 7 / 3 / 10;
        place-self: start end;
        width: fit-content;
        z-index: 6;
      }
      .fyre #baseline-label{
        color:#FEFDCA;              /* fyre pink */        
        border-radius: 4rem;     
      }
      .fyre #baseline-label:hover{
        background: #FEFDCA;        /* fyre yellow */
        color:#F8CCD4;              /* fyre pink */    
      }      
      .fyre #setup-pane-1-title{
        display: none;
      }
      .fyre #banner-overlay-svg .shape-overlays__background{
        fill: #95A4D4;          /* fyre purple */
      }
      .fyre #banner-overlay-svg .shape-overlays__star{
        fill: #FEFDCA;          /* fyre yellow */
      }
      .fyre #pane-1-overlay-svg .shape-overlays__background{
        fill: #F8CCD4;          /* fyre pink */
      }
      .fyre #pane-1-overlay-svg .shape-overlays__star{
        fill: #FEFDCA;          /* fyre yellow */
      }      

    /*************************************************************/
    /** 2. CENTER "SETUP" SCENE PANE #2 - Action content        **/
    /*************************************************************/  

      .fyre #setup-pane-2{
        background: #F8CCD4   /* fyre pink  */

      }
      .fyre #setup-pane-2-label{
        grid-area:  3 / 1 / 4 / 3;
        z-index: 6;
        width: fit-content;        
      }      
      .fyre #action-label{
        color: #94A4D5;          /* fyre purple */  
        border-radius: 4rem;          
      }
      .fyre #action-label:hover{ 
        background: #94A4D5;    /* fyre purple */
        color: #FEFDCA;          /* fyre yellow */
      }     
      .fyre #setup-pane-2-title{
        display: none;      
      }             
      .fyre #pane-2-overlay-svg .shape-overlays__background{
        fill: #FEFDCA;          /* fyre yellow */
      }
      .fyre #pane-2-overlay-svg .shape-overlays__star{
        fill: #F8CCD4;          /* fyre pink */
      }
      .fyre #pane-2-overlay-svg .shape-overlays__cloud{
        fill: #F8CCD4;          /* fyre pink */
      }

    /*************************************************************/
    /** 3. RIGHT "SETUP" SCENE PANE #3 - Action content         **/
    /*************************************************************/  

      .fyre #setup-pane-3{
         grid-template-columns: repeat(4, 1fr) 3vw;;
         grid-template-rows: repeat(6, 1fr);
      }  
      .fyre #setup-pane-3-overlay{
        background: #94A4D5;    /* fyre purple */
      }         
      .fyre .pane-3-overlay:hover{
        opacity: 1;
      }         
      .fyre  #setup-pane-3-label{
        grid-area: 5 / 1 / 5 / 6;
        width: fit-content;
        place-self: center center;
        z-index: 6;
      }
      .fyre #plan-label{
        background:  #F8CCD4;     /* fyre pink */
        color: #94A4D5;           /* fyre purple */   
      }  
      .fyre #plan-label:hover{
        background:  #FFF;        /* fyre pink */
        color: #F8CCD4;           /* fyre purple */   
      }      
      .fyre #setup-pane-3-title{
        color: #F8CCD4;           /* fyre pink */
        grid-area: 6 / 4 / 7 / 5;
        place-self: center center;
        transform: rotate(-7deg)
      }
      .fyre #setup-poster-container{
        grid-area: 5 / 2 / 5 / 3;
        background: #94A4D5;    /* fyre purple */
        margin-bottom: -4vw;
      }
      .fyre #pane-3-overlay-svg{
        height: auto;
      }
      .fyre #pane-3-overlay-svg .shape-overlays__background1{
        fill: #DADCF1;          /* fyre lavender */
      }
      .fyre #pane-3-overlay-svg .shape-overlays__background2{
        fill: #FEFDCA;          /* fyre yellow */
      }
      .fyre #pane-3-overlay-svg .shape-overlays__background3,
      .fyre #pane-3-overlay-svg .shape-overlays__cloud{
        fill: #95A4D4;          /* fyre purple */
      }
      .fyre #pane-3-overlay-svg .shape-overlays__wave,
      .fyre #pane-3-overlay-svg .shape-overlays__text, 
      .fyre #pane-3-overlay-svg .shape-overlays__textLineup{ 
        letter-spacing: 4px;
        font-family: 'Visby CF';
        text-anchor: middle;
        font-weight: bold;
        font-size: 15px;
        fill: #4a4a4a;        
      }
      .fyre #pane-3-overlay-svg .shape-overlays__moon{
        fill: #F8CCD4;           /* fyre pink */
      }
      .fyre #pane-3-overlay-svg .shape-overlays__textLineup{ 
        font-size: 0.35vw;  
        letter-spacing: 1px;        
      }      

/****************************************************/
/******  ACT I: THE "BASELINE" VISUALISATIONS  ******/
/****************************************************/

  .fyre #baselineAct-container{
    grid-template-columns: repeat(4, calc(25% - 0.5vw));
    grid-template-rows: repeat(4, calc(25% - 0.5vw));
    grid-gap: 0vw;
  }
  .fyre #baselineAct-container #baseline-pane-2{
    grid-area: 1 / 1 / 5 / 5;
    background-image: url(../img/fyre/swimmingPig.jpg);
    background-size: cover;
    margin: 0vw;
    clip-path: none;
  }
  .fyre #baselineAct-container #baseline-vis-headline-container{
    grid-area: 4 / 3 / 6 / 5;
    align-self: center;
    mix-blend-mode: soft-light;
  }
  .fyre #baseline-vis-headline-container .strong{
    color: #fff; 
    font-size: 1rem      
  }
  .fyre #baseline-vis-headline-container .unit{
    color: #fff; 
    line-height: 1.1;
  }
  .fyre #baseline-vis-headline-container .baseline-perUnit-unit{
    font-size: 1rem
  }
  .fyre .baseline-headline-major {
    font-size: 3.5rem;
    color: #fff; 
  }    
  .fyre .baseline-headline-minor {
    font-size: 1rem;
    line-height: 1;
    color: #fff; 
  }   
  .fyre #baseline-return{    
    grid-area: 2 / 2 / 2 / 6;
  } 
  .fyre #baseline-return,
  .fyre #actionActMenu-return{    
    background-color: #fff;
    height: fit-content;
    width: fit-content;
    padding: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-align: center;
    font-weight: bold;
    font-size: 3rem;
    place-self: center center;
    mix-blend-mode: color-dodge;
    cursor: pointer; 
    pointer-events: all;
  }
  .fyre #baseline-return:hover,
  .fyre #actionActMenu-return:hover{    
    mix-blend-mode: difference;     
  }
  
/****************************************************/
/***** ACT IIa: INTRO & MENU FOR "ACTIONS MODEL" ****/
/****************************************************/
  .fyre #actionActMenu-container{
    grid-template-columns: calc(100% - 2vw);
    grid-template-rows: calc(100% - 2vw);
    grid-gap: 0vw;
  }
  .fyre #actionActMenu-background-section{
    grid-area: 1 / 1 / 2 / 2;
    overflow: hidden;  
    display: grid;
      grid-template-columns: repeat(4, calc(25% - 0.5vw));
      grid-template-rows: repeat(4, calc(25% - 0.5vw));
      grid-gap: 0vw;    
  }
  .fyre #actionActMenu-background{
    object-fit: cover;
    grid-area: 1 / 1 / 6 / 6;  
  }
  .fyre #actionActMenu-video{
    object-fit: cover;
    height: 100%;  
  }
  .fyre #actionActMenu-return{
    grid-area: 2 / 2 / 4 / 4;
    z-index: 2;   
  }

/****************************************************/
/********* ACT III: EXPLORING THE "BATTLE"  *********/
/****************************************************/
  .fyre #planAct-container{
    grid-template-columns: calc(100% - 2vw);
    grid-template-rows: calc(100% - 2vw);
    grid-gap: 0vw;    
  }
  .fyre #orangeSquare-return{
    grid-area:  1 / 1 / 2 / 2;
    place-self: center;
    background-color: #EF6C26;
    width: 80vh;
    height: 80vh;
    transition: all 500ms;
    cursor: pointer;
  }
  .fyre #orangeSquare-return:hover{
    background-image: url(../img/fyre/fyreSquare.png);
    background-size: cover;
  }