/* Global styles */
body {
    margin: 0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #121212;
    color: #f0f0f0;
    /* establish a containing block for absolutely positioned elements like connectors */
    position: relative;
    /* Layered grid and dot background for more visual interest */
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 2px, transparent 0),
        linear-gradient(0deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size:
        4px 4px,
        50px 50px,
        50px 50px;

    /* Prevent the page from acquiring a horizontal scrollbar. All
       horizontally scrolling elements (e.g., the gallery) manage
       their own overflow, while the body remains locked to the
       viewport width. */
    overflow-x: hidden;
}

/* Floating color blobs to add visual interest */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* lower z-index so other effects can appear above the gradient */
    z-index: -3;
    background: radial-gradient(circle at 20% 30%, rgba(255, 0, 150, 0.25), transparent 60%),
                radial-gradient(circle at 80% 70%, rgba(0, 150, 255, 0.25), transparent 60%);
    animation: floating-gradient 25s linear infinite;
}

/* Floating particles effect */
.flares {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* appear above background gradient but below connectors and content */
    z-index: -2;
    overflow: hidden;
}

.flares span {
    position: absolute;
    display: block;
    width: 16px;
    height: 16px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 20%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    animation: particle-float linear infinite;
    opacity: 0.8;
}

/* Individual positions, sizes and animation durations for particles */
.flares span:nth-child(1)  { left: 5%;  animation-duration: 18s; animation-delay: 0s;  width: 14px; height: 14px; }
.flares span:nth-child(2)  { left: 20%; animation-duration: 24s; animation-delay: 4s;  width: 18px; height: 18px; }
.flares span:nth-child(3)  { left: 35%; animation-duration: 20s; animation-delay: 2s;  width: 12px; height: 12px; }
.flares span:nth-child(4)  { left: 50%; animation-duration: 26s; animation-delay: 6s;  width: 20px; height: 20px; }
.flares span:nth-child(5)  { left: 65%; animation-duration: 22s; animation-delay: 1s;  width: 10px; height: 10px; }
.flares span:nth-child(6)  { left: 80%; animation-duration: 28s; animation-delay: 3s;  width: 22px; height: 22px; }
.flares span:nth-child(7)  { left: 90%; animation-duration: 30s; animation-delay: 7s;  width: 16px; height: 16px; }
.flares span:nth-child(8)  { left: 15%; animation-duration: 25s; animation-delay: 5s;  width: 20px; height: 20px; }
.flares span:nth-child(9)  { left: 40%; animation-duration: 27s; animation-delay: 8s;  width: 16px; height: 16px; }
.flares span:nth-child(10) { left: 70%; animation-duration: 23s; animation-delay: 9s;  width: 18px; height: 18px; }

@keyframes particle-float {
    0%   { transform: translateY(100vh) scale(0.8); opacity: 0; }
    10%  { opacity: 1; }
    100% { transform: translateY(-20vh) scale(1.2); opacity: 0; }
}

@keyframes floating-gradient {
    0% {
        transform: translate(0, 0) scale(1);
    }
    50% {
        transform: translate(-100px, 80px) scale(1.2);
    }
    100% {
        transform: translate(0, 0) scale(1);
    }
}

main {
    max-width: 960px;
    margin: 0 auto;
    /* extra top padding to accommodate floating profile overlay */
    padding: 140px 20px 40px 20px;
}

h1, h2, h3 {
    color: #ffffff;
    margin-top: 0;
}

p {
    line-height: 1.6;
    margin: 1rem 0;
}

/* Node container styling */
.node {
    background-color: #242424;
    border: 1px solid #3b3b3b;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 40px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Accent bar on the left of each node */
/* Default accent bar – used when no specific accent class is applied */
.node::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: linear-gradient(to bottom, #6a5acd, #00bcd4);
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
}

/* Node hover effect */
/* Node hover effect: increase shadow and slightly darken background without conflicting with parallax */
.node:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.8);
    background-color: #2c2c2c;
}

/* Brighten the accent bar on hover */
.node:hover::before {
    filter: brightness(1.5);
}

/* Accent colour variants for nodes */
.accent-blue::before {
    background: linear-gradient(to bottom, #2196f3, #21cbf3);
}

.accent-pink::before {
    background: linear-gradient(to bottom, #e91e63, #ff4081);
}

.accent-green::before {
    background: linear-gradient(to bottom, #4caf50, #8bc34a);
}

.accent-orange::before {
    background: linear-gradient(to bottom, #ff9800, #ffb74d);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 24px;
    margin: 12px 8px 0 0;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.btn-buy {
    background-color: #e91e63;
    /* subtle pulsing animation to draw attention */
    animation: pulse 5s infinite;
}

.btn-buy:hover {
    background-color: #ad1457;
    transform: translateY(-2px) scale(1.05);
    /* stop pulsing on hover to avoid conflict */
    animation: none;
}

.btn-course {
    background-color: #00bcd4;
}

.btn-course:hover {
    background-color: #008c9e;
    transform: translateY(-2px) scale(1.05);
}

/* Pulso effect for buttons */
@keyframes pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* Connector lines between nodes */
.connectors {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* height will be updated via JS to cover full document */
    pointer-events: none;
    /* appear above flares and above content so connectors are visible */
    z-index: 0;
    overflow: visible;
}

.connectors path {
    stroke: rgba(0, 200, 180, 0.3);
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 6 6;
    /* animate dash offset for subtle movement */
    animation: dash-motion 6s linear infinite;
}

/* Ports on the sides of nodes representing inputs and outputs */
.input-port,
.output-port {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transform: translateY(-50%);
    border: 2px solid currentColor;
    background-color: #1e1e1e;
    z-index: 2;
    pointer-events: none;
}

.input-port {
    left: -16px;
}

.output-port {
    right: -16px;
}
@keyframes dash-motion {
    from { stroke-dashoffset: 12; }
    to   { stroke-dashoffset: 0; }
}

/* No vertical connectors below nodes – connectors are drawn dynamically via SVG */

/* Style for circular author photo */
.profile-photo {
    display: block;
    margin: 0 auto 20px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #00bcd4;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

/* Floating profile overlay above all content */
.profile-floating {
    position: fixed;
    top: 20px;
    right: 20px;
    left: auto;
    z-index: 1000;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: rgba(36, 36, 36, 0.8);
    border-radius: 16px;
    backdrop-filter: blur(6px);
    animation: floatAnim 8s ease-in-out infinite;
}

.profile-floating img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #00bcd4;
    margin-right: 12px;
}

.profile-floating .profile-info {
    color: #ffffff;
}

.profile-floating .profile-info .profile-name {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
}

.profile-floating .profile-info .profile-role {
    font-size: 0.9rem;
    color: #b0b0b0;
    margin: 4px 0 8px 0;
    line-height: 1.2;
}

.profile-floating .profile-info .profile-link {
    font-size: 0.9rem;
    color: #21cbf3;
    text-decoration: underline;
}

/* Gallery styles: horizontally scrollable strip of images inside a node */
/* Gallery styling: large, elegant strip of photos */
/* The gallery node itself hides horizontal overflow so that
   the page does not scroll sideways. Only the internal
   gallery-images container scrolls. */
/* Carousel styling for the photo gallery */
.gallery-node {
    overflow: hidden;
}
/* Gallery container: larger height for more immersive viewing. */
.gallery-carousel {
    position: relative;
    overflow: hidden;
    /* Set the height of the carousel. A moderate value keeps
       images large enough to be engaging without dominating the entire
       screen. 360px strikes a balance between the original smaller
       gallery and the oversized version. */
    height: 360px;
}
.gallery-track {
    display: flex;
    height: 100%;
    transition: transform 0.6s ease;
}
.gallery-track img {
    width: 100%;
    height: 100%;
    /* Ensure the entire photo is visible within the slide. Use contain
       instead of cover so that the image scales down to fit the height,
       leaving horizontal letterboxing if necessary. Position the image
       centrally so any empty space appears evenly on both sides. */
    object-fit: contain;
    object-position: center;
    background-color: #121212;
    border-radius: 16px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.gallery-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 1;
}
/* Style for the navigation dots below the gallery. Make them slightly
   larger to visually balance with the increased image size. */
.gallery-dots span {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: background 0.3s ease;
}
.gallery-dots span.active {
    background: rgba(255, 255, 255, 0.9);
}

/* Gallery navigation arrows */
.gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(36, 36, 36, 0.8);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
    outline: none;
}

.gallery-nav:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(33, 203, 243, 0.5);
    color: #21cbf3;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 20px rgba(33, 203, 243, 0.3);
}

.gallery-nav:active {
    transform: translateY(-50%) scale(0.95);
}

.gallery-nav-prev {
    left: 20px;
}

.gallery-nav-next {
    right: 20px;
}

.gallery-nav svg {
    width: 24px;
    height: 24px;
}

/* Hide arrows on mobile for cleaner interface */
@media (max-width: 768px) {
    .gallery-nav {
        width: 40px;
        height: 40px;
        background: rgba(36, 36, 36, 0.9);
    }
    
    .gallery-nav-prev {
        left: 10px;
    }
    
    .gallery-nav-next {
        right: 10px;
    }
    
    .gallery-nav svg {
        width: 20px;
        height: 20px;
    }
}

/* Touch interaction hint for mobile */
.gallery-track {
    cursor: grab;
}

.gallery-track:active {
    cursor: grabbing;
}

/* ------------------------------------------------------------------ */
/* Floating Call‑To‑Action (CTA) Buttons                             */
/*
 * The cta‑fixed container holds the primary actions (Купить,
 * Подробнее о курсе, Узнать об уникальном методе). It stays
 * visible on screen even as the user scrolls, providing easy access
 * to key actions at any point in the article. On large screens the
 * container is positioned mid‑right and stacked vertically. On
 * mobile devices the buttons sit along the bottom edge and stretch
 * evenly across the width.
 *
 * Each button uses dark glassy backgrounds with coloured accent
 * bars on the left to echo the node editor theme. Typography is
 * consistent with the rest of the site: uppercase text, subtle
 * letter‑spacing and equal weight. The accent colours correspond to
 * different actions: pink for the purchase action, blue for course
 * details and orange for the unique method.
 */
.cta-fixed {
  /* Changed from fixed to static footer element */
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 15px;
  margin: 60px auto 40px;
  padding: 20px 25px;
  max-width: fit-content;
  /* Remove black background - keep transparent */
  background: transparent;
  border-radius: 50px;
  position: relative;
  z-index: 100;
}

/* Base button styles for floating CTAs */
.cta-fixed .btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  padding: 12px 20px;
  font-family: inherit;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.85rem;
  z-index: 101;
  pointer-events: auto;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 25px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s ease;
  white-space: nowrap;
}

/* Accent bar pseudo‑element on the left of each button */
.cta-fixed .btn::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  border-radius: 12px 0 0 12px;
}

/* Individual accent colours for buttons */
.btn-primary::before {
  background-color: #ef476f;
}
.btn-secondary::before {
  background-color: #2196f3;
}
.btn-accent::before {
  background-color: #ff9800;
}

/* Hover and active states */
.cta-fixed .btn:hover:not(.is-disabled) {
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.3);
}
.cta-fixed .btn:active:not(.is-disabled) {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
/* Disabled state styling */
.cta-fixed .btn.is-disabled {
  opacity: 0.6;
  cursor: default;
}

/* Responsive adjustments for small screens */
@media (max-width: 600px) {
  .cta-fixed {
    margin: 40px 20px 30px;
    padding: 15px;
    gap: 8px;
    flex-wrap: wrap;
  }
  .cta-fixed .btn {
    min-width: auto;
    flex: 1 1 calc(50% - 4px);
    padding: 10px 12px;
    font-size: 0.75rem;
  }
}

/*
 * Responsive tweaks for small screens
 * On very narrow devices the layout needs to adjust so that content
 * remains readable. The following media query reduces padding and
 * margins, resizes the floating profile overlay and hides the
 * connector wires/ports. Hiding the connectors on mobile keeps the
 * interface uncluttered and avoids horizontal scrolling. If the
 * screen width is below 600px the nodes stack edge‑to‑edge and the
 * profile overlay stretches across the top with smaller avatar.
 */
@media (max-width: 600px) {
  main {
    max-width: 100%;
    /* reduce the top padding so content starts closer to the top */
    padding: 120px 10px 20px 10px;
  }
  .node {
    padding: 16px;
    margin-bottom: 24px;
  }
  /* Make the profile overlay span the width of the screen */
  .profile-floating {
    top: 10px;
    right: 10px;
    left: 10px;
    width: auto;
    padding: 10px;
    flex-direction: row;
  }
  .profile-floating img {
    width: 60px;
    height: 60px;
    margin-right: 10px;
  }
  /* Hide connectors and ports on mobile for simplicity */
  .connectors {
    display: none;
  }
  .input-port,
  .output-port {
    display: none;
  }
}

/* Floating animation for profile overlay */
@keyframes floatAnim {
    0% { transform: translateY(0px) translateX(0px); }
    50% { transform: translateY(-8px) translateX(6px); }
    100% { transform: translateY(0px) translateX(0px); }
}

a.link {
    color: #2196f3;
    text-decoration: underline;
    cursor: pointer;
}

a.link:hover {
    color: #64b5f6;
}

/* Footer link container */
.footer-links {
    margin-top: 32px;
}