body, html {
  font-family: "Merriweather", serif;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}

*, *::before, *::after {
box-sizing: border-box;
}


.main-container {
margin: 0 auto;
padding: 0;
}

.banner, .background, .footer-section {
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
}

.banner, .footer-section {
min-height: 80vh;
}

.banner-primary {
background-image: url('https://dev.en.ws-tcg.com/wordpress/wp-content/uploads/20250116104019/Artboard-1.png');
overflow: visible;
}

.banner-secondary {
background-image: url('https://dev.en.ws-tcg.com/wordpress/wp-content/uploads/20241230165335/Top-Banner-B.png');
overflow: visible;
}


.key-visual-container {
position: relative;
bottom: -35vh;
left: 0;
right: 0;
margin: auto;
width: 50%;
height: auto;
z-index: 2;
text-align: center;
overflow: hidden;
animation: dynamic-glow 2.5s infinite ease-in-out;
animation-play-state: paused;
transition: transform 0.3s ease-out;
}

.key-visual-container img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}

.logo-container {
position: absolute;
left: 50%;
transform: translateX(-50%) translateY(-100%);
z-index: 5;
top: 25%;
width: 55%;
}

.logo-container img {
width: 100%;
height: auto;
}

.glow-strong {
animation: glow-fade-in-strong 1.5s ease-in-out forwards, dynamic-glow-strong 2.5s infinite ease-in-out 1.5s;
}

.glow-weak {
animation: glow-fade-in-weak 2s ease-in-out forwards, dynamic-glow-weak 4s infinite ease-in-out 2s;
}

.glow-weak-white {
animation: glow-fade-in-weak-white 2s ease-in-out forwards, dynamic-glow-weak-white 4s infinite ease-in-out 2s;
}


.glow-weak-pink {
animation: glow-fade-in-weak-pink 2s ease-in-out forwards, dynamic-glow-weak-pink 4s infinite ease-in-out 2s;
}

.glow-weak-orange {
animation: glow-fade-in-weak-orange 2s ease-in-out forwards, dynamic-glow-weak-orange 4s infinite ease-in-out 2s;
}


.start-dynamic-glow {
animation: none; 
}

.initial-state {
box-shadow: none !important;
animation: none !important;
}

/* Strong Glow */
@keyframes dynamic-glow-strong {
0% {
  box-shadow: 0 0 30px 10px rgba(242, 234, 211, 0.8), 0 0 50px 20px rgba(212, 185, 150, 0.6);
}
50% {
  box-shadow: 0 0 40px 15px rgba(242, 234, 211, 1), 0 0 60px 30px rgba(212, 185, 150, 0.8);
}
100% {
  box-shadow: 0 0 30px 10px rgba(242, 234, 211, 0.8), 0 0 50px 20px rgba(212, 185, 150, 0.6);
}
}

@keyframes glow-fade-in-strong {
0% {
  box-shadow: none;
}
100% {
  box-shadow: 0 0 30px 10px rgba(242, 234, 211, 0.8), 0 0 50px 20px rgba(212, 185, 150, 0.6);
}
}

/* Weak Glow */
@keyframes dynamic-glow-weak {
0% {
  box-shadow: 0 0 10px 3px rgba(255, 215, 0, 0.3), 0 0 18px 6px rgba(218, 165, 32, 0.2);
}
50% {
  box-shadow: 0 0 12px 4px rgba(255, 215, 0, 0.4), 0 0 20px 8px rgba(218, 165, 32, 0.25);
}
100% {
  box-shadow: 0 0 10px 3px rgba(255, 215, 0, 0.3), 0 0 18px 6px rgba(218, 165, 32, 0.2);
}
}

@keyframes glow-fade-in-weak {
0% {
  box-shadow: none;
}
100% {
  box-shadow: 0 0 10px 3px rgba(255, 215, 0, 0.3), 0 0 18px 6px rgba(218, 165, 32, 0.2);
}
}


/* Weak White Glow */
@keyframes dynamic-glow-weak-white {
0% {
  box-shadow: 0 0 12px 4px rgba(242, 234, 211, 0.3), 0 0 20px 6px rgba(212, 185, 150, 0.2);
}
50% {
  box-shadow: 0 0 14px 5px rgba(242, 234, 211, 0.35), 0 0 22px 8px rgba(212, 185, 150, 0.25);
}
100% {
  box-shadow: 0 0 12px 4px rgba(242, 234, 211, 0.3), 0 0 20px 6px rgba(212, 185, 150, 0.2);
}
}

@keyframes glow-fade-in-weak-white {
0% {
  box-shadow: none;
}
100% {
  box-shadow: 0 0 12px 4px rgba(242, 234, 211, 0.3), 0 0 20px 6px rgba(212, 185, 150, 0.2);
}
}

/* weak Pink Glow */
@keyframes dynamic-glow-weak-pink {
0% {
  box-shadow: 0 0 12px 4px rgba(255, 182, 193, 0.3), 0 0 20px 6px rgba(255, 105, 180, 0.2); /* Light pink tones */
}
50% {
  box-shadow: 0 0 14px 5px rgba(255, 182, 193, 0.35), 0 0 22px 8px rgba(255, 105, 180, 0.25); /* Increased intensity */
}
100% {
  box-shadow: 0 0 12px 4px rgba(255, 182, 193, 0.3), 0 0 20px 6px rgba(255, 105, 180, 0.2); /* Return to original intensity */
}
}

/* Glow Fade-In Light Pink */
@keyframes glow-fade-in-weak-pink {
0% {
  box-shadow: none;
}
100% {
  box-shadow: 0 0 12px 4px rgba(255, 182, 193, 0.3), 0 0 20px 6px rgba(255, 105, 180, 0.2); /* Light pink glow effect */
}
}


/* Weak Orange Glow */
@keyframes dynamic-glow-weak-orange {
0% {
  box-shadow: 0 0 12px 4px rgba(255, 178, 102, 0.3), 0 0 20px 6px rgba(255, 140, 0, 0.2); /* Light orange tones */
}
50% {
  box-shadow: 0 0 14px 5px rgba(255, 178, 102, 0.35), 0 0 22px 8px rgba(255, 140, 0, 0.25); /* Increased intensity */
}
100% {
  box-shadow: 0 0 12px 4px rgba(255, 178, 102, 0.3), 0 0 20px 6px rgba(255, 140, 0, 0.2); /* Return to original intensity */
}
}

/* Glow Fade-In Weak Orange */
@keyframes glow-fade-in-weak-orange {
0% {
  box-shadow: none;
}
100% {
  box-shadow: 0 0 12px 4px rgba(255, 178, 102, 0.3), 0 0 20px 6px rgba(255, 140, 0, 0.2); /* Weak orange glow effect */
}
}




.overlay-reveal {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
background-size: cover;
background-blend-mode: multiply;
z-index: 3;
display: flex;
justify-content: center;
align-items: center;
animation: fade-out 1s ease-out 1.2s forwards;
overflow: hidden;
border: none;
}

.animated-line {
width: 0;
height: 10px;
position: absolute;
background: animated-linear-gradient(90deg, rgba(255, 50, 50, 1), rgba(200, 40, 40, 1), rgba(230, 60, 60, 1), rgba(180, 30, 30, 1), rgba(255, 70, 70, 1));
filter: blur(1px);
z-index: 4;
transform-origin: left center;
border-radius: 0;
box-shadow: 0 0 8px rgba(255, 80, 80, 0.7), 0 6px 10px rgba(180, 40, 40, 0.5), inset 0 0 4px rgba(230, 50, 50, 0.5);
overflow: visible;
}

.animated-line:nth-child(1) {
top: -32%;
left: -50%;
transform: translateY(-50%) rotate(45deg) skew(10deg);
animation: slash-motion-1 0.8s cubic-bezier(0.2, 0, 0.9, 1) forwards, slash-disappear 0.8s ease-out 0.9s forwards paused;
animation-delay: 0.5s, 1.4s;
}

.animated-line:nth-child(2) {
top: 168%;
left: -45%;
transform: translateY(-50%) rotate(-64deg) skew(15deg);
animation: slash-motion-2 0.4s cubic-bezier(0.2, 0, 0.9, 1) forwards, slash-disappear 0.8s ease-out 0.9s forwards paused;
animation-delay: 0.8s, 1.4s;
transform-origin: left center;
}

@keyframes slash-motion-1 {
0% {
  width: 0;
  opacity: 1;
  height: 3px;
  filter: blur(1px);
  border-radius: 50px;
}
20% {
  width: 70vw;
  height: 12px;
  filter: blur(4px);
  border-radius: 25px;
}
50% {
  width: 200vw;
  height: 8px;
  filter: blur(5px);
  border-radius: 15px;
}
80% {
  width: 400vw;
  height: 5px;
  filter: blur(3px);
  border-radius: 30px;
}
100% {
  width: 500vw;
  height: 2px;
  filter: blur(1px);
  border-radius: 100px;
}
}

@keyframes slash-motion-2 {
0% {
  width: 0;
  opacity: 1;
  height: 4px;
  filter: blur(1px);
  border-radius: 40px;
}
25% {
  width: 100vw;
  height: 8px;
  filter: blur(2px);
  border-radius: 15px;
}
60% {
  width: 250vw;
  height: 6px;
  filter: blur(4px);
  border-radius: 10px;
}
90% {
  width: 400vw;
  height: 3px;
  filter: blur(2px);
  border-radius: 20px;
}
100% {
  width: 500vw;
  height: 1px;
  filter: blur(0px);
  border-radius: 50px;
}
}

@keyframes slash-disappear {
0% {
  opacity: 1;
}
100% {
  opacity: 0;
}
}

@keyframes fade-out {
0% {
  opacity: 1;
}
100% {
  opacity: 0;
}
}

.start-animation .overlay-reveal,
.start-animation .animated-line {
animation-play-state: running;
}

.background.background-primary,
.background.background-secondary,
.background.background-tertiary,
.background.background-quarternary {
background-image: url('https://dev.en.ws-tcg.com/wordpress/wp-content/uploads/20241231142425/Background-Image.png');
}

.artboard-section {
position: absolute;
bottom: 20px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.artboard-image {
width: 50%;
height: auto;
}

.content-section {
width: 100%;
}

.content-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
height: 100%;
}



#header-image-for-slider {
display: inline-block; 
}


.header-image {
display: block;
margin: 0 auto;
width: 35%;
height: auto;
margin-bottom: 20px;
}

.overlay-container {
width: 100%;
background-color: rgba(55, 37, 42, 0.7);
padding: 20px;
}



/* Featured Cards */

.featured-cards-container {
width: 60%;
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
margin: 20px auto;
}

.featured-card {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1 1 calc(33.333% - 30px);
max-width: calc(33.333% - 30px);
height: auto;
}

.featured-card img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}


.card-text {
margin-top: 10px;
border: solid 4px gold;
border-style: double;
border-radius: 40px;
padding: 10px 20px;
text-align: center;
color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
font-size: 16px;
}

.featured-cards-container img.glow-strong {
border-radius: 20px; 
}
.featured-cards-container img.glow-weak-white {
border-radius: 13px; 
}
.featured-cards-container img.glow-weak-orange {
border-radius: 13px; 
}
.featured-cards-container img.glow-weak-pink {
border-radius: 13px; 
}

.flip-card img.glow-weak-white {
border-radius: 13px; 
}
.flip-card img.glow-weak-pink {
border-radius: 13px; 
}
.flip-card img.glow-weak-orange {
border-radius: 13px; 
}



/* Flexbox Layouts */
.two-column-flexbox {
display: flex;
justify-content: center;
align-items: stretch;
gap: 60px;
padding: 20px;
}

.product-set {
background-color: #F5E8D9;
padding: 10px;
border-radius: 20px;
text-align: center;
width: 28%;
}

.product-description {
background-color: #FAFAF5;
border-radius: 5px;
padding: 10px;
color: #333;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
font-size: 16px;
margin-top: 10px;
}

.product-set-image {
width: 100%;
margin-bottom: 10px;
}


.three-column-flexbox {
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
padding: 20px;
}


.three-column-flexbox img {
height: auto;
object-fit: cover; 
max-width: 550px;
}

.three-column-flexbox a {
display: inline-block; 
transition: transform 0.2s ease-in-out;
margin: 0;
padding: 0;
line-height: 0; 
}


.three-column-flexbox a:hover {
transform: scale(1.03); 
box-shadow: 0 0 15px 5px rgba(242, 234, 211, 0.6), 
          0 0 20px 10px rgba(212, 185, 150, 0.4), 
          inset 0 0 8px rgba(242, 234, 211, 0.3); 
transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.product-description {
  background: linear-gradient(135deg, #FAFAF5 0%, #F5F5F0 100%);
  border-radius: 12px;
  padding: 24px;
  color: #2C2C2C;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  font-size: 16px;
  margin-top: 10px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

@media (min-width: 768px) {
  .product-description {
    min-height: 620px;
  }
}

.product-title {
  font-size: 24px;
  font-weight: 700;
  color: #1A1A1A;
  margin-bottom: 20px;
  letter-spacing: -0.5px;
}

.pricing-section {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 8px;
  padding: 16px;
  margin: 16px 0;
}

.price-item {
  display: flex;
  flex-direction: column;
  margin: 12px 0;
  padding: 8px 0;
}

.price-label {
  color: #555;
  font-weight: 500;
}

.price-value {
  font-weight: 700;
  color: #2C2C2C;
  margin-top: 4px;
  font-size: 18px;
}

.product-details {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.detail-row {
  display: flex;
  margin: 8px 0;
  align-items: center;
}

.detail-label {
  font-weight: 600;
  color: #444;
  min-width: 80px;
  margin-right: 12px;
  text-align: left;
}

.detail-value {
  color: #2C2C2C;
  text-align: left;
}

.contents-info {
  background: rgb(193 71 71 / 10%);
  border-radius: 6px;
  padding: 12px;
  margin-top: 16px;
  font-size: 14px;
  color: #444;
}
/* Footer Section */

.footer-section {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
min-height: 50vh;
background-image: url('https://dev.en.ws-tcg.com/wordpress/wp-content/uploads/20241231142428/Footer-background.png') !important;
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat !important;
padding: 20px;
}

.share-bar {
width: 100%;
display: flex;
justify-content: flex-start;
margin-bottom: 20px;
}

.footer-section p {
text-align: center;
margin-top: 7vh;
line-height: 2;
}

.social-icons-container {
display: flex;
justify-content: space-evenly;
gap: 20px;
width: 100%;
margin-top: 20px;
}

.social-icons-container a img {
width: 70px;
height: auto;
transition: transform 0.2s ease-in-out;
}




@keyframes shake {
0% { transform: translateX(0); }
25% { transform: translateX(-5px); }
50% { transform: translateX(5px); }
75% { transform: translateX(-5px); }
100% { transform: translateX(0); }
}

.social-icons-container a img:hover {
animation: shake 0.5s ease-in-out;
}

#share {
width: 100%;
}

.copyright-text {
color: #CC0000;
font-size: 1.125rem;
}

.divider-gradient {
width: 100%;
height: 2px; 
background: linear-gradient(to right, rgba(204, 204, 204, 1), rgba(204, 204, 204, 0.2), transparent);
margin:  0;
}




.hamburger {
font-size: 48px; 
background: none;
border: none;
cursor: pointer;
z-index: 10000;
}


.menu {
position: fixed;
top: 0;
right: 0; 
width: 500px;
height: 100vh;
background: rgba(195, 13, 35, 0.9);
transform: translateX(100%); /* Start off-screen */
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
opacity: 0;
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 20px 60px 0 60px;
}

.menu.active {
transform: translateX(0); 
opacity: 1;
}


.menu.active {
right: 0;
opacity: 1;
}
.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: initial;
    height: 100%;
}

.menu ul li {
    text-align: center;
}

.menu ul li a {
font-size: 1.875rem;
font-weight: bold;
color: white;
text-decoration: none;
}






/* Social Icons Styling */
.menu-social-icons {
display: flex;
justify-content: center;
gap: 40px;
margin: 20px 10px 40px 10px;
padding-bottom: 20px;
visibility: visible;
}

.menu-social-icons a img {
width: 40px; 
height: auto;
filter: brightness(0) invert(1); 
transition: transform 0.2s ease-in-out;
}


.menu-links {
display: flex;
list-style: none;
padding: 0;
margin: 0;
gap: 20px; 
align-items: center; 
margin-bottom: 50px;
}

.menu-links li {
display: flex;
align-items: center;
}

.menu-logo img {
width: 100%; 
}


/* Media Queries */
@media (max-width: 2000px) {
.three-column-flexbox img {
max-width: 450px;
}
}

@media (max-width: 1440px) {
.three-column-flexbox img {
max-width: 300px;
}
}

@media (max-width: 1280px) {
.key-visual-container {
  width: 55%;
  bottom: -35vh;
}
}

@media (max-width: 1024px) {
.key-visual-container {
  width: 80%;
  bottom: -30vh;
}
.logo-container {
  top: 25%;
  width: 80%;
}
.three-column-flexbox {
flex-direction: column;
}

.banner.banner-secondary {
min-height: 65vh;
}
.product-set {
  width: 100%;
  }
}

@media (max-width: 768px) {
.banner.banner-primary {
min-height: 50vh;
}

.banner.banner-secondary {
min-height: 55vh;
}
.key-visual-container {
  width: 80%;
  bottom: -25vh;
}
.logo-container {
  top: 30%;
  width: 100%;
}
.two-column-flexbox {
flex-direction: column;
align-items: center;
}

.featured-cards-container {
flex-direction: column;
align-items: center;
width: 50%;
}

.featured-card {
flex: 1 1 100%;
max-width: 100%;
}

.featured-card:nth-child(2) {
order: -1;
}


.auto-height {
min-height: auto;
}
.featured__booster {
margin-bottom: 10vh;
}

.social-icons-container a img {
width: 40px;
}


.hamburger {
font-size: 42px; 
background: none;
border: none;
cursor: pointer;
z-index: 10000;
}

.header-image {
width: 60%;
}

.artboard-image {
width: 60%;
}

}

@media (max-width: 767px) {
.menu {
  width: 100%;
  transform: translateX(100vw); /* Ensure full width for mobile */
}

.menu ul li a {
font-size: 1.5rem;
}

.copyright-text {
font-size: 0.825rem;
}
}



@media (max-width: 480px) {
#banner-primary {
  min-height: 50vh;
}
#banner-secondary {
  min-height: 47vh;
}
.key-visual-container {
  width: 90%;
  bottom: -25vh;
}
.logo-container {
  top: 30%;
  width: 100%;
}
}


@media (max-width: 425px) {
.artboard-image {
width: 80%;
}
.header-image {
width: 80%;
}
.three-column-flexbox img {
max-width: 300px;
}
.copyright-text {
font-size: 0.75rem;
}
#share {
width: 200%;
}

}



@media (min-width: 769px) {
.menu-social-icons a img:hover {
transform: scale(1.1);
}

/* social icons are excluded */
.menu-links li:not(:last-child) {
transition: filter 0.3s ease;
}

.menu-links li:not(:last-child):hover {
filter: grayscale(100%) brightness(0.85);
}
}


.desktop-view {
display: block;
}
.mobile-tablet-view {
display: none;
}

@media screen and (max-width: 768px) {
.desktop-view {
    display: none;
}
.mobile-tablet-view {
    display: block;
}
}

.flip-card {
width: 45vw; 
height: calc(45vw * 251 / 178); 

perspective: 1000px;
display: flex;
align-items: center;
justify-content: center;
margin: 10px auto;
cursor: pointer;
position: relative;
}


/* Flip Card Inner */
.flip-card-inner {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
transition: transform 0.6s;
}

/* Flip Effect */
.flip-card.flipped .flip-card-inner {
transform: rotateY(180deg);
}

/* Flip Card Front & Back */
.flip-card-front, .flip-card-back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
transition: visibility 0.3s ease, opacity 0.3s ease;
}

/* Make only the front visible by default */
.flip-card-front {
visibility: visible;
opacity: 1;
}

/* Hide the back by default */
.flip-card-back {
visibility: hidden;
opacity: 0;
transform: rotateY(180deg);
}

/* When flipped, show the back and hide the front */
.flip-card.flipped .flip-card-front {
visibility: hidden;
opacity: 0;
}

.flip-card.flipped .flip-card-back {
visibility: visible;
opacity: 1;
}

/* Flip Card Text - Initial State */


.flip-card-text {
border-style: double;
border-color: gold;
border-radius: 22px;
padding: 5px 10px;
text-align: center;
color: #ffffff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
font-size: 16px;
opacity: 1;
transition: opacity 0.5sease-in-out;
}

/* Hide Text (Fade Out) */
.flip-card-text.fade-out {
opacity: 0;
}





.disabled-interaction {
pointer-events: none ; /* Disables click, drag, and other pointer events */
touch-action: none ;    /* Disables touch interactions */
user-select: none ;     /* Disables text selection */
-webkit-user-drag: none ; /* Disables image dragging in webkit browsers */
}


.allow-click-only {
pointer-events: all !important; /* Allows click interaction */
touch-action: manipulation !important; /* Prevents drag, pinch zoom, and other touch gestures */
user-select: none !important; /* Prevents text selection */
-webkit-user-drag: none !important; /* Prevents dragging of images */
-moz-user-drag: none !important; /* Firefox */
-ms-user-drag: none !important; /* IE */
}


.featured-cards-container-mobile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
margin: 20px auto;
}


.flip-button {
background: black;
border: 2px solid orange; 
padding: 10px 20px;
font-size: 18px;
font-weight: bold;
color: white;
cursor: pointer;
border-radius: 40px;
margin-top: 2.5rem;
transition: 
    transform 0.3s ease-in-out, 
    box-shadow 0.3s ease-in-out, 
    background-color 0.4s ease-in-out, 
    color 0.4s ease-in-out;
}

/* Hover Effect - Smooth Color Invert */
.flip-button:hover {
transform: scale(1.1); /* Slightly bigger */
box-shadow: 0 0 20px rgba(255, 165, 0, 0.8);
}

.flip-button:active {
transform: scale(0.97); 
box-shadow: 0 0 10px rgba(255, 165, 0, 0.6); 
}



@media (max-width: 400px) {
.flip-card-text {
font-size: 12px;
}
}

.hamburger {
font-size: 48px;
background: linear-gradient(45deg, grey, black);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
border: none;
cursor: pointer;
z-index: 10000;
transition: background 0.5s ease-in-out;
}

.featured__booster-illust, .featured__trial {
display: none;
}


.featured {
padding-top: 0; 
padding-bottom: 0; 
}