/*-----------------------------------------
ROYAL LUXURY COLOR SYSTEM
WHITE / CHARCOAL / EMERALD / GOLD
-----------------------------------------*/
@font-face {
    font-family: 'Vexillum';
    src: url('/fonts/Vexillum-Regular.woff2') format('woff2'),
         url('/fonts/Vexillum-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

:root {
  /* Base colors */
  --color-text: #1a1a1a;
  --color-white: #ffffff;
  --color-black: #2e2e2e;

  /* Brand colors */
  --color-primary: #7B0828;      /* emerald green */
  --color-secondary: #2b2b2b;    /* charcoal */
  --color-background: #ffffff;

  /* Glass panels */
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(0, 0, 0, 0.08);
  --glass-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
  --glass-inner: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* Gold accents */
  --accent-gold: #c9a55c;
  --accent-gold-soft: rgba(201, 165, 92, 0.25);

  /* Emerald accents */
  --accent-emerald: #7B0828;
  --accent-emerald-soft: rgba(15, 106, 80, 0.2);

  /* Text shades */
  --text-light: #444;
  --text-muted: #6f6f6f;

  /* UI hover */
  --ui-hover: #7B0828;

  /* Shadows */
  --shadow-soft: 0 15px 40px rgba(0, 0, 0, 0.15);
}

/*-----------------------------------------
GLOBAL STYLES
-----------------------------------------*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Kanit", sans-serif;
}

body {
  background-image: url("Images/maze-bg.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

/*-----------------------------------------
HEADER
-----------------------------------------*/
header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), var(--glass-inner);
  z-index: 100;
  transition: all 0.3s ease;
}

header:hover {
  transform: scale(1.01);
}

header h1 {
  font-size: 2.2em;
  font-weight: 600;
  letter-spacing: 2px;
  color: var(--accent-emerald);
}

/* Logo */
.logo-container {
  position: absolute;
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
}

.logo {
  height: 50px;
  cursor: pointer;
}

/* Language toggle button */
.lang-toggle {
  position: absolute;
  right: 160px;
  top: 50%;
  transform: translateY(-50%);
}

.lang-toggle button {
  background: var(--accent-gold);
  color: var(--color-black);
  border: none;
  border-radius: 30px;
  padding: 8px 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.lang-toggle button:hover {
  background: #b89347;
}

/*-----------------------------------------
SIDE PANEL
-----------------------------------------*/
.side-panel {
  height: 100%;
  width: 0;
  position: fixed;
  right: 0;
  top: 0;
  background: var(--color-secondary);
  overflow-x: hidden;
  transition: 0.4s;
  padding-top: 80px;
  box-shadow: -10px 0 40px rgba(112, 109, 109, 0.35);
  z-index: 200;
}
.side-panel {
    transition: width 0.4s ease; /* already exists, good */
}

.side-btn {
    transition: background 0.3s ease, opacity 0.3s ease;
}

.side-panel a {
  display: block;
  padding: 18px 35px;
  font-size: 1.4em;
  color: var(--color-white);
  text-decoration: none;
  transition: all 0.25s ease;
}

.side-panel a:hover {
  color: var(--accent-gold);
  padding-left: 45px;
}

.close-btn {
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 2em;
  color: var(--color-white);
}

.side-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  background: var(--accent-emerald);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 30px;
  font-size: 1.1em;
  cursor: pointer;
  transition: 0.3s;
}

.side-btn:hover {
  background: var(--ui-hover);
}

/*-----------------------------------------
WHITE BOX - Liquid Glass Version
-----------------------------------------*/
.white-box {
    width: 100%;                   /* full width of container */
    height: 2cm;                   /* adjust height as needed */
    margin: 20px 0;                /* spacing above and below */
    border-radius: 10px;           /* slightly more rounded for glass feel */
    position: relative;             /* for pseudo-elements */
    overflow: hidden;               /* contain blur layers */
    background: var(--glass-bg);   /* translucent base */
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow); /* subtle depth */
    backdrop-filter: blur(4px) saturate(180%) contrast(120%) brightness(105%);
    -webkit-backdrop-filter: blur(4px) saturate(180%) contrast(120%) brightness(105%);
    transition: all 0.3s ease;
}

/* Edge-only blur */
.white-box::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;

    backdrop-filter: blur(4px) saturate(180%) contrast(120%) brightness(105%);
    -webkit-backdrop-filter: blur(6px) saturate(180%) contrast(120%) brightness(105%);

    mask-image: radial-gradient(circle at center, rgba(123, 8, 40, 0.05) 0%, rgba(201, 165, 92, 0.2) 100%);
    -webkit-mask-image: radial-gradient(circle at center, rgba(123, 8, 40, 0.05) 0%, rgba(201, 165, 92, 0.2) 100%);

    pointer-events: none;
    z-index: 0;
}

/* Reflective sheen */
.white-box::before {
    content: '';
    position: absolute;
    top: -40%;
    left: -40%;
    width: 180%;
    height: 180%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 70%);
    transform: rotate(-20deg);
    pointer-events: none;
    border-radius: inherit;
    z-index: 0;
}

/*-----------------------------------------
HOME HERO - FULLY RESPONSIVE WITH EXTRA VERTICAL PADDING
-----------------------------------------*/

/* Container setup */
#home-container {
    margin-top: 12vh;               /* space from top */
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    padding: 5vh 5vw;               /* vertical & horizontal padding */
    position: relative;
    z-index: 1;
}

/* Subcontainer - liquid glass */
#home-subcontainer {
    position: relative;
    overflow: hidden;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 2vw;
    padding: 8vh 5vw;               /* extra vertical padding, horizontal remains responsive */
    max-width: 90vw;
    text-align: center;
    box-shadow: var(--shadow-soft);
    transition: all 0.3s ease;
}

/* Pseudo-elements for glass effect remain unchanged */
#home-subcontainer::after,
#home-subcontainer::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}

#home-subcontainer::after {
    backdrop-filter: blur(5px) saturate(180%) contrast(120%) brightness(105%);
    -webkit-backdrop-filter: blur(8px) saturate(180%) contrast(120%) brightness(105%);
    mask-image: radial-gradient(circle at center, rgba(123, 8, 40, 0.15) 0%, rgba(201, 165, 92, 0.25) 100%);
    -webkit-mask-image: radial-gradient(circle at center, rgba(123, 8, 40, 0.15) 0%, rgba(201, 165, 92, 0.25) 100%);
}

#home-subcontainer::before {
    top: -40%;
    left: -40%;
    width: 180%;
    height: 180%;
    background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0) 70%);
    transform: rotate(-20deg);
}

/* Text scaling */
.brand-title {
    font-size: 10vw;                  /* responsive to screen width */
    font-weight: 700;
    letter-spacing: 0.3vw;
    margin-bottom: 3vh;               /* more space below title */
    color: var(--accent-emerald);
    line-height: 1.1;
    z-index: 1;
}

/* Subtext / paragraph - smaller and responsive */
#home-subcontainer p {
    font-size: clamp(0.9rem, 1.5vw, 1.4rem);  /* never too big, scales slightly */
    margin-top: 2vh;                           /* extra spacing above subtext */
    color: var(--text-muted);
    z-index: 1;
}

/* Typing effect title */
#homeTitle.typing-effect {
    font-size: 8vw;                    /* scales with viewport width */
}

/* Hover lift effect (optional for desktops) */
#home-subcontainer:hover {
    transform: translateY(-0.5vh);
}

/* Extra small devices (<480px) fine-tuning */
@media screen and (max-width: 480px) {
    .brand-title {
        font-size: 12vw;
    }

    #home-subcontainer p {
        font-size: clamp(0.8rem, 2vw, 1rem);
    }

    #homeTitle.typing-effect {
        font-size: 10vw;
    }

    #home-subcontainer {
        padding: 10vh 8vw;   /* extra vertical padding on small phones */
        border-radius: 4vw;
    }

    .brand-title {
        margin-bottom: 4vh;
    }

    #home-subcontainer p {
        margin-top: 3vh;
    }
}
/*-----------------------------------------
Typing / Sequential Letter Reveal (Title only)
-----------------------------------------*/
.typing-effect {
    font-family: "Kanit", sans-serif;
    white-space: nowrap;               /* prevent wrapping */
    overflow: hidden;                  /* hide unrevealed letters */
    width: 0;                          /* start hidden */
    display: inline-block;
    position: relative;
    z-index: 1;

    /* Only typing animation, no cursor */
    animation: typing 1s steps(1200) forwards;
}

/* Title-specific settings */
#homeTitle.typing-effect {
    --char-count: 8; /* number of letters in VEXILLUM */
    font-size: 6em;
    font-family: 'Vexillum', serif; /* now uses the Vexillum font */
    font-weight: 700; /* adjust based on which font-weight file you loaded */
}

/* Typing keyframes */
@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}
/*-----------------------------------------
MISSION - True Liquid Glass (with color variables)
-----------------------------------------*/
.our-mission {
    padding: 150px 60px;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 1; /* base layer */
}

.mission-container {
    max-width: 1200px;
    display: flex;
    gap: 60px;
    position: relative;
    overflow: hidden;
    padding: 40px;
    border-radius: 25px;

    /* base tint + translucence for glass effect using variables */
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), var(--glass-inner);
    transition: all 0.3s ease;
}

/* Edge-only blur using pseudo-element */
.mission-container::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;

    /* Liquid glass blur */
    backdrop-filter: blur(5px) saturate(180%) contrast(120%) brightness(105%);
    -webkit-backdrop-filter: blur(8px) saturate(180%) contrast(120%) brightness(105%);

    /* Greyish-blue radial mask - edges more frosted */
    mask-image: radial-gradient(circle at center, rgba(110, 123, 140, 0.2) 0%, rgba(79, 90, 112, 0.7) 100%);
    -webkit-mask-image: radial-gradient(circle at center, rgba(110, 123, 140, 0.2) 0%, rgba(79, 90, 112, 0.7) 100%);

    pointer-events: none;
    z-index: 0;
}

/* Reflective sheen for extra glass realism */
.mission-container::before {
    content: '';
    position: absolute;
    top: -40%;
    left: -40%;
    width: 180%;
    height: 180%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) 70%);
    transform: rotate(-20deg);
    pointer-events: none;
    border-radius: inherit;
    z-index: 0;
}

/* Keep text exactly the same, but using color variables */
/* Mission section title like Home Hero */
.mission-title {
    font-size: 4.5em;
    color: var(--accent-emerald);
    position: relative;
    z-index: 1;
    margin-bottom: 20px;

    font-family: 'Vexillum', serif; /* luxury font */
    white-space: nowrap;             /* prevent wrapping */
    overflow: hidden;                /* hide unrevealed letters */
    width: 0;                        /* start hidden */
    display: inline-block;
    animation: mission-typing 1.2s steps(50) forwards; /* typing animation */
}

/* Adjust steps() based on number of letters in your mission title */
@keyframes mission-typing {
    from { width: 0; }
    to { width: 100%; }
}

.mission-text {
    font-size: 1.2em;
    color: var(--text-muted);
    position: relative;
    z-index: 1;
}

.talk-btn {
    margin-top: 30px;
    padding: 12px 30px;
    border-radius: 40px;
    border: 1px solid var(--accent-gold);
    background: transparent;
    color: var(--accent-gold);
    font-size: 1em;
    cursor: pointer;
    transition: 0.3s;
    position: relative;
    z-index: 1;
}

.talk-btn:hover {
    background: var(--accent-gold);
    color: black;
}

/* Hover effect */
.mission-container:hover {
    transform: translateY(-5px);
}

/*-----------------------------------------
TEAM - True Liquid Glass
-----------------------------------------*/
#examples {
    padding: 80px 20px;
}

.team-title {
    font-size: 3.5em;
    text-align: center;
    margin-bottom: 50px;
    color: var(--accent-emerald);
}

#info-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

/* Glass-style info cards */
.info-cards {
    position: relative;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 30px;
    min-width: 260px;
    text-align: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px) saturate(180%) contrast(120%) brightness(105%);
    -webkit-backdrop-filter: blur(12px) saturate(180%) contrast(120%) brightness(105%);
    z-index: 1;
    overflow: hidden;
}

/* Edge-only blur pseudo-element */
.info-cards::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;

    backdrop-filter: blur(5px) saturate(180%) contrast(120%) brightness(105%);
    -webkit-backdrop-filter: blur(8px) saturate(180%) contrast(120%) brightness(105%);

    /* Radial mask for subtle edges */
    mask-image: radial-gradient(circle at center, rgba(123, 8, 40, 0.1) 0%, rgba(201, 165, 92, 0.25) 100%);
    -webkit-mask-image: radial-gradient(circle at center, rgba(123, 8, 40, 0.1) 0%, rgba(201, 165, 92, 0.25) 100%);

    pointer-events: none;
    z-index: 0;
}

/* Reflective sheen */
.info-cards::before {
    content: '';
    position: absolute;
    top: -40%;
    left: -40%;
    width: 180%;
    height: 180%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0) 70%);
    transform: rotate(-20deg);
    pointer-events: none;
    border-radius: inherit;
    z-index: 0;
}

/* Hover effect */
.info-cards:hover {
    transform: translateY(-5px);
}

/*-----------------------------------------
FOOTER
-----------------------------------------*/
footer {
  flex-shrink: 0; /* prevents shrinking */
  margin-top: 80px; /* optional spacing from content */
  text-align: center;
  padding: 40px;
  background: var(--color-secondary);
  color: #cfcfcf;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/*-----------------------------------------
RESPONSIVE
-----------------------------------------*/
/*-----------------------------------------
MOBILE RESPONSIVE FIXES - ROYAL LUXURY
-----------------------------------------*/
@media screen and (max-width: 768px) {

  /* Body background adjustments */
  body {
    background-size: contain; /* scale maze background properly */
    background-position: top center;
  }

  /* Header */
  header {
    height: 60px;
    padding: 0 10px;
    justify-content: center;
  }

  header h1 {
    font-size: 1.6em;
    letter-spacing: 1px;
  }

  /* Logo */
  .logo-container {
    left: 10px;
  }

  .logo {
    height: 40px;
  }

  /* Language toggle */
  .lang-toggle {
    right: 10px;
  }

  .lang-toggle button {
    padding: 6px 12px;
    font-size: 0.9em;
  }

  /* Side panel button */
  .side-btn {
    top: 15px;
    right: 10px;
    font-size: 1em;
    padding: 8px 16px;
  }

  /* Side panel links */
  .side-panel a {
    padding: 14px 25px;
    font-size: 1.2em;
  }

  .side-panel a:hover {
    padding-left: 30px;
  }

  /* White boxes */
  .white-box {
    height: 1.5cm;
    margin: 15px 0;
    border-radius: 8px;
  }

  /*-----------------------------------------
HOME HERO - MOBILE FIX
-----------------------------------------*/
@media screen and (max-width: 768px) {

  #home-container {
    margin-top: 60px;   /* reduce spacing at top */
    height: auto;       /* let content expand */
    padding: 0 10px;
  }

  #home-subcontainer {
    padding: 20px;           /* smaller padding */
    max-width: 90%;          /* fit smaller screens */
    border-radius: 15px;
    transform: scale(1);     /* remove oversized scaling */
    transition: all 0.3s ease;
  }

  #home-subcontainer:hover {
    transform: scale(1) translateY(0); /* remove hover scaling */
  }

  .brand-title {
    font-size: 3em;          /* shrink huge title */
    letter-spacing: 1.5px;
  }

  #home-subcontainer p {
    font-size: 1em;          /* shrink subtitle */
  }

  #homeTitle.typing-effect {
    font-size: 2.5em;        /* smaller typing title */
  }
}

/* Extra small phones (<480px) */
@media screen and (max-width: 480px) {

  #home-container {
    margin-top: 40px;
  }

  #home-subcontainer {
    padding: 15px;
  }

  .brand-title {
    font-size: 2em;
  }

  #home-subcontainer p {
    font-size: 0.9em;
  }

  #homeTitle.typing-effect {
    font-size: 2em;
  }
}

  /* Mission section */
  .our-mission {
    padding: 50px 10px;
  }

  .mission-container {
    flex-direction: column;
    gap: 30px;
    padding: 20px;
    border-radius: 15px;
  }

  .mission-title {
    font-size: 2.5em;
  }

  .mission-text {
    font-size: 1em;
  }

  .talk-btn {
    padding: 10px 25px;
    font-size: 0.9em;
  }

  /* Team section */
  .team-title {
    font-size: 2em;
  }

  #info-container {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .info-cards {
    width: 90%;
    padding: 20px;
    border-radius: 15px;
  }

  /* Footer */
  footer {
    padding: 20px;
    font-size: 0.9em;
  }
}

/* Extra small devices <480px */
@media screen and (max-width: 480px) {

  header h1 {
    font-size: 1.3em;
  }

  .brand-title {
    font-size: 2.2em;
  }

  #home-subcontainer {
    padding: 20px;
    transform: scale(1.2);
  }

  .mission-title {
    font-size: 2em;
  }

  .team-title {
    font-size: 1.8em;
  }

  .info-cards {
    padding: 15px;
  }

  .talk-btn, .lang-toggle button, .side-btn {
    font-size: 0.85em;
    padding: 6px 12px;
  }

  .white-box {
    height: 1.2cm;
  }
}