/* ==========================================================================
   Base layout: resets, typography, structural rhythm.
   ========================================================================== */

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    font-family: var(--hws-font-body);
    font-size: var(--hws-size-base);
    line-height: var(--hws-line-height-base);
    color: var(--hws-text);
    background-color: var(--hws-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--hws-font-heading);
    font-weight: var(--hws-weight-bold);
    line-height: var(--hws-line-height-tight);
    color: var(--hws-text);
    letter-spacing: -0.01em;
}

h1 { font-size: var(--hws-size-h1); }
h2 { font-size: var(--hws-size-h2); }
h3 { font-size: var(--hws-size-h3); }

.hws-container {
    width: 100%;
    max-width: var(--hws-container-max);
    margin-inline: auto;
    padding-inline: var(--hws-space-4);
}

/* Pairs with .hws-bg-decoration (position:absolute, z-index:0) on a
   position:relative section - keeps real content painted above it. */
.hws-container-relative {
    position: relative;
    z-index: 1;
}

/* Apply to a <section> that contains a .hws-bg-decoration child. */
.hws-section-decorated {
    position: relative;
    overflow: hidden;
}

.hws-section {
    padding-block: var(--hws-space-8);
}

/* Sections that carry a large visual (DigitalHugs, portfolio, the 3D
   section) get extra room to breathe; process/experience get pulled in -
   deliberate variation in section rhythm, not one flat spacing value
   everywhere. */
.hws-section-spacious {
    padding-block: var(--hws-space-9);
}

.hws-section-tight {
    padding-block: var(--hws-space-6);
}

@media (max-width: 767.98px) {
    .hws-section {
        padding-block: var(--hws-space-6);
    }

    .hws-section-spacious {
        padding-block: var(--hws-space-7);
    }

    .hws-section-tight {
        padding-block: var(--hws-space-5);
    }
}

.hws-section-alt {
    background-color: var(--hws-bg-alt);
}

.hws-section-dark {
    background: var(--hws-gradient-dark);
    color: var(--hws-text-on-dark);
}

.hws-section-dark h1,
.hws-section-dark h2,
.hws-section-dark h3,
.hws-section-dark p {
    color: var(--hws-text-on-dark);
}

.hws-section-dark .hws-text-muted {
    color: var(--hws-text-on-dark-muted);
}

.hws-eyebrow {
    display: inline-block;
    font-size: var(--hws-size-xs);
    font-weight: var(--hws-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hws-primary);
    margin-bottom: var(--hws-space-3);
}

.hws-section-dark .hws-eyebrow {
    color: var(--hws-accent);
}

.hws-section-heading {
    max-width: 640px;
    margin-bottom: var(--hws-space-7);
}

.hws-section-heading h2 {
    margin-bottom: var(--hws-space-2);
}

.hws-section-heading.text-center {
    margin-inline: auto;
}

.hws-text-muted {
    color: var(--hws-text-muted);
}

.hws-lead {
    font-size: var(--hws-size-lg);
    color: var(--hws-text-muted);
}

.hws-gradient-text {
    background: var(--hws-gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Skip link (accessibility) */
.hws-skip-link {
    position: absolute;
    left: var(--hws-space-3);
    top: -3rem;
    background: var(--hws-primary);
    color: #fff;
    padding: var(--hws-space-2) var(--hws-space-4);
    border-radius: var(--hws-radius-sm);
    z-index: 2000;
    transition: top var(--hws-transition-fast);
}

.hws-skip-link:focus {
    top: var(--hws-space-3);
    color: #fff;
}

/* Header entrance - the topbar and sticky nav fade in independently (never
   the <header> wrapper itself, which would create a transformed ancestor
   for the sticky nav and risk breaking its stickiness in some browsers). */
.hws-topbar,
.hws-navbar {
    opacity: 0;
    animation: hwsFadeUp 600ms var(--hws-ease) forwards;
}

.hws-navbar {
    animation-delay: 80ms;
}

@media (prefers-reduced-motion: reduce) {
    .hws-topbar,
    .hws-navbar {
        opacity: 1;
        animation: none;
    }
}

/* Fade-up reveal, respects reduced motion */
.hws-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--hws-transition-slow), transform var(--hws-transition-slow);
}

.hws-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Caught by main.js's scroll-jump safety net (see catchUpMissedReveals) -
   the element was already scrolled fully out of view when it got marked
   visible, so animating it in would either be invisible anyway or flash
   once it's scrolled back into view later. Show it in its final state
   immediately instead. */
.hws-reveal.is-visible--skipped {
    transition: none;
}

/* Direction/scale variants - same .is-visible toggle from main.js's observer,
   just a different starting transform. */
.hws-reveal--fade {
    transform: none;
}

.hws-reveal--left {
    transform: translateX(-24px);
}

.hws-reveal--right {
    transform: translateX(24px);
}

.hws-reveal--scale {
    transform: scale(0.94);
}

.hws-reveal--left.is-visible,
.hws-reveal--right.is-visible,
.hws-reveal--scale.is-visible {
    transform: none;
}

/* Stagger delays for elements that reveal together as a group (a row of
   cards, a feature grid). Apply .hws-stagger to the row/parent - the
   .hws-reveal element itself is usually one level deeper (row > col >
   card), so this targets it as a descendant of the nth column rather than
   requiring it to be the direct child. */
.hws-stagger > *:nth-child(1) .hws-reveal,
.hws-stagger > *:nth-child(1).hws-reveal { transition-delay: 0ms; }
.hws-stagger > *:nth-child(2) .hws-reveal,
.hws-stagger > *:nth-child(2).hws-reveal { transition-delay: 80ms; }
.hws-stagger > *:nth-child(3) .hws-reveal,
.hws-stagger > *:nth-child(3).hws-reveal { transition-delay: 160ms; }
.hws-stagger > *:nth-child(4) .hws-reveal,
.hws-stagger > *:nth-child(4).hws-reveal { transition-delay: 240ms; }
.hws-stagger > *:nth-child(5) .hws-reveal,
.hws-stagger > *:nth-child(5).hws-reveal { transition-delay: 320ms; }
.hws-stagger > *:nth-child(6) .hws-reveal,
.hws-stagger > *:nth-child(6).hws-reveal { transition-delay: 400ms; }

/* Standalone keyframe utilities, for one-off entrances outside the
   scroll-reveal system (e.g. the hero, which is already in view on load). */
@keyframes hwsFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}

@keyframes hwsFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes hwsScaleIn {
    from { opacity: 0; transform: scale(0.94); }
    to { opacity: 1; transform: none; }
}

@keyframes hwsSlideLeft {
    from { opacity: 0; transform: translateX(-24px); }
    to { opacity: 1; transform: none; }
}

@keyframes hwsSlideRight {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: none; }
}

@keyframes hwsFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.animate-fade-up { animation: hwsFadeUp var(--hws-transition-slow) both; }
.animate-fade-in { animation: hwsFadeIn var(--hws-transition-slow) both; }
.animate-scale-in { animation: hwsScaleIn var(--hws-transition-slow) both; }
.animate-slide-left { animation: hwsSlideLeft var(--hws-transition-slow) both; }
.animate-slide-right { animation: hwsSlideRight var(--hws-transition-slow) both; }

.float-subtle {
    animation: hwsFloat 5s ease-in-out infinite;
}

.hover-lift {
    transition: transform var(--hws-transition-base), box-shadow var(--hws-transition-base);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--hws-shadow-md);
}

.hover-glow {
    transition: box-shadow var(--hws-transition-base);
}

.hover-glow:hover {
    box-shadow: var(--hws-shadow-glow);
}

/* Glass surfaces - used sparingly (floating hero/product chips, scrolled navbar) */
.hws-glass {
    background: var(--hws-glass-bg);
    border: 1px solid var(--hws-glass-border);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.hws-glass-dark {
    background: var(--hws-glass-bg-dark);
    border: 1px solid var(--hws-glass-border-dark);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: var(--hws-text-on-dark);
}

/* Decorative background layers - always behind content and never
   intercept clicks; a section using these needs position:relative. */
.hws-bg-decoration {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.hws-bg-grid {
    background-image:
        linear-gradient(to right, rgba(16, 24, 40, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(16, 24, 40, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}

.hws-section-dark .hws-bg-grid {
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
}

.hws-bg-dots {
    background-image: radial-gradient(rgba(16, 24, 40, 0.14) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 40%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 40%, transparent 100%);
}

.hws-section-dark .hws-bg-dots {
    background-image: radial-gradient(rgba(255, 255, 255, 0.14) 1.5px, transparent 1.5px);
}

.hws-hosting-illustration svg {
    width: 100%;
    height: 100%;
    opacity: 0.45;
}

@media (max-width: 991.98px) {
    .hws-hosting-illustration {
        display: none;
    }
}

/* Data-flow lines radiating from the hosting rack illustration */
.hws-flow-line {
    stroke-dasharray: 6 8;
    animation: hwsFlowDash 2.6s linear infinite;
}

.hws-flow-lines .hws-flow-line:nth-child(2) { animation-delay: 0.5s; }
.hws-flow-lines .hws-flow-line:nth-child(3) { animation-delay: 1s; }

.hws-flow-nodes circle {
    animation: hwsPulseOpacity 3.2s ease-in-out infinite;
}

.hws-flow-nodes circle:nth-child(2) { animation-delay: 0.6s; }
.hws-flow-nodes circle:nth-child(3) { animation-delay: 1.2s; }

@keyframes hwsFlowDash {
    to { stroke-dashoffset: -140; }
}

.hws-bg-blob {
    position: absolute;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: var(--hws-gradient-primary);
    opacity: 0.14;
    filter: blur(90px);
}

/* Thin top progress bar - width set by main.js inside its existing scroll handler */
.hws-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: var(--hws-gradient-primary);
    z-index: 2100;
    transition: width 80ms linear;
}

@media (prefers-reduced-motion: reduce) {
    .hws-reveal,
    .hws-reveal--fade,
    .hws-reveal--left,
    .hws-reveal--right,
    .hws-reveal--scale {
        opacity: 1;
        transform: none;
    }

    .animate-fade-up,
    .animate-fade-in,
    .animate-scale-in,
    .animate-slide-left,
    .animate-slide-right,
    .float-subtle,
    .hws-flow-line,
    .hws-flow-nodes circle {
        animation: none !important;
        opacity: 1;
        transform: none;
    }

    .hws-scroll-progress {
        transition: none;
    }
}