/* ==========================================
   HUB CAROUSEL — full-viewport rotating carousel.
   One slide fills the screen at a time, auto-
   advancing every 3s; the next three wait as small
   cards bottom-right; arrows and the queue cards
   themselves allow manual jumps. See js/app.js for
   the rotation logic.

   Despite the "ind-hub" class prefix (this file
   started as industries.html only), it's generic
   and also powers services.html — same markup
   shape, different slide content. Not renamed to
   avoid an unnecessary find/replace across both
   pages; treat this file as shared infrastructure.
========================================== */

.ind-hub{

    position:relative;

    min-height:100vh;

    overflow:hidden;

    background:var(--color-background);

}

/* Persistent header copy — stays put while slides rotate underneath */
.ind-hub__intro{

    position:absolute;

    top:150px;

    left:0;

    right:0;

    z-index:5;

    text-align:center;

    padding-inline:24px;

    pointer-events:none;

    opacity:0;

    transform:translateY(-10px);

    animation:indIntroIn .8s ease forwards;

    animation-delay:.2s;

}
.ind-hub__intro p{

    color:var(--color-text);

    font-size:1.05rem;

    max-width:520px;

    margin:0 auto;

}
@keyframes indIntroIn{

    to{ opacity:1; transform:translateY(0); }

}

/* Stage — all ten slides stacked, only .is-current visible */
.ind-hub__stage{

    position:absolute;

    inset:0;

    z-index:0;

}
.ind-hub__slide{

    position:absolute;

    inset:0;

    opacity:0;

    transform:scale(1.04);

    transition:opacity 1.1s ease, transform 1.4s ease;

    pointer-events:none;

    z-index:0;

}
.ind-hub__slide.is-current{

    opacity:1;

    transform:scale(1);

    pointer-events:auto;

    z-index:1;

}
.ind-hub__media{

    position:absolute;

    inset:0;

}
.ind-hub__media img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    transform:scale(1);

    transition:transform 6s ease-out;

}
.ind-hub__slide.is-current .ind-hub__media img{

    transform:scale(1.07);

}
.ind-hub__scrim{

    position:absolute;

    inset:0;

    z-index:1;

    background:

        linear-gradient(180deg, rgba(8,21,45,.1) 0%, rgba(8,21,45,.05) 30%, rgba(8,21,45,.6) 76%, rgba(8,21,45,.88) 100%),

        linear-gradient(90deg, rgba(8,21,45,.55) 0%, rgba(8,21,45,.1) 48%, rgba(8,21,45,0) 72%);

}

.ind-hub__content{

    position:absolute;

    z-index:2;

    left:0;

    right:0;

    bottom:15%;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:28px;

}
.ind-hub__content h1{

    font-family:var(--font-heading);

    font-weight:600;

    font-size:clamp(2.3rem, 5vw, 4.2rem);

    line-height:1.15;

    color:var(--color-white);

    text-shadow:0 10px 34px rgba(0,0,0,.55);

    max-width:820px;

    opacity:0;

    transform:translateY(16px);

    transition:opacity .7s ease .25s, transform .7s ease .25s;

}
.ind-hub__slide.is-current .ind-hub__content h1{

    opacity:1;

    transform:translateY(0);

}
.ind-hub__content .btn,
.ind-hub__soon{

    opacity:0;

    transform:translateY(16px);

    transition:opacity .7s ease .4s, transform .7s ease .4s;
}
.ind-hub__slide.is-current .ind-hub__content .btn,
.ind-hub__slide.is-current .ind-hub__soon{

    opacity:1;

    transform:translateY(0);

}
.ind-hub__soon{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:rgba(255,255,255,.65);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

    padding:16px 30px;

    border:1px solid rgba(255,255,255,.28);

    border-radius:999px;

}

/* Arrows */
.ind-hub__arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    z-index:4;

    width:52px;

    height:52px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(8,21,45,.45);

    border:1px solid rgba(255,255,255,.2);

    color:var(--color-white);

    backdrop-filter:blur(6px);

    cursor:pointer;

    transition:.25s ease;

}
.ind-hub__arrow:hover{

    background:var(--color-gold);

    border-color:var(--color-gold);

    color:var(--color-background);

}
.ind-hub__arrow svg{

    width:22px;

    height:22px;

}
.ind-hub__arrow--prev{ left:32px; }
.ind-hub__arrow--next{ right:32px; }

/* Counter */
.ind-hub__counter{

    position:absolute;

    z-index:4;

    left:32px;

    bottom:28px;

    color:rgba(255,255,255,.55);

    font-size:.75rem;

    font-weight:700;

    letter-spacing:2px;

}

/* Queue — next three, bottom-center toward the right */
.ind-hub__queue{

    position:absolute;

    z-index:4;

    right:5%;

    bottom:8%;

    display:flex;

    align-items:flex-end;

    gap:16px;

}
.ind-hub__queue-card{

    position:relative;

    aspect-ratio:3 / 4;

    border-radius:var(--radius-md);

    overflow:hidden;

    border:1px solid rgba(255,255,255,.2);

    box-shadow:0 20px 40px rgba(0,0,0,.4);

    cursor:pointer;

    background:none;

    padding:0;

    opacity:0;

    transform:translateY(16px) scale(.9);

    animation:indQueueCardIn .6s ease forwards;

    transition:transform .3s ease, box-shadow .3s ease;

}
.ind-hub__queue-card:hover{

    transform:translateY(-6px) scale(1.03);

    box-shadow:0 26px 50px rgba(0,0,0,.5);

}
.ind-hub__queue-card:nth-child(1){ animation-delay:0s;   width:140px; }
.ind-hub__queue-card:nth-child(2){ animation-delay:.08s; width:118px; }
.ind-hub__queue-card:nth-child(3){ animation-delay:.16s; width:96px; }

.ind-hub__queue-card img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}
.ind-hub__queue-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,0) 60%);

}
.ind-hub__queue-card span{

    position:relative;

    z-index:1;

    display:block;

    padding:10px;

    color:var(--color-white);

    font-size:.72rem;

    font-weight:700;

    line-height:1.25;

}

@keyframes indQueueCardIn{

    to{ opacity:1; transform:translateY(0) scale(1); }

}

@media (max-width:900px){

    /* object-fit:cover has to crop hard to fill a full 100vh box on a
       tall, narrow phone screen, so photos with a subject up close
       (a face, here) end up as an extreme close-up that fights with
       the text overlaid on top of it. Shorten the slide and dial
       back its Ken Burns zoom-in so more of the shot stays in frame. */
    .ind-hub{ min-height:80vh; }

    .ind-hub__slide.is-current .ind-hub__media img{ transform:scale(1.02); }

    .ind-hub__intro{ top:120px; }

    .ind-hub__intro p{ font-size:.95rem; }

    .ind-hub__content{ bottom:24%; padding-inline:24px; }

    .ind-hub__queue{ right:16px; bottom:16px; gap:10px; }

    .ind-hub__queue-card:nth-child(1){ width:78px; }
    .ind-hub__queue-card:nth-child(2){ width:66px; }
    .ind-hub__queue-card:nth-child(3){ width:54px; }

    .ind-hub__queue-card span{ display:none; }

    .ind-hub__arrow{ width:42px; height:42px; }
    .ind-hub__arrow--prev{ left:14px; }
    .ind-hub__arrow--next{ right:14px; }

    .ind-hub__counter{ left:16px; bottom:16px; }

}

@media (prefers-reduced-motion: reduce){

    .ind-hub__intro{ animation:none; opacity:1; transform:none; }

    .ind-hub__slide{ transition:opacity .4s ease; }

    .ind-hub__slide,
    .ind-hub__media img{ transform:none !important; transition-property:opacity; }

    .ind-hub__content h1,
    .ind-hub__content .btn,
    .ind-hub__soon{ transition:none; opacity:1; transform:none; }

    .ind-hub__queue-card{ animation:none; opacity:1; transform:none; }

}