/* LULYGraphics interactive orbit hero
   Purpose: a usable first screen that also feels like a cinematic 3D scene.
   The content remains real HTML; the stage is progressive enhancement. */


html{
    overflow-x:clip!important;
    }
body.luly-home-page{
    overflow-x:clip!important;
    overflow-y:visible!important;
    padding-top:0!important;
    }

:root{
  --luly-orange:#ff6a00;
  --luly-orange-2:#ff9340;
  --luly-ink:#050507;
}

.luly-orbit-hero{
  position:relative;
  height:136vh;
  min-height:900px;
  isolation:isolate;
  background:
    radial-gradient(circle at 76% 23%,rgba(255,106,0,.12),transparent 28%),
    radial-gradient(circle at 70% 54%,rgba(255,137,54,.065),transparent 31%),
    linear-gradient(180deg,#070709 0%,#050507 62%,#070709 100%);
  overflow:visible;
}

.luly-orbit-hero::before{
  content:"";
  position:absolute;
    inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 80%);
  opacity:.28;
}

.luly-orbit-sticky{
  position:sticky;
  top:0;
  height:100svh;
  min-height:720px;
  display:flex;
  align-items:center;
  padding-top:78px;
  overflow:hidden;
}

.luly-orbit-canvas{
  position:absolute;
    inset:0;
  width:100%;
    height:100%;
  pointer-events:none;
  opacity:.9;
}

.luly-orbit-noise{
  position:absolute;
    inset:0;
    pointer-events:none;
    z-index:1;
  opacity:.12;
    mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.luly-orbit-vignette{
  position:absolute;
    inset:-10%;
    pointer-events:none;
    z-index:2;
  background:radial-gradient(ellipse at 66% 45%,transparent 17%,rgba(5,5,7,.14) 43%,rgba(5,5,7,.7) 76%,#050507 100%);
}

.luly-orbit-layout{
  position:relative;
    z-index:5;
  display:grid;
  grid-template-columns:minmax(320px,.82fr) minmax(540px,1.18fr);
  align-items:center;
  gap:clamp(30px,4vw,72px);
  width:100%;
}

.luly-orbit-copy{
  position:relative;
    z-index:20;
  max-width:650px;
  transform:translate3d(0,var(--copy-y,0px),0);
  opacity:var(--copy-opacity,1);
  transition:opacity .12s linear;
}

.luly-orbit-copy .eyebrow{
  display:inline-flex;
    align-items:center;
    gap:9px;
}
.luly-orbit-copy .eyebrow::before{
  content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--luly-orange);
  box-shadow:0 0 0 5px rgba(255,106,0,.11),0 0 22px rgba(255,106,0,.7);
  animation:lulyHeroPulse 2.4s ease-in-out infinite;
}

.luly-orbit-title{
  margin:.72rem 0 1rem;
  font-size:clamp(3.35rem,6.25vw,7.1rem);
  line-height:.87;
  letter-spacing:-.07em;
  font-weight:900;
  max-width:780px;
  text-wrap:balance;
}
.luly-orbit-title .impact{
  display:block;
  color:transparent;
  background:linear-gradient(100deg,#fff 10%,#ffb16e 42%,#ff6a00 72%,#fff 112%);
  background-size:180% 100%;
  -webkit-background-clip:text;
    background-clip:text;
  filter:drop-shadow(0 8px 28px rgba(255,106,0,.08));
  animation:lulyHeroShimmer 5.5s ease-in-out infinite;
}

.luly-orbit-sub{
  color:rgba(255,255,255,.72);
  max-width:590px;
  font-size:clamp(1rem,1.32vw,1.18rem);
  line-height:1.75;
}

.luly-orbit-copy .hero-actions{
    margin-top:1.55rem;
    display:flex;
    gap:.8rem;
    flex-wrap:wrap}
.luly-orbit-copy .hero-metrics{
    margin-top:1.3rem}

.luly-orbit-signal{
  margin-top:1.2rem;
  display:flex;
    align-items:center;
    gap:10px;
  color:rgba(255,255,255,.44);
  font-size:.75rem;
    letter-spacing:.13em;
    text-transform:uppercase;
}
.luly-orbit-signal i{
    display:block;
    width:52px;
    height:1px;
    background:linear-gradient(90deg,var(--luly-orange),transparent);
    position:relative}
.luly-orbit-signal i::after{
    content:"";
    position:absolute;
    left:0;
    top:-2px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#ff8f34;
    box-shadow:0 0 10px #ff6a00;
    animation:lulySignal 2s ease-in-out infinite}

.luly-orbit-stage-wrap{
  position:relative;
  height:min(72vh,760px);
  min-height:590px;
  perspective:1450px;
  perspective-origin:52% 44%;
  z-index:7;
}

.luly-orbit-stage{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transform:rotateX(var(--stage-rx,0deg)) rotateY(var(--stage-ry,0deg)) rotateZ(var(--stage-rz,0deg)) translate3d(var(--stage-x,0px),var(--stage-y,0px),0);
  transition:transform .1s linear;
  will-change:transform;
}

.luly-orbit-halo{
  position:absolute;
    left:50%;
    top:48%;
    width:min(43vw,540px);
    aspect-ratio:1;
  transform:translate(-50%,-50%) translateZ(-120px);
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,115,20,.18) 0,rgba(255,106,0,.07) 31%,rgba(255,106,0,.015) 52%,transparent 72%);
  filter:blur(1px);
  box-shadow:0 0 130px rgba(255,106,0,.06);
}
.luly-orbit-halo::before,.luly-orbit-halo::after{
  content:"";
    position:absolute;
    inset:9%;
    border-radius:50%;
    border:1px solid rgba(255,130,34,.18);
  box-shadow:0 0 40px rgba(255,106,0,.045),inset 0 0 30px rgba(255,106,0,.04);
}
.luly-orbit-halo::before{
    transform:rotateX(67deg) rotateZ(12deg);
    animation:lulyRingA 13s linear infinite}
.luly-orbit-halo::after{
    inset:20%;
    border-color:rgba(255,255,255,.08);
    transform:rotateY(72deg) rotateZ(-10deg);
    animation:lulyRingB 10s linear infinite reverse}

.luly-orbit-core{
  position:absolute;
    left:50%;
    top:48%;
    width:clamp(124px,12.5vw,186px);
    aspect-ratio:1;
  transform-style:preserve-3d;
  transform:translate(-50%,-50%) translate3d(var(--core-x,0px),var(--core-y,0px),var(--core-z,80px)) rotateX(var(--core-rx,-8deg)) rotateY(var(--core-ry,14deg));
  z-index:20;
  will-change:transform;
  transition:filter .2s ease;
  filter:drop-shadow(0 26px 45px rgba(0,0,0,.46)) drop-shadow(0 0 24px rgba(255,106,0,.17));
}
.luly-orbit-core .core-slice,.luly-orbit-core .core-face{
  position:absolute;
    inset:0;
    border-radius:29%;
  background:url('../img/luly-logo-token.png') center/cover no-repeat;
  backface-visibility:hidden;
}
.luly-orbit-core .core-slice.s1{
    transform:translateZ(-15px);
    filter:brightness(.22) saturate(.7)}
.luly-orbit-core .core-slice.s2{
    transform:translateZ(-11px);
    filter:brightness(.31) saturate(.8)}
.luly-orbit-core .core-slice.s3{
    transform:translateZ(-7px);
    filter:brightness(.42) saturate(.9)}
.luly-orbit-core .core-slice.s4{
    transform:translateZ(-3px);
    filter:brightness(.58)}
.luly-orbit-core .core-face{
    transform:translateZ(2px);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.luly-orbit-core::before{
  content:"";
    position:absolute;
    inset:-26%;
    border:1px solid rgba(255,122,30,.28);
    border-radius:50%;
  transform:translateZ(-22px) rotateX(66deg);
    box-shadow:0 0 30px rgba(255,106,0,.09);
    animation:lulyCoreOrbit 8s linear infinite;
}
.luly-orbit-core::after{
  content:"";
    position:absolute;
    left:12%;
    right:12%;
    bottom:-34%;
    height:17%;
    border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,106,0,.33),transparent 68%);
    filter:blur(11px);
    transform:rotateX(76deg) translateZ(-40px);
}

.luly-orbit-card{
  --card-x:0px;
    --card-y:0px;
    --card-z:0px;
    --card-rz:0deg;
    --card-rx:0deg;
    --card-ry:0deg;
    --card-scale:1;
    --card-opacity:1;
  position:absolute;
    left:50%;
    top:48%;
  --card-width:clamp(210px,22vw,330px);
  width:var(--card-width);
  aspect-ratio:16/9;
  margin-left:calc(var(--card-width) / -2);
  margin-top:calc(var(--card-width) * -.28125);
  border-radius:18px;
  transform-style:preserve-3d;
  transform:translate3d(var(--card-x),var(--card-y),var(--card-z)) rotateX(var(--card-rx)) rotateY(var(--card-ry)) rotateZ(var(--card-rz)) scale(var(--card-scale));
  opacity:var(--card-opacity);
  overflow:visible;
  z-index:var(--card-zindex,8);
  will-change:transform,opacity;
  text-decoration:none;
  color:#fff;
  outline:none;
}
.luly-orbit-card::before{
  content:"";
    position:absolute;
    inset:-1px;
    border-radius:19px;
    z-index:-1;
  background:linear-gradient(135deg,rgba(255,255,255,.23),rgba(255,106,0,.5) 38%,rgba(255,255,255,.04) 70%);
  filter:blur(.1px);
}
.luly-orbit-card::after{
  content:"";
    position:absolute;
    inset:8% 4% -13%;
    border-radius:50%;
    z-index:-2;
  background:rgba(255,106,0,.22);
    filter:blur(22px);
    opacity:.45;
    transform:translateZ(-45px);
}
.luly-orbit-card-inner{
  position:absolute;
    inset:1px;
    border-radius:17px;
    overflow:hidden;
    background:#111;
  box-shadow:0 24px 55px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.06);
  transform:translateZ(1px);
}
.luly-orbit-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:filter .28s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.luly-orbit-card .card-shade{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.8));
    pointer-events:none}
.luly-orbit-card .card-glare{
    position:absolute;
    inset:-40%;
    background:linear-gradient(112deg,transparent 32%,rgba(255,255,255,.15) 45%,rgba(255,151,70,.13) 51%,transparent 64%);
    transform:translateX(var(--glare-x,-35%)) rotate(4deg);
    mix-blend-mode:screen;
    pointer-events:none;
    transition:transform .18s ease}
.luly-orbit-card .card-meta{
    position:absolute;
    left:15px;
    right:15px;
    bottom:12px;
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:10px;
    z-index:3;
    text-shadow:0 2px 10px #000}
.luly-orbit-card .card-meta strong{
    display:block;
    font-size:.85rem;
    letter-spacing:.04em}
.luly-orbit-card .card-meta span{
    display:block;
    font-size:.62rem;
    color:rgba(255,255,255,.67);
    text-transform:uppercase;
    letter-spacing:.11em;
    margin-top:2px}
.luly-orbit-card .card-index{
    font-size:.6rem!important;
    color:#ff9c4c!important;
    border:1px solid rgba(255,130,40,.33);
    background:rgba(8,8,10,.62);
    padding:5px 7px;
    border-radius:999px;
    backdrop-filter:blur(7px)}
.luly-orbit-card:hover,.luly-orbit-card:focus-visible{
    z-index:40!important}
.luly-orbit-card:hover img,.luly-orbit-card:focus-visible img{
    transform:scale(1.035);
    filter:saturate(1.08) contrast(1.035)}

.luly-orbit-card[data-card="featured"]{
  --card-width:clamp(240px,25vw,378px);
}
.luly-orbit-card[data-card="featured"] .luly-orbit-card-inner{
  transform:none;
}
.luly-orbit-card[data-card="featured"] img{
  image-rendering:auto;
  backface-visibility:visible;
}

.luly-orbit-caption{
  position:absolute;
    right:2%;
    bottom:4%;
    z-index:30;
  display:flex;
    align-items:center;
    gap:10px;
  font-size:.68rem;
    text-transform:uppercase;
    letter-spacing:.14em;
    color:rgba(255,255,255,.52);
  opacity:var(--caption-opacity,.8);
}
.luly-orbit-caption b{
    color:#ff8b2d;
    font-weight:700}
.luly-orbit-caption::before{
    content:"";
    width:42px;
    height:1px;
    background:linear-gradient(90deg,transparent,#ff6a00)}

.luly-orbit-scrollcue{
    display:none!important;
  position:absolute;
    left:50%;
    bottom:22px;
    z-index:30;
    transform:translateX(-50%);
  display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    color:rgba(255,255,255,.45);
  font-size:.6rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    pointer-events:none;
  opacity:var(--cue-opacity,1);
}
.luly-orbit-scrollcue i{
    position:relative;
    width:1px;
    height:34px;
    background:rgba(255,255,255,.13);
    overflow:hidden}
.luly-orbit-scrollcue i::after{
    content:"";
    position:absolute;
    left:0;
    top:-12px;
    width:1px;
    height:12px;
    background:#ff7b1a;
    box-shadow:0 0 9px #ff6a00;
    animation:lulyScrollCue 1.8s ease-in-out infinite}

.luly-orbit-progress{
  position:absolute;
    right:clamp(16px,2.5vw,42px);
    top:50%;
    z-index:32;
    transform:translateY(-50%);
  width:2px;
    height:112px;
    background:rgba(255,255,255,.08);
    border-radius:10px;
    overflow:hidden;
}
.luly-orbit-progress span{
    display:block;
    width:100%;
    height:calc(var(--hero-progress,0) * 100%);
    background:linear-gradient(#ffb46f,#ff6a00);
    box-shadow:0 0 12px rgba(255,106,0,.7);
    border-radius:10px}

.luly-orbit-handoff{
  position:absolute;
    left:50%;
    top:48%;
    z-index:18;
  width:min(54vw,720px);
    aspect-ratio:16/9;
  transform:translate(-50%,-50%) translate3d(0,var(--handoff-y,150px),var(--handoff-z,-320px)) scale(var(--handoff-scale,.5));
  opacity:var(--handoff-opacity,0);
    border-radius:22px;
    overflow:hidden;
  box-shadow:0 45px 110px rgba(0,0,0,.65),0 0 0 1px rgba(255,130,38,.25),0 0 80px rgba(255,106,0,.11);
  pointer-events:none;
}
.luly-orbit-handoff img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block}
.luly-orbit-handoff::after{
    content:"SELECTED WORK";
    position:absolute;
    left:16px;
    bottom:13px;
    color:#fff;
    font-size:.65rem;
    letter-spacing:.17em;
    background:rgba(5,5,7,.7);
    border:1px solid rgba(255,255,255,.12);
    padding:6px 9px;
    border-radius:999px;
    backdrop-filter:blur(8px)}

.luly-orbit-hero.is-ready .luly-orbit-core{
    animation:lulyCoreEnter 1.05s cubic-bezier(.16,.8,.24,1)}
.luly-orbit-hero.is-ready .luly-orbit-card{
    animation:lulyCardEnter 1.1s cubic-bezier(.16,.85,.22,1);
    animation-delay:calc(.14s + var(--enter-i,0) * .09s);
    animation-fill-mode:backwards}
.luly-orbit-hero.is-ready .luly-orbit-copy{
    animation:lulyCopyEnter .85s cubic-bezier(.2,.8,.2,1) .08s backwards}

@keyframes lulyCardEnter{
    from{
        opacity:0;
        filter:blur(8px);
        transform:translate3d(calc(var(--card-x) * .15),calc(var(--card-y) * .15),-650px) rotateX(12deg) rotateY(-18deg) scale(.35)}
    to{
        opacity:var(--card-opacity);
        filter:blur(0);
        transform:translate3d(var(--card-x),var(--card-y),var(--card-z)) rotateX(var(--card-rx)) rotateY(var(--card-ry)) rotateZ(var(--card-rz)) scale(var(--card-scale))}
    }
@keyframes lulyCoreEnter{
    from{
        opacity:0;
        filter:blur(15px);
        transform:translate(-50%,-50%) translateZ(-620px) rotateX(-35deg) rotateY(120deg) scale(.2)}
    to{
        opacity:1;
        filter:drop-shadow(0 26px 45px rgba(0,0,0,.46)) drop-shadow(0 0 24px rgba(255,106,0,.17));
        transform:translate(-50%,-50%) translate3d(var(--core-x,0px),var(--core-y,0px),var(--core-z,80px)) rotateX(var(--core-rx,-8deg)) rotateY(var(--core-ry,14deg)) scale(1)}
    }
@keyframes lulyCopyEnter{
    from{
        opacity:0;
        transform:translateY(26px)}
    to{
        opacity:1;
        transform:translateY(0)}
    }
@keyframes lulyHeroPulse{
    50%{
        box-shadow:0 0 0 8px rgba(255,106,0,.04),0 0 29px rgba(255,106,0,.9)}
    }
@keyframes lulyHeroShimmer{
    0%,100%{
        background-position:0 50%}
    50%{
        background-position:100% 50%}
    }
@keyframes lulySignal{
    0%{
        transform:translateX(0);
        opacity:.2}
    50%{
        opacity:1}
    100%{
        transform:translateX(47px);
        opacity:0}
    }
@keyframes lulyRingA{
    to{
        transform:rotateX(67deg) rotateZ(372deg)}
    }
@keyframes lulyRingB{
    to{
        transform:rotateY(72deg) rotateZ(350deg)}
    }
@keyframes lulyCoreOrbit{
    to{
        transform:translateZ(-22px) rotateX(66deg) rotateZ(360deg)}
    }
@keyframes lulyScrollCue{
    0%{
        transform:translateY(0);
        opacity:0}
    25%{
        opacity:1}
    100%{
        transform:translateY(44px);
        opacity:0}
    }

@media (max-width:1100px){
  .luly-orbit-hero{
        height:142vh}
  .luly-orbit-layout{
        grid-template-columns:minmax(300px,.9fr) minmax(440px,1.1fr);
        gap:22px}
  .luly-orbit-stage-wrap{
        height:min(66vh,650px);
        min-height:540px}
  .luly-orbit-title{
        font-size:clamp(3.2rem,6.4vw,5.8rem)}
}

@media (max-width:860px){
  .luly-orbit-hero{
        height:auto;
        min-height:0;
        overflow:hidden}
  .luly-orbit-sticky{
        position:relative;
        height:auto;
        min-height:0;
        padding:128px 0 70px;
        overflow:hidden}
  .luly-orbit-layout{
        grid-template-columns:1fr;
        gap:28px}
  .luly-orbit-copy{
        text-align:center;
        margin:0 auto;
        max-width:680px}
  .luly-orbit-copy .hero-actions,.luly-orbit-copy .hero-metrics{
        justify-content:center}
  .luly-orbit-copy .luly-orbit-signal{
        justify-content:center}
  .luly-orbit-title{
        font-size:clamp(3.2rem,12vw,5.8rem)}
  .luly-orbit-sub{
        margin-inline:auto}
  .luly-orbit-stage-wrap{
        height:min(70vw,560px);
        min-height:430px;
        width:min(100%,720px);
        margin:0 auto}
  .luly-orbit-progress,.luly-orbit-scrollcue{
        display:none!important;
        display:none}
  .luly-orbit-caption{
        right:7%;
        bottom:0}
  .luly-orbit-handoff{
        display:none}
}

@media (max-width:560px){
  .luly-orbit-sticky{
        padding-top:116px;
        padding-bottom:46px}
  .luly-orbit-title{
        font-size:clamp(3rem,15vw,4.8rem);
        line-height:.91}
  .luly-orbit-sub{
        font-size:.96rem;
        line-height:1.65}
  .luly-orbit-stage-wrap{
        height:380px;
        min-height:380px;
        margin-top:4px}
  .luly-orbit-card{
        width:190px;
        margin-left:-95px;
        margin-top:-53px;
        border-radius:13px}
  .luly-orbit-card[data-card="featured"]{
        width:214px;
        margin-left:-107px;
        margin-top:-60px}
  .luly-orbit-card-inner{
        border-radius:12px}
    .luly-orbit-card::before{
        border-radius:13px}
  .luly-orbit-core{
        width:108px}
    .luly-orbit-caption{
        font-size:.58rem;
        right:5%}
  .luly-orbit-copy .hero-metrics{
        display:none}
}

@media (pointer:coarse){
  .luly-orbit-stage{
        transition:transform .28s ease}
  .luly-orbit-card .card-glare{
        display:none}
}

@media (prefers-reduced-motion:reduce){
  .luly-orbit-hero{
        height:auto;
        min-height:0}
  .luly-orbit-sticky{
        position:relative;
        height:auto;
        min-height:760px}
  .luly-orbit-core,.luly-orbit-card,.luly-orbit-copy,.luly-orbit-halo::before,.luly-orbit-halo::after,.luly-orbit-core::before,.luly-orbit-title .impact,.luly-orbit-copy .eyebrow::before{
        animation:none!important}
  .luly-orbit-stage{
        transform:none!important}
  .luly-orbit-scrollcue,.luly-orbit-progress{
        display:none}
}

/* Refined hero pass */
.luly-orbit-signal{
    display:none!important;
    }
.luly-orbit-handoff{
    display:none!important;
    }
.luly-orbit-caption{
    gap:10px;
    letter-spacing:.14em;
    opacity:.72}
.luly-orbit-caption b{
    color:#ff8b2d;
    font-weight:800;
    text-transform:none}
.luly-orbit-caption::before{
    width:34px}
.luly-orbit-caption span{
    display:none!important;
    }