/* ══════════════════════════════════════════════════════════
   The Skin Studio — Scroll Animations & Line-Draw Effects
   ══════════════════════════════════════════════════════════ */

/* ── FADE & SLIDE ANIMATIONS ── */
.anim-fade-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.anim-fade-up.in-view {
    opacity: 1;
    transform: translateY(0);
}

.anim-fade-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.anim-fade-left.in-view {
    opacity: 1;
    transform: translateX(0);
}

.anim-fade-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.anim-fade-right.in-view {
    opacity: 1;
    transform: translateX(0);
}

.anim-scale-in {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.anim-scale-in.in-view {
    opacity: 1;
    transform: scale(1);
}

/* ── STAGGER DELAYS for child elements ── */
.anim-stagger > *:nth-child(1) { transition-delay: 0s; }
.anim-stagger > *:nth-child(2) { transition-delay: 0.12s; }
.anim-stagger > *:nth-child(3) { transition-delay: 0.24s; }
.anim-stagger > *:nth-child(4) { transition-delay: 0.36s; }
.anim-stagger > *:nth-child(5) { transition-delay: 0.48s; }
.anim-stagger > *:nth-child(6) { transition-delay: 0.6s; }
.anim-stagger > *:nth-child(7) { transition-delay: 0.72s; }
.anim-stagger > *:nth-child(8) { transition-delay: 0.84s; }

/* ── LINE-DRAW DECORATIONS ── */

/* Horizontal rule that draws from center outward */
.line-draw {
    display: block;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold, #C9A96E), transparent);
    margin: 2rem auto;
    transition: width 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.line-draw.in-view {
    width: 120px;
}
.line-draw.line-wide.in-view {
    width: 200px;
}

/* Line that draws from left to right */
.line-draw-left {
    display: block;
    width: 0;
    height: 1px;
    background: var(--gold, #C9A96E);
    transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.line-draw-left.in-view {
    width: 60px;
}

/* Vertical line that draws downward */
.line-draw-vertical {
    display: block;
    width: 1px;
    height: 0;
    background: linear-gradient(to bottom, var(--gold, #C9A96E), transparent);
    margin: 0 auto;
    transition: height 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.line-draw-vertical.in-view {
    height: 60px;
}

/* ── SECTION TITLE UNDERLINE DRAW ── */
.section-title {
    position: relative;
}
.section-title::after {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold, #C9A96E), transparent);
    margin: 1rem auto 0;
    transition: width 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s;
}
.section-title.in-view::after {
    width: 80px;
}

/* ── DECORATIVE CORNER BRACKETS ── */
.anim-bracket {
    position: relative;
}
.anim-bracket::before,
.anim-bracket::after {
    content: '';
    position: absolute;
    border-color: var(--gold, #C9A96E);
    border-style: solid;
    opacity: 0;
    transition: opacity 0.6s ease 0.4s,
                width 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s,
                height 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s;
    width: 0;
    height: 0;
}
.anim-bracket::before {
    top: -8px;
    left: -8px;
    border-width: 1px 0 0 1px;
}
.anim-bracket::after {
    bottom: -8px;
    right: -8px;
    border-width: 0 1px 1px 0;
}
.anim-bracket.in-view::before,
.anim-bracket.in-view::after {
    opacity: 1;
    width: 30px;
    height: 30px;
}

/* ── SVG PATH DRAW ── */
.svg-draw path,
.svg-draw line,
.svg-draw circle,
.svg-draw polyline {
    stroke-dasharray: var(--path-length, 300);
    stroke-dashoffset: var(--path-length, 300);
    transition: stroke-dashoffset 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.svg-draw.in-view path,
.svg-draw.in-view line,
.svg-draw.in-view circle,
.svg-draw.in-view polyline {
    stroke-dashoffset: 0;
}

/* ── COUNTER / NUMBER ANIMATION ── */
.anim-counter {
    font-variant-numeric: tabular-nums;
}

/* ── PARALLAX SUBTLE FLOAT ── */
.anim-float {
    transition: transform 0.3s ease-out;
}

/* ── REVEAL MASK (wipe from bottom) ── */
.anim-reveal {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.anim-reveal.in-view {
    clip-path: inset(0 0 0 0);
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
    .anim-fade-up,
    .anim-fade-left,
    .anim-fade-right,
    .anim-scale-in,
    .line-draw,
    .line-draw-left,
    .line-draw-vertical,
    .anim-bracket::before,
    .anim-bracket::after,
    .svg-draw path,
    .svg-draw line,
    .svg-draw circle,
    .svg-draw polyline,
    .anim-reveal,
    .section-title::after {
        transition-duration: 0.01s !important;
        transition-delay: 0s !important;
    }
    .anim-fade-up,
    .anim-fade-left,
    .anim-fade-right,
    .anim-scale-in {
        opacity: 1;
        transform: none;
    }
}