/* ============================================
   PRELOADER
   ============================================ */
.ar-preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: var(--ar-color-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.ar-preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.ar-preloader__inner {
    text-align: center;
}

.ar-preloader__text {
    font-family: var(--ar-font-heading);
    font-size: var(--ar-font-size-xl);
    color: var(--ar-color-light);
    display: block;
    margin-top: var(--ar-spacing-md);
    letter-spacing: 0.05em;
    animation: preloader-fade 1.5s ease infinite;
}

.ar-preloader__line {
    width: 60px;
    height: 2px;
    background: var(--ar-color-accent);
    margin: 0 auto;
    animation: preloader-line 1.5s ease infinite;
    transform-origin: left;
}

@keyframes preloader-line {
    0% { transform: scaleX(0); opacity: 0.3; }
    50% { transform: scaleX(1); opacity: 1; }
    100% { transform: scaleX(0); opacity: 0.3; transform-origin: right; }
}

@keyframes preloader-fade {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* ============================================
   HERO SCROLL INDICATOR
   ============================================ */
.ar-hero__scroll {
    position: absolute;
    bottom: var(--ar-spacing-lg);
    right: var(--ar-spacing-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ar-spacing-xs);
    animation: hero-scroll-fade 2s ease 1.5s both;
}

.ar-hero__scroll-text {
    font-family: var(--ar-font-accent);
    font-size: var(--ar-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--ar-color-grey);
    writing-mode: vertical-rl;
}

.ar-hero__scroll-line {
    width: 1px;
    height: 60px;
    background: var(--ar-color-accent);
    animation: scroll-line 2s ease infinite;
    transform-origin: top;
}

@keyframes scroll-line {
    0% { transform: scaleY(0); }
    50% { transform: scaleY(1); transform-origin: top; }
    50.01% { transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}

@keyframes hero-scroll-fade {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================
   SECTION LABELS
   ============================================ */
.ar-section__label {
    font-family: var(--ar-font-accent);
    font-size: var(--ar-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--ar-color-grey);
    display: inline-flex;
    align-items: center;
    gap: var(--ar-spacing-sm);
    margin-bottom: var(--ar-spacing-xl);
}

.ar-section__label::before {
    content: '';
    width: 40px;
    height: 1px;
    background: var(--ar-color-accent);
}

.ar-section__title {
    font-family: var(--ar-font-heading);
    font-size: var(--ar-font-size-2xl);
    max-width: 600px;
    margin-bottom: var(--ar-spacing-xl);
}

/* ============================================
   TEXT REVEAL ANIMATIONS
   ============================================ */
.ar-text-reveal .line {
    overflow: hidden;
    display: block;
}

.ar-text-reveal .line-inner {
    display: block;
    transform: translateY(105%);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.ar-text-reveal.animate .line-inner {
    transform: translateY(0);
}

/* Char-by-char reveal */
.ar-char-reveal .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(60%) rotate(5deg);
    transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.ar-char-reveal.animate .char {
    opacity: 1;
    transform: translateY(0) rotate(0);
}

/* Scramble text effect placeholder */
.ar-scramble[data-text] {
    position: relative;
}

/* ============================================
   PORTFOLIO HOVER EFFECTS
   ============================================ */
.ar-portfolio__item {
    position: relative;
    overflow: hidden;
}

.ar-portfolio__item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ar-color-dark);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.ar-portfolio__item:hover::after {
    opacity: 0.2;
}

.ar-portfolio__placeholder {
    background: linear-gradient(135deg, var(--ar-color-grey-light) 0%, var(--ar-color-border) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

/* ============================================
   PORTFOLIO FILTER
   ============================================ */
.ar-portfolio-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ar-spacing-sm);
    margin-bottom: var(--ar-spacing-xl);
}

.ar-portfolio-filter__btn {
    font-family: var(--ar-font-accent);
    font-size: var(--ar-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 8px 20px;
    border: 1px solid var(--ar-color-border);
    background: transparent;
    color: var(--ar-color-text-light);
    cursor: pointer;
    transition: var(--ar-transition);
}

.ar-portfolio-filter__btn:hover,
.ar-portfolio-filter__btn.active {
    background: var(--ar-color-primary);
    color: var(--ar-color-light);
    border-color: var(--ar-color-primary);
}

/* ============================================
   HOVER UNDERLINE EFFECT
   ============================================ */
.ar-hover-line {
    position: relative;
    display: inline;
    background-image: linear-gradient(var(--ar-color-accent), var(--ar-color-accent));
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: left bottom;
    transition: background-size 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ar-hover-line:hover {
    background-size: 100% 2px;
}

/* ============================================
   IMAGE PARALLAX
   ============================================ */
.ar-parallax-container {
    overflow: hidden;
}

.ar-parallax-image {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* ============================================
   LOADING STATES
   ============================================ */
.ar-loading {
    position: relative;
    overflow: hidden;
}

.ar-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ============================================
   PAGE TRANSITIONS
   ============================================ */
.ar-page-transition {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: var(--ar-color-dark);
    transform: translateY(100%);
    transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

.ar-page-transition.active {
    transform: translateY(0);
}

.ar-page-transition.exit {
    transform: translateY(-100%);
}

/* ============================================
   MAGNETIC BUTTON HOVER
   ============================================ */
.ar-btn {
    position: relative;
    overflow: hidden;
}

.ar-btn .ar-btn-text {
    display: inline-block;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============================================
   SMOOTH IMAGE LOAD
   ============================================ */
.ar-img-load {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.ar-img-load.loaded {
    opacity: 1;
}

/* ============================================
   HORIZONTAL SCROLL SECTION (OPTIONAL)
   ============================================ */
.ar-hscroll {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.ar-hscroll::-webkit-scrollbar {
    display: none;
}

.ar-hscroll__track {
    display: flex;
    gap: var(--ar-spacing-lg);
}

.ar-hscroll__item {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

/* ============================================
   NOISE TEXTURE OVERLAY (SUBTLE)
   ============================================ */
.ar-noise::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: 0.02;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}