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

html {
  height: 100%;
}

img,
picture,
video,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

.background-video {
  position: relative;
  overflow: hidden;
}

.background-video > video {
  background-size: cover;
  background-position: 50% 50%;
  position: absolute;
  margin: auto;
  width: 100%;
  height: 100%;
  right: -100%;
  bottom: -100%;
  top: -100%;
  left: -100%;
  object-fit: cover;
  z-index: -100; 
}

.video {
  width: 100%;
  position: relative;
  padding: 0;
}
.video iframe,
.video object,
.video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* =========================================
   Full menu + navbar styles
   ========================================= */

:root {
  /* nav + menu */
  --hover-ease: cubic-bezier(0.6, 0, 0.4, 1);
  --text-dur: 0.60s;
  --stroke-w: 0.75px;
  --stroke-c: rgba(255, 255, 255, 0.96);
  --ul-h: 1px;

  /* marquees */
  --dur: 45s;
}

/* Logo (GSAP handles visibility) */
.nav-logo {
  transition: opacity 0.16s ease, visibility 0.16s ease, transform 0.16s ease;
}

/* MENU/CLOSE label underline */
.nav-button .menu-label {
  position: relative;
  display: inline-block;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.nav-button .menu-label::after {
  content: "";
  position: absolute;
  left: 0;
  top: 102%;
  width: 100%;
  height: var(--ul-h);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.30s var(--hover-ease);
}

.nav-button:hover .menu-label::after,
.nav-button:focus-visible .menu-label::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Menu links: outline-on-hover + underline */
.menu-link,
.fullmenu__link {
  position: relative;
  display: inline-block;
}

.menu-text {
  display: inline-block;
  backface-visibility: hidden;
  transition:
    transform var(--text-dur) cubic-bezier(.16, 1, .3, 1),
    opacity calc(var(--text-dur) - .15s) ease;
  transition-delay: 0.04s;
}

.menu-link:hover .menu-text,
.menu-link:focus-visible .menu-text {
  color: transparent;
  -webkit-text-stroke-width: var(--stroke-w);
  -webkit-text-stroke-color: var(--stroke-c);
  transform: translateY(-2px);
}

/* One-way underline */
.menu-link::after,
.fullmenu__link::after {
  content: "";
  position: absolute;
  left: 0;
  top: 102.5%;
  width: 100%;
  height: var(--ul-h);
  background: #fff;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.30s var(--hover-ease);
}

.menu-link:hover::after,
.menu-link:focus-visible::after,
.fullmenu__link:hover::after,
.fullmenu__link:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Compositor hints for full menu */
.fullmenu {
  will-change: opacity, transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  contain: paint;
}

@media (prefers-reduced-motion: reduce) {
  .nav-button .menu-label,
  .menu-text {
    transition: none !important;
  }
}

/* =========================================
   4. Hero variable font weight animation
   ========================================= */

/* each .hero-word is a separate span: Hero Title 01–06 */
.hero-word {
  --w: 700; /* start weight */
  font-variation-settings: "wght" var(--w);
  letter-spacing: -0.01em;
  font-optical-sizing: auto; /* harmless if opsz is missing */
}

@media (prefers-reduced-motion: reduce) {
  .hero-word {
    animation: none !important;
  }
}

/* =========================================
   5. Projects section – sticky title blur
   ========================================= */

/* baseline filter so GSAP can animate smoothly */
.sticky-title-projects {
  filter: blur(0px);
  will-change: filter;
}

/* =========================================
   6. Sticky showcase image (TIMELESS / ELEGANCE banner)
   ========================================= */

.sticky-showcase__img {
  transform: translateZ(0);
  will-change: transform;
}

/* =========================================
   7. Horizontal marquees (hero + TIMELESS banner)
   ========================================= */

/* reusable marquee keyframes */
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* scrolling-t__track (TIMELESS / ELEGANCE / MODERN / DESIGN) */
.scrolling-t__track {
  animation: marquee var(--dur) linear infinite;
}

/* hero "unique / cool / sleek / design / that / wows" marquee */
.moving-text-content {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  animation: marquee var(--dur) linear infinite;
}

/* =========================================
   8. CONTACT section – 3D rotating text
   ========================================= */

.rotate-scene {
  perspective: 800px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.rotate-text-contain,
.rotate-text-stage {
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}

.rotate-text {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
  opacity: 0; /* so the fade-in is visible */
}

/* =========================================
   9. NOTE section – final lines
   ========================================= */

.the-note {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  will-change: transform, opacity;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================================
   ABOUT US PAGE
   ========================================= */

:root { --m-gap: 3rem; }
/* image marquee animation */
@keyframes thera-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - var(--m-gap) / 2)); }
}
.marquee-images {
  animation: thera-marquee 36s linear infinite;
  gap: var(--m-gap);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .marquee-images { animation: none; transform: none; }
}

/* Contact form – accessibility helpers */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

button {
  text-decoration: none;
  border: 0;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
}