/* =========================================================
   AL JAMEEL GRANITE — 3D MOTION LAYER
   Adds genuine 3D transforms (rotateX/Y/Z + perspective) on
   top of the existing design system. Loaded after style.css.
   ========================================================= */

/* ---------------------------------------------------------
   1. CURSOR-TRACKED 3D TILT
   Applied via JS (see js/tilt3d.js) to any element with
   class "tilt-3d". JS updates --rx / --ry per mouse position.
   --------------------------------------------------------- */
.tilt-3d{
  --rx:0deg;
  --ry:0deg;

  transform: perspective(1200px)
             rotateX(calc(var(--rx) * .35))
             rotateY(calc(var(--ry) * .35));

  transform-style: preserve-3d;
  transition: transform .35s ease;
}
.tilt-3d.is-tilting{ transition: transform .08s linear; }
.tilt-3d > *{ transform: translateZ(1px); }

@media (prefers-reduced-motion: reduce), (hover: none){
  .tilt-3d{ transform:none !important; transition:none !important; }
}

/* ---------------------------------------------------------
   2. FLOATING STONE — a real 3D model, not a flat illustration.
   Six faces, each textured with one of the client's own marble
   / granite photos, tumbling on two axes in true 3D space.
   --------------------------------------------------------- */
.floating-rock-wrap{
  position:absolute;
  z-index:5;
  pointer-events:none;
  perspective: 900px;
}
.stone-cube-3d{
  width: 110px;
  height: 110px;
  position: relative;
  transform-style: preserve-3d;
  animation: stoneCubeTumble 15s linear infinite;
  filter: drop-shadow(0 30px 30px rgba(0,0,0,.4));
}
.cube-face{
  position:absolute;
  inset:0;
  width:110px;
  height:110px;
  background-size: cover;
  background-position: center;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.2);
  backface-visibility: hidden;
}
.face-front { transform: translateZ(55px); }
.face-back  { transform: rotateY(180deg) translateZ(55px); filter: brightness(.7); }
.face-right { transform: rotateY(90deg)  translateZ(55px); filter: brightness(.85); }
.face-left  { transform: rotateY(-90deg) translateZ(55px); filter: brightness(.85); }
.face-top   { transform: rotateX(90deg)  translateZ(55px); filter: brightness(1.18); }
.face-bottom{ transform: rotateX(-90deg) translateZ(55px); filter: brightness(.6); }

@keyframes stoneCubeTumble{
  0%   { transform: rotateX(0deg)   rotateY(0deg); }
  100% { transform: rotateX(360deg) rotateY(360deg); }
}
@media (prefers-reduced-motion: reduce){
  .stone-cube-3d{ animation:none; transform: rotateX(-16deg) rotateY(26deg); }
}
@media (max-width: 767px){
  .floating-rock-wrap{ display:none; }
}

/* ---------------------------------------------------------
   3. DIAL BADGE — spins as a 3D coin instead of a flat 2D ring
   --------------------------------------------------------- */
.dial-badge{ perspective: 700px; }
.dial-badge svg.dial-ring{
  animation: dialSpin3d 16s linear infinite;
  transform-style: preserve-3d;
}
@keyframes dialSpin3d{
  from{ transform: rotateY(0deg); }
  to{ transform: rotateY(360deg); }
}
.dial-badge:hover svg.dial-ring{ animation-duration: 5s; }
@media (prefers-reduced-motion: reduce){
  .dial-badge svg.dial-ring{ animation:none; }
}

/* ---------------------------------------------------------
   4. 3D FLIP-IN REVEALS — for cards / filmstrip / swatches
   --------------------------------------------------------- */
.reveal-flip3d{
  opacity:0;
  transform: perspective(1200px) rotateY(55deg) translateZ(-70px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}
.reveal-flip3d.is-visible{
  opacity:1;
  transform: perspective(1200px) rotateY(0deg) translateZ(0);
}
.reveal-stagger-3d > *{
  opacity:0;
  transform: perspective(1200px) rotateY(45deg) translateZ(-50px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal-stagger-3d.is-visible > *{
  opacity:1;
  transform: perspective(1200px) rotateY(0deg) translateZ(0);
}
.reveal-stagger-3d.is-visible > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger-3d.is-visible > *:nth-child(2){ transition-delay:.13s; }
.reveal-stagger-3d.is-visible > *:nth-child(3){ transition-delay:.21s; }
.reveal-stagger-3d.is-visible > *:nth-child(4){ transition-delay:.29s; }
.reveal-stagger-3d.is-visible > *:nth-child(5){ transition-delay:.37s; }
.reveal-stagger-3d.is-visible > *:nth-child(6){ transition-delay:.45s; }
@media (prefers-reduced-motion: reduce){
  .reveal-flip3d, .reveal-stagger-3d > *{ opacity:1; transform:none; }
}

/* ---------------------------------------------------------
   5. SERVICE CARDS — lift + tilt depth on hover
   --------------------------------------------------------- */
.service-card.tilt-3d{ transform-style: preserve-3d; }
.service-card .service-img{ transform: translateZ(0); }
.service-card:hover{
  transform:
    translateY(-8px)
    scale(1.01);
}

/* ---------------------------------------------------------
   6. SHOWCASE / VIDEO PLAY STRIP
   Full-bleed photo strip with a 3D play button, mirrors the
   "Marble & Tiles" cinematic moment from the reference design.
   --------------------------------------------------------- */
.showcase-play{
  position:relative;
  height: 64vh;
  min-height: 420px;
  overflow:hidden;
  background: var(--c-black);
  perspective: 1000px;
}
.showcase-play img{
  width:100%; height:100%;
  object-fit:cover;
  position:absolute; inset:0;
  transform: scale(1.04);
  transition: transform 1.4s var(--ease);
}
.showcase-play:hover img{ transform: scale(1.1); }
.showcase-play::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,10,10,.3) 0%, rgba(10,10,10,.55) 60%, rgba(10,10,10,.85) 100%);
  z-index:1;
}
.showcase-watermark{
  position:absolute;
  left:0; right:0; bottom:-3%;
  text-align:center;
  z-index:1;
  font-family: var(--font-display);
  font-size: 11vw;
  line-height:1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.16);
  user-select:none;
  pointer-events:none;
}
.play-btn-3d{
  position:absolute; top:50%; left:50%;
  transform: translate(-50%,-50%) perspective(600px) rotateX(0deg) scale(1);
  z-index:2;
  width:112px; height:112px;
  border-radius:50%;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.45);
  backdrop-filter: blur(6px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.3rem;
  color:#fff;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  transition: transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.play-btn-3d i{ font-size:1.3rem; }
.play-btn-3d::before{
  content:"";
  position:absolute; inset:-16px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;
  animation: ringPulse3d 2.6s ease-out infinite;
}
.play-btn-3d:hover{
  transform: translate(-50%,-50%) perspective(600px) rotateX(14deg) scale(1.07);
  background: var(--c-teal);
  color: var(--c-black);
  border-color: var(--c-teal);
}
@keyframes ringPulse3d{
  0%{ transform: scale(1); opacity:.65; }
  100%{ transform: scale(1.4); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .play-btn-3d::before{ animation:none; }
}

/* ---------------------------------------------------------
   7. VIDEO LIGHTBOX — opens with a real 3D rotateY swing-in
   --------------------------------------------------------- */
.video-lightbox{
  position:fixed; inset:0;
  z-index:1200;
  background: rgba(5,5,5,.92);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition: opacity .4s var(--ease);
  perspective: 1400px;
  padding: 1rem;
}
.video-lightbox.open{ opacity:1; visibility:visible; }
.video-lightbox-inner{
  width:min(900px, 94vw);
  aspect-ratio: 16/9;
  position:relative;
  transform: rotateY(38deg) scale(.82);
  opacity:0;
  transition: transform .55s var(--ease), opacity .55s var(--ease);
}
.video-lightbox.open .video-lightbox-inner{
  transform: rotateY(0deg) scale(1);
  opacity:1;
}
.video-lightbox video{
  width:100%; height:100%;
  border-radius: var(--radius);
  box-shadow: 0 50px 110px rgba(0,0,0,.6);
  background:#000;
}
.video-lightbox-close{
  position:absolute; top:-3rem; right:0;
  background:none; border:none;
  color:#fff; font-size:1.7rem;
  cursor:pointer;
  transition: color .25s var(--ease), transform .25s var(--ease);
}
.video-lightbox-close:hover{ color: var(--c-teal); transform: rotate(90deg); }

/* ---------------------------------------------------------
   8. ABOUT MEDIA — adds depth layers behind the tilt
   --------------------------------------------------------- */
.about-media-frame.tilt-3d{ transform-style: preserve-3d; }
.about-media-frame .about-media{ transform: translateZ(0); }
.about-media-frame .about-badge{ transform: translateZ(40px); }

/* ---------------------------------------------------------
   9. FILMSTRIP / MATERIAL SWATCHES — gentle hover tilt + lift
   --------------------------------------------------------- */
.filmstrip-item:hover{
  transform: translateY(-8px);
}
/* ---------------------------------------------------------
   10. HERO PARALLAX DEPTH (JS adjusts translateY on scroll)
   --------------------------------------------------------- */
.hero-video-wrap video{ will-change: transform; }