/*
 * Texonic — minimal.css
 * Only CSS that Tailwind utility classes cannot express:
 * keyframe animations, pseudo-elements, nav drawer transitions.
 * All visual design is handled by Tailwind classes in the templates.
 */

html { scroll-behavior: smooth; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: #cfc5e3; border-radius: 4px; }

/* ── Hub card top-border gradient (::before pseudo-element) ── */
.hub-card { position: relative; overflow: hidden; }
.hub-card::before {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    transition: height .25s;
}
.hub-card-vad::before { background: linear-gradient(90deg, #392e51, #6d5fa3); }
.hub-card-ind::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.hub-card-pwr::before { background: linear-gradient(90deg, #22c55e, #4ade80); }
.hub-card:hover::before { height: 5px; }

/* ── Ticker animation ──────────────────────────────────────── */
@keyframes ticker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.ticker-track {
    display: flex;
    width: max-content;
    animation: ticker 45s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }

/* ── Wind turbine blade spin ───────────────────────────────── */
@keyframes wind-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.svg-wind-blade {
    transform-origin: 130px 78px;
    animation: wind-spin 4s linear infinite;
}

/* ── Pulse rings (power section) ───────────────────────────── */
@keyframes pulse-ring {
    0%   { opacity: .7; r: 12; }
    100% { opacity: 0;  r: 28; }
}
.pulse-ring { animation: pulse-ring 2s ease-out infinite; }

/* ── Nav drawer (mobile) — transform transitions ───────────── */
#main-nav {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 300px; max-width: 100vw;
    background: #261f38; z-index: 1001;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    display: flex; flex-direction: column; overflow-y: auto;
}
#main-nav.open { transform: translateX(0); }

#nav-overlay {
    position: fixed; inset: 0;
    background: rgba(26,18,37,.6);
    z-index: 999; opacity: 0; pointer-events: none;
    transition: opacity .3s;
}
#nav-overlay.active { opacity: 1; pointer-events: all; }

/* ── Hamburger bar transforms ───────────────────────────────── */
#txn-hamburger span {
    display: block; width: 22px; height: 2px;
    background: rgb(26 18 37 / var(--tw-text-opacity, 1)); border-radius: 2px; transition: all .3s;
}
#txn-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#txn-hamburger.active span:nth-child(2) { opacity: 0; }
#txn-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Dropdown menus ─────────────────────────────────────────── */
.dropdown { display: none; }
.nav-item.dd-open .dropdown { display: block; }
.nav-item.dd-open .chevron  { transform: rotate(180deg); }

/* ── Desktop nav at ≥900px ──────────────────────────────────── */
/* Hamburger — explicitly show on mobile, hide on desktop */
#txn-hamburger { display: flex; flex-direction: column; gap: 5px; }
#txn-hamburger span { display: block; width: 22px; height: 2px; background: rgb(26 18 37 / var(--tw-text-opacity, 1)); border-radius: 2px; transition: all .3s; }

@media (max-width: 900px){
    #menu-texonic-nav .text-ink {
	color: #fff;
}
    
.nav-item.dd-open .dropdown {
	padding: 0.625rem 1rem;
	color: #fff;
	font-family: Rajdhani, sans-serif;
}
.nav-item.dd-open .dropdown .nav-item {
	padding-left: 15px;
}
}
/* Desktop nav at 900px */
@media (min-width: 900px) {
    
.has-dropdown .dropdown > .nav-item a {
	font-weight: 600;
	font-family: Rajdhani, sans-serif;
	padding: 0 1rem !important;
}
.dropdown .nav-item:hover {
    background-color: #bbf7d0;
}
  #txn-hamburger        { display: none !important; }
  #nav-overlay      { display: none !important; }

  #main-nav {
    position: static !important;
    width: auto !important;
    background: transparent !important;
    transform: none !important;
    flex-direction: row !important;
    align-items: center !important;
    overflow: visible !important;
    flex: 1 !important;
    justify-content: flex-end !important;
  }

  /* Hide mobile-only elements */
  .nav-mobile-header { display: none !important; }

  .nav-cta-wrap {
    padding: 0 !important;
    border: none !important;
    margin: 0 0 0 1rem !important;
  }

  /* Fix nav-list: Tailwind's flex-col overrides flex-direction:row */
  .nav-list {
    flex-direction: row !important;
    align-items: center !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  /* Fix nav links: Tailwind's py-3 px-5 w-full override desktop sizing */
  .nav-link-btn,
  .nav-link-a {
    padding: 0 .9rem !important;
    height: 64px !important;
    width: auto !important;
    font-size: .95rem !important;
    justify-content: center !important;
    white-space: nowrap !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
  }
  .nav-link-btn:hover,
  .nav-link-a:hover {
    background: rgba(255,255,255,.05) !important;
    border-bottom-color: #4ade80 !important;
  }

  .nav-item         { position: relative; }

  .dropdown {
    position: absolute; top: 64px; left: 50%;
    transform: translateX(-50%);
    background: #2d2244; border-radius: 10px;
    min-width: 320px; padding: .5rem;
    box-shadow: 0 20px 48px rgba(26,18,37,.4);
    border: 1px solid rgba(255,255,255,.1);
    z-index: 50;
  }
  .nav-item:hover .dropdown { display: block; }
  .chevron { transition: transform .25s; }
  .nav-item:hover .chevron { transform: rotate(180deg); }
}

/* ── Scrolled header shadow ─────────────────────────────────── */
#site-header.scrolled { box-shadow: 0 4px 24px rgba(57,46,81,.35); }

/* ── Scroll reveal ──────────────────────────────────────────── */
.reveal {
    opacity: 0; transform: translateY(20px);
    transition: opacity .5s ease, transform .5s ease;
}
.reveal.visible { opacity: 1; transform: none; }