/**
 * Tunas Muda — global light ambient background (Utama)
 * Fixed mesh gradient + particle network visible behind all sections
 */

html.tm-ambient-root:not(.tm-theme-bg-root),
html:has(.tm-ambient-page):not(:has(.tm-theme-bg-page)) {
  /* NOTE: Body slot 1 — page canvas behind transparent sections */
  background: var(--tm-ambient-bg, #eef1f6);
  margin: 0;
  padding: 0;
}

html.tm-theme-bg-root,
html:has(.tm-theme-bg-page) {
  margin: 0;
  padding: 0;
}

.tm-ambient-page {
  background: transparent;
  margin: 0;
  padding: 0;
}

/* Fixed layer — stays behind all scrolling content */
.tm-ambient {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: transparent;
}

.tm-theme-bg-page .tm-ambient {
  background: transparent;
}

.tm-ambient__mesh {
  position: absolute;
  inset: -25%;
  transform: none;
  will-change: auto;
}

/* NOTE: Soft colour orbs disabled — bubbles removed from homepage */
.tm-ambient__orb,
.tm-ambient__mesh {
  display: none !important;
}

.tm-ambient__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 1;
  animation: none !important;
  transform: none !important;
  will-change: auto;
}

.tm-ambient__orb--1 {
  width: min(58vw, 560px);
  height: min(58vw, 560px);
  top: 6%;
  left: 8%;
  background: radial-gradient(circle, rgba(29, 54, 92, 0.14) 0%, transparent 72%);
}

.tm-ambient__orb--2 {
  width: min(50vw, 480px);
  height: min(50vw, 480px);
  top: 38%;
  right: 4%;
  background: radial-gradient(circle, rgba(255, 199, 54, 0.12) 0%, transparent 74%);
}

.tm-ambient__orb--3 {
  width: min(44vw, 420px);
  height: min(44vw, 420px);
  bottom: 8%;
  left: 24%;
  background: radial-gradient(circle, rgba(120, 155, 195, 0.16) 0%, transparent 72%);
}

.tm-ambient__orb--4 {
  width: min(38vw, 360px);
  height: min(38vw, 360px);
  top: 18%;
  left: 48%;
  background: radial-gradient(circle, rgba(29, 54, 92, 0.08) 0%, transparent 70%);
}

.tm-ambient__canvas {
  display: none !important;
}

.tm-ambient__grain {
  position: absolute;
  inset: 0;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.tm-ambient__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 95% 85% at 50% 45%, transparent 55%, rgba(29, 54, 92, 0.045) 100%);
}

/* — Page layering — sections must stay transparent so ambient shows through */
.tm-ambient-page #header {
  z-index: 9999;
}

.tm-ambient-page .main {
  position: relative;
  z-index: 1;
  margin-top: 0;
}

.tm-ambient-page #footer {
  position: relative;
  z-index: 2;
}

/* Must stay fixed — relative here caused a ~3px gap at the top */
.tm-ambient-page .tm-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10001;
}

.tm-ambient-page .scroll-top {
  position: fixed;
  z-index: 10002;
}

/* —— Section bands — distinct blocks, not one flat canvas —— */
.tm-ambient-page .main {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* —— Section bands — distinct blocks, not one flat canvas —— */
.tm-theme-bg-page.tm-ambient-page .main > section:not(.tm-hero),
.tm-theme-bg-page.tm-ambient-page .main > section:not(.tm-hero)::before {
  border-top: none;
  box-shadow: none;
  background: transparent !important;
}

.tm-ambient-page .main > section:not(.tm-hero) {
  position: relative;
  isolation: isolate;
  border-top: 1px solid rgba(29, 54, 92, 0.09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 8px 32px rgba(15, 30, 53, 0.04);
}

.tm-ambient-page .main > section:not(.tm-hero)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(120px, 18%);
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(90deg, transparent, var(--tm-gold), transparent);
  opacity: 0.85;
  pointer-events: none;
}

/* Light sections — solid panels (skip when global theme bg is active) */
.tm-theme-bg-page.tm-ambient-page #cerita,
.tm-theme-bg-page.tm-ambient-page .tm-story.section,
.tm-theme-bg-page.tm-ambient-page #rakan-strategik.section,
.tm-theme-bg-page.tm-ambient-page .rakan-strategik.section,
.tm-theme-bg-page.tm-ambient-page #pencapaian.section,
.tm-theme-bg-page.tm-ambient-page .pencapaian.section,
.tm-theme-bg-page.tm-ambient-page #media-sosial.section,
.tm-theme-bg-page.tm-ambient-page .media-sosial.section,
.tm-theme-bg-page.tm-ambient-page #berita-peristiwa.section,
.tm-theme-bg-page.tm-ambient-page .berita-peristiwa.section,
.tm-theme-bg-page.tm-ambient-page .tm-cta-band.section {
  background: transparent !important;
}

.tm-ambient-page #cerita,
.tm-ambient-page .tm-story.section {
  /* NOTE: Body slot 3 — white / card band */
  background: var(--surface-color, var(--tm-white, #ffffff)) !important;
}

.tm-ambient-page #rakan-strategik.section,
.tm-ambient-page .rakan-strategik.section {
  /* NOTE: Body slot 2 — soft section band */
  background: var(--tm-light, #eef2f7) !important;
}

.tm-ambient-page #pencapaian.section,
.tm-ambient-page .pencapaian.section {
  background:
    radial-gradient(ellipse 90% 55% at 50% 0%, rgba(255, 199, 54, 0.09), transparent 58%),
    var(--surface-color, var(--tm-white, #ffffff)) !important;
}

.tm-ambient-page #media-sosial.section,
.tm-ambient-page .media-sosial.section {
  background: var(--tm-light, #eef2f7) !important;
}

.tm-ambient-page #berita-peristiwa.section,
.tm-ambient-page .berita-peristiwa.section {
  background: var(--surface-color, var(--tm-white, #ffffff)) !important;
}

.tm-ambient-page .tm-cta-band.section {
  background: var(--tm-light, #eef2f7) !important;
  border-top: 1px solid rgba(29, 54, 92, 0.09);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.tm-ambient-page .tm-cta-band.section::before {
  display: none;
}

.tm-theme-bg-page.tm-ambient-page .services.services-slider.section,
.tm-theme-bg-page.tm-ambient-page .visi-dasar-kualiti.section {
  background: transparent !important;
  box-shadow: none;
}

/* Dark sections — Body slot 5 (--tm-panel-dark) */
.tm-ambient-page .services.services-slider.section {
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--tm-panel-dark, #152a47), #000 12%) 0%,
    var(--tm-panel-dark, #152a47) 48%,
    color-mix(in srgb, var(--tm-panel-dark, #152a47), #000 22%) 100%
  ) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top-color: rgba(255, 199, 54, 0.22);
  box-shadow: 0 12px 48px rgba(12, 24, 41, 0.18);
}

.tm-ambient-page .visi-dasar-kualiti.section {
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--tm-panel-dark, #152a47), #000 18%) 0%,
    var(--tm-panel-dark, #152a47) 55%,
    color-mix(in srgb, var(--tm-panel-dark, #152a47), #000 28%) 100%
  ) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top-color: rgba(255, 199, 54, 0.2);
  box-shadow: 0 12px 48px rgba(12, 24, 41, 0.15);
}

.tm-ambient-page .services.services-slider.section::before,
.tm-ambient-page .visi-dasar-kualiti.section::before {
  background: linear-gradient(90deg, transparent, rgba(255, 199, 54, 0.9), transparent);
}

/* Hero stays full-bleed — no band chrome */
.tm-ambient-page .tm-hero.section {
  border-top: none;
  box-shadow: none;
}

.tm-ambient-page .tm-hero.section::before {
  display: none;
}

/* Legacy transparent override — only where no band is set */
.tm-ambient-page section,
.tm-ambient-page .section {
  background-color: transparent;
  background: transparent;
}

.tm-ambient-page.light-background,
.tm-ambient-page .light-background,
.tm-ambient-page .section.light-background {
  --background-color: transparent;
}

.tm-ambient-page #footer.footer {
  /* NOTE: Body slot 5 — dark panel (solid; theme can override) */
  background: color-mix(in srgb, var(--tm-panel-dark, #152a47) 94%, transparent) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Hero — dark cinematic block; ambient visible at edges */
.tm-ambient-page .tm-hero.section {
  background: transparent;
  overflow: hidden;
  isolation: isolate;
  min-height: 100svh;
  min-height: calc(var(--tm-vh, 1vh) * 100);
  height: calc(var(--tm-vh, 1vh) * 100);
  max-height: calc(var(--tm-vh, 1vh) * 100);
  box-sizing: border-box;
}

.tm-ambient-page .tm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 70% at 20% 30%, rgba(29, 54, 92, 0.88) 0%, transparent 55%),
    radial-gradient(ellipse 70% 60% at 80% 20%, rgba(255, 199, 54, 0.22) 0%, transparent 50%),
    radial-gradient(ellipse 80% 50% at 50% 100%, rgba(21, 42, 71, 0.92) 0%, transparent 60%),
    linear-gradient(180deg, rgba(10, 20, 36, 0.94) 0%, rgba(21, 42, 71, 0.9) 45%, rgba(12, 24, 41, 0.93) 100%);
  pointer-events: none;
}

.tm-ambient-page .tm-hero__bg {
  z-index: 1;
}

.tm-ambient-page .tm-hero__bg img,
.tm-ambient-page .tm-hero__bg video {
  transform: scale(1.04);
  filter: saturate(1.08) contrast(1.14) brightness(1.02);
  object-position: center 42%;
  will-change: auto;
}

/* NOTE: Poster visible; video stays hidden until .is-active (must beat tag selector above) */
.tm-ambient-page .tm-hero__bg img.tm-hero__poster {
  opacity: 0.88;
}

.tm-ambient-page .tm-hero__bg video.tm-hero__video {
  opacity: 0;
}

.tm-ambient-page .tm-hero__bg video.tm-hero__video.is-active {
  opacity: 0.88;
}

@media (max-height: 900px) {
  .tm-ambient-page .tm-hero__bg img,
  .tm-ambient-page .tm-hero__bg video {
    transform: scale(1.02);
  }
}

.tm-ambient-page .tm-hero__poster {
  z-index: 0;
  opacity: 0.88;
}

.tm-ambient-page .tm-hero__video {
  opacity: 0;
}

.tm-ambient-page .tm-hero__video.is-active {
  opacity: 0.88;
}

.tm-ambient-page .tm-hero__poster.is-hidden {
  opacity: 0;
}

/* NOTE: Video mode — fully remove poster once play succeeds (not just fade) */
.tm-ambient-page .tm-hero--bg-video .tm-hero__poster.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.tm-ambient-page .tm-hero--bg-video .tm-hero__video.is-active {
  opacity: 0.88;
}

/* NOTE: Image background mode — keep poster fully visible (not a temporary fallback) */
.tm-ambient-page .tm-hero--bg-image .tm-hero__poster,
.tm-ambient-page .tm-hero--bg-image .tm-hero__poster.is-hidden {
  opacity: 1;
  visibility: visible;
}

.tm-ambient-page .tm-hero--bg-image .tm-hero__video {
  display: none !important;
}

.tm-ambient-page .tm-hero__overlay {
  z-index: 2;
  background:
    linear-gradient(105deg, rgba(10, 20, 36, 0.68) 0%, rgba(10, 20, 36, 0.34) 34%, rgba(10, 20, 36, 0.06) 58%, rgba(10, 20, 36, 0.18) 100%),
    radial-gradient(ellipse 48% 40% at 82% 34%, rgba(255, 199, 54, 0.1), transparent 55%);
}

.tm-ambient-page .tm-hero__wrap {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: min(1240px, 100%);
  margin: 0;
  padding: 0 clamp(1rem, 3.5vw, 2.5rem);
}

/* NOTE: Frosted glass + outline fade right; text stays sharp on .tm-hero__glass-inner */
.tm-hero__glass {
  --tm-glass-fade: linear-gradient(to right, #000 0%, #000 48%, rgba(0, 0, 0, 0.35) 72%, transparent 100%);
  --tm-glass-outline: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.58) 0%,
    rgba(255, 255, 255, 0.34) 48%,
    rgba(255, 255, 255, 0.12) 72%,
    transparent 100%
  );
  position: relative;
  max-width: min(520px, 46vw);
  margin-right: auto;
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: 24px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
  animation: tmHeroGlassIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  overflow: visible;
}

/*
  NOTE: Real backdrop blur lives here (not on the text wrapper).
  Same mask curve as the outline so frost and border fade out together to the right.
  Do not use isolation:isolate on the parent — that blocks blur of the hero video.
*/
.tm-hero__glass-frost {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(
      105deg,
      rgba(255, 255, 255, 0.14) 0%,
      rgba(255, 255, 255, 0.06) 42%,
      rgba(12, 22, 40, 0.22) 100%
    );
  backdrop-filter: blur(22px) saturate(1.25);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  -webkit-mask-image: var(--tm-glass-fade);
  mask-image: var(--tm-glass-fade);
}

/* NOTE: Outline ring — same left→right fade as the frost */
.tm-hero__glass::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  padding: 1.5px;
  background: var(--tm-glass-outline);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

.tm-hero__glass-inner {
  position: relative;
  z-index: 1;
}

@keyframes tmHeroGlassIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.tm-hero__glass:hover {
  transform: translateY(-2px);
  box-shadow: none;
}

.tm-hero__glass:hover::after {
  --tm-glass-outline: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(255, 255, 255, 0.4) 48%,
    transparent 100%
  );
  background: var(--tm-glass-outline);
}

.tm-ambient-page .tm-hero__stats {
  max-width: none;
}

/* NOTE: Frosted bubble circles removed from hero */
.tm-hero__ambient-shapes,
.tm-hero__shape {
  display: none !important;
}

.tm-hero__ambient-shapes {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.tm-hero__shape {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: none !important;
}

.tm-hero__shape--1 {
  width: 120px;
  height: 120px;
  top: 18%;
  right: 12%;
  animation-delay: 0s;
}

.tm-hero__shape--2 {
  width: 80px;
  height: 80px;
  bottom: 22%;
  right: 28%;
  animation-delay: -6s;
}

.tm-hero__shape--3 {
  width: 56px;
  height: 56px;
  top: 32%;
  right: 38%;
  animation-delay: -12s;
}

@keyframes tmOrbDrift1 {
  0%, 100% { translate: 0 0; }
  33% { translate: 4% 6%; }
  66% { translate: -3% 2%; }
}

@keyframes tmOrbDrift2 {
  0%, 100% { translate: 0 0; }
  40% { translate: -5% -4%; }
  70% { translate: 3% 5%; }
}

@keyframes tmOrbDrift3 {
  0%, 100% { translate: 0 0; }
  50% { translate: 6% -3%; }
}

@keyframes tmOrbDrift4 {
  0%, 100% { translate: 0 0; }
  45% { translate: -4% 5%; }
  80% { translate: 2% -4%; }
}

@keyframes tmShapeFloat {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(-12px, 16px) rotate(8deg); }
  66% { transform: translate(8px, -10px) rotate(-6deg); }
}

/* Reduced motion — static gradient only */
@media (prefers-reduced-motion: reduce) {
  .tm-ambient__orb {
    animation: none !important;
    transform: none !important;
  }

  .tm-ambient__mesh {
    transform: none !important;
    transition: none !important;
  }

  .tm-ambient__canvas {
    display: none;
  }

  .tm-hero__glass {
    animation: none;
  }

  .tm-hero__shape {
    animation: none;
  }

  .tm-hero__glass:hover {
    transform: none;
  }
}

@media (max-width: 767px) {
  .tm-hero__glass {
    padding: 1.5rem;
    border-radius: 20px;
  }

  .tm-ambient__orb {
    filter: blur(56px);
    opacity: 0.85;
  }

  .tm-ambient__canvas {
    opacity: 0.55;
  }
}

/* Low-end / mobile — CSS gradient only, no canvas or pointer tracking */
.tm-perf-lite .tm-ambient__canvas,
.tm-perf-minimal .tm-ambient__canvas {
  display: none !important;
}

.tm-perf-lite .tm-ambient__mesh,
.tm-perf-minimal .tm-ambient__mesh {
  transform: none !important;
  transition: none !important;
}

.tm-perf-lite .tm-ambient__orb,
.tm-perf-minimal .tm-ambient__orb {
  transform: none !important;
}

.tm-perf-balanced .tm-ambient__mesh {
  transition: none;
}

.tm-perf-balanced .tm-ambient__orb--1,
.tm-perf-balanced .tm-ambient__orb--2 {
  transform: none !important;
}

.tm-perf-lite .tm-hero__ambient-shapes,
.tm-perf-minimal .tm-hero__ambient-shapes {
  display: none;
}

/* —— All devices: hero & glass tuning —— */
@media (max-width: 767.98px) {
  .tm-ambient-page .tm-hero__wrap {
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
  }

  .tm-hero__glass {
    /* NOTE: Soften the right fade on phones so the frame still reads as a container */
    --tm-glass-fade: linear-gradient(to right, #000 0%, #000 68%, rgba(0, 0, 0, 0.4) 88%, transparent 100%);
    --tm-glass-outline: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.52) 0%,
      rgba(255, 255, 255, 0.3) 68%,
      rgba(255, 255, 255, 0.1) 88%,
      transparent 100%
    );
    max-width: 100%;
    margin: 0;
    padding: clamp(1.25rem, 4.5vw, 1.75rem);
    border-radius: 20px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .tm-hero__glass-frost {
    background:
      linear-gradient(
        105deg,
        rgba(255, 255, 255, 0.16) 0%,
        rgba(255, 255, 255, 0.08) 40%,
        rgba(12, 22, 40, 0.32) 100%
      );
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
  }

  .tm-ambient-page .tm-hero__bg img,
  .tm-ambient-page .tm-hero__bg video {
    object-position: center 38%;
    transform: scale(1.05);
  }

  .tm-ambient-page .tm-hero__overlay {
    background:
      linear-gradient(180deg, rgba(10, 20, 36, 0.82) 0%, rgba(10, 20, 36, 0.5) 42%, rgba(10, 20, 36, 0.72) 100%),
      linear-gradient(105deg, rgba(10, 20, 36, 0.76) 0%, rgba(10, 20, 36, 0.38) 48%, rgba(10, 20, 36, 0.2) 100%);
  }

  .tm-hero__ambient-shapes {
    opacity: 0.3;
  }
}

@media (max-width: 767.98px) and (orientation: landscape) {
  .tm-ambient-page .tm-hero.section {
    padding-top: calc(var(--tm-header-h) + 0.35rem);
    padding-bottom: 0.5rem;
  }

  .tm-hero__glass {
    padding: 0.9rem 1.15rem;
  }

  .tm-hero__ambient-shapes {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .tm-ambient-page .tm-hero__bg img,
  .tm-ambient-page .tm-hero__bg video {
    object-position: center 40%;
  }
}

@media (hover: none), (pointer: coarse) {
  .tm-hero__glass:hover {
    transform: none;
    box-shadow: none;
  }

  .tm-hero__glass:hover::after {
    --tm-glass-outline: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.55) 0%,
      rgba(255, 255, 255, 0.32) 48%,
      transparent 100%
    );
    background: var(--tm-glass-outline);
  }
}

@media (prefers-reduced-data: reduce) {
  .tm-ambient-page .tm-hero__video {
    display: none !important;
  }
}