/* Braga Home Solutions — "From plan to finished floor" 3D section
   Works with assets/js/floor3d.js. Font: Plus Jakarta Sans (already loaded by the site). */

.floor3d-track{
  --f3-bg:#0B1526;
  --f3-gold:#BE8F3D;
  --f3-gold-soft:#E2C48E;
  --f3-text:#FFFFFF;
  --f3-muted:rgba(226,232,242,.72);
  position:relative;
  height:250vh;
  background:var(--f3-bg);
}

.floor3d{
  position:sticky;
  top:0;
  height:100vh;
  height:100svh;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 62% 55%, #12223A 0%, #0B1526 62%) ,
    #0B1526;
  color:var(--f3-text);
  font-family:"Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  isolation:isolate;
}

.floor3d__canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  opacity:0;
  transition:opacity .8s ease;
  z-index:0;
}
.floor3d.is-ready .floor3d__canvas{opacity:1}

/* Fallback image: visible by default (no JS / no WebGL), hidden once 3D is ready */
.floor3d__fallback{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:0;
  transition:opacity .6s ease;
}
.floor3d.is-ready .floor3d__fallback{opacity:0;visibility:hidden}
.floor3d--no-webgl .floor3d__canvas{display:none}
.floor3d--no-webgl .floor3d__fallback,
.floor3d:not(.is-ready) .floor3d__fallback{opacity:1;visibility:visible}
/* darken the photo so the copy stays readable */
.floor3d:not(.is-ready)::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(90deg, rgba(11,21,38,.92) 0%, rgba(11,21,38,.55) 55%, rgba(11,21,38,.2) 100%);
  pointer-events:none;
}

/* ---------------------------------------------------------------- overlay */
.floor3d__overlay{
  position:absolute;
  z-index:2;
  left:clamp(20px, 6vw, 96px);
  top:50%;
  transform:translateY(-50%);
  width:min(400px, 34vw);
  pointer-events:none;
}

.floor3d__eyebrow{
  margin:0 0 14px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--f3-gold);
  display:flex;
  align-items:center;
  gap:12px;
}
.floor3d__eyebrow::before{
  content:"";
  width:28px;
  height:1px;
  background:currentColor;
}

.floor3d__heading{
  margin:0 0 30px;
  font-size:clamp(28px, 3vw, 42px);
  line-height:1.12;
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--f3-text);
}
.floor3d__heading em{font-style:normal;color:var(--f3-gold-soft)}

.floor3d__steps{
  display:grid;
  margin:0;
  padding:0;
  list-style:none;
}
.floor3d__step{
  grid-area:1/1;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .5s ease, transform .6s cubic-bezier(.22,.8,.18,1);
}
.floor3d__step.is-active{opacity:1;transform:none}
.floor3d__step.is-done{transform:translateY(-14px)}

.floor3d__num{
  display:block;
  font-size:13px;
  font-weight:600;
  letter-spacing:.12em;
  color:var(--f3-gold);
  margin-bottom:8px;
}
.floor3d__title{
  margin:0 0 10px;
  font-size:clamp(20px, 1.9vw, 26px);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--f3-text);
}
.floor3d__text{
  margin:0;
  font-size:16px;
  line-height:1.6;
  color:var(--f3-muted);
}

/* 4-step rail */
.floor3d__rail{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:6px;
  margin-top:28px;
  max-width:260px;
}
.floor3d__rail i{
  position:relative;
  height:2px;
  background:rgba(255,255,255,.16);
  overflow:hidden;
}
.floor3d__rail i::after{
  content:"";
  position:absolute;
  inset:0;
  background:var(--f3-gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .5s ease;
}
.floor3d__rail i.is-done::after,
.floor3d__rail i.is-active::after{transform:scaleX(1)}
.floor3d__rail i.is-active::after{background:var(--f3-gold-soft)}

/* ------------------------------------------------------------------ tablet / phone */
@media (max-width: 900px){
  .floor3d__overlay{width:min(360px, 42vw)}
}

@media (max-width: 767px){
  .floor3d__overlay{
    left:16px;
    right:16px;
    top:max(84px, 11vh);
    transform:none;
    width:auto;
  }
  .floor3d__heading{font-size:24px;margin-bottom:16px}
  .floor3d__eyebrow{margin-bottom:10px;font-size:11px}
  .floor3d__title{font-size:19px;margin-bottom:6px}
  .floor3d__text{font-size:14.5px;line-height:1.5}
  .floor3d__num{margin-bottom:4px}
  .floor3d__rail{margin-top:16px;max-width:none}
  .floor3d:not(.is-ready)::before{
    background:linear-gradient(180deg, rgba(11,21,38,.94) 0%, rgba(11,21,38,.7) 50%, rgba(11,21,38,.25) 100%);
  }
}

/* ----------------------------------------------------- reduced motion: static */
@media (prefers-reduced-motion: reduce){
  .floor3d-track{height:auto}
  .floor3d{position:relative;height:auto;min-height:100vh;min-height:100svh}
  .floor3d__step,.floor3d__canvas,.floor3d__fallback,.floor3d__rail i::after{transition:none}
}
.floor3d--static .floor3d__steps{gap:18px}
.floor3d--static .floor3d__step{grid-area:auto;opacity:1;transform:none}
.floor3d--static .floor3d__text{font-size:15px}
.floor3d--static .floor3d__rail{display:none}
@media (max-width: 767px){
  .floor3d--static .floor3d__overlay{position:relative;top:auto;left:auto;right:auto;padding:88px 16px 0}
  .floor3d--static{display:flex;flex-direction:column}
  .floor3d--static .floor3d__canvas{position:relative;inset:auto;height:60vh;order:2}
  .floor3d--static .floor3d__fallback{position:relative;height:60vh;order:2}
  .floor3d--static.is-ready .floor3d__fallback{display:none}
}