/* ============================================================
   SO FLO FOTOS — Global Animations & Premium Interactions
   ============================================================ */

/* ── Hide default cursor when custom one is active ── */
body.sff-has-cursor,
body.sff-has-cursor * { cursor: none !important; }

/* ── Custom cursor elements ── */
.sff-cursor-dot {
    position: fixed;
    top: 0; left: 0;
    width: 6px; height: 6px;
    background: #C2714F;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    transform: translate(-50%, -50%);
    will-change: transform;
    transition: width .25s ease, height .25s ease, background .25s ease;
}
.sff-cursor-ring {
    position: fixed;
    top: 0; left: 0;
    width: 38px; height: 38px;
    border: 1.5px solid rgba(194,113,79,.55);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    transform: translate(-50%, -50%);
    will-change: transform;
    transition: width .4s cubic-bezier(.25,.46,.45,.94),
                height .4s cubic-bezier(.25,.46,.45,.94),
                border-color .3s ease,
                background .3s ease;
}

/* Cursor — link hover state */
body.sff-cursor-link .sff-cursor-dot {
    width: 4px; height: 4px;
    background: #fff;
}
body.sff-cursor-link .sff-cursor-ring {
    width: 64px; height: 64px;
    border-color: rgba(194,113,79,.85);
    background: rgba(194,113,79,.08);
}

/* Cursor — photo hover state */
body.sff-cursor-photo .sff-cursor-dot {
    width: 3px; height: 3px;
    background: rgba(255,255,255,.9);
}
body.sff-cursor-photo .sff-cursor-ring {
    width: 80px; height: 80px;
    border-color: rgba(255,255,255,.5);
    background: rgba(255,255,255,.06);
}

/* ============================================================
   SCROLL-REVEAL — elements start hidden, become visible on enter
   ============================================================ */

[data-animate] {
    opacity: 0;
    transition:
        opacity  .85s cubic-bezier(.25,.46,.45,.94),
        transform .85s cubic-bezier(.25,.46,.45,.94);
}
[data-animate="fade-up"]    { transform: translateY(48px); }
[data-animate="fade-down"]  { transform: translateY(-32px); }
[data-animate="fade-left"]  { transform: translateX(-48px); }
[data-animate="fade-right"] { transform: translateX(48px); }
[data-animate="scale-in"]   { transform: scale(.92); }
[data-animate="fade"]       { transform: none; }

[data-animate].is-visible {
    opacity: 1;
    transform: none;
}

/* Stagger: parent holds [data-stagger], children animate in sequence */
[data-stagger] > * {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .7s ease, transform .7s ease;
}
[data-stagger].is-visible > *:nth-child(1)  { opacity:1; transform:none; transition-delay: .00s; }
[data-stagger].is-visible > *:nth-child(2)  { opacity:1; transform:none; transition-delay: .10s; }
[data-stagger].is-visible > *:nth-child(3)  { opacity:1; transform:none; transition-delay: .20s; }
[data-stagger].is-visible > *:nth-child(4)  { opacity:1; transform:none; transition-delay: .30s; }
[data-stagger].is-visible > *:nth-child(5)  { opacity:1; transform:none; transition-delay: .40s; }
[data-stagger].is-visible > *:nth-child(6)  { opacity:1; transform:none; transition-delay: .50s; }
[data-stagger].is-visible > *:nth-child(7)  { opacity:1; transform:none; transition-delay: .60s; }
[data-stagger].is-visible > *:nth-child(n+8){ opacity:1; transform:none; transition-delay: .70s; }

/* ============================================================
   SERVICE CARD MINI-SLIDER  (homepage services section)
   ============================================================ */

/* Slider wrapper — fills the card */
.sff-sslider {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.sff-sslider__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.1s ease;
    overflow: hidden;
}
.sff-sslider__slide.is-active { opacity: 1; }

/* Ken Burns zoom on active slide */
.sff-sslider__slide img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
    transform: scale(1.07);
    transition: transform 7s ease;
}
.sff-sslider__slide.is-active img { transform: scale(1); }

/* Vertical dot bar — right side of each card */
.sff-sslider__dots {
    position: absolute;
    right: var(--sp-4, 1rem);
    bottom: 90px;           /* sit above the card body text */
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 6;
    pointer-events: none;
}
.sff-sslider__dot {
    width: 2px;
    height: 14px;
    background: rgba(255,255,255,.28);
    border-radius: 2px;
    transition: height .35s ease, background .35s ease;
}
.sff-sslider__dot.is-active {
    height: 26px;
    background: rgba(255,255,255,.92);
}

/* ============================================================
   HOMEPAGE — SERVICES HORIZONTAL SCROLL CAROUSEL
   ============================================================ */

/* Override the grid with a scroll strip */
.sff-services__grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    grid-template-columns: unset !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    padding: 0 !important;
    width: 100%;
}
.sff-services__grid::-webkit-scrollbar { display: none; }
.sff-services__grid.is-dragging        { cursor: grabbing; user-select: none; }

/* Each card fills a fixed viewport fraction */
.sff-service-card {
    flex: 0 0 calc(24vw - 3px) !important;
    min-width: 220px;
    max-width: 420px;
    scroll-snap-align: start;
    height: clamp(340px, 55vh, 640px) !important;
    aspect-ratio: unset !important;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    display: block;
    /* Remove any old single-image background */
    background: #111;
}

/* Prevent the old static img from being the layout */
.sff-service-card > .sff-service-card__img {
    display: none; /* old approach removed; slider handles images now */
}

/* Card body reveal — slides up on hover */
.sff-service-card__body {
    transform: translateY(10px);
    transition: transform .4s cubic-bezier(.25,.46,.45,.94) !important;
}
.sff-service-card:hover .sff-service-card__body { transform: translateY(0) !important; }

/* CTA arrow fades up on hover */
.sff-service-card__cta {
    opacity: 0 !important;
    transform: translateY(8px) !important;
    transition: opacity .35s ease .05s, transform .35s ease .05s, color .2s, gap .2s !important;
}
.sff-service-card:hover .sff-service-card__cta {
    opacity: 1 !important;
    transform: translateY(0) !important;
    color: var(--sff-white) !important;
    gap: var(--sp-3, .75rem) !important;
}

/* Scroll hint arrows (injected by JS) */
.sff-services-nav {
    display: flex;
    justify-content: flex-end;
    gap: var(--sp-3, .75rem);
    padding: var(--sp-5, 1.25rem) var(--gutter, 24px) 0;
    max-width: var(--max-w, 1400px);
    margin-inline: auto;
}
.sff-services-nav__btn {
    width: 44px; height: 44px;
    background: transparent;
    border: 1px solid rgba(44,44,44,.2);
    color: var(--sff-charcoal, #2C2C2C);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    transition: background .2s, border-color .2s, color .2s;
    flex-shrink: 0;
}
.sff-services-nav__btn:hover {
    background: var(--sff-charcoal, #2C2C2C);
    color: #fff;
    border-color: var(--sff-charcoal, #2C2C2C);
}

@media (max-width: 1024px) {
    .sff-service-card { flex: 0 0 calc(38vw - 2px) !important; }
}
@media (max-width: 680px) {
    .sff-service-card { flex: 0 0 calc(78vw) !important; }
    .sff-sslider__dots { display: none; }
}

/* ============================================================
   GLOBAL HOVER SHIMMER on section headings & labels
   ============================================================ */

/* Terracotta underline that draws left→right on first view */
.sff-animated-rule {
    display: block;
    width: 0;
    height: 1px;
    background: var(--sff-terracotta, #C2714F);
    margin-top: var(--sp-3, .75rem);
    transition: width 1.2s cubic-bezier(.25,.46,.45,.94);
}
[data-animate].is-visible .sff-animated-rule,
[data-stagger].is-visible .sff-animated-rule { width: 60px; }

/* ============================================================
   IMAGE PROTECTION — makes photos impossible to save/copy
   ============================================================ */

/* All <img> tags: no drag, no text-selection, no tap callout (iOS) */
img {
    -webkit-user-drag:    none;
    -khtml-user-drag:     none;
    -moz-user-drag:       none;
    user-drag:            none;
    -webkit-touch-callout: none;   /* iOS long-press "Save Image" menu */
    -webkit-user-select:  none;
    user-select:          none;
    pointer-events:       none;    /* blocks right-click on the pixel level */
}

/* Re-enable pointer-events on elements that need to be clickable.
   Since images themselves have pointer-events:none, the parent
   anchor/button/data-lightbox wrapper handles the click. */
a, button,
[data-lightbox],
.sff-filter-chip,
.sff-masonry__item,
.sff-service-card,
.sff-port-collage__card {
    pointer-events: auto;
}

/* Transparent overlays on every photo container intercept events
   before they reach the <img> element */
.sff-masonry__item,
.sff-service-card,
.sff-port-collage__card,
.sff-hero__media {
    position: relative;
}
.sff-masonry__item::after,
.sff-port-collage__card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;           /* above img, below card UI chrome */
    display: block;
    cursor: pointer;      /* keep cursor pointer so clicking still opens lightbox */
    -webkit-tap-highlight-color: transparent;
}

/* Lightbox image: pointer-events OFF so right-click always falls
   through to the .sff-lightbox backdrop (which is blocked by JS) */
.sff-lightbox__img {
    pointer-events: none !important;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Lightbox buttons must sit above any injected children */
.sff-lightbox__close,
.sff-lightbox__prev,
.sff-lightbox__next {
    z-index: 10;
}

/* Print block — hide everything when printing */
@media print {
    body > * { display: none !important; }
}
body.sff-no-print * { display: none !important; }

/* DevTools open → blur all photos */
body.sff-devtools-blur .sff-masonry__item img,
body.sff-devtools-blur .sff-lightbox__img,
body.sff-devtools-blur .sff-sslider__slide img,
body.sff-devtools-blur .sff-port-collage__card img,
body.sff-devtools-blur .sff-hero__img {
    filter:     blur(28px) !important;
    opacity:    0.15       !important;
    transition: filter 0.4s, opacity 0.4s !important;
}

/* Protection toast */
.sff-protection-toast {
    position:     fixed;
    bottom:       2rem;
    left:         50%;
    transform:    translateX(-50%);
    background:   #1A1A18;
    color:        #F7F4EE;
    padding:      0.875rem 1.5rem;
    font-size:    0.85rem;
    font-family:  var(--font-body, sans-serif);
    letter-spacing: 0.04em;
    z-index:      999999;
    max-width:    90vw;
    text-align:   center;
    pointer-events: none;
    border-left:  3px solid #C2714F;
    opacity:      1;
    transition:   opacity 0.4s ease;
}

/* ============================================================
   REDUCED MOTION — disable all the above for users who prefer it
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    [data-animate], [data-stagger] > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .sff-cursor-dot, .sff-cursor-ring { display: none !important; }
    .sff-sslider__slide img { transform: scale(1) !important; transition: none !important; }
}