.menu-item .card { border-radius: 1.5em; transition: transform .2s, box-shadow .2s; }

.menu-item .card:hover { transform: scale(1.03) rotate(-1deg); box-shadow: 0 0 25px #fcc52d66; }

.btn-rounded { border-radius: 30px; }


.mobmenu-content li a{
    text-transform: uppercase !important;
}


.tag{
    position:absolute;
    left:0;
    padding-top: 1.5em;
/*    top:60px;*/
    z-index:10;
    text-transform: uppercase;
    background:#000; color:#fff;
    font-family:'Montserrat',sans-serif;
    letter-spacing:3px; font-size:2.2rem;
/*    height:360px;*/
    width:70px;
    display:flex; align-items:center; justify-content:center;
    padding-top: 1em;
    padding-bottom: 1em;
}

.tag-white{
    position:absolute;
    left:0;
    padding-top: 1.5em;
/*    top:60px;*/
    z-index:10;
    text-transform: uppercase;
    background:#fff; color:#000;
    font-family:'Montserrat',sans-serif;
    letter-spacing:3px; font-size:2.2rem;
/*    height:360px;*/
    width:70px;
    display:flex; align-items:center; justify-content:center;
    padding-top: 1em;
    padding-bottom: 1em;
}

header#masthead a {
    color: #fff;
    margin: 0.9em;
    font-family: 'Oswald', Arial, sans-serif !important;
    font-weight: 400 !important;
    text-transform: uppercase;
}


ul#primary-menu {
    margin-top: 0.3em;
}

@media (max-width: 1024px) {
  .logocontainer {
    display: none !important;
  }
}


.logocontainer {
    padding-top: 4vh;
}

.japanese-cuisine,
.urban-lounge {
  font-family: 'Oswald', Arial, sans-serif;
  font-size: clamp(1.6rem, 4vw + 1rem, 4.6rem); /* scales from mobile to large screens */
  letter-spacing: 0.14em;
  line-height: 1.1;
}



.custom-logo-link {
    width: 8em !important;
    float: left;
}


footer#colophon {
    background-color: #0e0e0e;
    color: #fff;
    height: 3em;
    position: absolute;
    width: 100%;
}


.slantX {
    /* background: #f6f6f6; */
    position: relative;
    clip-path: polygon(0 5vw, /* Top left corner slanted down */ 100% 0, /* Top right corner */ 100% calc(100% - 5vw), /* Bottom right corner slanted up */ 0 100% /* Bottom left corner */);
    padding-top: 3em;
    padding-bottom: 3em;
}


header#masthead {
  background: transparent;
  transition: background-color 0.35s cubic-bezier(.4,0,.2,1);
}

header#masthead.scrolled {
  background-color: #000000de !important;
}




header#masthead a {
    position: relative;
    transition: color 0.25s;
}

header#masthead a::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #fff 30%, #1bc755 40%, #f62f35 80%, #32ade5 100%);
    transform: scaleX(0);
    transition: transform 0.35s cubic-bezier(.4,0,.2,1);
    border-radius: 1.5px;
}

header#masthead a.active::after,
header#masthead a:hover::after,
header#masthead a:focus::after {
    transform: scaleX(1);
}

/* Optional: keep color highlight on hover */
header#masthead a:hover,
header#masthead a:focus {
    color: #1bc755;
}

header#masthead a.active {
    color: #1bc755 !important; /* or your brand accent */
    /* Optionally add a background or underline */
    /* background: rgba(201, 147, 208, 0.08); */
}






.japanese-cuisine, .urban-lounge {
  background: #000000;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 100%);
  width: fit-content;
  margin: auto;
}




@keyframes fancyFadeIn {
  0% {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
    letter-spacing: 0.2em;
    filter: blur(6px);
  }
  70% {
    opacity: 1;
    transform: translateY(-4px) scale(1.03);
    letter-spacing: 0.07em;
    filter: blur(1.5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    letter-spacing: 0.15em;
    filter: blur(0);
  }
}

.animate-fancy {
  opacity: 0;
  animation: fancyFadeIn 1.2s cubic-bezier(.45,.01,0,1.01) 0.25s forwards;
  /* forwards keeps the final state */
  will-change: opacity, transform, letter-spacing, filter;
  display: block;
}


/*.japanese-cuisine, .urban-lounge {
    text-shadow: 0 8px 7px rgba(0, 0, 0, 0.65), 0 2px 0px rgba(0, 0, 0, 0.7);
}
*/
video#scrub-video {
    opacity: 1;
    /*opacity: 0.7;*/
    z-index: 1;
}


div#menu-intro-hero {
    background-color: black;
}

.text-green{
  /*color: green;*/
}


.logocontainer{
  margin-top: 10vh;
}

.soralogo {
    background-image: url(images/sora-restaurant-logo-min.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 60vw;
    height: 20vh;
}


.japanese-cuisine {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 3.5em;
    line-height: 1em;
}

.urban-lounge {
font-family: 'Six Caps', sans-serif;
/*    font-family: 'Bodoni Moda', serif;*/
    /*font-family: 'Open Sans', Arial, sans-serif;*/
    /*font-family: 'Vidaloka', serif;*/
    font-weight: 300;
    color: #f134c0;
    /*color: #c151a4;*/
    letter-spacing: 2px;
    font-size: 7em;
    line-height: 1em;
}



.menularge {
    font-family: 'Oswald', Arial, sans-serif !important;
    font-weight: 400 !important;
    font-size: 9vw;
    /*font-size: 10em;*/
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2em;
}


header#masthead {
    position: fixed;
    z-index: 22;
    width: 100%;
    margin: auto;
}




html { scroll-behavior: smooth; }


.welcomeinfo {
    position: absolute;
    display: table;
    top: 10vh;
    margin: auto;
    text-align: center;
    width: 100%;
    z-index: 2;
}



body.noscroll {
  overflow: hidden !important;
  height: 100vh;
  position: fixed;
  width: 100vw;
  overscroll-behavior: none;
}
#menu-intro-hero.fade-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s cubic-bezier(.4,0,.2,1);
}





#scrub-video {
  cursor: ew-resize; /* visually suggests "scrubbable" */
  outline: none;
}



@media (max-width: 1024px) {
  div#rolls::before,
  div#dessert::before {
    display: none !important;
    /* Or, for bulletproofing: */
    content: none !important;
  }
}






.vertical-section-tag-spirit {

  min-width: 80px;

  background: #fff;

  color: #111;

  font-family: 'Bebas Neue', Arial, sans-serif;

  font-size: 2.5rem;

  letter-spacing: 0.1em;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 0 0.5rem 0.5rem 0;

  margin-right: 16px;

  margin-bottom: 24px;

  min-height: 420px;

  box-shadow: 1px 0 8px 0 rgba(0,0,0,0.07);

}

.vertical-section-tag-spirit span {

  display: block;

  line-height: 1.05;

  letter-spacing: 0.15em;

  text-align: center;

  font-weight: 600;

}

.spirits-table th,

.spirits-table td {

  vertical-align: top;

  background: transparent !important;

  border: none;

}

.spirits-table th {

  font-size: 1.25rem;

  font-family: 'Bebas Neue', Arial, sans-serif;

  letter-spacing: 0.07em;

}

.spirits-table td {

  font-size: 1rem;

}

@media (max-width: 991px) {

  .vertical-section-tag-spirit {

    display: none;

  }

}





.drink-head,

.drink-end,

.menu-head,

.menu-end,

.menu-info {

/*    background-size: cover;

    background-repeat: no-repeat;

    background-position: center center;*/

    /* Remove background-attachment: fixed for JS approach */

/*     height: 100vw; */

    min-height: 45vw;  /* More practical for parallax effect */

/*    width: 100vw;*/

    position: relative;

    z-index: 1;

    /* Optional: add overlay for darken */

    /* background-color: rgba(0,0,0,0.15); */

}


/*body {
    width: fit-content;
}*/

body {
    overflow-x: hidden;
    width: 100vw;
}



.wine-background
 {
    background-image: url(images/bamboo_pattern-white-min.jpg);
    background-repeat: repeat;
    background-size: cover;
}


.refreshments-background
 {
    background-image: url(images/bamboo_pattern-min.jpg);
    background-repeat: repeat;
    background-size: cover;
}


.cocktails-background
 {
    background-image: url(images/bamboo_pattern-min.jpg);
/*    background-image: url(images/waves-min.jpg);*/
    background-repeat: repeat;
    background-size: cover;
    background-position: center top;
}

.cocktails-background-light
 {
    background-image: url(images/bamboo_pattern-white-min.jpg);
/*    background-image: url(images/waves-white-min.jpg);*/
    background-repeat: repeat;
    background-size: cover;
}

.spirits-background
 {
    background-image: url(images/bamboo_pattern-min.jpg);
    background-repeat: repeat;
    background-size: cover;
}

.spirits-background-white
 {
    background-image: url(images/bamboo_pattern-white-min.jpg);
    background-repeat: repeat;
    background-size: cover;
}


div#dessert:before {
    content: ' ';
    background-image: url(images/dessert-tira2-min.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    right: -10em;
    bottom: 9em;
    width: 35em;
    height: 35em;
}


div#rolls:before {
    content: ' ';
    background-image: url(images/rolls-right-min.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    right: -10vw;
    top: -15em;
    width: 25em;
    height: 25em;
}

div#a-la-carte-holder {
    background-image: url(images/brushstroke-min.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.starters-background, .cooked-rolls-background, .lunch-menu-background {
    /* background-image: url(images/grain9-min.jpg); */
    background-image: url(images/bg3-min.jpg);
    /*background-image: url(images/grunge-wall-texture-min-min.jpg);*/
    /*background-image: url(images/noir18-min.jpg);*/
    background-repeat: no-repeat;
    background-size: cover;
}


.original-rolls-background, .entree-background
 {
    background-image: url(images/trees-white-min.jpg);
    /*background-image: url(images/canvas3-fade-min.jpg);*/
    background-repeat: repeat;
    background-size: contain;
}


/*div#rolls,
div#entree
 {
    background-image: url(images/canvas3-fade-min.jpg);
    background-repeat: repeat;
}
*/




.drink-head {

    background-image: url(images/drinkhead.jpg);

    background-size: cover;

    background-repeat: no-repeat;

    height: 100vw;

}



.drink-end {

    background-image: url(images/drinkend.jpg);

    background-size: cover;

    background-repeat: no-repeat;

    height: 100vw;

}





.menu-head {

    background-image: url(images/menuhead.jpg);

    background-size: cover;

    background-repeat: no-repeat;

    height: 100vw;

}



.menu-end {

    background-image: url(images/menuend.jpg);

    background-size: cover;

    background-repeat: no-repeat;

    height: 100vw;

}





.menu-info {

    background-image: url(images/menuinfo.jpg);

    background-size: cover;

    background-repeat: no-repeat;

    height: 100vw;

}









.vertical-section-tag {

  position: fixed;

  top: 120px;

  left: 0;

  z-index: 1040;

  width: 70px;

  min-height: 350px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 0 8px 8px 0;

  font-family: 'Bebas Neue', Arial, sans-serif;

  font-size: 2.2rem;

  letter-spacing: 0.1em;

  box-shadow: 0 0 10px rgba(0,0,0,0.08);

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.5s;

}

.vertical-section-tag.visible {

  opacity: 1;

  pointer-events: auto;

}

@media (max-width: 991px) {

  .vertical-section-tag {

    display: none;

  }

}

.vertical-section-tag span {

  text-align: center;

  line-height: 1.1;

  user-select: none;

  font-weight: 400;

  display: inline-block;

  letter-spacing: 0.08em;

}

.vertical-section-tag.bg-black {

  background: #111;

  color: #fff;

}

.vertical-section-tag.bg-white {

  background: #fff;

  color: #111;

  border: 1px solid #ddd;

}



















div#page {

    background-color: #0e0e0e;

}







.vertical-tag-black {

    transform: rotate(270deg) !important;

    position: fixed;

    left: -4em;

    top: 11em;

}



.vertical-tag-black {

    background: #fff;

    color: #111;

    font-family: 'Bebas Neue', Arial, sans-serif;

    font-weight: 400;

    font-size: 2.1em;

    letter-spacing: 0.04em;

    padding: 0.2em 1.45em 0.2em 2.45em;

    border-radius: 3px;

    box-shadow: 0 2px 10px rgba(0,0,0,0.07);

    display: inline-block;

    text-align: center;

    margin-right: 32px;

    margin-top: 10px;

    margin-bottom: 10px;

}



.vertical-tag {

    transform: rotate(270deg) !important;

    position: fixed;

    left: -4em;

    top: 11em;

}



.vertical-tag {

    background: #fff;

    color: #111;

    font-family: 'Bebas Neue', Arial, sans-serif;

    font-weight: 400;

    font-size: 2.1em;

    letter-spacing: 0.04em;

    padding: 0.2em 1.45em 0.2em 2.45em;

    border-radius: 3px;

    box-shadow: 0 2px 10px rgba(0,0,0,0.07);

    display: inline-block;

    text-align: center;

    margin-right: 32px;

    margin-top: 10px;

    margin-bottom: 10px;

}



.starters-tag {

    /* Custom color for each tag if needed */

}



.vertical-tag span {

    display: inline-block;

    line-height: 1.1em;

    letter-spacing: 0.15em;

    writing-mode: vertical-rl; /* Stacks the letters vertically */

    text-orientation: mixed;

}









/*.menu-heading,

.menu-section-title,

h2, h3, h4, .section-title {

    font-family: 'Bebas Neue', Arial, sans-serif !important;

    font-weight: 400;

    letter-spacing: 0.03em;

    text-transform: uppercase;

    margin-bottom: 0.4em;

    font-size: 2.1em;

}

*/





.menu-heading,

.menu-section-title,

h2, h3, h4, .section-title {

    font-family: 'Oswald', Arial, sans-serif !important;

    font-weight: 400 !important;

    letter-spacing: 0.04em;

    text-transform: uppercase;

    margin-bottom: 0.3em;

}



.menu-subheading {

    font-family: 'Oswald', Arial, sans-serif !important;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing: 0.03em;

}