/* ==========================================
   ANIMATIONS
   ========================================== */

/* Base Animation Classes */
:is(.animate, .animate-repeat) {
    /* Use minimal opacity instead of 0 for LCP measurement */
    opacity: 0.01;
    animation-duration: var(--animation-duration);
    animation-timing-function: var(--animation-easing);
    animation-fill-mode: both;
}

:is(.animate, .animate-repeat).in-view {
    opacity: 1;
}

/* Speed Modifiers */
:is(.animate, .animate-repeat).animate-fast { animation-duration: var(--animation-duration-fast); }
:is(.animate, .animate-repeat).animate-slow { animation-duration: var(--animation-duration-slow); }

/* Delay Utilities — prefer inline style: style="--delay: 300ms" */
[style*="--delay"] { animation-delay: var(--delay); }

.animate-delay-100  { animation-delay: 100ms; }
.animate-delay-200  { animation-delay: 200ms; }
.animate-delay-300  { animation-delay: 300ms; }
.animate-delay-400  { animation-delay: 400ms; }
.animate-delay-500  { animation-delay: 500ms; }
.animate-delay-600  { animation-delay: 600ms; }
.animate-delay-700  { animation-delay: 700ms; }
.animate-delay-800  { animation-delay: 800ms; }
.animate-delay-900  { animation-delay: 900ms; }
.animate-delay-1000 { animation-delay: 1000ms; }
.animate-delay-1100 { animation-delay: 1100ms; }
.animate-delay-1200 { animation-delay: 1200ms; }
.animate-delay-1300 { animation-delay: 1300ms; }


/* ==========================================
   LCP PERFORMANCE GUARDS
   ========================================== */

/* Critical: Ensure LCP candidates are always visible */
img[fetchpriority="high"],
img[loading="eager"] {
    opacity: 1 !important;
}

.hero-header__title-line-word {
    opacity: 1 !important;
}

.hero-portfolio__swiper-card:first-child img,
.hero-portfolio__swiper-card:first-child video {
    opacity: 1 !important;
}

/* Fallback: If JavaScript doesn't load */
.no-js .animate,
.no-js .animate-repeat {
    opacity: 1 !important;
    transform: none !important;
}


/* ==========================================
   RESPONSIVE ANIMATION CONTROLS
   ========================================== */

/* Disable on mobile */
@media (max-width: 767px) {
    :is(.animate, .animate-repeat).animate-disable-mobile {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }

    :is(.line-animate, .line-animate-repeat, .line-horizontal, .line-vertical).animate-disable-mobile:is(::before, ::after) {
        transition: none !important;
        width: 0 !important;
        height: 0 !important;
    }
}

/* Disable on tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    :is(.animate, .animate-repeat).animate-disable-tablet {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }

    :is(.line-animate, .line-animate-repeat, .line-horizontal, .line-vertical).animate-disable-tablet:is(::before, ::after) {
        transition: none !important;
        width: 0 !important;
        height: 0 !important;
    }
}

/* Disable on desktop */
@media (min-width: 1024px) {
    :is(.animate, .animate-repeat).animate-disable-desktop {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }

    :is(.line-animate, .line-animate-repeat, .line-horizontal, .line-vertical).animate-disable-desktop:is(::before, ::after) {
        transition: none !important;
        width: 0 !important;
        height: 0 !important;
    }
}

/* Mobile only */
:is(.animate, .animate-repeat).animate-mobile-only {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

:is(.line-animate, .line-animate-repeat, .line-horizontal, .line-vertical).animate-mobile-only:is(::before, ::after) {
    width: 0 !important;
    height: 0 !important;
}

@media (max-width: 767px) {
    :is(.animate, .animate-repeat).animate-mobile-only {
        animation: revert !important;
        opacity: 0 !important;
        transform: revert !important;
    }

    :is(.animate, .animate-repeat).animate-mobile-only.in-view {
        opacity: 1 !important;
    }

    :is(.line-animate, .line-animate-repeat).animate-mobile-only::before {
        transition: all var(--animation-duration) var(--animation-easing-smooth) !important;
    }

    :is(.line-animate, .line-animate-repeat).animate-mobile-only:is(.line-top, .line-bottom).in-view::before {
        width: 100% !important;
        height: 1px !important;
    }

    :is(.line-animate, .line-animate-repeat).animate-mobile-only:is(.line-left, .line-right).in-view::before {
        height: 100% !important;
        width: 1px !important;
    }

    :is(.line-horizontal, .line-vertical).animate-mobile-only:is(::before, ::after) {
        transition: all var(--animation-duration) var(--animation-easing-smooth) !important;
    }

    .line-horizontal.animate-mobile-only.in-view:is(::before, ::after) {
        width: 40px !important;
        height: 1px !important;
    }

    .line-vertical.animate-mobile-only.in-view:is(::before, ::after) {
        height: 40px !important;
        width: 1px !important;
    }
}

/* Tablet only */
:is(.animate, .animate-repeat).animate-tablet-only {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

:is(.line-animate, .line-animate-repeat, .line-horizontal, .line-vertical).animate-tablet-only:is(::before, ::after) {
    width: 0 !important;
    height: 0 !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
    :is(.animate, .animate-repeat).animate-tablet-only {
        animation: revert !important;
        opacity: 0 !important;
        transform: revert !important;
    }

    :is(.animate, .animate-repeat).animate-tablet-only.in-view {
        opacity: 1 !important;
    }

    :is(.line-animate, .line-animate-repeat).animate-tablet-only::before {
        transition: all var(--animation-duration) var(--animation-easing-smooth) !important;
    }

    :is(.line-animate, .line-animate-repeat).animate-tablet-only:is(.line-top, .line-bottom).in-view::before {
        width: 100% !important;
        height: 1px !important;
    }

    :is(.line-animate, .line-animate-repeat).animate-tablet-only:is(.line-left, .line-right).in-view::before {
        height: 100% !important;
        width: 1px !important;
    }

    :is(.line-horizontal, .line-vertical).animate-tablet-only:is(::before, ::after) {
        transition: all var(--animation-duration) var(--animation-easing-smooth) !important;
    }

    .line-horizontal.animate-tablet-only.in-view:is(::before, ::after) {
        width: 40px !important;
        height: 1px !important;
    }

    .line-vertical.animate-tablet-only.in-view:is(::before, ::after) {
        height: 40px !important;
        width: 1px !important;
    }
}

/* Desktop only */
:is(.animate, .animate-repeat).animate-desktop-only {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

:is(.line-animate, .line-animate-repeat, .line-horizontal, .line-vertical).animate-desktop-only:is(::before, ::after) {
    width: 0 !important;
    height: 0 !important;
}

@media (min-width: 1024px) {
    :is(.animate, .animate-repeat).animate-desktop-only {
        animation: revert !important;
        opacity: 0 !important;
        transform: revert !important;
    }

    :is(.animate, .animate-repeat).animate-desktop-only.in-view {
        opacity: 1 !important;
    }

    :is(.line-animate, .line-animate-repeat).animate-desktop-only::before {
        transition: all var(--animation-duration) var(--animation-easing-smooth) !important;
    }

    :is(.line-animate, .line-animate-repeat).animate-desktop-only:is(.line-top, .line-bottom).in-view::before {
        width: 100% !important;
        height: 1px !important;
    }

    :is(.line-animate, .line-animate-repeat).animate-desktop-only:is(.line-left, .line-right).in-view::before {
        height: 100% !important;
        width: 1px !important;
    }

    :is(.line-horizontal, .line-vertical).animate-desktop-only:is(::before, ::after) {
        transition: all var(--animation-duration) var(--animation-easing-smooth) !important;
    }

    .line-horizontal.animate-desktop-only.in-view:is(::before, ::after) {
        width: 40px !important;
        height: 1px !important;
    }

    .line-vertical.animate-desktop-only.in-view:is(::before, ::after) {
        height: 40px !important;
        width: 1px !important;
    }
}


/* ==========================================
   KEYFRAMES — FILL
   ========================================== */

@keyframes fillIn {
    0%   { transform: scale(0); }
    100% { transform: scale(1); }
}
:is(.animate, .animate-repeat).fill.in-view { animation-name: fillIn; }

@keyframes fillLeft {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(0); }
}
:is(.animate, .animate-repeat).fill-left.in-view { animation-name: fillLeft; }

@keyframes fillRight {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(0); }
}
:is(.animate, .animate-repeat).fill-right.in-view { animation-name: fillRight; }

@keyframes fillUp {
    0%   { transform: translateY(100%); }
    100% { transform: translateY(0); }
}
:is(.animate, .animate-repeat).fill-up.in-view { animation-name: fillUp; }

@keyframes fillDown {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(0); }
}
:is(.animate, .animate-repeat).fill-down.in-view { animation-name: fillDown; }


/* ==========================================
   KEYFRAMES — WIPE (Image Reveals)
   ========================================== */

@keyframes wipeRight {
    0%   { clip-path: inset(0 100% 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}
:is(.animate, .animate-repeat).wipe-right.in-view { animation-name: wipeRight; }

@keyframes wipeLeft {
    0%   { clip-path: inset(0 0 0 100%); }
    100% { clip-path: inset(0 0 0 0); }
}
:is(.animate, .animate-repeat).wipe-left.in-view { animation-name: wipeLeft; }

@keyframes wipeDown {
    0%   { clip-path: inset(0 0 100% 0); }
    100% { clip-path: inset(0 0 0 0); }
}
:is(.animate, .animate-repeat).wipe-down.in-view { animation-name: wipeDown; }

@keyframes wipeUp {
    0%   { clip-path: inset(100% 0 0 0); }
    100% { clip-path: inset(0 0 0 0); }
}
:is(.animate, .animate-repeat).wipe-up.in-view { animation-name: wipeUp; }


/* ==========================================
   KEYFRAMES — SCALE & ZOOM
   ========================================== */

@keyframes scaleUp {
    0%   { transform: scale(0.8); }
    100% { transform: scale(1); }
}
:is(.animate, .animate-repeat).scale-up.in-view { animation-name: scaleUp; }

@keyframes zoomIn {
    0%   { transform: scale(0.5); }
    100% { transform: scale(1); }
}
:is(.animate, .animate-repeat).zoom-in.in-view { animation-name: zoomIn; }

@keyframes zoomOut {
    0%   { transform: scale(1.2); }
    100% { transform: scale(1); }
}
:is(.animate, .animate-repeat).zoom-out.in-view { animation-name: zoomOut; }


/* ==========================================
   KEYFRAMES — FLIP
   ========================================== */

@keyframes flipX {
    0%   { transform: rotateX(90deg); opacity: 0; }
    100% { transform: rotateX(0deg);  opacity: 1; }
}
:is(.animate, .animate-repeat).flip-x.in-view {
    animation-name: flipX;
    backface-visibility: hidden;
}

@keyframes flipY {
    0%   { transform: rotateY(90deg); opacity: 0; }
    100% { transform: rotateY(0deg);  opacity: 1; }
}
:is(.animate, .animate-repeat).flip-y.in-view {
    animation-name: flipY;
    backface-visibility: hidden;
}


/* ==========================================
   KEYFRAMES — SLIDE + SCALE (Combined)
   ========================================== */

@keyframes slideUpScale {
    0%   { transform: translateY(100px) scale(0.8); }
    100% { transform: translateY(0) scale(1); }
}
:is(.animate, .animate-repeat).slide-up-scale.in-view { animation-name: slideUpScale; }

/* Special: slide-up-scale for .hero-empanada (preserves translateY(-50%) centering) */
@keyframes slideUpScaleCentered {
    0%   { opacity: 0; transform: translateY(calc(-50% + 100px)) scale(0.1); }
    100% { opacity: 1; transform: translateY(-50%) scale(1); }
}
.hero-empanada.slide-up-scale.in-view { animation-name: slideUpScaleCentered; }


@keyframes slideDownScale {
    0%   { transform: translateY(-30px) scale(0.8); }
    100% { transform: translateY(0) scale(1); }
}
:is(.animate, .animate-repeat).slide-down-scale.in-view { animation-name: slideDownScale; }

@keyframes slideLeftScale {
    0%   { transform: translateX(-30px) scale(0.8); }
    100% { transform: translateX(0) scale(1); }
}
:is(.animate, .animate-repeat).slide-left-scale.in-view { animation-name: slideLeftScale; }

@keyframes slideRightScale {
    0%   { transform: translateX(30px) scale(0.8); }
    100% { transform: translateX(0) scale(1); }
}
:is(.animate, .animate-repeat).slide-right-scale.in-view { animation-name: slideRightScale; }


/* ==========================================
   KEYFRAMES — FADE
   ========================================== */

@keyframes fadeIn {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}
:is(.animate, .animate-repeat).fade-in.in-view { animation-name: fadeIn; }

@keyframes fadeUp {
    0%   { opacity: 0; transform: translateY(200%); }
    100% { opacity: 1; transform: translateY(0); }
}
:is(.animate, .animate-repeat).fade-up.in-view { animation-name: fadeUp; }

@keyframes fadeDown {
    0%   { opacity: 0; transform: translateY(-30px); }
    100% { opacity: 1; transform: translateY(0); }
}
:is(.animate, .animate-repeat).fade-down.in-view { animation-name: fadeDown; }

@keyframes fadeLeft {
    0%   { opacity: 0; transform: translateX(30px); }
    100% { opacity: 1; transform: translateX(0); }
}
:is(.animate, .animate-repeat).fade-left.in-view { animation-name: fadeLeft; }

@keyframes fadeRight {
    0%   { opacity: 0; transform: translateX(-30px); }
    100% { opacity: 1; transform: translateX(0); }
}
:is(.animate, .animate-repeat).fade-right.in-view { animation-name: fadeRight; }

@keyframes fadeAll {
    0%   { opacity: 0; transform: scale(0.9); filter: blur(4px); }
    100% { opacity: 1; transform: scale(1);   filter: blur(0); }
}
:is(.animate, .animate-repeat).fade-all.in-view { animation-name: fadeAll; }


/* ==========================================
   KEYFRAMES — SLIDE (Full viewport)
   ========================================== */

@keyframes slideUp {
    0%   { transform: translateY(200%); }
    100% { transform: translateY(0); }
}
:is(.animate, .animate-repeat).slide-up.in-view { animation-name: slideUp; }

/* Special: slide-up for centered images */
@keyframes slideUpCentered {
    0%   { transform: translate(-50%, calc(-50% + 200%)); }
    100% { transform: translate(-50%, -50%); }
}
.hero-card-img.slide-up.in-view { animation-name: slideUpCentered; }

/* ── drop-flip base ── */
@keyframes dropFlip {
    0%   { opacity: 0; transform: perspective(800px) translateY(-120px) rotateX(90deg); }
    100% { opacity: 1; transform: perspective(800px) translateY(0) rotateX(0deg); }
}
:is(.animate, .animate-repeat).drop-flip.in-view {
    animation-name: dropFlip;
    backface-visibility: hidden;
}

/* Special: .hero-header__tamal — rotateX, preserves translate(-50%, -50%) */
@keyframes dropFlipCentered {
    0%   { opacity: .8; transform: perspective(800px) translate(-50%, calc(-50% - 120px)) rotateX(90deg); }
    100% { opacity: 1; transform: perspective(800px) translate(-50%, -50%) rotateX(0deg); }
}
.hero-header__tamal.drop-flip.in-view {
    animation-name: dropFlipCentered;
    backface-visibility: hidden;
}

/* Float keyframes — each preserves the element's centering transform */
@keyframes floatYCentered {
    0%, 100% { transform: perspective(800px) translateY(-50%) rotateX(0deg); }
    50%       { transform: perspective(800px) translateY(calc(-50% - 20px)) rotateX(5deg); }
}
@keyframes floatXCentered {
    0%, 100% { transform: perspective(800px) translateX(-50%) translateY(0) rotateY(0deg); }
    50%       { transform: perspective(800px) translateX(-50%) translateY(-20px) rotateY(8deg); }
}
@keyframes floatBasic {
    0%, 100% { transform: perspective(800px) translateY(0) rotateY(0deg); }
    50%       { transform: perspective(800px) translateY(-20px) rotateY(-8deg); }
}

/* Special: .hero-empanada — rotateX, preserves translateY(-50%) */
@keyframes dropFlipYCentered {
    0%   { opacity: 0; transform: perspective(800px) translateY(calc(-50% - 120px)) rotateX(90deg); }
    100% { opacity: 1; transform: perspective(800px) translateY(-50%) rotateX(0deg); }
}
.hero-empanada.drop-flip.in-view {
    animation-name: dropFlipYCentered;
    backface-visibility: hidden;
}
.hero-empanada.drop-flip.in-view.floating {
    animation: floatYCentered 3s ease-in-out infinite;
    backface-visibility: hidden;
}

/* Special: .hero-sope — rotateY variation, preserves translateX(-50%) */
@keyframes dropFlipXCentered {
    0%   { opacity: 0; transform: perspective(800px) translateX(-50%) translateY(-120px) rotateY(90deg); }
    100% { opacity: 1; transform: perspective(800px) translateX(-50%) translateY(0) rotateY(0deg); }
}
.hero-sope.drop-flip.in-view {
    animation-name: dropFlipXCentered;
    backface-visibility: hidden;
}
.hero-sope.drop-flip.in-view.floating {
    animation: floatXCentered 3.5s ease-in-out infinite;
    backface-visibility: hidden;
}

/* Special: .hero-enchilada — rotateY variation, no centering transform */
@keyframes dropFlipBasic {
    0%   { opacity: 0; transform: perspective(800px) translateY(-120px) rotateY(90deg); }
    100% { opacity: 1; transform: perspective(800px) translateY(0) rotateY(0deg); }
}
.hero-enchilada.drop-flip.in-view {
    animation-name: dropFlipBasic;
    backface-visibility: hidden;
}
.hero-enchilada.drop-flip.in-view.floating {
    animation: floatBasic 2.7s ease-in-out infinite;
    backface-visibility: hidden;
}

/* Special: slide-up for rotated elements */
@keyframes slideUpRotated {
    0%   { transform: translateY(200%) rotate(45deg); }
    100% { transform: translateY(0) rotate(45deg); }
}
.hero-content__divider-square.slide-up.in-view { animation-name: slideUpRotated; }

@keyframes slideDown {
    0%   { transform: translateY(-150%); }
    100% { transform: translateY(0); }
}
:is(.animate, .animate-repeat).slide-down.in-view { animation-name: slideDown; }

@keyframes slideLeft {
    0%   { transform: translateX(-150%); }
    100% { transform: translateX(0); }
}
:is(.animate, .animate-repeat).slide-left.in-view { animation-name: slideLeft; }

@keyframes slideRight {
    0%   { transform: translateX(150%); }
    100% { transform: translateX(0); }
}
:is(.animate, .animate-repeat).slide-right.in-view { animation-name: slideRight; }


/* ==========================================
   KEYFRAMES — MISC
   ========================================== */

@keyframes slide-down-infinite {
    0%   { transform: translateY(-5px); opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translateY(10px); opacity: 0; }
}

@keyframes pulse-dot {
    0%, 100% { transform: scale(1);   opacity: 1; }
    50%       { transform: scale(1.5); opacity: 0.5; }
}

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


/* ==========================================
   LINE ANIMATIONS — BORDER LINES
   ========================================== */

:is(.line-animate, .line-animate-repeat) {
    position: relative;
    contain: layout style;
}

:is(.line-animate, .line-animate-repeat)::before,
:is(.line-animate, .line-animate-repeat)::after {
    content: '';
    position: absolute;
    background-color: var(--color-border-line);
    transition: width var(--animation-duration) var(--animation-easing-smooth),
                height var(--animation-duration) var(--animation-easing-smooth);
    pointer-events: none;
}

:is(.line-animate, .line-animate-repeat).in-view::before,
:is(.line-animate, .line-animate-repeat).in-view::after {
    will-change: width, height;
}

/* Color modifiers */
:is(.line-animate, .line-animate-repeat).line-color-accent::before,
:is(.line-animate, .line-animate-repeat).line-color-accent::after    { background-color: var(--color-accent); }
:is(.line-animate, .line-animate-repeat).line-color-primary::before,
:is(.line-animate, .line-animate-repeat).line-color-primary::after   { background-color: var(--color-primary); }
:is(.line-animate, .line-animate-repeat).line-color-secondary::before,
:is(.line-animate, .line-animate-repeat).line-color-secondary::after { background-color: var(--color-secondary); }
:is(.line-animate, .line-animate-repeat).line-color-border::before,
:is(.line-animate, .line-animate-repeat).line-color-border::after    { background-color: rgba(188, 188, 188, 0.39); }
:is(.line-animate, .line-animate-repeat).line-color-white::before,
:is(.line-animate, .line-animate-repeat).line-color-white::after     { background-color: #ffffff; }
:is(.line-animate, .line-animate-repeat).line-color-black::before,
:is(.line-animate, .line-animate-repeat).line-color-black::after     { background-color: #000000; }


/* ==========================================
   LINE DIRECTION PRIORITY SYSTEM
   ::before — top > left > bottom > right
   ::after  — fills the second line slot
   ========================================== */

/* ::before — Priority 1: top */
:is(.line-animate, .line-animate-repeat).line-top::before {
    top: 0; left: 0; height: var(--line-thickness, 1px); width: 0;
    transition-delay: var(--line-top-delay, 0s);
}
:is(.line-animate, .line-animate-repeat).line-top.in-view::before { width: 100%; }

/* ::before — Priority 2: left (only if no top) */
:is(.line-animate, .line-animate-repeat).line-left:not(.line-top)::before {
    top: 0; left: 0; width: var(--line-thickness, 1px); height: 0;
    transition-delay: var(--line-left-delay, 0s);
}
:is(.line-animate, .line-animate-repeat).line-left:not(.line-top).in-view::before { height: 100%; }

/* ::before — Priority 3: bottom (only if no top and no left) */
:is(.line-animate, .line-animate-repeat).line-bottom:not(.line-top):not(.line-left)::before {
    bottom: 0; left: 0; height: var(--line-thickness, 1px); width: 0;
    transition-delay: var(--line-bottom-delay, 0s);
}
:is(.line-animate, .line-animate-repeat).line-bottom:not(.line-top):not(.line-left).in-view::before { width: 100%; }

/* ::before — Priority 4: right (only if no other directions) */
:is(.line-animate, .line-animate-repeat).line-right:not(.line-top):not(.line-left):not(.line-bottom)::before {
    top: 0; right: 0; width: var(--line-thickness, 1px); height: 0;
    transition-delay: var(--line-right-delay, 0s);
}
:is(.line-animate, .line-animate-repeat).line-right:not(.line-top):not(.line-left):not(.line-bottom).in-view::before { height: 100%; }

/* ::after — left (when top is present) */
:is(.line-animate, .line-animate-repeat).line-top.line-left::after {
    top: 0; left: 0; width: var(--line-thickness, 1px); height: 0;
    transition-delay: var(--line-left-delay, 0s);
}
:is(.line-animate, .line-animate-repeat).line-top.line-left.in-view::after { height: 100%; }

/* ::after — bottom (when ::before isn't drawing bottom) */
:is(.line-animate, .line-animate-repeat).line-bottom:is(.line-top, .line-left)::after {
    bottom: 0; left: 0; height: var(--line-thickness, 1px); width: 0;
    transition-delay: var(--line-bottom-delay, 0s);
}
:is(.line-animate, .line-animate-repeat).line-bottom:is(.line-top, .line-left).in-view::after { width: 100%; }

/* ::after — right (when top or bottom, but no left) */
:is(.line-animate, .line-animate-repeat).line-right:is(.line-top, .line-bottom):not(.line-left)::after {
    top: 0; right: 0; width: var(--line-thickness, 1px); height: 0;
    transition-delay: var(--line-right-delay, 0s);
}
:is(.line-animate, .line-animate-repeat).line-right:is(.line-top, .line-bottom):not(.line-left).in-view::after { height: 100%; }

/* ::after — right (when left is using ::before) */
:is(.line-animate, .line-animate-repeat).line-left.line-right:not(.line-top):not(.line-bottom)::after {
    top: 0; right: 0; width: var(--line-thickness, 1px); height: 0;
    transition-delay: var(--line-right-delay, 0s);
}
:is(.line-animate, .line-animate-repeat).line-left.line-right:not(.line-top):not(.line-bottom).in-view::after { height: 100%; }


/* ==========================================
   LINE ANIMATIONS — PSEUDO-ELEMENT LINES
   ========================================== */

/* Horizontal line */
.line-horizontal {
    position: relative;
    display: inline-block;
}

.line-horizontal:is(::before, ::after) {
    content: '';
    position: absolute;
    height: 1px;
    background-color: var(--color-accent);
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    transition: width var(--animation-duration) var(--animation-easing-smooth);
}

.line-horizontal::before { left: 0; }
.line-horizontal::after  { right: 0; }
.line-horizontal.in-view:is(::before, ::after) { width: 40px; }

/* Horizontal delays */
.line-horizontal[style*="--line-delay"]:is(::before, ::after) { transition-delay: var(--line-delay); }
.line-horizontal.line-delay-100:is(::before, ::after)  { transition-delay: 100ms; }
.line-horizontal.line-delay-200:is(::before, ::after)  { transition-delay: 200ms; }
.line-horizontal.line-delay-300:is(::before, ::after)  { transition-delay: 300ms; }
.line-horizontal.line-delay-400:is(::before, ::after)  { transition-delay: 400ms; }
.line-horizontal.line-delay-500:is(::before, ::after)  { transition-delay: 500ms; }
.line-horizontal.line-delay-600:is(::before, ::after)  { transition-delay: 600ms; }
.line-horizontal.line-delay-700:is(::before, ::after)  { transition-delay: 700ms; }
.line-horizontal.line-delay-800:is(::before, ::after)  { transition-delay: 800ms; }
.line-horizontal.line-delay-1000:is(::before, ::after) { transition-delay: 1000ms; }
.line-horizontal.line-delay-1200:is(::before, ::after) { transition-delay: 1200ms; }
.line-horizontal.line-delay-1500:is(::before, ::after) { transition-delay: 1500ms; }

/* Horizontal color variations */
.line-horizontal.line-color-accent:is(::before, ::after)    { background-color: var(--coloraccent); }
.line-horizontal.line-color-primary:is(::before, ::after)   { background-color: var(--colorprimary); }
.line-horizontal.line-color-secondary:is(::before, ::after) { background-color: var(--colorsecondary); }
.line-horizontal.line-color-border:is(::before, ::after)    { background-color: var(--color-border); }
.line-horizontal.line-color-white:is(::before, ::after)     { background-color: #ffffff; }
.line-horizontal.line-color-black:is(::before, ::after)     { background-color: #000000; }

/* Grow from left only */
.line-horizontal.line-left-only::after         { display: none; }
.line-horizontal.line-left-only.in-view::before { width: 80px; }

/* Grow from right only */
.line-horizontal.line-right-only::before      { display: none; }
.line-horizontal.line-right-only.in-view::after { width: 80px; }


/* Vertical line */
.line-vertical {
    position: relative;
    display: inline-block;
}

.line-vertical:is(::before, ::after) {
    content: '';
    position: absolute;
    width: 1px;
    background-color: var(--color-accent);
    left: 50%;
    transform: translateX(-50%);
    height: 0;
    transition: height var(--animation-duration) var(--animation-easing-smooth);
}

.line-vertical::before { top: 0; }
.line-vertical::after  { bottom: 0; }
.line-vertical.in-view:is(::before, ::after) { height: 40px; }

/* Vertical delays */
.line-vertical[style*="--line-delay"]:is(::before, ::after) { transition-delay: var(--line-delay); }
.line-vertical.line-delay-100:is(::before, ::after)  { transition-delay: 100ms; }
.line-vertical.line-delay-200:is(::before, ::after)  { transition-delay: 200ms; }
.line-vertical.line-delay-300:is(::before, ::after)  { transition-delay: 300ms; }
.line-vertical.line-delay-400:is(::before, ::after)  { transition-delay: 400ms; }
.line-vertical.line-delay-500:is(::before, ::after)  { transition-delay: 500ms; }
.line-vertical.line-delay-600:is(::before, ::after)  { transition-delay: 600ms; }
.line-vertical.line-delay-700:is(::before, ::after)  { transition-delay: 700ms; }
.line-vertical.line-delay-800:is(::before, ::after)  { transition-delay: 800ms; }
.line-vertical.line-delay-1000:is(::before, ::after) { transition-delay: 1000ms; }
.line-vertical.line-delay-1200:is(::before, ::after) { transition-delay: 1200ms; }
.line-vertical.line-delay-1500:is(::before, ::after) { transition-delay: 1500ms; }

/* Vertical color variations */
.line-vertical.line-color-accent:is(::before, ::after)    { background-color: var(--color-accent); }
.line-vertical.line-color-primary:is(::before, ::after)   { background-color: var(--color-primary); }
.line-vertical.line-color-secondary:is(::before, ::after) { background-color: var(--color-secondary); }
.line-vertical.line-color-border:is(::before, ::after)    { background-color: var(--color-border); }
.line-vertical.line-color-white:is(::before, ::after)     { background-color: #ffffff; }
.line-vertical.line-color-black:is(::before, ::after)     { background-color: #000000; }

/* Grow from top only */
.line-vertical.line-top-only::after          { display: none; }
.line-vertical.line-top-only.in-view::before { height: 80px; }

/* Grow from bottom only */
.line-vertical.line-bottom-only::before     { display: none; }
.line-vertical.line-bottom-only.in-view::after { height: 80px; }

/* Length modifiers */
.line-horizontal.line-short.in-view:is(::before, ::after) { width: 20px; }
.line-horizontal.line-long.in-view:is(::before, ::after)  { width: 100px; }
.line-vertical.line-short.in-view:is(::before, ::after)   { height: 20px; }
.line-vertical.line-long.in-view:is(::before, ::after)    { height: 100px; }