@import url("fonts.css");

/* GENERAL */

:root { 
    --white: #ffffff; 
    --black: #000000; 

    --targaryen-black: #261E1D; 
    --targaryen-black-dark: #221B1A; 
    --targaryen-black-darker: #1E1817; 
    --targaryen-black-bright: #3C3534; 
    --targaryen-black-brighter: #514B4A; 

    --targaryen-red: #B22222; 
    --targaryen-red-dark: #A01E1E; 
    --targaryen-red-darker: #8E1B1B; 
    --targaryen-red-bright: #BA3838; 
    --targaryen-red-brighter: #C14E4E; 

    --targaryen-gold: #fc3;

    --grey: #f9f9f9;
    --grey-dark: #c7c7c7;
    --grey-darker: #949494;
    --grey-darkest: #616161;
    --grey-extreme-dark: #2e2e2e;
    --grey-inverted: #060606;

    --black-transparent-bg: rgba(0, 0, 0, 0.9);

    --fa-font-family: "IranYekan";
    --en-font-family: "MTN Brighter Sans";
    --fantasy-font-family: "Shekari";
    --fantasy-fb-font-family: "ShekariFallback";

    --base-font-size: 16px;
    --base-line-height: 1.6em;

    --desktop-max-width: 1280px;
    --tablet-max-width: 1080px;

    --base-fix-edge-distance: 24px;
    --base-content-padding: 10vmin;

    --big-margin: 12px;
    --average-margin: 8px;
    --small-margin: 4px;
    --tiny-margin: 2px;

    --big-gap-size: 8vmin;
    --average-gap-size: 4vmin;
    --small-gap-size: 2vmin;
    --tiny-gap-size: 1vmin;

    --thumbnail-height: 20vmin;

    --button-border-size: 2px;
    --button-border-radius: 8px;
    --button-padding: 6px 8px 8px 8px;
    --button-margin: 0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-snap-type: y mandatory; overflow-y: scroll; }
body { direction: rtl; padding: 0; margin: 0; height: 100%; line-height: var(--base-line-height); font-family: var(--en-font-family), var(--fa-font-family); font-size: var(--base-font-size); }

section { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; min-height: 100dvh; scroll-snap-align: start; }

section div.container { display: flex; flex: 1 0 auto; justify-content: center; width: 100%; max-width: var(--desktop-max-width); }
section div.container div.content { display: flex; padding: var(--base-content-padding); width: 100%; justify-content: center; }
section div.container div.content div.main { display: flex; gap: var(--big-gap-size); flex-wrap: wrap; flex-basis: 100%; justify-content: center; align-items: center; position: relative; }

.subsection { display: flex; justify-content: center; width: 100%; min-height: unset; background-position: top !important; }

.narrow { min-height: unset; background-position: top !important; }
.liteBG { background-color: var(--grey); background-image: url("../images/BG1L.jpg"), url("../images/BG1S.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat; color: var(--targaryen-black); }
.textForLiteBG { color: var(--targaryen-black); }
.darkBG { background-color: var(--grey-inverted); background-image: url("../images/BG1DL.jpg"), url("../images/BG1DS.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat; color: var(--grey); }
.textForDarkBG { color: var(--grey); }

/* Flex BLOCKS */

div[class*=size] { display: flex; }

div.sizeX1 { flex: 1 0 0; }
div.sizeX2 { flex: 2 0 0; } /* 2 times bigger than X1 in width or height */
div.sizeX3 { flex: 3 0 0; } /* 3 times bigger than X1 in width or height */
div.sizeX4 { flex: 4 0 0; } /* 4 times bigger than X1 in width or height */
div.sizeX5 { flex: 5 0 0; } /* 5 times bigger than X1 in width or height */

div.column-flex { display: flex; flex-direction: column; }
div.row-flex { display: flex; flex-direction: row; }

div.full-height-flex { height: 100%; }

div.gap { gap: var(--big-gap-size) !important; }
div.average-gap { gap: var(--average-gap-size) !important; }
div.small-gap { gap: var(--small-gap-size) !important; }
div.tiny-gap { gap: var(--tiny-gap-size) !important; }

div.start-content { justify-content: start; } /* Main Axis */
div.center-content { justify-content: center; }
div.end-content { justify-content: end; }

div.start-aligned { align-items: start; } /* Cross Access */
div.center-aligned { align-items: center; }
div.end-aligned { align-items: end; }

/* Images */

img { max-width: 80vw; max-width: 100%; max-height: 80vh; object-fit: contain; }

img.thumbnail { height: var(--thumbnail-height); }

.liteBG img.shadowed-image { box-shadow: 0 0 8px var(--grey-dark); }
.darkBG img.shadowed-image { box-shadow: 0 0 8px var(--grey-inverted); }

.liteBG img.shadowed-more { box-shadow: 0 0 12px var(--grey-dark); }
.darkBG img.shadowed-more { box-shadow: 0 0 12px var(--grey-inverted); }

img.round-a-tiny-bit { border-radius: 1vmin; }
img.round-a-little { border-radius: 2vmin; }
img.round-somewhat { border-radius: 4vmin; }
img.round-a-alot { border-radius: 8vmin; }

div.img-holder { cursor: pointer ;}
div.img-holder.enlarged { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 900; background: var(--black-transparent-bg); height: auto !important; margin: auto; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; }
div.img-holder.enlarged img { max-width: 80vw; max-height: 80vh; box-shadow: none; height: auto !important; }

/* img.enlarged { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; max-width: 80vw; max-height: 80vh; height: auto !important; border: 100vmax solid rgba(0, 0, 0, 0.8); box-sizing: content-box; margin: auto; box-shadow: none; transform: translateX(calc(50% - 50vw)); transition: all 0.3s ease-in-out; } /* With BG Cover */

div.thumbnail-holder { position: fixed; display: flex; background: var(--black-transparent-bg); top: 0; right: 0; bottom: 0; left: 0; z-index: 800; overflow-y: auto; overflow-x: hidden; }
div.thumbnails { display: flex; flex: 1 1 auto; padding: var(--big-gap-size); align-items: center; justify-content: center; gap: var(--average-gap-size); flex-wrap: wrap; height: fit-content; min-height: 100%; }
div.thumbnails img { height: var(--thumbnail-height); }
.close { position: fixed; top: 0; left: 0; font-size: 2rem; cursor: pointer; width: 4rem; height: 4rem; display: flex; color: var(--targaryen-red); background-color: var(--grey-inverted); align-items: center; justify-content: center; }

/* Main Stuff */

h1 { font-size: 3.2rem; line-height: 1.6em; }
h2 { font-size: 2.4rem; line-height: 1.6em; }
h3 { font-size: 2rem; line-height: 1.6em; }
h4 { font-size: 1.6rem; line-height: 1.6em; }
h5 { font-size: 1.4rem; line-height: 1.6em; }
h6 { font-size: 1.2rem; line-height: 1.6em; }
h1, h2, h3, h4, h5, h6 { font-weight: bold; margin: 0; }

p { margin: 12px 0; padding: 0; line-height: var(--base-line-height); text-align: justify; }
p:first-child { margin-top: 0; }
p:last-child { margin-bottom: 0; }

a { color: var(--targaryen-red); -webkit-tap-highlight-color: transparent; text-decoration: none; }
a:hover { color: var(--targaryen-black); }

a.reverse { color: var(--targaryen-black); }
a.reverse:hover { color: var(--targaryen-red); }

.darkBG a, .textForDarkBG a { color: var(--targaryen-gold); }
.darkBG a:hover, .textForDarkBG a:hover { color: var(--grey); }

i { font-size: 1em; margin: 0; vertical-align: middle; }

div:empty, div.hidden { display: none; } /* Hide all EMPTY DIVs */

span { display: contents; }

button { font-size: 1rem; font-family: var(--en-font-family), var(--fa-font-family); padding: var(--button-padding); margin: var(--button-margin); border: var(--button-border-size) solid var(--targaryen-red); border-radius: var(--button-border-radius); background: var(--targaryen-red); color: var(--white); line-height: 1em; text-align: center; }
button:hover { border-color: var(--targaryen-black); background: var(--targaryen-black); cursor: pointer; }
button:active { border-color: var(--black); background: var(--black); cursor: pointer; }

button.secondary { background: var(--grey); color: var(--targaryen-red-darker); line-height: 1em; }
button.secondary:hover { border-color: var(--targaryen-black); color: var(--targaryen-black); }
button.secondary:active { border-color: var(--black); color: var(--black); }

.darkBG button { background: var(--targaryen-gold); border-color: var(--targaryen-gold); color: var(--targaryen-black); }
.darkBG button:hover { border-color: var(--grey-dark); background: var(--grey-dark); }
.darkBG button:active { border-color: var(--grey); background: var(--grey); }

.darkBG button.secondary { background: var(--targaryen-black-darker); color: var(--targaryen-gold); }
.darkBG button.secondary:hover { border-color: var(--grey-dark); color: var(--grey-dark); }
.darkBG button.secondary:active { border-color: var(--grey); color: var(--grey); }

button { margin: var(--average-margin) 0; }
button + button { margin-right: var(--average-margin); }
button:last-child { margin-bottom: 0 !important;}

button i { color: unset !important; }

button.wide { width: 100%; }
button.mobile-wide { width: auto; }

/* Custom General Stuff */

.title { font-size: 3.2rem; font-weight: bold; line-height: 1.6em; margin-bottom: 16px; }
.subtitle { font-size: 1.2rem; font-weight: normal; line-height: 1.6em; }
.section-title { font-size: 2rem; font-weight: bold; line-height: 1.6em; margin: 0; }
.section-title i, .section-text i { color: var(--targaryen-red); }

.golden { color: var(--targaryen-gold); }
.fire { color: var(--targaryen-red); }

.floatleft { float: left; }

/* COLOUR CLASSES */

.red { color: var(--targaryen-red); }
.black { color: var(--targaryen-black); }
.gold { color: var(--targaryen-gold); }
.bright { color: var(--white); }
.dark { color: var(--black); }

/* SPACING CLASSES */

.big-margin-top { margin-top: var(--big-margin); }
.big-margin-right { margin-right: var(--big-margin); }
.big-margin-bottom { margin-bottom: var(--big-margin); }
.big-margin-left { margin-left: var(--big-margin); }

.average-margin-top { margin-top: var(--average-margin); }
.average-margin-right { margin-right: var(--average-margin); }
.average-margin-bottom { margin-bottom: var(--average-margin); }
.average-margin-left { margin-left: var(--average-margin); }

.small-margin-top { margin-top: var(--small-margin); }
.small-margin-right { margin-right: var(--small-margin); }
.small-margin-bottom { margin-bottom: var(--small-margin); }
.small-margin-left { margin-left: var(--small-margin); }

.tiny-margin-top { margin-top: var(--tiny-margin); }
.tiny-margin-right { margin-right: var(--tiny-margin); }
.tiny-margin-bottom { margin-bottom: var(--tiny-margin); }
.tiny-margin-left { margin-left: var(--tiny-margin); }

/* NO LANDSCAPE */

#no_landscape { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--grey-inverted); background: url("../images/BG1DL.jpg") center/cover no-repeat, url("../images/BG1DS.jpg") center/cover no-repeat; color: var(--grey); z-index: 111; }
#no_landscape div { margin: auto; text-align: center; font-size: 5vmin; }
#no_landscape div i { font-size: 16vmin; animation: danceAnimation 2s infinite ease-in-out; }
#no_landscape div img { max-width: 60vw; max-height: 60vh; }

/* ISLAND MENU */

#island-menu { position: fixed; left: var(--base-fix-edge-distance); top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; justify-content: space-around; align-items: center; padding: 12px; background: rgba(255, 255, 255, 0.36); backdrop-filter: blur(12px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 20px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24); z-index: 110; box-sizing: border-box; max-width: calc(100vw - 48px); }

#island-menu a { color: var(--black); width: 64px; height: 64px; text-decoration: none; display: flex; justify-content: center; align-items: center; transition: transform 0.2s ease, color 0.2s ease; }

#island-menu a i { font-size: 2em; }

/* Optional: scale on tap for mobile */
#island-menu a:active { transform: scale(0.8); }

/*#island-menu {
  padding-bottom: env(safe-area-inset-bottom, 0.8rem);
}*/

/* HOME */

#home .main { flex-direction: column; flex: 1; }

#home .main h1 { color: var(--targaryen-red) ;}

#home .main .sign { text-align: center; }
#home .main .sign img { max-width: 60vw; max-height: 40vh; }

#home .main .motto { text-align: justify; text-align-last: center; }

#home .main .motto .title i { color: var(--targaryen-red); }
#home .main .motto .subtitle { display: flex; }

/* TEAM */

#team { background: #0d2233 url('../images/BG.jpg') center/cover no-repeat; overflow: clip; }

#team .main { flex-direction: row; }
#team .main div[class*=size] { align-items: center; }

#team .main .members { display: flex; gap: var(--big-gap-size); position: absolute; right: 0; }
#team .main .members { animation: slideLeftRight 4s ease-in-out infinite alternate; } /* 2 seconds more duration for each member */
#team .main .members:hover { animation-play-state: paused; }

#team .main .member { flex: 0 1 auto; box-shadow: 0 0 64px rgba(89, 201, 230, 0.5); border-radius: 1rem; overflow: hidden; position: relative; }
#team .main .member:hover { box-shadow: 0 0 64px rgba(89, 201, 230, 1); }

#team .main .image img { display: block; max-width: 80vmin; max-height: 60vh; }

#team .main .info { display: flex; align-items: stretch; flex-wrap: nowrap; width: 100%; background: var(--targaryen-black); padding: 1rem; box-sizing: border-box; }
#team .main .info > div { flex: 1 1 auto; align-content: center; color: white; }
#team .main .info .name { font-family: var(--fantasy-font-family), var(--fantasy-fb-font-family); font-size: 3.2rem; display: flex; line-height: 0.32em; color: var(--targaryen-gold); }

#team .main .links { display: flex; align-items:center; justify-content: flex-end; text-align: right; gap: 1rem; font-size: 2rem; }
#team .main .links a { color: var(--grey); }
#team .main .links a:hover { color: var(--targaryen-gold); }

#team .main .member > .badge { position: absolute; top: 0; left: 0; color: var(--white); background: var(--targaryen-red); font-size: 1rem; padding: 0.4rem 0.8rem; border-radius: 0 0 1rem 0 ; }

/* Tech */

#tech .main { flex-basis: auto; }
#tech .main div { flex: 1 1 auto; text-align: center; }
#tech .main div i { font-size: 4vw; }
#tech .main div i.fa-arrows-spin { animation: steadyRotate 7s linear infinite; }

/* SOCIAL */

#social div a { color: var(--white) !important; }
#social div a:hover { color: var(--targaryen-gold) !important; }
#social div i { font-size: 4vw; }

/* CONTACT */

#contact .main .section-text a { color: var(--targaryen-black); }
#contact .main .section-text a:hover { color: var(--targaryen-red); }

/* PORTFOLIO */

#intro .main .sign { text-align: center; }
#intro .main .sign img { max-width: 60vw; max-height: 40vh; width: 100%; }

section.portfolio .main .project-title { font-size: 2rem; font-weight: bold; line-height: 1.6em; }
section.portfolio .main .project-title i, section.portfolio .main .project-description i, section.portfolio .main .project-cover i { color: var(--targaryen-red); }

.liteBG .project-cover a { color: var(--targaryen-black); }
.liteBG .project-cover a:hover { color: var(--targaryen-red); }
.darkBG .project-cover a { color: var(--targaryen-gold); }
.darkBG .project-cover a:hover { color: var(--grey); }

#misc .main .misc-project-title { font-size: 1rem; font-weight: bold; }
#misc .main .misc-project-description { text-align: justify; }

/* FOOTER */

#footer .main { flex-direction: row; flex: 1; }

#footer .main .motto { text-align: center; }
#footer .main .motto .title i { color: var(--targaryen-red); }
#footer .main .motto .subtitle { display: flex; flex-direction: column; }

#footer .main .info { border: 1px solid var(--grey-extreme-dark); border-radius: 1rem; padding: 1rem; }

#footer #empty { display: none; background: #0d2233 url('../images/BG.jpg') center/cover no-repeat; }

/* Animations */

@keyframes danceAnimation {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(15deg); }
  50%  { transform: rotate(-15deg); }
  75%  { transform: rotate(15deg); }
  100% { transform: rotate(0deg); }
}

@keyframes steadyRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes slideLeftRight {
  0% {
    margin-right: 0;
    transform: translateX(0);
  }

  100% {
    margin-right: 100%;
    transform: translateX(100%);
  }
}

/***************************************************************************** DEVICE/RESOLUTION BASED STYLES *****************************************************************************/

 /* Mid-width Desktop Screens */

@media (pointer: fine) and (orientation: landscape) and (max-width: 1440px) {
  .left-on-narrow-desktop { order: +1; }
}

/* Mobile in Portrait */

@media (pointer: coarse) and (orientation: portrait) { 
  :root { 
      --big-gap-size: 10vmin;
      --average-gap-size: 8vmin;
      --small-gap-size: 6vmin;
      --tiny-gap-size: 4vmin;
      --button-padding: 10px 12px 12px 12px;
  }

  html { scroll-snap-type: none; }

  h1 { font-size: 2.4rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.8rem; }
  h4 { font-size: 1.6rem; }
  h5 { font-size: 1.4rem; }
  h6 { font-size: 1.2rem; }

  section, .main { flex-direction: column; flex: 1; }

  div[class*=size] { flex-direction: column; width: 100%; }
  .section-title, section.portfolio .main .project-title { text-align: center; float: none !important; }
  .section-title * { float: none !important; }
  .row-flex { flex-direction: column !important; }

  button.mobile-wide { width: 100%; }

  #island-menu { position: fixed; top: unset; bottom: var(--base-fix-edge-distance); left: 50%; transform: translateX(-50%); width: unset; flex-direction: row; }

  #home .content { padding: 10vmin 10vmin 138px; }
  #home .main .icons { display: none; }
  #home .main .motto .subtitle { flex-direction: column; }
  #home .main .motto .subtitle .space { display: none; }

  #team .main .info .name { font-size: 2.4rem; line-height: 0.7em; }
  
  #tech .main { flex-direction: row; gap: 0 }
  #tech .main div i { font-size: 7vw; }

  #social .main { flex-direction: row; justify-content: space-evenly; }
  #social .main div i { font-size: 7vw; }

  #footer { min-height: 100vh; min-height: 100dvh; }
  #footer .main .primary > div:first-child { display: none; }
  #footer .main > div > div > div:nth-child(2), .top-on-mobile { order: -1; }
  #footer #empty { display: flex; width: 100%; height: 138px; min-height: 138px; }
}

/* Mobile in Landscape */

@media (pointer: coarse) and (orientation: landscape) { 
  #no_landscape { display: flex; } 
}

/* Tablets in portrait */

@media (pointer: coarse) and (orientation: portrait) and (min-width: 768px) { 
  #team .main .info .name { line-height: 0.8em !important; }
  section#empty { display: flex; height: 138px; min-height: unset; }
  #footer { min-height: unset; }
}

/* Tablets in landscape */

@media (pointer: coarse) and (orientation: landscape) and (min-width: 1000px) { 
  #no_landscape { display: none; } 
  section div.container { max-width: var(--tablet-max-width); }
  #team .main .info .name { line-height: 0.5em !important; }
}