/*----------------------------------------------
*
* [Upgrades Stylesheet]
*
* Site     : Alkyne Design
* Purpose  : Navigation UX + tasteful animations.
*            Loaded AFTER style.css so every rule
*            here is an override — delete this file
*            (and upgrades.js) to fully revert.
*
* Palette  : reuses the existing brand colors from
*            style.css (#101440 / #161b55 / #5700EF /
*            #FFDDB7 / #e0e4ff / #b0b8e8 / #1e2460)
*
* [CONTENTS]
*  1. Motion tokens
*  2. Sticky shrinking header
*  3. Nav link hover + active state
*  4. Mobile menu / toggler fixes
*  5. Offcanvas polish (touch targets)
*  6. Back-to-top button
*  7. Scroll reveal animations
*  8. Card hover lift
*  9. Button micro-interactions
* 10. Hero entrance
* 11. Responsive fixes (360 / 768 / 1024 / 1440)
* 12. Reduced motion
* 13. Preloader polish
* 14. WebGL water hero + lite fallback
* 15. 3D card tilt (desktop)
* 16. Magnetic buttons / split headline
* 17. Page-leave transition
* 18. Reduced motion (upgrade pack 2)
*
----------------------------------------------*/

/*----------------------------------------------
1. Motion tokens
----------------------------------------------*/
:root {
  --up-ease: cubic-bezier(0.33, 1, 0.68, 1); /* ease-out cubic */
  --up-fast: 0.25s;
  --up-med: 0.35s;
  --up-slow: 0.45s;
}

/*----------------------------------------------
2. Sticky shrinking header
   Neutralizes the template's fadeOut/slideDown
   (inline styles set by main.js lose to these
   !important declarations) so the header is
   always available, then shrinks it on scroll.
----------------------------------------------*/
header .navbar-expand {
  display: flex !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
  padding-top: 20px;
  padding-bottom: 20px;
  transition:
    padding-top var(--up-med) var(--up-ease),
    padding-bottom var(--up-med) var(--up-ease),
    background-color var(--up-med) var(--up-ease),
    box-shadow var(--up-med) var(--up-ease);
}

body.up-scrolled header .navbar-expand {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: rgba(16, 20, 64, 0.96); /* #101440 */
  box-shadow: 0 8px 28px rgba(4, 4, 2, 0.35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.navbar-brand img {
  transition: height var(--up-med) var(--up-ease), opacity var(--up-fast) var(--up-ease);
}

body.up-scrolled .navbar-brand img {
  height: 38px !important;
}

body.up-scrolled .navbar .container.header {
  min-height: 56px;
}

/*----------------------------------------------
3. Nav link hover + active state
   Uses the template's existing dot indicator,
   made persistent (peach) for the current page.
----------------------------------------------*/
header .navbar-expand .navbar-nav .nav-item .nav-link {
  transition: opacity var(--up-fast) var(--up-ease), color var(--up-fast) var(--up-ease);
}

header .navbar-expand .navbar-nav .nav-item .nav-link.active {
  opacity: 1;
  color: var(--white-color);
}

header .navbar-expand .navbar-nav .nav-item .nav-link.active::after {
  transform: translate(-50%, -50%) scale(1) rotate(0.001deg);
  background: var(--secondary-color); /* #FFDDB7 */
}

header .navbar-expand .navbar-nav .nav-item .nav-link:hover {
  opacity: 0.75;
}

/* Offcanvas menu: active link keeps full strength + its count visible */
.menu .nav-link:not(.btn) {
  transition: opacity var(--up-fast) var(--up-ease), color var(--up-fast) var(--up-ease);
}

.offcanvas-wrapper .offcanvas .offcanvas-content .menu .nav-link.active:not(.btn) {
  opacity: 1 !important;
  color: var(--secondary-color) !important; /* #FFDDB7 */
}

/*----------------------------------------------
4. Mobile menu / toggler fixes
   - The template hid the menu button between
     50-300px of scroll on phones: force it on.
   - 576-767px: the floating circle overlapped the
     sticky header, so it becomes inline like <576.
   - Desktop >=768px: full nav is always visible
     now, so the floating duplicate is hidden.
----------------------------------------------*/
@media (max-width: 767px) {
  .navbar .navbar-toggler {
    transform: translateY(0%) scale(1) rotate(0.001deg) !important;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  .navbar .navbar-toggler {
    position: static;
    display: block !important;
    padding: 0;
    border: none;
  }
  .navbar .navbar-toggler .navbar-header,
  .navbar .navbar-toggler .content {
    width: 3.25rem;
    height: 3.25rem;
  }
}

@media (min-width: 768px) {
  header .navbar-toggler,
  .offcanvas-wrapper > .navbar-toggler {
    transform: translateY(0%) scale(0) rotate(0.001deg) !important;
    visibility: hidden;
    pointer-events: none;
  }
}

/* The standalone floating toggler duplicates the header one on mobile too */
@media (max-width: 767px) {
  .offcanvas-wrapper > .navbar-toggler {
    display: none !important;
  }
}

/*----------------------------------------------
5. Offcanvas polish (touch targets 44px+)
----------------------------------------------*/
.offcanvas-wrapper .offcanvas .menu .nav-item {
  display: block;
}

.offcanvas-wrapper .offcanvas .menu .nav-link:not(.btn) {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}

.offcanvas-wrapper .offcanvas .offcanvas-content .socials .nav-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Smoother panel slide (same distance, calmer curve) */
.offcanvas-wrapper .offcanvas.offcanvas-end {
  transition-duration: 0.45s;
  transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1);
}

/*----------------------------------------------
6. Back-to-top button (injected by upgrades.js)
----------------------------------------------*/
.up-backtop {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1035; /* under the offcanvas + backdrop */
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid #2e3670;
  background-color: #161b55;
  color: #e0e4ff;
  font-size: 1.25rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition:
    opacity var(--up-med) var(--up-ease),
    visibility var(--up-med) var(--up-ease),
    transform var(--up-med) var(--up-ease),
    background-color var(--up-fast) var(--up-ease),
    color var(--up-fast) var(--up-ease);
}

.up-backtop.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.up-backtop:hover {
  background-color: #5700EF;
  border-color: #5700EF;
  color: #f9f9f9;
  transform: translateY(-3px);
}

.up-backtop:active {
  transform: translateY(0) scale(0.94);
  transition-duration: 0.1s;
}

@media (max-width: 575px) {
  .up-backtop {
    right: 16px;
    bottom: 16px;
    width: 44px;
    height: 44px;
  }
}

/*----------------------------------------------
7. Scroll reveal animations (IntersectionObserver)
   .up-rv is only ever added by upgrades.js, so
   content stays fully visible without JS.
----------------------------------------------*/
.up-rv {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity var(--up-slow) var(--up-ease),
    transform var(--up-slow) var(--up-ease);
  transition-delay: var(--up-d, 0s);
  will-change: opacity, transform;
}

.up-rv.up-in {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

/*----------------------------------------------
8. Card hover lift (portfolio + blog cards)
----------------------------------------------*/
.blog-item,
.explore-area .portfolio-item {
  transition: transform 0.3s var(--up-ease);
}

.blog-item:hover,
.explore-area .portfolio-item:hover {
  transform: translateY(-6px);
}

.blog-item .image-holder,
.explore-area .portfolio-item .image-holder {
  transition: box-shadow 0.3s var(--up-ease);
}

.blog-item:hover .image-holder,
.explore-area .portfolio-item:hover .image-holder {
  box-shadow: 0 16px 34px rgba(4, 4, 2, 0.45) !important;
}

/* Gentle image zoom inside the card frame */
.blog-item .card-thumb img,
.explore-area .portfolio-item .card-thumb img {
  transition: transform 0.45s var(--up-ease) !important;
}

.blog-item:hover .card-thumb img,
.explore-area .portfolio-item:hover .card-thumb img {
  transform: scale(1.04);
}

/*----------------------------------------------
9. Button micro-interactions
----------------------------------------------*/
.btn {
  transition:
    transform var(--up-fast) var(--up-ease),
    background-color var(--up-fast) var(--up-ease),
    color var(--up-fast) var(--up-ease),
    border-color var(--up-fast) var(--up-ease),
    opacity var(--up-fast) var(--up-ease),
    box-shadow var(--up-fast) var(--up-ease);
}

.btn:hover {
  transform: translateY(-2px);
}

.btn:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 0.1s;
}

/* Footer scroll-top arrow + award pills share the same feel */
.scroll-top-btn,
.award-btn {
  transition:
    transform var(--up-fast) var(--up-ease),
    background-color var(--up-fast) var(--up-ease) !important;
}

.award-btn:hover {
  transform: translateY(-2px);
}

/*----------------------------------------------
10. Hero entrance (classes added by upgrades.js)
----------------------------------------------*/
body.up-hero-prep .hero-section .hero-content,
body.up-hero-prep .breadcrumb-section .heading {
  opacity: 0;
  transform: translateY(22px);
}

body.up-hero-in .hero-section .hero-content,
body.up-hero-in .breadcrumb-section .heading {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.5s var(--up-ease),
    transform 0.5s var(--up-ease);
}

/*----------------------------------------------
11. Responsive fixes (360 / 768 / 1024 / 1440)
    Verified per-page; layout only, no content.
----------------------------------------------*/
/* Prevent accidental horizontal scroll from decorative circles */
html, body {
  overflow-x: clip;
}

/* Hero heading scales down cleanly on small phones */
@media (max-width: 575px) {
  .hero-section .hero-content .title {
    word-break: normal;
    overflow-wrap: break-word;
  }
}

/* Below 768px the template drops section padding to 90px,
   but the fixed header is ~104px tall — the first section
   of every page slid underneath it. Give page openers
   enough clearance for the full-size header. */
@media (max-width: 767px) {
  #main-wrapper > section:first-child,
  #main-wrapper > .hero-section,
  #main-wrapper > .breadcrumb-section {
    padding-top: 135px;
  }
}

/* Blog card date/meta was invisible: it inherited Bootstrap's
   dark card text color (#212529) on the navy background. */
.blog-item .card-content .post-meta,
.blog-item .card-content .post-date,
.blog-item .card-content .post-meta span:not(.post-author),
.odd .blog-item .card-content .post-meta span:not(.post-author) {
  color: var(--primary-p-color) !important; /* #b0b8e8 */
}

/* Works grid: every portfolio board is a 3507x2480 (A4
   landscape) export, but tiles were forced to 260px tall
   with object-fit: cover, cropping the artwork. Matching
   the tile to the boards' own aspect ratio shows each
   design in full while keeping rows perfectly even.
   (aspect-ratio reserves the height before lazy images
   load, so the Shuffle layout never shifts.) */
.explore-area .portfolio-item a img,
.explore-area .portfolio-item .card-thumb img {
  height: auto !important;
  aspect-ratio: 3507 / 2480;
  object-fit: cover !important;
}

/* Mobile menu button: show the real hamburger icon instead
   of the "Menu" text, restore its filled circle, and
   re-enable the bars-to-X morph the template disabled
   at this breakpoint. */
@media (max-width: 575px) {
  .navbar .navbar-toggler:not(.active) .navbar-header .content .toggler-icon {
    visibility: visible;
  }

  .navbar .navbar-toggler .navbar-header .content .title {
    display: none;
  }

  .navbar .navbar-toggler.scrolled:not(.active) .navbar-header {
    background-color: #2e3670;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
  }

  .navbar .navbar-toggler .navbar-header .content .toggler-icon::before,
  .navbar .navbar-toggler .navbar-header .content .toggler-icon::after {
    height: 2px;
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.7, 0, 0.3, 1);
  }
}

/* Tap feedback on the menu button (all sizes) */
.navbar-toggler .navbar-header {
  transition:
    transform 0.2s var(--up-ease),
    background-color 0.25s cubic-bezier(0.36, 0, 0.66, 0),
    box-shadow 0.25s cubic-bezier(0.36, 0, 0.66, 0);
}

.navbar-toggler:active .navbar-header {
  transform: scale(0.9);
}

/*----------------------------------------------
12. Reduced motion — kill every effect
----------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  .up-rv,
  body.up-hero-prep .hero-section .hero-content,
  body.up-hero-prep .breadcrumb-section .heading {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  header .navbar-expand,
  .navbar-brand img,
  .up-backtop,
  .btn,
  .blog-item,
  .explore-area .portfolio-item,
  .blog-item .card-thumb img,
  .explore-area .portfolio-item .card-thumb img,
  .menu .nav-link:not(.btn),
  header .navbar-expand .navbar-nav .nav-item .nav-link {
    transition: none !important;
  }

  .blog-item:hover,
  .explore-area .portfolio-item:hover,
  .blog-item:hover .card-thumb img,
  .explore-area .portfolio-item:hover .card-thumb img,
  .btn:hover,
  .btn:active {
    transform: none !important;
  }
}

/*----------------------------------------------
13. Preloader polish
    Same markup, same timing — richer surface:
    a soft brand glow behind the wordmark, a
    sweeping hairline, and a calmer letter wave
    (peach at the crest). Longhand animation
    properties keep the template's per-letter
    delays intact.
----------------------------------------------*/
.preloader::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 42% at 32% 62%, rgba(87, 0, 239, 0.30), transparent 70%),
    radial-gradient(30% 30% at 72% 28%, rgba(255, 221, 183, 0.10), transparent 70%);
}

.preloader .loader-container {
  position: relative;
  z-index: 99;
}

.preloader .loader-container::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -26px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg,
    transparent, #5700EF 35%, #FFDDB7 50%, #5700EF 65%, transparent);
  background-size: 200% 100%;
  animation: up-sweep 1.4s linear infinite;
  opacity: 0.9;
}

@keyframes up-sweep {
  from { background-position: 130% 0; }
  to   { background-position: -130% 0; }
}

.preloader .loader-container .loaded span {
  display: inline-block;
  animation-name: up-loader-wave;
  animation-duration: 1.15s;
  animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
  animation-iteration-count: infinite;
  animation-direction: normal;
}

@keyframes up-loader-wave {
  0%, 100% {
    opacity: 0.35;
    transform: translateY(0);
    color: var(--white-color);
  }
  50% {
    opacity: 1;
    transform: translateY(-7px);
    color: #FFDDB7;
  }
}

/*----------------------------------------------
14. WebGL water hero + lite fallback
    The canvas is injected by upgrades-hero.js
    behind the hero content; the original SVG
    circles cross-fade out while the shader
    (which redraws the same rings, rippling)
    fades in. Devices that don't qualify get
    .up-hero-lite: a compositor-only gradient
    drift over the untouched original hero.
----------------------------------------------*/
.up-hero-canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.hero-section.up-water-on .up-hero-canvas {
  opacity: 1;
}

.hero-section.up-water-on .hero-bg img {
  opacity: 0 !important;
  transition: opacity 0.8s ease;
}

.hero-section.up-hero-lite::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 38% at 26% 64%, rgba(87, 0, 239, 0.22), transparent 72%),
    radial-gradient(30% 30% at 76% 26%, rgba(255, 221, 183, 0.10), transparent 70%);
  animation: up-glow-drift 16s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes up-glow-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 2%, 0) scale(1.06); }
}

/*----------------------------------------------
15. 3D card tilt (desktop)
    .up-3d is set on <body> by upgrades.js only
    when a fine pointer is present. The image
    frame tilts, a sheen follows the cursor
    (--up-mx / --up-my), and the caption floats
    above the artwork on the Z axis.
----------------------------------------------*/
body.up-3d .explore-area .portfolio-item,
body.up-3d .blog-item,
body.up-3d .stack-item .portfolio-item {
  perspective: 1000px;
}

.up-tilt {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s var(--up-ease);
  will-change: transform;
}

.up-tilt.up-tilt-on {
  transition: none;
}

.up-tilt::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(60% 60% at var(--up-mx, 50%) var(--up-my, 50%),
    rgba(255, 255, 255, 0.10), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s var(--up-ease);
}

.up-tilt.up-tilt-on::after {
  opacity: 1;
}

.up-tilt .card-overlay .heading {
  transform: translateZ(26px);
}

/* The tilt replaces the flat hover lift on desktop */
body.up-3d .blog-item:hover,
body.up-3d .explore-area .portfolio-item:hover {
  transform: none;
}

/*----------------------------------------------
16. Magnetic buttons / split headline
----------------------------------------------*/
/* GSAP owns transform on magnetic elements; keep
   the color/shadow transitions, drop transform. */
.up-magnet {
  transition:
    background-color var(--up-fast) var(--up-ease),
    color var(--up-fast) var(--up-ease),
    border-color var(--up-fast) var(--up-ease),
    opacity var(--up-fast) var(--up-ease),
    box-shadow var(--up-fast) var(--up-ease);
  will-change: transform;
}

/* Split-headline mode: the words animate, so the
   block itself stays fully visible. */
body.up-hero-split .hero-section .hero-content {
  opacity: 1;
  transform: none;
}

body.up-hero-split .hero-content .title .line {
  display: block;
  overflow: hidden;
}

body.up-hero-split .hero-content .title .word {
  display: inline-block;
  will-change: transform;
}

/*----------------------------------------------
17. Page-leave transition (class set by
    upgrades.js right before navigation)
----------------------------------------------*/
body.up-leave .main {
  opacity: 0;
  transition: opacity 0.24s ease;
}

/*----------------------------------------------
18. Reduced motion (upgrade pack 2)
----------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  .preloader .loader-container::after,
  .preloader .loader-container .loaded span,
  .hero-section.up-hero-lite::before {
    animation: none !important;
  }

  .up-tilt,
  .up-tilt::after,
  .up-hero-canvas {
    transition: none !important;
  }

  body.up-leave .main {
    opacity: 1;
    transition: none !important;
  }
}