/*!
 * YouHack Home — Liquid Glass skin (cool aurora)
 * Loaded AFTER home.css so it overrides the Start Bootstrap "Creative" theme.
 * Design language: Apple "Liquid Glass" — bright cool aurora backdrop with
 * frosted, translucent panels (backdrop-blur), specular borders and soft glows.
 * Scoped to the youhack home page only (this file is linked just there).
 */

:root {
  --lg-accent: #5b8cff;          /* primary cool blue   */
  --lg-accent-2: #8a6bff;        /* violet              */
  --lg-accent-3: #28d4d9;        /* cyan                */
  --lg-accent-pink: #ff6bd0;     /* magenta pop         */
  --lg-ink: #1c2440;             /* dark text on glass  */
  --lg-ink-soft: #51597a;        /* muted text on glass */

  --lg-glass: rgba(255, 255, 255, 0.55);
  --lg-glass-strong: rgba(255, 255, 255, 0.70);
  --lg-glass-border: rgba(255, 255, 255, 0.65);
  --lg-radius: 28px;
  --lg-shadow: 0 22px 60px rgba(31, 38, 95, 0.18);

  --lg-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI",
    "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, "Helvetica Neue",
    Arial, sans-serif;
}

/* ----------------------------------------------------------------------------
   Base + typography
---------------------------------------------------------------------------- */
body#page-top {
  background: linear-gradient(160deg, #eef2ff 0%, #e9ecfb 32%, #efe9fb 66%, #e6f6fb 100%);
  background-attachment: fixed;
  color: var(--lg-ink);
  font-family: var(--lg-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body#page-top .btn,
#mainNav .navbar-brand,
#mainNav .navbar-nav .nav-item .nav-link,
.portfolio-box .project-category {
  font-family: var(--lg-font);
}

body#page-top h1,
body#page-top h2,
body#page-top h3,
body#page-top h4 {
  font-weight: 800;
  letter-spacing: -0.015em;
}

.text-black-50 {
  color: rgba(28, 36, 64, 0.58) !important;
}

/* ----------------------------------------------------------------------------
   Aurora backdrop (fixed, behind everything)
---------------------------------------------------------------------------- */
.lg-aurora {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
}

.lg-aurora::after {
  /* gentle top-to-bottom vignette to ground the glass */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 50% -10%, transparent 55%, rgba(20, 24, 60, 0.07) 100%);
}

.lg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.55;
  will-change: transform;
}

.lg-blob--1 {
  width: 48vw;
  height: 48vw;
  left: -10vw;
  top: -8vw;
  background: radial-gradient(circle at 30% 30%, var(--lg-accent), transparent 70%);
  animation: lg-float-1 26s ease-in-out infinite;
}

.lg-blob--2 {
  width: 42vw;
  height: 42vw;
  right: -8vw;
  top: 4vw;
  background: radial-gradient(circle at 60% 40%, var(--lg-accent-2), transparent 70%);
  animation: lg-float-2 30s ease-in-out infinite;
}

.lg-blob--3 {
  width: 40vw;
  height: 40vw;
  left: 18vw;
  bottom: -14vw;
  background: radial-gradient(circle at 40% 60%, var(--lg-accent-3), transparent 70%);
  animation: lg-float-3 28s ease-in-out infinite;
}

.lg-blob--4 {
  width: 34vw;
  height: 34vw;
  right: 8vw;
  bottom: -6vw;
  background: radial-gradient(circle at 50% 50%, var(--lg-accent-pink), transparent 70%);
  opacity: 0.42;
  animation: lg-float-1 34s ease-in-out infinite reverse;
}

@keyframes lg-float-1 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(6vw, 5vh, 0) scale(1.12); }
}
@keyframes lg-float-2 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-7vw, 6vh, 0) scale(1.08); }
}
@keyframes lg-float-3 {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(5vw, -6vh, 0) scale(1.15); }
}

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

/* ----------------------------------------------------------------------------
   Accent colour overrides (orange -> cool palette)
---------------------------------------------------------------------------- */
.text-primary {
  color: var(--lg-accent) !important;
}

/* Feature icons become a cool gradient glyph with a soft glow */
#services i.fas,
#products i.fas,
#products i.fa-4x,
#contact i {
  background: linear-gradient(135deg, var(--lg-accent) 0%, var(--lg-accent-2) 55%, var(--lg-accent-3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
  filter: drop-shadow(0 6px 14px rgba(91, 140, 255, 0.35));
}

hr.divider {
  border: 0 !important;
  height: 5px;
  width: 3.5rem;
  max-width: 3.5rem;
  margin-left: auto;
  margin-right: auto;
  border-radius: 999px;
  opacity: 1;
  background: linear-gradient(90deg, var(--lg-accent), var(--lg-accent-2), var(--lg-accent-3)) !important;
}

hr.divider.light,
hr.light {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.45)) !important;
}

/* ----------------------------------------------------------------------------
   Navigation — floating glass pill
---------------------------------------------------------------------------- */
#mainNav {
  margin: 0.75rem clamp(0.5rem, 3vw, 2rem);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 10px 30px rgba(20, 24, 60, 0.18);
  transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

#mainNav .navbar-brand {
  color: #fff !important;
}

#mainNav .navbar-brand img.title {
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.25));
}

.navbar-toggler {
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 14px;
}

@media (min-width: 992px) {
  #mainNav .navbar-nav .nav-item .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
  }
  #mainNav .navbar-nav .nav-item .nav-link:hover,
  #mainNav .navbar-nav .nav-item .nav-link.active {
    color: #fff !important;
  }
}

@media (max-width: 991.98px) {
  #mainNav {
    border-radius: 22px;
  }
  #mainNav .navbar-collapse {
    margin-top: 0.5rem;
  }
}

/* When scrolled the JS adds .navbar-scrolled — brighten glass + darken text */
#mainNav.navbar-scrolled {
  background: rgba(255, 255, 255, 0.62) !important;
  border-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 12px 34px rgba(20, 24, 60, 0.16);
}
#mainNav.navbar-scrolled .navbar-brand {
  color: var(--lg-ink) !important;
}
@media (min-width: 992px) {
  #mainNav.navbar-scrolled .navbar-nav .nav-item .nav-link {
    color: var(--lg-ink) !important;
  }
  #mainNav.navbar-scrolled .navbar-nav .nav-item .nav-link:hover,
  #mainNav.navbar-scrolled .navbar-nav .nav-item .nav-link.active {
    color: var(--lg-accent) !important;
  }
}

/* ----------------------------------------------------------------------------
   Masthead / hero — vivid aurora with floating glass orbs
---------------------------------------------------------------------------- */
header.masthead {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 80% at 18% 8%, rgba(124, 92, 255, 0.55), transparent 60%),
    radial-gradient(55% 70% at 88% 18%, rgba(40, 212, 217, 0.45), transparent 60%),
    radial-gradient(75% 95% at 60% 105%, rgba(91, 140, 255, 0.6), transparent 60%),
    linear-gradient(135deg, #3a2f8f 0%, #4f3aa8 42%, #1d6fb8 100%) !important;
}

/* decorative frosted orbs floating in the hero */
header.masthead::before,
header.masthead::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  pointer-events: none;
}
header.masthead::before {
  width: 18rem;
  height: 18rem;
  top: 12%;
  right: -4rem;
  animation: lg-float-2 22s ease-in-out infinite;
}
header.masthead::after {
  width: 11rem;
  height: 11rem;
  bottom: 14%;
  left: 6%;
  animation: lg-float-3 26s ease-in-out infinite;
}

header.masthead .container {
  position: relative;
  z-index: 2;
}

header.masthead h1 {
  text-shadow: 0 6px 34px rgba(0, 0, 0, 0.28);
}

header.masthead .text-white-75,
.text-white-75 {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ----------------------------------------------------------------------------
   Buttons — glass pills
---------------------------------------------------------------------------- */
.btn-xl {
  position: relative;
  overflow: hidden;
}

/* moving specular sheen on hover */
.btn-xl::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
.btn-xl:hover::after {
  left: 130%;
}

.btn-primary {
  background: linear-gradient(135deg, var(--lg-accent) 0%, var(--lg-accent-2) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
  box-shadow: 0 12px 30px rgba(91, 140, 255, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.btn-primary:hover,
.btn-primary:focus {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(91, 140, 255, 0.52), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  filter: brightness(1.05);
}

.btn-light {
  background: rgba(255, 255, 255, 0.18) !important;
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  color: #fff !important;
  box-shadow: 0 12px 30px rgba(20, 24, 60, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.btn-light:hover,
.btn-light:focus {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
}

/* ----------------------------------------------------------------------------
   Sections (dark-text ones float directly on the bright aurora)
---------------------------------------------------------------------------- */
section#products.bg-light,
section#portfolio,
section#contact,
section#services {
  background: transparent !important;
}

/* About — white text, so use a deep coloured glass panel */
section#about.bg-primary {
  background: transparent !important;
}
#about .col-lg-8 {
  position: relative;
  padding: clamp(2rem, 4vw, 3.5rem);
  border-radius: var(--lg-radius);
  background: linear-gradient(135deg, rgba(59, 47, 143, 0.62), rgba(29, 111, 184, 0.55));
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: var(--lg-shadow);
  color: #fff;
}
#about .col-lg-8 h2,
#about .col-lg-8 p,
#about .col-lg-8 a:not(.btn) {
  color: #fff !important;
}
#about .col-lg-8 p {
  text-align: left;
  line-height: 1.95;
}

/* Services — frosted cards */
#services .col-lg-3 {
  margin-bottom: 1.5rem;
}
#services .col-lg-3 > .mt-5 {
  margin-top: 0 !important;
  height: 100%;
  padding: 2.5rem 1.5rem;
  border-radius: 24px;
  background: var(--lg-glass);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid var(--lg-glass-border);
  box-shadow: 0 16px 40px rgba(31, 38, 95, 0.12);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease;
}
#services .col-lg-3 > .mt-5:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 60px rgba(31, 38, 95, 0.2);
}

/* AI Products — flagship glass card + glass differentiators */
#products .card {
  border-radius: var(--lg-radius) !important;
  background: var(--lg-glass-strong) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--lg-glass-border) !important;
  box-shadow: var(--lg-shadow) !important;
}
#products .row.mt-5 > [class*="col-"] {
  padding: 2rem 1.25rem;
  margin-bottom: 1rem;
  border-radius: 22px;
  background: var(--lg-glass);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--lg-glass-border);
  box-shadow: 0 16px 40px rgba(31, 38, 95, 0.12);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease;
}
#products .row.mt-5 > [class*="col-"]:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 56px rgba(31, 38, 95, 0.2);
}

/* Portfolio — rounded glass tiles with cool hover caption */
#portfolio .row.no-gutters > [class*="col-"] {
  padding: 0.6rem;
}
#portfolio .portfolio-box {
  border-radius: 22px;
  overflow: hidden;
  background: var(--lg-glass);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid var(--lg-glass-border);
  box-shadow: 0 16px 40px rgba(31, 38, 95, 0.12);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s ease;
}
#portfolio .portfolio-box:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 30px 70px rgba(31, 38, 95, 0.22);
}
.portfolio-box img {
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.78);
}
#portfolio .portfolio-box .portfolio-box-caption {
  background: linear-gradient(135deg, rgba(91, 140, 255, 0.85), rgba(138, 107, 255, 0.82) 55%, rgba(40, 212, 217, 0.8)) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Call-to-action (download) — dark glass panel, white text */
#cooperation section.bg-dark {
  background: transparent !important;
}
#cooperation section.bg-dark > .container {
  padding: clamp(2.5rem, 5vw, 4rem);
  border-radius: var(--lg-radius);
  background: linear-gradient(135deg, rgba(20, 24, 48, 0.62), rgba(40, 30, 80, 0.55));
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: var(--lg-shadow);
}

/* Contact — glass info cards */
#contact .row:last-child > [class*="col-"] {
  padding: 2rem 1.25rem;
  margin-bottom: 1rem;
  border-radius: 22px;
  background: var(--lg-glass);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--lg-glass-border);
  box-shadow: 0 16px 40px rgba(31, 38, 95, 0.12);
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease;
}
#contact .row:last-child > [class*="col-"]:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 56px rgba(31, 38, 95, 0.2);
}
#contact a {
  color: var(--lg-ink);
  font-weight: 600;
  transition: color 0.2s ease;
}
#contact a:hover {
  color: var(--lg-accent);
  text-decoration: none;
}

/* Footer — light glass band */
footer.bg-light {
  background: var(--lg-glass) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border-top: 1px solid var(--lg-glass-border);
}

/* ----------------------------------------------------------------------------
   Fallback: if the browser can't do backdrop-filter, keep panels readable
---------------------------------------------------------------------------- */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  #mainNav { background: rgba(255, 255, 255, 0.85) !important; }
  #mainNav .navbar-brand,
  #mainNav .navbar-nav .nav-item .nav-link { color: var(--lg-ink) !important; }
  #services .col-lg-3 > .mt-5,
  #products .row.mt-5 > [class*="col-"],
  #contact .row:last-child > [class*="col-"],
  #portfolio .portfolio-box,
  footer.bg-light { background: rgba(255, 255, 255, 0.92) !important; }
  #products .card { background: rgba(255, 255, 255, 0.95) !important; }
  #about .col-lg-8 { background: linear-gradient(135deg, #3b2f8f, #1d6fb8) !important; }
  #cooperation section.bg-dark > .container { background: linear-gradient(135deg, #14182f, #281e50) !important; }
}