/* ============================================================
   LULYGraphics 3D Lab preview
   Modular visual layer: hero emblem, dimensional cards,
   portfolio layer stack, order CTA, footer token.
   ============================================================ */

:root{
  --l3d-orange:#ff6a00;
  --l3d-orange2:#ff9b48;
  --l3d-ink:#070504;
  --l3d-border:rgba(255,139,42,.25);
}

/* ---------- shared pointer-responsive 3D cards ---------- */
.l3d-card{
  --l3d-rx:0deg;
  --l3d-ry:0deg;
  --l3d-glare-x:50%;
  --l3d-glare-y:50%;
  position:relative;
  transform-style:preserve-3d;
  transform:perspective(1000px) rotateX(var(--l3d-rx)) rotateY(var(--l3d-ry)) translateY(var(--l3d-lift,0px));
  transition:transform .18s ease-out,border-color .25s ease,box-shadow .25s ease;
  will-change:transform;
}
.l3d-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(circle at var(--l3d-glare-x) var(--l3d-glare-y),rgba(255,255,255,.12),rgba(255,122,20,.045) 22%,transparent 44%);
  opacity:var(--l3d-glare,.0);
  transition:opacity .2s ease;
  z-index:7;
  mix-blend-mode:screen;
}
.l3d-card:hover{--l3d-lift:-7px;--l3d-glare:.8}
.l3d-card .luly-service-icon,
.l3d-card .bento-kicker,
.l3d-card h3{transform:translateZ(18px)}
.l3d-card p{transform:translateZ(9px)}

/* Do not let legacy hover transforms overwrite the 3D transform. */
.luly-service-card.l3d-card:hover,
.creator-bento-card.l3d-card:hover{
  transform:perspective(1000px) rotateX(var(--l3d-rx)) rotateY(var(--l3d-ry)) translateY(-7px)!important;
}

/* ---------- Hero: extruded L token + orbital depth ---------- */
.luly-wordmark-preview.l3d-hero-ready{perspective:1200px}
.luly-wordmark-preview.l3d-hero-ready .luly-wordmark-stage{
  --hero-rx:0deg;
  --hero-ry:0deg;
  transform-style:preserve-3d;
  transform:rotateX(var(--hero-rx)) rotateY(var(--hero-ry));
  transition:transform .18s ease-out;
}
.luly-wordmark-preview.l3d-hero-ready .luly-letter-line{
  transform:translateY(56px) translateZ(42px);
}
.luly-wordmark-preview.l3d-hero-ready .luly-wordmark-glow{
  transform:translateZ(-30px) scale(.45);
}

.hero-3d-emblem{
  --hero-logo-rx:-10deg;
  --hero-logo-ry:18deg;
  position:absolute;
  z-index:4;
  left:50%;
  top:42%;
  width:clamp(118px,14vw,168px);
  aspect-ratio:1;
  transform:translate3d(-50%,-76%,92px);
  transform-style:preserve-3d;
  pointer-events:none;
}
.hero-3d-token{
  position:absolute;
  inset:10%;
  transform-style:preserve-3d;
  transform:rotateX(var(--hero-logo-rx)) rotateY(var(--hero-logo-ry)) rotateZ(-2deg);
  animation:l3dHeroFloat 4.8s ease-in-out infinite;
  filter:drop-shadow(0 26px 26px rgba(0,0,0,.54));
}
.hero-3d-slice,
.hero-3d-face{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:24%;
  object-fit:cover;
  backface-visibility:hidden;
}
.hero-3d-slice{
  background:url('../img/luly-logo-token.png') center/cover no-repeat;
  transform:translateZ(calc(var(--slice) * -2.5px));
  filter:brightness(calc(.44 + var(--slice) * .018)) saturate(.95);
  opacity:.98;
}
.hero-3d-face{
  transform:translateZ(5px);
  filter:saturate(1.16) contrast(1.06) drop-shadow(0 0 14px rgba(255,106,0,.42));
}
.hero-3d-ring{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(255,139,42,.24);
  box-shadow:inset 0 0 28px rgba(255,106,0,.055),0 0 32px rgba(255,106,0,.07);
  transform-style:preserve-3d;
}
.hero-3d-ring.r1{transform:rotateX(72deg) rotateZ(12deg) translateZ(-6px);animation:l3dOrbitA 7.5s linear infinite}
.hero-3d-ring.r2{inset:-8%;border-color:rgba(255,255,255,.08);transform:rotateY(72deg) rotateZ(-18deg) translateZ(-12px);animation:l3dOrbitB 9.5s linear infinite reverse}
.hero-3d-particle{position:absolute;width:6px;height:6px;border-radius:50%;background:#ff8b2a;box-shadow:0 0 10px #ff6a00,0 0 24px rgba(255,106,0,.75)}
.hero-3d-particle.p1{left:5%;top:28%;transform:translateZ(60px)}
.hero-3d-particle.p2{right:2%;top:58%;width:4px;height:4px;transform:translateZ(20px)}
.hero-3d-particle.p3{left:43%;bottom:-4%;width:3px;height:3px;transform:translateZ(78px)}
.hero-3d-shadow{position:absolute;left:12%;right:12%;bottom:-8%;height:20%;border-radius:50%;background:radial-gradient(ellipse,rgba(255,106,0,.34),transparent 66%);filter:blur(10px);transform:rotateX(76deg) translateZ(-45px)}
@keyframes l3dHeroFloat{0%,100%{translate:0 0}50%{translate:0 -8px}}
@keyframes l3dOrbitA{to{rotate:0 0 1 360deg}}
@keyframes l3dOrbitB{to{rotate:0 1 0 360deg}}

/* ---------- Portfolio: exploded layered thumbnail ---------- */
.luly-layered-thumbnail{position:relative;overflow:hidden;background:radial-gradient(circle at 72% 30%,rgba(255,106,0,.10),transparent 30rem),#070707}
.layered-thumb-shell{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,70px);align-items:center}
.layered-thumb-copy h2{font-size:clamp(2rem,4.5vw,4.2rem);line-height:.98;letter-spacing:-.055em;font-weight:900;margin:.8rem 0 1rem}
.layered-thumb-copy p{color:#aaa;line-height:1.75;max-width:56ch}
.layered-thumb-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.layered-thumb-legend span{font-size:.72rem;color:#c9c9c9;border:1px solid rgba(255,255,255,.08);background:#0b0b0b;padding:8px 10px;border-radius:999px}.layered-thumb-legend b{color:#ff8b2a;margin-right:5px}
.layered-thumb-stage{
  --lt-rx:-3deg;--lt-ry:-8deg;--lt-x:0px;--lt-y:0px;
  position:relative;
  min-height:clamp(410px,47vw,620px);
  perspective:1350px;
  isolation:isolate;
}
.layered-thumb-space{
  position:absolute;
  inset:8% 2% 8% 2%;
  transform-style:preserve-3d;
  transform:rotateX(var(--lt-rx)) rotateY(var(--lt-ry)) translate3d(var(--lt-x),var(--lt-y),0);
  transition:transform .16s ease-out;
}
.layered-plane{position:absolute;inset:12% 5%;border-radius:25px;overflow:hidden;border:1px solid rgba(255,255,255,.10);box-shadow:0 30px 80px rgba(0,0,0,.48);transform-style:preserve-3d;transition:transform .38s cubic-bezier(.2,.8,.2,1),filter .38s ease;backface-visibility:hidden}
.layered-plane img{width:100%;height:100%;object-fit:cover;display:block}
.layered-plane.layer-base{transform:translate3d(-24px,18px,-70px) rotateZ(-1.8deg);filter:brightness(.46) saturate(.64);opacity:.72}
.layered-plane.layer-scene{transform:translate3d(-10px,8px,-26px) rotateZ(-.7deg);filter:brightness(.73) saturate(.86);clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.layered-plane.layer-focus{transform:translate3d(12px,-8px,38px) rotateZ(.7deg);clip-path:ellipse(34% 48% at 36% 52%);filter:saturate(1.12) contrast(1.07) brightness(1.03);border-color:rgba(255,139,42,.18)}
.layered-plane.layer-effects{transform:translate3d(26px,-18px,78px) rotateZ(1.5deg);clip-path:polygon(42% 0,100% 0,100% 100%,56% 100%,72% 70%,53% 40%);mix-blend-mode:screen;filter:saturate(1.45) contrast(1.12) brightness(1.14);opacity:.68;border-color:rgba(255,139,42,.22)}
.layered-thumb-stage:hover .layer-base{transform:translate3d(-44px,28px,-92px) rotateZ(-3deg)}
.layered-thumb-stage:hover .layer-scene{transform:translate3d(-18px,12px,-34px) rotateZ(-1.2deg)}
.layered-thumb-stage:hover .layer-focus{transform:translate3d(22px,-13px,58px) rotateZ(1.3deg)}
.layered-thumb-stage:hover .layer-effects{transform:translate3d(42px,-24px,102px) rotateZ(2.3deg)}
.layered-plane-label{position:absolute;left:16px;top:16px;padding:7px 9px;border-radius:999px;background:rgba(5,5,5,.72);border:1px solid rgba(255,139,42,.20);color:#ff9b48;font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;font-weight:800;backdrop-filter:blur(8px)}
.layered-depth-axis{position:absolute;z-index:-1;left:50%;top:8%;bottom:8%;width:1px;background:linear-gradient(transparent,rgba(255,106,0,.35),transparent);transform:translateX(-50%) rotate(19deg);box-shadow:0 0 16px rgba(255,106,0,.3)}
.layered-depth-axis::before,.layered-depth-axis::after{content:"";position:absolute;left:50%;width:8px;height:8px;border-radius:50%;background:#ff6a00;box-shadow:0 0 18px rgba(255,106,0,.8);transform:translateX(-50%)}.layered-depth-axis::before{top:8%}.layered-depth-axis::after{bottom:8%}

/* ---------- Order: dimensional CTA ---------- */
.luly-order-3d-cta{position:relative;overflow:hidden}
.order-3d-card{
  --cta-rx:0deg;--cta-ry:0deg;
  position:relative;
  min-height:280px;
  padding:clamp(26px,4vw,48px);
  border-radius:34px;
  border:1px solid rgba(255,139,42,.26);
  background:radial-gradient(circle at 78% 22%,rgba(255,106,0,.14),transparent 26rem),linear-gradient(145deg,#11100f,#060504 70%);
  box-shadow:0 34px 100px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.06);
  perspective:1200px;
  transform:rotateX(var(--cta-rx)) rotateY(var(--cta-ry));
  transform-style:preserve-3d;
  transition:transform .17s ease-out,border-color .25s ease,box-shadow .25s ease;
}
.order-3d-card:hover{border-color:rgba(255,139,42,.42);box-shadow:0 38px 110px rgba(0,0,0,.44),0 0 50px rgba(255,106,0,.10),inset 0 1px 0 rgba(255,255,255,.08)}
.order-3d-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.66fr);gap:32px;align-items:center;transform-style:preserve-3d}
.order-3d-copy{transform:translateZ(36px)}
.order-3d-copy h2{font-size:clamp(2rem,4vw,3.7rem);line-height:.98;letter-spacing:-.055em;font-weight:900;margin:.75rem 0 1rem}
.order-3d-copy p{color:#aaa;max-width:58ch;line-height:1.7}
.order-3d-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.order-3d-actions .btn{position:relative;transform:translateZ(26px);box-shadow:0 10px 0 rgba(95,35,0,.68),0 18px 32px rgba(0,0,0,.28);transition:transform .16s ease,box-shadow .16s ease}
.order-3d-actions .btn:hover{transform:translateZ(30px) translateY(-3px);box-shadow:0 13px 0 rgba(95,35,0,.64),0 22px 38px rgba(0,0,0,.32)}
.order-3d-actions .btn:active{transform:translateZ(17px) translateY(5px);box-shadow:0 4px 0 rgba(95,35,0,.7),0 10px 18px rgba(0,0,0,.28)}
.order-3d-mini-stack{position:relative;min-height:190px;transform-style:preserve-3d;transform:translateZ(30px)}
.order-mini-card{position:absolute;left:50%;top:50%;width:min(260px,90%);min-height:104px;padding:16px;border-radius:20px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(145deg,rgba(24,22,20,.98),rgba(7,7,7,.98));box-shadow:0 22px 48px rgba(0,0,0,.38);transform-style:preserve-3d}
.order-mini-card:nth-child(1){transform:translate3d(-58%,-70%,10px) rotate(-7deg)}
.order-mini-card:nth-child(2){transform:translate3d(-47%,-48%,48px) rotate(3deg);border-color:rgba(255,106,0,.22)}
.order-mini-card:nth-child(3){transform:translate3d(-55%,-27%,82px) rotate(-2deg)}
.order-mini-card span{display:block;color:#767676;font-size:.65rem;text-transform:uppercase;letter-spacing:.12em}.order-mini-card strong{display:block;color:#f7eee7;margin-top:6px;font-size:.92rem}.order-mini-card i{display:block;margin-top:12px;height:6px;border-radius:99px;background:linear-gradient(90deg,#ff6a00 var(--fill,66%),#232323 var(--fill,66%))}

/* ---------- Footer: small 3D emblem ---------- */
.footer-brand.l3d-footer-brand{perspective:700px;transform-style:preserve-3d}
.footer-3d-mark{position:relative;width:40px;height:40px;display:inline-block;transform-style:preserve-3d;transform:rotateX(-8deg) rotateY(13deg);transition:transform .25s ease;filter:drop-shadow(0 8px 10px rgba(0,0,0,.4))}
.footer-brand:hover .footer-3d-mark{transform:rotateX(-13deg) rotateY(28deg) translateY(-2px)}
.footer-3d-mark img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;border-radius:10px!important;margin:0!important}
.footer-3d-mark img:nth-child(1){transform:translateZ(-8px);filter:brightness(.42)}
.footer-3d-mark img:nth-child(2){transform:translateZ(-4px);filter:brightness(.58)}
.footer-3d-mark img:nth-child(3){transform:translateZ(0);filter:saturate(1.08)}

/* ---------- Subtle dimensional button feedback ---------- */
.luly-btn-primary.l3d-button,.luly-nav-order.l3d-button{transform-style:preserve-3d;box-shadow:0 6px 0 rgba(99,37,0,.6),0 14px 26px rgba(0,0,0,.24)!important}
.luly-btn-primary.l3d-button:hover,.luly-nav-order.l3d-button:hover{transform:translateY(-3px)!important;box-shadow:0 9px 0 rgba(99,37,0,.56),0 18px 32px rgba(0,0,0,.28)!important}
.luly-btn-primary.l3d-button:active,.luly-nav-order.l3d-button:active{transform:translateY(3px)!important;box-shadow:0 2px 0 rgba(99,37,0,.64),0 8px 14px rgba(0,0,0,.24)!important}

@media(max-width:991.98px){
  .layered-thumb-shell,.order-3d-grid{grid-template-columns:1fr}
  .layered-thumb-copy{text-align:center}.layered-thumb-copy p{margin-left:auto;margin-right:auto}.layered-thumb-legend{justify-content:center}
  .hero-3d-emblem{width:126px;top:43%}.luly-wordmark-preview.l3d-hero-ready .luly-letter-line{transform:translateY(58px) translateZ(36px)}
  .order-3d-mini-stack{min-height:170px}
}
@media(max-width:575.98px){
  .hero-3d-emblem{width:102px;top:42%}.luly-wordmark-preview.l3d-hero-ready .luly-letter-line{transform:translateY(48px) translateZ(24px)}
  .layered-thumb-stage{min-height:360px}.layered-thumb-space{inset:9% -2%}.layered-plane{inset:14% 8%;border-radius:18px}
  .order-3d-card{border-radius:25px;padding:23px}.order-3d-actions{display:grid}.order-3d-actions .btn{width:100%}
}
@media(pointer:coarse){
  .l3d-card{transform:none!important}.l3d-card::before{display:none}
  .order-3d-card{transform:none!important}
  .layered-thumb-space{transform:rotateX(-2deg) rotateY(-5deg)}
}
@media(prefers-reduced-motion:reduce){
  .hero-3d-token,.hero-3d-ring{animation:none!important}
  .l3d-card,.luly-wordmark-stage,.layered-thumb-space,.layered-plane,.order-3d-card,.footer-3d-mark{transition:none!important}
  .luly-wordmark-preview.l3d-hero-ready .luly-wordmark-stage,.l3d-card,.order-3d-card{transform:none!important}
}