@import url('fonts/stylesheet.css');

.backto-top {
    position: fixed;
    background-color: white;
    border: #000000 2px solid;
    width: 4rem;
    height: 4rem;
    z-index: 15;
    bottom: 5%;
    right: 1.5%;    
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity 0.5s ease, transform 0.5s ease;    
}

.backto-top.show {
    opacity: 1;
    transform: translateY(0); /* move into position */
    pointer-events: auto;
}

.backto-top:hover {
    background-color: #D9D9D9;
}

.backto-top img {
    max-width: 120%;
    max-height: 120%;
    display: block;    
}

/*nav bar*/

.navigationBar {
    background-color: #000000;
    position: sticky;
    top: 0;
    z-index: 999;
}

.navigationBar nav {
    display: flex;
    justify-content: space-between;
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;   
    align-items: center;
}

#logo {
    font-family: 'SIAFF Regular';
    color: #ffffff;
    font-size: 64px;  
    font-weight: normal;
    font-style: normal;
    font-display: swap;    
    text-decoration: none;    
    height: auto;
    padding-top: .5rem;
}

.nav-links {
    display: flex;
    gap: 3rem;
    align-items: center;
}

.nav-links li {
    list-style: none;
}

.nav-links a {
    padding-top: .35rem;
    text-decoration: none;
    color: #ffffff;
    font-size: 1.25rem;
}


#hamburger a img  {
    height: 2.5rem;
    width: auto;
    padding-top: .5rem;
}

#hamburger {
    align-items: center;
    display: none;
}

.nav-hover:hover {
    text-decoration: underline;
    text-decoration-color: white;
    text-decoration-thickness: .10rem;
}

.button-white {
    background-color: #ffffff;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    border-radius: 2rem;
}

.button-white a {
    color: #000000;
}

.button-white:hover {
    cursor: pointer;
    background-color: #D9D9D9;
    text-decoration: none;
}

.lang-group {
    display: flex;
    flex-direction: row;
    gap: .75rem;
}

.lang-group a {
    text-decoration: none;
    padding-bottom: .25rem;
    padding-top: .25rem;
    padding-left: .5rem;
    padding-right: .5rem;
    border-radius: .5rem;
    
    background: white;
    color: black;
}

.lang-group a:hover {
    background-color: #D9D9D9;
    text-decoration: none;
}


/*main*/

#heroSection {
    position: relative;
    height: 200vh;
    display: flex;
    justify-content: center;
    background-image: url(media/gridBackground.png);
    background-color: #000000;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#architectureHeader {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

#archit img, #archit {
    gap: 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

#ecture img, #ecture {
    gap: 1rem;
    display: flex;
    flex-direction: row;
    text-align: right;
    flex-wrap: nowrap;
}


#filmFest img {
    display: flex;
    float: right;

}


#heroTitle {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.fade {
    width: 100%;
}

.fade img {
    display: block;    
    width: 100%;
}

#fadetop {
    width: 100%;
    height: 10rem;
    overflow: hidden;
    position: relative;
} 

#fadetop img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
} 

#fadebottom {
    display: flex;
    align-items: baseline;
    position: absolute;
    bottom: 0;
    width: 100%;
}

#fadeContainer {
    width: 100%;
    height: 100%;
    position: relative; 
}

#herocontainer {
    position: sticky;
    top: 25vh;
    z-index: 10;
    display: flex;
    flex-direction: row;
    justify-content: center; 
    margin-bottom: 20rem;  
    overflow-x: hidden;
}

#hero-center {
    padding: 5rem;
    margin-left: 1.5rem;
    margin-right: 1.5rem;
    border: #1B1BFF 2px solid;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    text-align: center;
}

#hero-center {
  display: none;
  padding: 0rem;
  transition: padding 0.05s linear;
}

#hero-center h2 {
  font-size: 0px;
  transition: font-size 0.05s linear;
}

.hero-side {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.hero-spacer {
    height: 3.35rem;
}


#hero-center h2 {
    color: white;
    font-size: 3rem;
    white-space: nowrap;   
}

#prompt-1 {
    color: white;
    opacity: 1;
    font-size: 2.5rem;
    align-self: center;
    margin-top: 6rem;
    animation: pulseOpacity 4s ease-in-out infinite;
}

@keyframes pulseOpacity {
  0%   { opacity: 0.25; }
  50%  { opacity: 1; }
  100% { opacity: 0.25; }
}

.blink-in {
  opacity: 0;
  animation: blinkIn .3s ease-in-out forwards;
}

@keyframes blinkIn {
  0% { opacity: 0; }
  30% { opacity: 1; }
  60% { opacity: .4; }
  80% { opacity: 1; }
  100% { opacity: 1; }
}

/*main section*/

#mainContent {
  position: relative;
}

/*festival description*/

#festivalDescription {
    height: 300vh;
}

.box-Container {
    background-color: #1B1BFF;
}

.box-Section {
    position: sticky;
    top: 5vh;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.box-gap {
    width: 100%;
    flex: .75;
}

.boxImage {
    height: 100%;
    width: auto;
    flex: 1.5;
}

.boxImage img {
    width: 100%;
}

.reveal {
    opacity: 0;          
    transform: translateY(-2rem) scale(1.05);  
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;      
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.box-txt {
    flex: 1.2;
    color: white;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.box-txt h2 {
    font-size: 2.5rem;
}

.box-txt p {
    font-size: 1.25rem;
}

#btn-style1 {
    font-size: 1.25rem;
    color: white;
    width: fit-content;
}

#object, #object2, #object3 {
    position: absolute;
    width: fit-content;
}

#object img {
    float: right;
    width: 20%;
    max-width: 20%;
    margin-right: 5%;
}

#object2 {
    width: 100%;
}

#object2 img {
    float: right;
    margin-top: 5rem;
    width: 10%;
    max-width: 10%;
}

/*festival description*/

#awards {
    height: 400vh;
    background-color: white;
}

#awardContainer {
    position: sticky;
    top: -12vh;    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#mobileContainer-phone {
    display: none;
}

.mobileContainer-phone-model {
    display: none;
}

.mobileContainer-phone-hidden {
    display: flex;
}

#award-box {
    background-color: #232323;
    border:#1B1BFF 4px solid;
    height: 100%;
    width: 100%;
}

#awardParagraph {
    color: white;
    font-size: 1.25rem;
}

#award-margins {
    margin-right: 4rem;
    margin-left: 4rem;
    display: flex;
    flex-direction: row;
    gap: .5rem;
}

#award-left, #award-right {
    flex: 1;
    margin-top: 3rem;
    margin-bottom: 3rem;    
}

#award-center {
    flex: 1.5;
    width: 100%; 
}

.height100 {
    height: 100%;
}

.width100 {
    width: 100%;
}

#award-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#award-right {
    display: flex;
    flex-direction: column;   
    gap: 40vh;
}

.awardheader-right h2 {
    color: white;
    text-align: right;
    font-size: 4rem;
    white-space: nowrap;
}

.awardheader-right p {
    color: white;
    text-align: right;
    font-size: 1.5rem;
    white-space: nowrap;
}

#mobileContainer .awardheader-right {
    display: none;
}

.qrCode {
    width: 100%;
    display: flex;
    flex-direction: row;
    color: white;
    text-align: right;
    align-items: flex-end;
    text-decoration: none;
    justify-content: flex-end; 
    align-self: right;
    gap: 1rem;
}

.qrCode p {
    width: 50%;
}

.qrCode a {
    width: 30%;
    display: inline-block;
    padding: .25rem;
    border: #1B1BFF 2px solid;    
}

.qrCode a img {
    display: block;
    width: 100%;
    height: auto;
}

#btn-style2 {
    font-size: 1.25rem;
    color: black;
    margin-left: auto;
    margin-top: 1.75rem;
}

#award1, #award2, #award3 {
    width: 100%;
    height: 100%;
}

#object3 img {
    margin-top: 5rem;
    width: 40%;
    max-width: 40%;
    z-index: 5;
}

/* ROTATION ANIMATION */

.switch-model1, .switch-model2, .switch-model3 {
    opacity: 1;
    transition: opacity 0.8s ease;
}

/* Hidden state */
.hidden {
    opacity: 0;
    pointer-events: none;
}

/* SHOP SECTION */

#shopContainer {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

#shop {
    background-color: #000000;
}

#shopTxt {
    color: white;
    width: 20%;
}

.shopGrid {
    display: grid;
    gap: 2rem;
    width: 100%;

    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

.shopItem {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
    color: white;
    margin-bottom: 2rem;
    cursor: pointer;
}

.shop-imageContainer {
    overflow: hidden;
    border-radius: 1rem;
}

.shopItem p, h3 {
    font-size: 1.25rem;
}

.shopItem h3:hover {
    text-decoration: underline;
    text-decoration-color: white;
}

.shopItem img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 1rem;
    transition: transform 0.5s ease;
}

.shopItem img:hover {
    transform: scale(1.10);
    transition: transform 0.5s ease;
}

#view-more {
    padding: 1rem;
    padding-top: .75rem;
    padding-bottom: .75rem;
    margin-top: 1rem;
    background-color: white;
    font-size: 1.5rem;
    letter-spacing: 15%;
    text-decoration: none;
    color: inherit;  
    width: fit-content;
    height: fit-content;
    margin-left: auto;
    margin-right: auto;
    transition: background-color 0.3s ease;
}

#view-more:hover {
    background-color: #D9D9D9;
}

/* booth section */

#booths {
    background-color: white;
    height: 300vh;
}

#boothContainer {
    position: sticky;
    top: -12vh; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#booth-box {
    background-color: #232323;
    border:#1B1BFF 4px solid;
    height: 100%;
    width: 100%;
}

#booth-margins {
    margin-right: 4rem;
    margin-left: 4rem;
    margin-top: 3rem;
    margin-bottom: 3rem;    
    display: flex;
    flex-direction: row;
    gap: .5rem;
}

.giveawayboothImg {
    width: 100%;
    height: auto;
}

#booth-left {
    flex: 60;    
}

#booth-right {
    flex: 26;
}

#booth-center {
    flex: 14;
}

#booth-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
}

.rotating-progressbar {
    display: flex;
    width: 100%;
    gap: .25rem;
}

/* Outer bar */
.bar {
    height: 4px;
    background-color: #D9D9D9;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
    transition: width 1s ease; /* smooth size switching */
}

/* Inner fill that animates only in the active bar */
.fill {
    height: 100%;
    width: 0%;
    background-color: #FF0000;
    border-radius: 8px;
}


#booth-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#boothheader-right h2 {
    color: white;
    text-align: left;
    width: 60%;
    white-space: nowrap;
}

.boothParagraph {
    color: white;
    font-size: 1.25rem;
}

.boothTitle {
    color: white;
    font-size: 1.5rem;
}

.boothTime {
    color: white;
    font-size: 1.25rem;
}

.boothDescription {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

#boothInfo {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin-top: 2rem;
}

.tickets {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.tickets a {
    text-decoration: none;
    color: black;
}

.ticket-btn {
    width: fit-content;
    font-size: 1.25rem;
    cursor: pointer;
}

.ticket-btn:hover {
    background-color: #D9D9D9;
}

.share {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

.share button {
    background: none;
    border: none; 
    padding: 0;
    cursor: pointer;  
    display: inline-flex;  
    align-items: center;
}

.share-btn img {
    height: 100%;
    width: auto;
    cursor: pointer;    
    transition: rotate 0.3s ease;
}

.share-btn img:hover {
    opacity: 90%;
    rotate: calc(10deg);
    transition: rotate 0.3s ease;
}

/* Register Prompt */

#points {
    display: flex;
    flex-direction: column;
    gap: 2rem;    
}

#festival-register-prompt {
    font-size: 1.25rem;
}

#festival-list {
    font-size: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    padding-left: 5%;
}

#arrow {
    margin-left: .25rem;
}

#register-container {
    height: 250vh;
}

#register-section {
    position: sticky;
    top: 10vh;
}

/* footer */

footer { 
    width: 100%;
}

#footer-background {
    background-color: #000000;
    background-image: url(media/gridBackground_plain.png);       
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;    
    z-index: 5;
}

#footerContainer {
    display: flex;
    flex-direction: row;
    align-items: top;
    justify-content: space-between;
}

#footer-header {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

#footerH2 {
    color: white;
    font-size: 6rem;
}

#footer-right {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
    align-items: center;
}

#footer-site-information {
    display: flex;
    flex-direction: column;
    text-align: right;
    gap: 2.5rem;
    font-size: 1.25rem;
    color: white;
}

#footer-spacer {
    margin-bottom: 70vh;
    width: 1px;
    z-index: -2;
}

#map-container {
   position: fixed;
    bottom: 0;
    width: 100%;
    height: 70vh;
    z-index: -1; 
}


@media (max-width: 1024px) {

.nav-links {
    gap: 1.5rem;
}



.box-txt {
    flex: 2;
}

.box-txt h2 {
    font-size: 2rem;
}

.box-txt p {
    font-size: 1.25rem;
}

.box-gap {
    flex: .5;
}

/* AR MODEL */

#mobileContainer .awardheader-right {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: .5rem;
}

#mobileContainer .awardheader-right h2 {
    font-size: 3.75rem;
    text-align: left;
}

#mobileContainer .awardheader-right p {
    font-size: 1.5rem;
    text-align: left;
}

#object3 {
    display: none;
}

#awards {
    height: auto;
}

#awardContainer {
    position: relative;
    top: 0;  
}

#awardParagraph {
    font-size: 1.25rem;
}

#award-margins {
    margin-right: 2rem;
    margin-left: 2rem;
    gap: 2rem;
}

#award-left, #award-right {
    flex: 1.5;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;    
}

#award-center {
    flex: 1.5;
}

#award-left {
    gap: 45vh;
}

#award-right {
    display: none;
}

/* booths */

#booths {
    height: auto;
}

#boothContainer {
    position: relative;
    top: 0; 
}

#boothheader-right h2 {
    width: 25%;
    padding-bottom: 1rem;
}

#booth-center {
    display: none;
}

#booth-right {
    flex: 40;
}

#boothInfo {
    margin-top: 0;
    justify-content: space-between;
    height: 100%;
    gap: 1rem;
}

.boothDescription {
    gap: .5rem;
    width: 65%;
}

.boothParagraph {
    font-size: 1.5rem;
}

.boothTitle {
    font-size: 1.5rem;
}

.boothTime {
    font-size: 1.25rem;
}

#booth-margins {
    margin-right: 2rem;
    margin-left: 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;    
    gap: 1rem;
    flex-direction: column;
}

/* register */

#register-container {
    height: auto;
}

#register-section {
    position: relative;
    top: 0;
}


}

@media (max-width: 768px) {
    
/* Hero section */

#architectureHeader {
    flex-direction: column;
    gap: 1rem;
}

#herocontainer {
    top: 15vh;
}

.mobile-hero-spacer {
    display: none;
}

#archit {
    margin-bottom: 1rem;
}

#ecture {
    margin-top: 1rem;
}

#prompt-1 {
    font-size: 1.5rem;
}
    
/* Navigation Bar */

#logo {
    display: none;
}

.nav-links {
    gap: 0;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* Description Section */

.box-txt {
    flex: 2;
}

.box-gap {
    flex: .3;
}

.boxImage {
    flex: 1.75;
}

.box-txt h2 {
    font-size: 2.5rem;
    width: 65%;
}

.box-txt p {
    font-size: 1.25rem;
}

#descContainer {
    flex-direction: column;
    gap: 1.5rem;
}

#object, #object2, #object3 {
    display: none;
}

#festivalDescription {
    height: auto;
}

.box-Section {
    position: relative;
    top: 0;
}

/* AR MODEL */

#mobileContainer .awardheader-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

#mobileContainer .awardheader-right h2 {
    font-size: 3rem;
    text-align: left;
}

#mobileContainer .awardheader-right p {
    font-size: 1.25rem;
    text-align: left;
}

#awards {
    height: auto;
}

#awardContainer {
    position: relative;
    top: 0;  
}

#awardParagraph {
    font-size: 1.25rem;
}

#award-margins {
    margin-right: 2rem;
    margin-left: 2rem;
    gap: 2rem;
}

#award-left, #award-right {
    flex: 1.5;
    margin-top: 1rem;
    margin-bottom: 1rem;    
}

#award-center {
    flex: 1.5;
}

#award-left {
    gap: 35vh;
}

#award-right {
    display: none;
}

#shopTxt {
    width: 40%;
}

/* booths */

#booths {
    height: auto;
}

#boothContainer {
    position: relative;
    top: 0; 
}

#boothheader-right h2 {
    display: none;
}

#booth-center {
    display: none;
}

#booth-right {
    flex: 40;
}

#boothInfo {
    margin-top: 0;
    justify-content: space-between;
    height: 100%;
}

.boothDescription {
    gap: .5rem;
    width: 65%;
}

.boothParagraph {
    font-size: 1.25rem;
}

.boothTitle {
    font-size: 1.25rem;
}

.boothTime {
    font-size: 1rem;
}

#booth-margins {
    margin-right: 2rem;
    margin-left: 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;     
    gap: 2rem;
    flex-direction: column;
}

/* register */

#register-container {
    height: auto;
}

#register-section {
    position: relative;
    top: 0;
    flex-direction: column;
    gap: 1.5rem;
}

}

/* transition between platforms */
@media (max-width: 580px) {
#logo {
    display: block;
}

.mobile-hidden-nav {
    display: none;
}

#hamburger {
    display: block;
    gap: 2rem;
}

.nav-links {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    justify-content: flex-end;
}    

#footerContainer {
    flex-direction: column;
    gap: 6rem;
}

#footer-site-information {
    text-align: left;
}
}


@media (max-width: 426px) {

/* Hero section */

#architectureHeader {
    flex-direction: column;
    gap: 1rem;
}

#heroSection {
    height: 115vh;
}

#herocontainer {
    top: 15vh;
}

.mobile-hero-spacer {
    display: none;
}

#archit {
    margin-bottom: 1rem;
}

#ecture {
    margin-top: 1rem;
}

#archit img, #ecture img {
    height: 8rem;
}

#seoulinternational img, #filmfestival img {
    height: 2rem;
}

.hero-spacer {
    height: 2rem;
}
    
/* Navigation Bar */

#logo {
    display: block;
}

.mobile-hidden-nav {
    display: none;
}

#hamburger {
    display: block;
    gap: 2rem;
}

.nav-links {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    justify-content: flex-end;
}

/* Description Section */

.box-txt {
    flex: 2;
}

.box-gap {
    flex: .3;
}

.boxImage {
    flex: 1.75;
}

.box-txt h2 {
    font-size: 2.5rem;
    width: 100%;
}

.box-txt p {
    font-size: 1.25rem;
}

#descContainer {
    flex-direction: column;
    gap: 1.5rem;
}

#object, #object2, #object3 {
    display: none;
}

#festivalDescription {
    height: auto;
}

.box-Section {
    position: relative;
    top: 0;
}

/* AR MODEL */

#mobileContainer-phone {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
}

#mobileContainer-phone-model {
    height: 80vh;
    width: 100%;
}

.mobileContainer-phone-hidden {
    display: none;
}

#mobileContainer .awardheader-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1rem;
}

#mobileContainer .awardheader-right h2 {
    font-size: 3rem;
    text-align: left;
}

#mobileContainer .awardheader-right p {
    font-size: 1.25rem;
    text-align: left;
}

#awards {
    height: auto;
}

#awardContainer {
    position: relative;
    top: 0;  
}

#awardParagraph {
    font-size: 1.25rem;
}

#award-margins {
    margin-right: 2rem;
    margin-left: 2rem;
    gap: 2rem;
}

#award-left, #award-right {
    flex: 1.5;
    margin-top: 1rem;
    margin-bottom: 1rem;    
}

#award-center {
    flex: 1.5;
}

#award-left {
    gap: 2rem;
}

#award-right {
    display: none;
}

/* booths */

#booths {
    height: auto;
}

#boothContainer {
    position: relative;
    top: 0; 
}

#boothheader-right h2 {
    display: none;
}

#booth-center {
    display: none;
}

#booth-right {
    flex: 40;
}

#boothInfo {
    margin-top: 0;
    justify-content: space-between;
    height: 100%;
}

.boothDescription {
    gap: .5rem;
    width: 100%;
}

.boothParagraph {
    font-size: 1.25rem;
}

.boothTitle {
    font-size: 1.25rem;
}

.boothTime {
    font-size: 1rem;
}

#booth-margins {
    margin-right: 1rem;
    margin-left: 1rem;
    margin-top: 2rem;
    margin-bottom: 2rem;    
    gap: 2rem;
    flex-direction: column;
}

/* register */

#register-container {
    height: auto;
}

#register-section {
    position: relative;
    top: 0;
    flex-direction: column;
    gap: 1.5rem;
}

#footerContainer {
    flex-direction: column;
    gap: 6rem;
}

#footer-site-information {
    text-align: left;
}

}

@media (max-width: 400px) {
#archit img, #ecture img {
    height: 7rem;
}

#seoulinternational img, #filmFest img {
    height: 1rem;
}

.hero-side {
    gap: .5rem;
}

#logo {
    display: none;
}

.nav-links {
    display: flex;
    gap: 0rem;
    align-items: center;
    justify-content: space-between;
}   

#award-margins {
    margin-left: .5rem;
    margin-right: .5rem;
}


#shopContainer {
    align-items: center;
}
.shopGrid li {
    width: 96%;
}

.shopGrid {
    width: 100%;
}

#footer-header h2 img {
width: 100%;
}

}